@leafygreen-ui/icon 14.7.0 → 14.7.2

package/src/createIconComponent.spec.tsx

@@ -0,0 +1,395 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { createGlyphComponent } from './createGlyphComponent';
+import { createIconComponent } from './createIconComponent';
+import * as generatedGlyphs from './generated';
+import { Size } from './glyphCommon';
+import { isComponentGlyph } from './isComponentGlyph';
+import {
+  AnotherCustomGlyph,
+  createTestSVGRComponent,
+  CustomSVGRGlyph,
+} from './testUtils';
+
+// Create glyph components from the SVGR components
+const customGlyphs = {
+  CustomGlyph: createGlyphComponent('CustomGlyph', CustomSVGRGlyph),
+  AnotherGlyph: createGlyphComponent('AnotherGlyph', AnotherCustomGlyph),
+};
+
+describe('packages/Icon/createIconComponent', () => {
+  describe('basic functionality', () => {
+    const IconComponent = createIconComponent(customGlyphs);
+
+    test('returns a function', () => {
+      expect(typeof IconComponent).toBe('function');
+    });
+
+    test('returned function has the displayName: "Icon"', () => {
+      expect(IconComponent.displayName).toBe('Icon');
+    });
+
+    test('returned function has the property: `isGlyph`', () => {
+      expect(IconComponent).toHaveProperty('isGlyph');
+      expect(IconComponent.isGlyph).toBeTruthy();
+    });
+
+    test('returned function passes `isComponentGlyph`', () => {
+      expect(isComponentGlyph(IconComponent)).toBeTruthy();
+    });
+  });
+
+  describe('rendering glyphs', () => {
+    const IconComponent = createIconComponent(customGlyphs);
+
+    test('renders the correct glyph when passed a valid glyph name', () => {
+      render(<IconComponent glyph="CustomGlyph" />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toBeInTheDocument();
+      expect(glyph.nodeName.toLowerCase()).toBe('svg');
+    });
+
+    test('renders different glyphs based on glyph prop', () => {
+      const { rerender } = render(<IconComponent glyph="CustomGlyph" />);
+      expect(screen.getByTestId('custom-svgr-glyph')).toBeInTheDocument();
+
+      rerender(<IconComponent glyph="AnotherGlyph" />);
+      expect(screen.getByTestId('another-custom-glyph')).toBeInTheDocument();
+    });
+
+    test('logs an error and renders nothing when glyph does not exist', () => {
+      const consoleSpy = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+
+      const { container } = render(<IconComponent glyph="NonExistentGlyph" />);
+
+      // Should log an error
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Error in Icon',
+        'Could not find glyph named "NonExistentGlyph" in the icon set.',
+        undefined,
+      );
+
+      // Should not render an SVG
+      const svg = container.querySelector('svg');
+      expect(svg).not.toBeInTheDocument();
+
+      consoleSpy.mockRestore();
+    });
+
+    test('suggests near match when glyph name has incorrect casing', () => {
+      const consoleSpy = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+
+      render(<IconComponent glyph="custom-glyph" />);
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Error in Icon',
+        'Could not find glyph named "custom-glyph" in the icon set.',
+        'Did you mean "CustomGlyph?"',
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('custom SVG support', () => {
+    const RawSVGGlyph = createTestSVGRComponent('raw-svg-glyph');
+
+    const customSVGGlyphs = {
+      RawSVG: createGlyphComponent('RawSVG', RawSVGGlyph),
+    };
+
+    const IconComponent = createIconComponent(customSVGGlyphs);
+
+    test('renders custom SVG components correctly', () => {
+      render(<IconComponent glyph="RawSVG" />);
+      const glyph = screen.getByTestId('raw-svg-glyph');
+      expect(glyph).toBeInTheDocument();
+      expect(glyph.nodeName.toLowerCase()).toBe('svg');
+    });
+
+    test('applies size prop to custom SVGs', () => {
+      render(<IconComponent glyph="RawSVG" size={32} />);
+      const glyph = screen.getByTestId('raw-svg-glyph');
+      expect(glyph).toHaveAttribute('height', '32');
+      expect(glyph).toHaveAttribute('width', '32');
+    });
+
+    test('applies Size enum to custom SVGs', () => {
+      render(<IconComponent glyph="RawSVG" size={Size.Large} />);
+      const glyph = screen.getByTestId('raw-svg-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
+  });
+
+  describe('raw SVGR component support (auto-wrapped)', () => {
+    // Pass raw SVGR components directly without wrapping with createGlyphComponent
+    const RawSVGRGlyph = createTestSVGRComponent('raw-svgr-glyph');
+
+    const IconComponent = createIconComponent({ RawSVGR: RawSVGRGlyph });
+
+    test('automatically wraps raw SVGR components with createGlyphComponent', () => {
+      render(<IconComponent glyph="RawSVGR" />);
+      const glyph = screen.getByTestId('raw-svgr-glyph');
+      expect(glyph).toBeInTheDocument();
+      expect(glyph.nodeName.toLowerCase()).toBe('svg');
+    });
+
+    test('applies size prop to auto-wrapped SVGR components', () => {
+      render(<IconComponent glyph="RawSVGR" size={28} />);
+      const glyph = screen.getByTestId('raw-svgr-glyph');
+      expect(glyph).toHaveAttribute('height', '28');
+      expect(glyph).toHaveAttribute('width', '28');
+    });
+
+    test('applies Size enum to auto-wrapped SVGR components', () => {
+      render(<IconComponent glyph="RawSVGR" size={Size.XLarge} />);
+      const glyph = screen.getByTestId('raw-svgr-glyph');
+      expect(glyph).toHaveAttribute('height', '24');
+      expect(glyph).toHaveAttribute('width', '24');
+    });
+
+    test('applies className to auto-wrapped SVGR components', () => {
+      render(<IconComponent glyph="RawSVGR" className="my-raw-class" />);
+      const glyph = screen.getByTestId('raw-svgr-glyph');
+      expect(glyph).toHaveClass('my-raw-class');
+    });
+
+    test('applies fill to auto-wrapped SVGR components', () => {
+      render(<IconComponent glyph="RawSVGR" fill="red" />);
+      const glyph = screen.getByTestId('raw-svgr-glyph');
+      // Fill is applied as a CSS color via an emotion-generated class
+      expect(glyph.classList.length).toBeGreaterThan(0);
+    });
+
+    test('applies accessibility props to auto-wrapped SVGR components', () => {
+      render(<IconComponent glyph="RawSVGR" />);
+      const glyph = screen.getByTestId('raw-svgr-glyph');
+      expect(glyph).toHaveAttribute('role', 'img');
+      // Default aria-label is generated from glyph name
+      expect(glyph).toHaveAttribute('aria-label', 'Raw SVGR Icon');
+    });
+  });
+
+  describe('className prop', () => {
+    const IconComponent = createIconComponent(customGlyphs);
+
+    test('applies className to glyph SVG element', () => {
+      render(<IconComponent glyph="CustomGlyph" className="custom-class" />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveClass('custom-class');
+    });
+  });
+
+  describe('className prop with custom SVGs', () => {
+    const RawSVGGlyph = createTestSVGRComponent('raw-svg-for-class');
+
+    const customSVGGlyphs = {
+      RawSVG: createGlyphComponent('RawSVG', RawSVGGlyph),
+    };
+
+    const IconComponent = createIconComponent(customSVGGlyphs);
+
+    test('applies className to custom SVG components', () => {
+      render(<IconComponent glyph="RawSVG" className="my-custom-class" />);
+      const glyph = screen.getByTestId('raw-svg-for-class');
+      expect(glyph).toHaveClass('my-custom-class');
+    });
+  });
+
+  describe('size prop', () => {
+    const IconComponent = createIconComponent(customGlyphs);
+
+    test('applies numeric size to glyph', () => {
+      render(<IconComponent glyph="CustomGlyph" size={24} />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('height', '24');
+      expect(glyph).toHaveAttribute('width', '24');
+    });
+
+    test('applies Size.Small correctly', () => {
+      render(<IconComponent glyph="CustomGlyph" size={Size.Small} />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('height', '14');
+      expect(glyph).toHaveAttribute('width', '14');
+    });
+
+    test('applies Size.Default correctly', () => {
+      render(<IconComponent glyph="CustomGlyph" size={Size.Default} />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('height', '16');
+      expect(glyph).toHaveAttribute('width', '16');
+    });
+
+    test('applies Size.Large correctly', () => {
+      render(<IconComponent glyph="CustomGlyph" size={Size.Large} />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
+
+    test('applies Size.XLarge correctly', () => {
+      render(<IconComponent glyph="CustomGlyph" size={Size.XLarge} />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('height', '24');
+      expect(glyph).toHaveAttribute('width', '24');
+    });
+
+    test('uses default size when size prop is not provided', () => {
+      render(<IconComponent glyph="CustomGlyph" />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('height', '16');
+      expect(glyph).toHaveAttribute('width', '16');
+    });
+  });
+
+  describe('accessibility props', () => {
+    const IconComponent = createIconComponent(customGlyphs);
+
+    test('applies role="img" by default', () => {
+      render(<IconComponent glyph="CustomGlyph" />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('role', 'img');
+    });
+
+    test('applies role="presentation" when specified', () => {
+      render(<IconComponent glyph="CustomGlyph" role="presentation" />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('role', 'presentation');
+      expect(glyph).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    test('generates default aria-label when no accessibility props provided', () => {
+      render(<IconComponent glyph="CustomGlyph" />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('aria-label', 'Custom Glyph Icon');
+    });
+
+    test('applies custom aria-label when provided', () => {
+      render(
+        <IconComponent glyph="CustomGlyph" aria-label="My Custom Label" />,
+      );
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('aria-label', 'My Custom Label');
+    });
+
+    test('applies aria-labelledby when provided', () => {
+      render(
+        <IconComponent glyph="CustomGlyph" aria-labelledby="my-label-id" />,
+      );
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveAttribute('aria-labelledby', 'my-label-id');
+    });
+  });
+
+  describe('fill prop', () => {
+    const IconComponent = createIconComponent(customGlyphs);
+
+    test('applies fill as CSS color via className', () => {
+      render(<IconComponent glyph="CustomGlyph" fill="red" />);
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      // Fill is applied as a CSS color via an emotion-generated class
+      expect(glyph).toHaveAttribute('class');
+      expect(glyph.classList.length).toBeGreaterThan(0);
+    });
+
+    test('applies fill alongside className', () => {
+      render(
+        <IconComponent
+          glyph="CustomGlyph"
+          fill="blue"
+          className="custom-class"
+        />,
+      );
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+      expect(glyph).toHaveClass('custom-class');
+      // Fill adds an emotion class in addition to custom-class
+      expect(glyph.classList.length).toBeGreaterThan(1);
+    });
+  });
+
+  describe('fill prop with generated glyphs', () => {
+    const IconComponent = createIconComponent(generatedGlyphs);
+
+    test('applies fill as CSS color to generated glyph', () => {
+      render(<IconComponent glyph="Edit" fill="purple" />);
+      const glyph = screen.getByRole('img');
+      // Fill is applied as a CSS color via an emotion-generated class
+      expect(glyph).toHaveAttribute('class');
+      expect(glyph.classList.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('combined props with generated glyphs', () => {
+    const IconComponent = createIconComponent(generatedGlyphs);
+
+    test('applies all props correctly together', () => {
+      render(
+        <IconComponent
+          glyph="Edit"
+          size={24}
+          className="combined-class"
+          title="Combined Title"
+          fill="green"
+        />,
+      );
+      const glyph = screen.getByRole('img');
+
+      expect(glyph).toHaveAttribute('height', '24');
+      expect(glyph).toHaveAttribute('width', '24');
+      expect(glyph).toHaveClass('combined-class');
+
+      // Check title
+      const titleElement = glyph.querySelector('title');
+      expect(titleElement).toBeInTheDocument();
+      expect(titleElement?.textContent).toBe('Combined Title');
+
+      // Check aria-labelledby points to title
+      expect(glyph.getAttribute('aria-labelledby')).toBe(titleElement?.id);
+
+      // Fill adds an emotion class in addition to combined-class
+      expect(glyph.classList.length).toBeGreaterThan(1);
+    });
+  });
+
+  describe('combined props with custom SVGR glyphs', () => {
+    const IconComponent = createIconComponent(customGlyphs);
+
+    test('applies size, className, and fill together', () => {
+      render(
+        <IconComponent
+          glyph="CustomGlyph"
+          size={32}
+          className="combined-custom-class"
+          fill="orange"
+        />,
+      );
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+
+      expect(glyph).toHaveAttribute('height', '32');
+      expect(glyph).toHaveAttribute('width', '32');
+      expect(glyph).toHaveClass('combined-custom-class');
+      // Fill adds an emotion class in addition to combined-custom-class
+      expect(glyph.classList.length).toBeGreaterThan(1);
+    });
+
+    test('applies accessibility props with className', () => {
+      render(
+        <IconComponent
+          glyph="CustomGlyph"
+          className="accessible-class"
+          aria-label="Accessible Custom Icon"
+        />,
+      );
+      const glyph = screen.getByTestId('custom-svgr-glyph');
+
+      expect(glyph).toHaveClass('accessible-class');
+      expect(glyph).toHaveAttribute('aria-label', 'Accessible Custom Icon');
+    });
+  });
+});

package/src/createIconComponent.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
+import mapValues from 'lodash/mapValues';
 
+import { createGlyphComponent } from './createGlyphComponent';
 import { Size } from './glyphCommon';
+import { isComponentGlyph } from './isComponentGlyph';
 import { LGGlyph } from './types';
 
 // We omit size here because we map string values for size to numbers in this component.
@@ -27,8 +30,18 @@ type GlyphObject = Record<string, LGGlyph.Component>;
 export function createIconComponent<G extends GlyphObject = GlyphObject>(
   glyphs: G,
 ) {
+  const allGlyphsAreComponents = Object.values(glyphs).every(isComponentGlyph);
+  const glyphDict = allGlyphsAreComponents
+    ? glyphs
+    : mapValues(glyphs, (val, key) => {
+        // We do not currently check for valid SVG files. TODO: LG-5827
+        if (isComponentGlyph(val)) return val;
+
+        return createGlyphComponent(key, val);
+      });
+
   const Icon = ({ glyph, ...rest }: IconProps) => {
-    const SVGComponent = glyphs[glyph];
+    const SVGComponent = glyphDict[glyph];
 
     if (SVGComponent) {
       return <SVGComponent {...rest} />;

package/src/testUtils.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { SVGR } from './types';
+
+/**
+ * Creates a mock SVGR component for testing purposes.
+ */
+export const createTestSVGRComponent = (testId: string): SVGR.Component => {
+  const TestComponent: SVGR.Component = ({ children, ...props }) => (
+    <svg data-testid={testId} {...props}>
+      {children}
+    </svg>
+  );
+
+  return TestComponent;
+};
+
+// Pre-built mock components for common test scenarios
+export const TestSVGRGlyph = createTestSVGRComponent('mock-glyph');
+export const TestSVGRGlyphWithChildren = createTestSVGRComponent(
+  'mock-glyph-with-children',
+);
+export const CustomSVGRGlyph = createTestSVGRComponent('custom-svgr-glyph');
+export const AnotherCustomGlyph = createTestSVGRComponent(
+  'another-custom-glyph',
+);