From 88dc43bd50465e3cd0d9cf06624063ad304ba602 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:37:53 +0100
Subject: [PATCH] :wheelchair: CopyButton now tells SR what you are copying
 (#3455)

* :wheelchair: CopyButton now tells SR what you are copying

* :recycle: Re-use sanitized name for semantic copybutton
---
 .../token-view/parts/categories/Global.tsx    |   6 +-
 .../token-view/parts/categories/Semantic.tsx  | 163 ++++++++++++------
 .../token-view/parts/categories/Shadow.tsx    |   8 +-
 .../token-view/parts/categories/Shapes.tsx    |   8 +-
 .../token-view/parts/categories/Zindex.tsx    |   8 +-
 .../components/website-modules/Table.tsx      |   7 +-
 6 files changed, 142 insertions(+), 58 deletions(-)

diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx
index fc6da3060f..0542fe4696 100644
--- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Global.tsx
@@ -24,7 +24,11 @@ export const GlobalView = ({ cat }: { cat: string }) => {
                 <span className="flex min-h-8 items-center">
                   {sanitizeName(x.name)}
                 </span>
-                <CopyButton copyText={x.name} size="small" />
+                <CopyButton
+                  copyText={x.name}
+                  title={`${sanitizeName(x.name)} kopier`}
+                  size="small"
+                />
               </dt>
 
               <dd className="mt-auto text-medium text-text-subtle">
diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx
index e37e3f366c..62a6247ea6 100644
--- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Semantic.tsx
@@ -12,17 +12,23 @@ export const SemanticView = ({ cat }: { cat: string }) => {
   if (cat.startsWith("semantic-text")) {
     return (
       <Grid>
-        {colors.map((x) => {
-          const ref = getGlobalReference(x.value);
-          const c = color(x.value);
+        {colors.map((token) => {
+          const ref = getGlobalReference(token.value);
+          const c = color(token.value);
           const isLight = c.getLuminance() > 0.9;
 
+          const sanitizedName = sanitizeName(token.name.replace("text-", ""));
+
           return (
-            <div key={x.name} id={x.name} className="flex w-fit items-center">
+            <div
+              key={token.name}
+              id={token.name}
+              className="flex w-fit items-center"
+            >
               <div
                 style={{
                   background: isLight ? `var(--a-surface-inverted)` : undefined,
-                  color: x.value,
+                  color: token.value,
                   boxShadow: `inset 0 2px 4px 0 rgba(0,0,0,0.06)`,
                 }}
                 className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-2xl leading-none"
@@ -32,9 +38,13 @@ export const SemanticView = ({ cat }: { cat: string }) => {
               <dl>
                 <dt className="inline-flex items-start gap-1 text-medium">
                   <span className="flex min-h-8 items-center">
-                    {sanitizeName(x.name.replace("text-", ""))}
+                    {sanitizedName}
                   </span>
-                  <CopyButton copyText={x.name} size="small" />
+                  <CopyButton
+                    copyText={token.name}
+                    title={`${sanitizedName} kopier`}
+                    size="small"
+                  />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -45,7 +55,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                       {sanitizeName(ref.name)}
                     </Link>
                   ) : (
-                    getColorString(x.value)
+                    getColorString(token.value)
                   )}
                 </dd>
               </dl>
@@ -58,12 +68,19 @@ export const SemanticView = ({ cat }: { cat: string }) => {
   if (cat.startsWith("semantic-icon")) {
     return (
       <Grid>
-        {colors.map((x) => {
-          const ref = getGlobalReference(x.value);
-          const c = color(x.value);
+        {colors.map((token) => {
+          const ref = getGlobalReference(token.value);
+          const c = color(token.value);
           const isLight = c.getLuminance() > 0.9;
+
+          const sanitizedName = sanitizeName(token.name.replace("icon-", ""));
+
           return (
-            <div key={x.name} id={x.name} className="flex w-fit items-center">
+            <div
+              key={token.name}
+              id={token.name}
+              className="flex w-fit items-center"
+            >
               <div
                 style={{
                   background: isLight ? `var(--a-surface-inverted)` : undefined,
@@ -74,16 +91,20 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                 <PersonCircleIcon
                   aria-hidden
                   style={{
-                    color: x.value,
+                    color: token.value,
                   }}
                 />
               </div>
               <dl>
                 <dt className="inline-flex items-start gap-1 text-medium">
                   <span className="flex min-h-8 items-center">
-                    {sanitizeName(x.name.replace("icon-", ""))}
+                    {sanitizedName}
                   </span>
-                  <CopyButton copyText={x.name} size="small" />
+                  <CopyButton
+                    copyText={token.name}
+                    title={`${sanitizedName} kopier`}
+                    size="small"
+                  />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -94,7 +115,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                       {sanitizeName(ref.name)}
                     </Link>
                   ) : (
-                    getColorString(x.value)
+                    getColorString(token.value)
                   )}
                 </dd>
               </dl>
@@ -108,23 +129,33 @@ export const SemanticView = ({ cat }: { cat: string }) => {
   if (cat.startsWith("semantic-border")) {
     return (
       <Grid>
-        {colors.map((x) => {
-          const ref = getGlobalReference(x.value);
+        {colors.map((token) => {
+          const ref = getGlobalReference(token.value);
+
+          const sanitizedName = sanitizeName(token.name.replace("border-", ""));
 
           return (
-            <div key={x.name} id={x.name} className="flex w-fit items-center">
+            <div
+              key={token.name}
+              id={token.name}
+              className="flex w-fit items-center"
+            >
               <div
                 style={{
-                  boxShadow: `inset 0 0 0 3px var(${x.name})`,
+                  boxShadow: `inset 0 0 0 3px var(${token.name})`,
                 }}
                 className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-4xl leading-none"
               />
               <dl>
                 <dt className="inline-flex items-start gap-1 text-medium">
                   <span className="flex min-h-8 items-center">
-                    {sanitizeName(x.name.replace("border-", ""))}
+                    {sanitizedName}
                   </span>
-                  <CopyButton copyText={x.name} size="small" />
+                  <CopyButton
+                    copyText={token.name}
+                    title={`${sanitizedName} kopier`}
+                    size="small"
+                  />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -135,7 +166,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                       {sanitizeName(ref.name)}
                     </Link>
                   ) : (
-                    getColorString(x.value)
+                    getColorString(token.value)
                   )}
                 </dd>
               </dl>
@@ -148,21 +179,25 @@ export const SemanticView = ({ cat }: { cat: string }) => {
   if (cat.startsWith("semantic-data-border")) {
     return (
       <Grid>
-        {colors.map((x) => {
-          const ref = getGlobalReference(x.value);
+        {colors.map((token) => {
+          const ref = getGlobalReference(token.value);
+
+          const sanitizedName = sanitizeName(
+            token.name.replace("surface-", ""),
+          );
 
           return (
             <div
-              key={x.name}
-              id={x.name}
+              key={token.name}
+              id={token.name}
               className="z-0 flex w-fit items-center"
             >
               <div className="mr-3 flex h-16 w-16 items-end justify-evenly rounded-lg text-4xl leading-none">
                 <span
                   className="h-full w-3 rounded-t-small"
                   style={{
-                    border: `1px solid var(${x.name})`,
-                    backgroundColor: `var(${x.name.replace(
+                    border: `1px solid var(${token.name})`,
+                    backgroundColor: `var(${token.name.replace(
                       "border",
                       "surface",
                     )}-subtle)`,
@@ -171,8 +206,8 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                 <span
                   className="h-2/4 w-3 rounded-t-small"
                   style={{
-                    border: `1px solid var(${x.name})`,
-                    backgroundColor: `var(${x.name.replace(
+                    border: `1px solid var(${token.name})`,
+                    backgroundColor: `var(${token.name.replace(
                       "border",
                       "surface",
                     )}-subtle)`,
@@ -181,8 +216,8 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                 <span
                   className="h-2/3 w-3 rounded-t-small"
                   style={{
-                    border: `1px solid var(${x.name})`,
-                    backgroundColor: `var(${x.name.replace(
+                    border: `1px solid var(${token.name})`,
+                    backgroundColor: `var(${token.name.replace(
                       "border",
                       "surface",
                     )}-subtle)`,
@@ -192,9 +227,13 @@ export const SemanticView = ({ cat }: { cat: string }) => {
               <dl>
                 <dt className="inline-flex items-start gap-1 text-medium">
                   <span className="flex min-h-8 items-center">
-                    {sanitizeName(x.name.replace("surface-", ""))}
+                    {sanitizedName}
                   </span>
-                  <CopyButton copyText={x.name} size="small" />
+                  <CopyButton
+                    copyText={token.name}
+                    title={`${sanitizedName} kopier`}
+                    size="small"
+                  />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -205,7 +244,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                       {sanitizeName(ref.name)}
                     </Link>
                   ) : (
-                    getColorString(x.value)
+                    getColorString(token.value)
                   )}
                 </dd>
               </dl>
@@ -218,35 +257,43 @@ export const SemanticView = ({ cat }: { cat: string }) => {
   if (cat.startsWith("semantic-data-surface")) {
     return (
       <Grid>
-        {colors.map((x) => {
-          const ref = getGlobalReference(x.value);
+        {colors.map((token) => {
+          const ref = getGlobalReference(token.value);
+
+          const sanitizedName = sanitizeName(
+            token.name.replace("surface-", ""),
+          );
 
           return (
             <div
-              key={x.name}
-              id={x.name}
+              key={token.name}
+              id={token.name}
               className="z-0 flex w-fit items-center"
             >
               <div className="mr-3 flex h-16 w-16 items-end justify-evenly rounded-lg text-4xl leading-none">
                 <span
                   className="h-full w-3 rounded-t-small"
-                  style={{ backgroundColor: `var(${x.name})` }}
+                  style={{ backgroundColor: `var(${token.name})` }}
                 />
                 <span
                   className="h-2/4 w-3 rounded-t-small"
-                  style={{ backgroundColor: `var(${x.name})` }}
+                  style={{ backgroundColor: `var(${token.name})` }}
                 />
                 <span
                   className="h-2/3 w-3 rounded-t-small"
-                  style={{ backgroundColor: `var(${x.name})` }}
+                  style={{ backgroundColor: `var(${token.name})` }}
                 />
               </div>
               <dl>
                 <dt className="inline-flex items-start gap-1 text-medium">
                   <span className="flex min-h-8 items-center">
-                    {sanitizeName(x.name.replace("surface-", ""))}
+                    {sanitizedName}
                   </span>
-                  <CopyButton copyText={x.name} size="small" />
+                  <CopyButton
+                    copyText={token.name}
+                    title={`${sanitizedName} kopier`}
+                    size="small"
+                  />
                 </dt>
                 <dd className="mt-auto text-medium text-text-subtle">
                   {ref ? (
@@ -257,7 +304,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                       {sanitizeName(ref.name)}
                     </Link>
                   ) : (
-                    getColorString(x.value)
+                    getColorString(token.value)
                   )}
                 </dd>
               </dl>
@@ -270,14 +317,20 @@ export const SemanticView = ({ cat }: { cat: string }) => {
 
   return (
     <Grid>
-      {colors.map((x) => {
-        const ref = getGlobalReference(x.value);
+      {colors.map((token) => {
+        const ref = getGlobalReference(token.value);
+
+        const sanitizedName = sanitizeName(token.name.replace("surface-", ""));
 
         return (
-          <div key={x.name} id={x.name} className="z-0 flex w-fit items-center">
+          <div
+            key={token.name}
+            id={token.name}
+            className="z-0 flex w-fit items-center"
+          >
             <div
               style={{
-                background: `var(${x.name})`,
+                background: `var(${token.name})`,
                 boxShadow: `inset 0 2px 4px 0 rgba(0,0,0,0.06)`,
               }}
               className="mr-3 grid h-16 w-16 place-content-center rounded-lg text-4xl leading-none"
@@ -287,9 +340,13 @@ export const SemanticView = ({ cat }: { cat: string }) => {
             <dl>
               <dt className="inline-flex items-start gap-1 text-medium">
                 <span className="flex min-h-8 items-center">
-                  {sanitizeName(x.name.replace("surface-", ""))}
+                  {sanitizedName}
                 </span>
-                <CopyButton copyText={x.name} size="small" />
+                <CopyButton
+                  copyText={token.name}
+                  title={`${sanitizedName} kopier`}
+                  size="small"
+                />
               </dt>
               <dd className="mt-auto text-medium text-text-subtle">
                 {ref ? (
@@ -300,7 +357,7 @@ export const SemanticView = ({ cat }: { cat: string }) => {
                     {sanitizeName(ref.name)}
                   </Link>
                 ) : (
-                  getColorString(x.value)
+                  getColorString(token.value)
                 )}
               </dd>
             </dl>
diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx
index 102e811972..e80ed6587f 100644
--- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shadow.tsx
@@ -22,7 +22,13 @@ export const ShadowView = ({ cat }: { cat: string }) => {
                 <span className="flex min-h-8 items-center">
                   {sanitizeName(x.name.replace("shadow-", ""))}
                 </span>
-                <CopyButton copyText={x.name} size="small" />
+                <CopyButton
+                  copyText={x.name}
+                  title={`${sanitizeName(
+                    x.name.replace("shadow-", ""),
+                  )} kopier`}
+                  size="small"
+                />
               </dt>
               <dd className="mt-auto text-medium text-text-subtle">
                 {x.value}
diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx
index 75c800f58c..cfc633df42 100644
--- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Shapes.tsx
@@ -20,7 +20,13 @@ export const ShapesView = ({ cat }: { cat: string }) => {
                 <span className="flex min-h-8 items-center">
                   {sanitizeName(x.name.replace("border-radius-", ""))}
                 </span>
-                <CopyButton copyText={x.name} size="small" />
+                <CopyButton
+                  copyText={x.name}
+                  title={`${sanitizeName(
+                    x.name.replace("border-radius-", ""),
+                  )} kopier`}
+                  size="small"
+                />
               </dt>
 
               <dd className="mt-auto text-medium text-text-subtle">
diff --git a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx
index 4d66631c66..7701d3f167 100644
--- a/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx
+++ b/aksel.nav.no/website/components/sanity-modules/token-view/parts/categories/Zindex.tsx
@@ -39,7 +39,13 @@ export const ZindexView = ({ cat }: { cat: string }) => {
                 <span className="flex min-h-8 items-center">
                   {sanitizeName(token.name.replace("z-index-", ""))}
                 </span>
-                <CopyButton copyText={token.name} size="small" />
+                <CopyButton
+                  copyText={token.name}
+                  title={`${sanitizeName(
+                    token.name.replace("z-index-", ""),
+                  )} kopier`}
+                  size="small"
+                />
               </dt>
               <dd className="mt-auto text-medium text-text-subtle">
                 {token.value}
diff --git a/aksel.nav.no/website/components/website-modules/Table.tsx b/aksel.nav.no/website/components/website-modules/Table.tsx
index 672358dba7..bd02013b10 100644
--- a/aksel.nav.no/website/components/website-modules/Table.tsx
+++ b/aksel.nav.no/website/components/website-modules/Table.tsx
@@ -69,7 +69,12 @@ export function AkselTableRow({
       ))}
       {useCopy && (
         <td className="hidden border-t border-gray-200 px-2 py-1 sm:table-cell">
-          <CopyButton copyText={copyText} size="small" className="ml-auto" />
+          <CopyButton
+            copyText={copyText}
+            title={`${copyText.replace("--a-", "")} kopier`}
+            size="small"
+            className="ml-auto"
+          />
         </td>
       )}
     </tr>