Revert "feat(icon): add brand visuals icons to icon component"

package.json

@@ -95,7 +95,6 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@momentum-design/animations": "^0.0.4",
-    "@momentum-design/brand-visuals": "^0.0.24",
     "@momentum-design/icons": "0.0.164",
     "@momentum-design/tokens": "0.0.77",
     "@momentum-ui/design-tokens": "^0.0.63",

src/components/Icon/Icon.constants.ts

@@ -58,7 +58,6 @@ const DEFAULTS = {
   AUTO_SCALE: false,
   VIEW_BOX_SPEC: VIEW_BOX_SPECS.NORMAL,
   WEIGHTLESS: false,
-  LIBRARY: 'icons' as const,
 };
 
 const EXCEPTION_ICONS_LIST: Array<InferredIconName> = [

src/components/Icon/Icon.stories.tsx

@@ -66,16 +66,6 @@ Weights.parameters = {
   ],
 };
 
-const BrandVisuals = Template<IconProps>(Icon).bind({});
-
-BrandVisuals.argTypes = { ...argTypes };
-
-BrandVisuals.args = {
-  name: 'cisco-ai-assistant-color',
-  library: 'brand-visuals',
-  weightless: true,
-};
-
 const Common = MultiTemplate<IconProps>(Icon).bind({});
 
 Common.argTypes = { ...argTypes };
@@ -98,4 +88,4 @@ Common.parameters = {
   ],
 };
 
-export { Example, Sizes, Weights, BrandVisuals, Common };
+export { Example, Sizes, Weights, Common };

src/components/Icon/Icon.tsx

@@ -31,11 +31,10 @@ const Icon: React.FC<Props> = (props: Props) => {
     weight,
     weightless = DEFAULTS.WEIGHTLESS,
     ariaLabel,
-    library = DEFAULTS.LIBRARY,
     ...otherProps
   } = props;
   const resolvedSVGName = getResolvedSVGName(name, weight, weightless);
-  const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName, library);
+  const { SvgIcon, error } = useDynamicSVGImport(resolvedSVGName);
 
   const isColoredIcon = /-colou?red$/.test(name as string);
 

src/components/Icon/Icon.types.ts

@@ -1,12 +1,11 @@
 import { CSSProperties } from 'react';
 import IconKeys from '@momentum-design/icons/dist/types/types';
-import BrandVisualsKeys from '@momentum-design/brand-visuals/dist/types/types';
 
 export type IconWeight = 'light' | 'regular' | 'bold' | 'filled';
 
 type RemoveWeight<T> = T extends `${infer Base}-${IconWeight}` ? Base : T;
 
-export type InferredIconName = RemoveWeight<IconKeys | BrandVisualsKeys>;
+export type InferredIconName = RemoveWeight<IconKeys>;
 
 export type IconScale =
   | 8
@@ -30,8 +29,6 @@ export type IconScale =
   | 'auto'
   | 'inherit';
 
-export type IconLibrary = 'icons' | 'brand-visuals';
-
 export interface Props {
   /**
    * If set to true, then the icon size will scale according to the parent element.
@@ -113,6 +110,4 @@ export interface Props {
    * An example would be brand icons.
    */
   weightless?: boolean;
-
-  library?: IconLibrary;
 }

src/hooks/useDynamicSVGImport.test.ts

@@ -1,43 +1,39 @@
-import { IconLibrary } from 'src/components/Icon/Icon.types';
 import { useDynamicSVGImport } from './useDynamicSVGImport';
 import { renderHook } from '@testing-library/react-hooks';
 
 describe('Icon', () => {
   beforeEach(() => jest.resetModules());
 
-  it.each(['icons', 'brand-visuals'] as IconLibrary[])(
-    'should successfully return %s library svg component if icon exists',
-    async (library) => {
-      const name = '3d-object-regular';
-      const onCompleteMock = jest.fn();
-      const onErrorMock = jest.fn();
-      const mockSVG = 'SVG_CONTENT';
-      jest.mock(
-        `@momentum-design/${library}/dist/svg/3d-object-regular.svg?svgr`,
-        () => {
-          return { ReactComponent: mockSVG };
-        },
-        { virtual: true }
-      );
+  it('should successfully return svg component if icon exists', async () => {
+    const name = '3d-object-regular';
+    const onCompleteMock = jest.fn();
+    const onErrorMock = jest.fn();
+    const mockSVG = 'SVG_CONTENT';
+    jest.mock(
+      '@momentum-design/icons/dist/svg/3d-object-regular.svg?svgr',
+      () => {
+        return { ReactComponent: mockSVG };
+      },
+      { virtual: true }
+    );
 
-      const hook = renderHook(() =>
-        useDynamicSVGImport(name, library, {
-          onCompleted: onCompleteMock,
-          onError: onErrorMock,
-        })
-      );
-      expect(hook.result.current.loading).toBe(true);
+    const hook = renderHook(() =>
+      useDynamicSVGImport(name, {
+        onCompleted: onCompleteMock,
+        onError: onErrorMock,
+      })
+    );
+    expect(hook.result.current.loading).toBe(true);
 
-      await hook.waitForNextUpdate();
+    await hook.waitForNextUpdate();
 
-      expect(onCompleteMock).toBeCalledTimes(1);
-      expect(onCompleteMock).toBeCalledWith(name, mockSVG);
-      expect(onErrorMock).not.toBeCalled();
-      expect(hook.result.current.SvgIcon).toEqual(mockSVG);
-      expect(hook.result.current.error).toBeUndefined();
-      expect(hook.result.current.loading).toBe(false);
-    }
-  );
+    expect(onCompleteMock).toBeCalledTimes(1);
+    expect(onCompleteMock).toBeCalledWith(name, mockSVG);
+    expect(onErrorMock).not.toBeCalled();
+    expect(hook.result.current.SvgIcon).toEqual(mockSVG);
+    expect(hook.result.current.error).toBeUndefined();
+    expect(hook.result.current.loading).toBe(false);
+  });
 
   it('should return error component does not exist', async () => {
     const name = 'bad_icon';
@@ -54,7 +50,7 @@ describe('Icon', () => {
     );
 
     const hook = renderHook(() =>
-      useDynamicSVGImport(name, 'icons', {
+      useDynamicSVGImport(name, {
         onCompleted: onCompleteMock,
         onError: onErrorMock,
       })

src/hooks/useDynamicSVGImport.ts

@@ -1,6 +1,5 @@
 import { useRef, useState, useEffect } from 'react';
 import { useIsMounted } from './useIsMounted';
-import { IconLibrary } from '../components/Icon/Icon.types';
 
 interface UseDynamicSVGImportOptions {
   onCompleted?: (
@@ -25,7 +24,6 @@ interface UseDynamicSVGImportReturn {
  */
 function useDynamicSVGImport(
   name: string,
-  library: IconLibrary,
   options: UseDynamicSVGImportOptions = {}
 ): UseDynamicSVGImportReturn {
   const ImportedIconRef = useRef<React.FC<React.SVGProps<SVGSVGElement>>>();
@@ -40,7 +38,7 @@ function useDynamicSVGImport(
       try {
         setError(undefined);
         ImportedIconRef.current = (
-          await import(`@momentum-design/${library}/dist/svg/${name}.svg?svgr`)
+          await import(`@momentum-design/icons/dist/svg/${name}.svg?svgr`)
         ).ReactComponent;
         if (isMounted()) {
           onCompleted?.(name, ImportedIconRef.current);

yarn.lock

@@ -2444,13 +2444,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@momentum-design/brand-visuals@npm:^0.0.24":
-  version: 0.0.24
-  resolution: "@momentum-design/brand-visuals@npm:0.0.24"
-  checksum: c7bf5e078d9157ed8ede29ba882792e05bd75b78a1ffa4c38dcff40156b81475b3aab7e0e33818d0e35b5cd815c7db0cd9e41a7de01cfc6befd16a78b727d0a7
-  languageName: node
-  linkType: hard
-
 "@momentum-design/icons@npm:0.0.164":
   version: 0.0.164
   resolution: "@momentum-design/icons@npm:0.0.164"
@@ -2502,7 +2495,6 @@ __metadata:
     "@commitlint/config-conventional": ^12.0.1
     "@hot-loader/react-dom": ~16.8.0
     "@momentum-design/animations": ^0.0.4
-    "@momentum-design/brand-visuals": ^0.0.24
     "@momentum-design/icons": 0.0.164
     "@momentum-design/tokens": 0.0.77
     "@momentum-ui/design-tokens": ^0.0.63