add internal icon

pinterest · Oct 8, 2024 · 4043e6f · 4043e6f
1 parent fa727c4
commit 4043e6f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/packages/gestalt/src/Icon.test.tsx b/packages/gestalt/src/Icon.test.tsx
@@ -1,5 +1,6 @@
 import { create } from 'react-test-renderer';
 import Icon from './Icon';
+import InternalIcon from './Icon/InternalIcon';
 
 test('Icon renders', () => {
   const tree = create(<Icon accessibilityLabel="Add" icon="add" />).toJSON();
@@ -23,6 +24,13 @@ test('Icon flipped if its in the flip on rtl list', () => {
   expect(tree).toMatchSnapshot();
 });
 
+test('Internal Icons Component supports 16x16 and private icons', () => {
+  const tree = create(
+    <InternalIcon accessibilityLabel="check-circle-icon" icon="badge-check-circle-fill" />,
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
 test('validate data test id for text', () => {
   const component = create(
     <Icon accessibilityLabel="send" dataTestId="test-icon" icon="send" />,

diff --git a/packages/gestalt/src/Icon/InternalIcon.tsx b/packages/gestalt/src/Icon/InternalIcon.tsx
@@ -35,7 +35,7 @@ type Props = {
 
 // @ts-expect-error - TS2322 - Type 'string[]' is not assignable to type 'readonly ("replace" | "search" | "link" | "text" | "dash" | "3D" | "3D-move" | "360" | "accessibility" | "ad" | "ad-group" | "add" | "add-circle" | "add-layout" | "add-pin" | "add-section" | ... 317 more ... | "wave")[]'.
 const IconNames: ReadonlyArray<IconName> = Object.keys(icons);
-const swapOnRtlIconNames: ReadonlyArray<keyof typeof icons> = ['list-numbered'];
+const swapOnRtlIconNames: ReadonlyArray<IconName> = ['list-numbered'];
 
 const flipOnRtlIconNames = [
   'ads-stats',
@@ -98,7 +98,7 @@ function InternalIcon({
     mwebExperimentName: 'web_gestalt_visualRefresh',
   });
 
-  const getIconPath = (iconToUse: string) => {
+  const getIconPath = (iconToUse?: IconName) => {
     let iconName = iconToUse;
 
     if (icon && isInExperiment) {
@@ -116,7 +116,7 @@ function InternalIcon({
    * Some RTL Icons, we need to swap to a completely new icon because they can't be flipped
    * @param iconName
    */
-  function getFinalIconName(iconName?: keyof typeof icons): keyof typeof icons | undefined {
+  function getFinalIconName(iconName?: IconName): IconName | undefined {
     if (!iconName) {
       return undefined;
     }
@@ -149,7 +149,7 @@ function InternalIcon({
   let viewBox = '0 0 24 24';
 
   // if it's a component icon use a 16x16 view box
-  if (icon && icon in componentIcons) {
+  if (iconToUse && iconToUse in componentIcons) {
     viewBox = '0 0 16 16';
   }
 

diff --git a/packages/gestalt/src/__snapshots__/Icon.test.tsx.snap b/packages/gestalt/src/__snapshots__/Icon.test.tsx.snap
@@ -63,3 +63,19 @@ exports[`Icon uses the dangerouslySetSvgPath prop when icon path is not specifie
   />
 </svg>
 `;
+
+exports[`Internal Icons Component supports 16x16 and private icons 1`] = `
+<svg
+  aria-hidden={null}
+  aria-label="check-circle-icon"
+  className="subtle icon iconBlock"
+  height={16}
+  role="img"
+  viewBox="0 0 16 16"
+  width={16}
+>
+  <path
+    d="test-file-stub"
+  />
+</svg>
+`;