From 1e0cd11567d6f1403df18ecdfe08673179cfb1da Mon Sep 17 00:00:00 2001
From: Vasu Singh
Date: Sat, 29 Jul 2023 02:25:40 +0530
Subject: 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>
---
 docs/src/components/icons-list.astro        | 32 ++++++++++++++++++++++++++---
 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 />
-- 
cgit