fix(Icon): Use proper icon on spinner and icon class for filled icons (…

…#355)
eBay · Jul 16, 2024 · 8dbb147 · 8dbb147
1 parent 1fffc8e
commit 8dbb147
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/src/ebay-icon/icon.tsx b/src/ebay-icon/icon.tsx
@@ -42,8 +42,9 @@ const EbayIcon: FC<EbayIconProps> = ({
     const kebabName = kebabCased(name)
     const size = getIconSize(kebabName) || kebabName
 
+    const skinClassName = [`icon`, `icon--${size}`, getFilledIconName(kebabName)].filter(Boolean).join(' ')
     const className = classNames(extraClass,
-        { [`icon icon--${size}`]: !noSkinClasses }
+        { [skinClassName]: !noSkinClasses }
     )
 
     return (
@@ -82,6 +83,18 @@ function getIconSize(iconName: string) {
 
     return size
 }
+
+function getFilledIconName(iconName: string) {
+    const iconNameArray = iconName.split('-')
+    const filledIndex = iconNameArray.indexOf('filled')
+
+    if (filledIndex === -1) {
+        return ''
+    }
+
+    return `icon--${iconNameArray.slice(0, filledIndex + 1).join('-')}`
+}
+
 function kebabCased(str: string) {
     return str
         .replace(/([0-9]+)/g, (s, n) => `-${n}`)

diff --git a/src/ebay-page-notice/__tests__/__snapshots__/render.spec.tsx.snap b/src/ebay-page-notice/__tests__/__snapshots__/render.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ebay-page-notice rendering renders attention message story correctly 1`] = `
 <svg
   aria-label="Attention"
-  class="icon icon--16"
+  class="icon icon--16 icon--attention-filled"
   focusable="false"
   role="img"
   xmlns="http://www.w3.org/2000/svg"
@@ -17,7 +17,7 @@ exports[`ebay-page-notice rendering renders attention message story correctly 1`
 exports[`ebay-page-notice rendering renders confirmation message story correctly 1`] = `
 <svg
   aria-label="Success"
-  class="icon icon--16"
+  class="icon icon--16 icon--confirmation-filled"
   focusable="false"
   role="img"
   xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +31,7 @@ exports[`ebay-page-notice rendering renders confirmation message story correctly
 exports[`ebay-page-notice rendering renders dismissible message with cta story correctly 1`] = `
 <svg
   aria-label="Congratulations"
-  class="icon icon--16"
+  class="icon icon--16 icon--information-filled"
   focusable="false"
   role="img"
   xmlns="http://www.w3.org/2000/svg"
@@ -58,7 +58,7 @@ exports[`ebay-page-notice rendering renders dismissible message with cta story c
 exports[`ebay-page-notice rendering renders dismissible notice story correctly 1`] = `
 <svg
   aria-label="Information"
-  class="icon icon--16"
+  class="icon icon--16 icon--information-filled"
   focusable="false"
   role="img"
   xmlns="http://www.w3.org/2000/svg"
@@ -72,7 +72,7 @@ exports[`ebay-page-notice rendering renders dismissible notice story correctly 1
 exports[`ebay-page-notice rendering renders information message story correctly 1`] = `
 <svg
   aria-label="Information"
-  class="icon icon--16"
+  class="icon icon--16 icon--information-filled"
   focusable="false"
   role="img"
   xmlns="http://www.w3.org/2000/svg"
@@ -86,7 +86,7 @@ exports[`ebay-page-notice rendering renders information message story correctly
 exports[`ebay-page-notice rendering renders message with footer story correctly 1`] = `
 <svg
   aria-label="Congratulations"
-  class="icon icon--16"
+  class="icon icon--16 icon--confirmation-filled"
   focusable="false"
   role="img"
   xmlns="http://www.w3.org/2000/svg"
@@ -100,7 +100,7 @@ exports[`ebay-page-notice rendering renders message with footer story correctly
 exports[`ebay-page-notice rendering renders simple usage with id story correctly 1`] = `
 <svg
   aria-label="Success"
-  class="icon icon--16"
+  class="icon icon--16 icon--confirmation-filled"
   focusable="false"
   role="img"
   xmlns="http://www.w3.org/2000/svg"

diff --git a/src/ebay-progress-spinner/progress-spinner.tsx b/src/ebay-progress-spinner/progress-spinner.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentProps, FC } from 'react'
 import classNames from 'classnames'
-import { EbayIcon } from '../ebay-icon'
+import { EbayIcon, Icon } from '../ebay-icon'
 
 export type SpinnerSize = 'default' | 'small' | 'large'
 
@@ -17,6 +17,12 @@ const sizeClass: { [key in SpinnerSize]: string } = {
     'large': 'progress-spinner--large'
 }
 
+const iconName: { [key in SpinnerSize]: Icon } = {
+    'default': 'spinner24',
+    'small': 'spinner20',
+    'large': 'spinner30'
+}
+
 const EbayProgressSpinner: FC<SpanProps & EbayProgressSpinnerProps> = ({
     size = 'default',
     'aria-label': ariaLabel = 'Busy',
@@ -29,7 +35,7 @@ const EbayProgressSpinner: FC<SpanProps & EbayProgressSpinnerProps> = ({
         aria-label={ariaLabel}
         role="img"
     >
-        <EbayIcon name="spinner24" />
+        <EbayIcon name={iconName[size]} />
     </span>
 )