diff options
| author | Vasu Singh | 2023-07-29 02:25:40 +0530 |
|---|---|---|
| committer | GitHub | 2023-07-28 22:55:40 +0200 |
| commit | 1e0cd11567d6f1403df18ecdfe08673179cfb1da (patch) | |
| tree | 77b0a213881b756c523fe0f51198318290775c6c | |
| parent | e73331133b0e2574a139409ba76d97cc1bd52a82 (diff) | |
| download | IT.starlight-1e0cd11567d6f1403df18ecdfe08673179cfb1da.tar.gz IT.starlight-1e0cd11567d6f1403df18ecdfe08673179cfb1da.tar.bz2 IT.starlight-1e0cd11567d6f1403df18ecdfe08673179cfb1da.zip | |
Add copy to clipboard to docs icons (#412)
Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com>
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
| -rw-r--r-- | docs/src/components/icons-list.astro | 32 | ||||
| -rw-r--r-- | docs/src/content/docs/guides/components.mdx | 2 |
2 files changed, 30 insertions, 4 deletions
diff --git a/docs/src/components/icons-list.astro b/docs/src/components/icons-list.astro index 295e2ad2..13d8f81d 100644 --- a/docs/src/components/icons-list.astro +++ b/docs/src/components/icons-list.astro @@ -9,15 +9,34 @@ const icons = Object.keys(Icons) as (keyof typeof Icons)[]; { icons.map((icon) => { return ( - <div class="icon-preview"> + <button class="icon-preview" aria-label={`Copy ${icon} icon to clipboard`} data-name={icon}> <Icon name={icon} size="1.5rem" /> - <span>{icon}</span> - </div> + <span aria-live="polite">{icon}</span> + </button> ); }) } </div> +<script> + const icons = document.querySelectorAll('.icon-preview'); + icons.forEach((icon) => { + icon.addEventListener('click', () => { + const iconName = icon.dataset.name; + const copiedValue = `<Icon name="${iconName}" />`; + navigator.clipboard.writeText(copiedValue); + + const iconLabel = icon.querySelector('[aria-live]'); + if (iconLabel) { + iconLabel.textContent = 'Copied!'; + setTimeout(() => { + iconLabel.textContent = iconName; + }, 1000); + } + }); + }); +</script> + <style> .icons-grid { display: grid; @@ -36,5 +55,12 @@ const icons = Object.keys(Icons) as (keyof typeof Icons)[]; gap: 0.25rem; margin: 0; padding: 0.75rem; + background: none; + } + + .icon-preview:hover, .icon-preview:focus { + cursor: pointer; + border: 1px solid var(--sl-color-gray-3); + background: var(--sl-color-gray-7, var(--sl-color-gray-6)); } </style> diff --git a/docs/src/content/docs/guides/components.mdx b/docs/src/content/docs/guides/components.mdx index e4b2db97..1b7638b0 100644 --- a/docs/src/content/docs/guides/components.mdx +++ b/docs/src/content/docs/guides/components.mdx @@ -146,6 +146,6 @@ The code above generates the following on the page: #### All icons -A list of all available icons is shown below with their associated names. +A list of all available icons is shown below with their associated names. Click an icon to copy the component code for it. <IconsList /> |