From 007d757e16245dbc945c84b7ffd9c2053fff9a42 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Fri, 17 May 2024 11:54:17 -0500
Subject: [PATCH] fix(NumberIcon): address QA design notes (#1947)

- update typography tokens to label presets
- support isInteractive properly
---
 .../__snapshots__/Accordion-v2.test.tsx.snap  |  2 +-
 .../NumberIcon/NumberIcon-v2.module.css       | 36 +++++++++++--------
 .../NumberIcon/NumberIcon-v2.stories.tsx      | 11 ++++++
 src/components/NumberIcon/NumberIcon-v2.tsx   |  3 +-
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap
index 227490214..474aeb5a6 100644
--- a/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap
+++ b/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap
@@ -314,7 +314,7 @@ exports[`<Accordion /> HasLeadingNumberIcon story renders snapshot 1`] = `
         >
           <span
             aria-label="Numero uno"
-            class="text text--caption-sm number-icon number-icon--size-md number-icon--status-default"
+            class="text text--label-md-subtle number-icon number-icon--size-md number-icon--status-default"
             role="img"
             tabindex="-1"
           >
diff --git a/src/components/NumberIcon/NumberIcon-v2.module.css b/src/components/NumberIcon/NumberIcon-v2.module.css
index 03887761e..9b996fe0b 100644
--- a/src/components/NumberIcon/NumberIcon-v2.module.css
+++ b/src/components/NumberIcon/NumberIcon-v2.module.css
@@ -20,7 +20,9 @@
   border-color: inherit;
   border-radius: calc(var(--eds-border-radius-full) * 1px);
 
-  cursor: pointer;
+  &.number-icon--is-interactive {
+    cursor: pointer;
+  }
 }
 
 /**
@@ -48,14 +50,16 @@
   border-color: var(--eds-theme-color-border-utility-interactive);
   background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis);
 
-  &:hover {
-    border-color: var(--eds-theme-color-border-utility-interactive-hover);
-    background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
-  }
+  &.number-icon--is-interactive {
+    &:hover {
+      border-color: var(--eds-theme-color-border-utility-interactive-hover);
+      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
+    }
 
-  &:active {
-    border-color: var(--eds-theme-color-border-utility-interactive-active);
-    background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
+    &:active {
+      border-color: var(--eds-theme-color-border-utility-interactive-active);
+      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
+    }
   }
 }
 
@@ -64,14 +68,16 @@
   border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis);
   background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis);
 
-  &:hover {
-    border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
-    background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
-  }
+  &.number-icon--is-interactive {
+    &:hover {
+      border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
+      background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-hover);
+    }
 
-  &:active {
-    border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
-    background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
+    &:active {
+      border-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
+      background-color: var(--eds-theme-color-background-utility-favorable-high-emphasis-active);
+    }
   }
 }
 
diff --git a/src/components/NumberIcon/NumberIcon-v2.stories.tsx b/src/components/NumberIcon/NumberIcon-v2.stories.tsx
index ddc4deba3..3abaf93ce 100644
--- a/src/components/NumberIcon/NumberIcon-v2.stories.tsx
+++ b/src/components/NumberIcon/NumberIcon-v2.stories.tsx
@@ -38,6 +38,17 @@ export const Sizes: Story = {
   ],
 };
 
+/**
+ * `NumberIcon` can be used in interactive contexts, when wrapped by a navigable or interactive element.
+ */
+export const IsInteractive: Story = {
+  args: {
+    ...Sizes.args,
+    isInteractive: true,
+  },
+  render: Sizes.render,
+};
+
 export const Completed: Story = {
   args: {
     ...Sizes.args,
diff --git a/src/components/NumberIcon/NumberIcon-v2.tsx b/src/components/NumberIcon/NumberIcon-v2.tsx
index a08d35289..03352224c 100644
--- a/src/components/NumberIcon/NumberIcon-v2.tsx
+++ b/src/components/NumberIcon/NumberIcon-v2.tsx
@@ -54,6 +54,7 @@ export const NumberIcon = ({
   const componentClassName = clsx(
     className,
     styles['number-icon'],
+    isInteractive && styles['number-icon--is-interactive'],
     size && styles[`number-icon--size-${size}`],
     status && styles[`number-icon--status-${status}`],
   );
@@ -62,7 +63,7 @@ export const NumberIcon = ({
     <Text
       as="span"
       className={componentClassName}
-      preset={['sm', 'md'].includes(size) ? 'caption-sm' : 'caption-lg'}
+      preset={size === 'md' ? 'label-md-subtle' : 'label-lg-subtle'}
       role="img"
       tabIndex={isInteractive ? 0 : -1}
       {...other}