@leafygreen-ui/icon 11.9.0 → 11.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.9.0",
+  "version": "11.10.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -26,5 +26,13 @@
   "dependencies": {
     "@leafygreen-ui/lib": "^9.2.0"
   },
-  "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0"
-}
+  "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}

package/scripts/build.ts

@@ -8,7 +8,7 @@ const { CLIEngine } = require('eslint');
 const meow = require('meow');
 const prettier = require('prettier');
 
-const template = require('../src/template');
+const template = require('./template');
 
 const cli = meow(
   `

package/src/Icon.spec.tsx

@@ -11,6 +11,7 @@ import { createIconComponent, glyphs } from '.';
 import createGlyphComponent from './createGlyphComponent';
 import EditIcon from '@leafygreen-ui/icon/dist/Edit';
 import { Size } from './glyphCommon';
+import { isComponentGlyph } from './isComponentGlyph';
 
 function getBaseName(filePath: string): string {
   return path.basename(filePath, path.extname(filePath));
@@ -32,6 +33,50 @@ fs.readdirSync(generatedFilesDirectory).forEach(filePath => {
   baseNameToGeneratedFilePath[getBaseName(filePath)] = filePath;
 });
 
+const MyTestSVGRGlyph: SVGR.Component = props => (
+  <svg data-testid="my-glyph" {...props}></svg>
+);
+
+const customTestGlyphs = {
+  MyTestSVGRGlyph: createGlyphComponent('MyTestSVGRGlyph', MyTestSVGRGlyph),
+};
+
+describe('packages/Icon/isComponentGlyph', () => {
+  test('returns `true` for a rendered component', () => {
+    const TestNode: React.ComponentType<any> & { isGlyph?: boolean } = () => (
+      <div />
+    );
+    TestNode.isGlyph = true;
+    const renderedTestNode = <TestNode />;
+    expect(isComponentGlyph(renderedTestNode)).toBeTruthy();
+  });
+
+  test('returns `true` for a component function', () => {
+    const TestNode: React.ComponentType<any> & { isGlyph?: boolean } = () => (
+      <div />
+    );
+    TestNode.isGlyph = true;
+    expect(isComponentGlyph(TestNode)).toBeTruthy();
+  });
+
+  test('returns `false` if isGlyph is false', () => {
+    const TestNode: React.ComponentType<any> & { isGlyph?: boolean } = () => (
+      <div />
+    );
+    TestNode.isGlyph = false;
+    const renderedTestNode = <TestNode />;
+    expect(isComponentGlyph(TestNode)).toBeFalsy();
+    expect(isComponentGlyph(renderedTestNode)).toBeFalsy();
+  });
+
+  test('returns `false` if isGlyph is not set', () => {
+    const TestNode: React.ComponentType<any> = () => <div />;
+    const renderedTestNode = <TestNode />;
+    expect(isComponentGlyph(TestNode)).toBeFalsy();
+    expect(isComponentGlyph(renderedTestNode)).toBeFalsy();
+  });
+});
+
 describe('packages/Icon/glyphs/', () => {
   describe('a11y', () => {
     test('does not have basic accessibility issues', async () => {
@@ -86,19 +131,28 @@ describe('packages/Icon/glyphs/', () => {
   });
 });
 
-const MyGlyph: SVGR.Component = props => (
-  <svg data-testid="my-glyph" {...props}></svg>
-);
-
 describe('packages/Icon/createGlyphComponent', () => {
-  const GlyphComponent = createGlyphComponent('MyGlyph', MyGlyph);
+  const GlyphComponent = createGlyphComponent(
+    'MyTestSVGRGlyph',
+    MyTestSVGRGlyph,
+  );
 
-  test('returns a function', () => {
+  test('returns a LGGlyph component', () => {
     expect(typeof GlyphComponent).toBe('function');
+    expect(isComponentGlyph(GlyphComponent)).toBeTruthy();
+  });
+
+  test('returned component has correct display name', () => {
+    expect(GlyphComponent.displayName).toBe('MyTestSVGRGlyph');
+  });
+
+  test('returned component has the property `isGlyph`', () => {
+    expect(GlyphComponent).toHaveProperty('isGlyph');
+    expect(GlyphComponent.isGlyph).toBeTruthy();
   });
 
-  test('returned function has correct display name', () => {
-    expect(GlyphComponent.displayName).toBe('MyGlyph');
+  test('returned function passes `isComponentGlyph`', () => {
+    expect(isComponentGlyph(GlyphComponent)).toBeTruthy();
   });
 
   test('returned function renders the glyph specified', () => {
@@ -134,12 +188,8 @@ describe('packages/Icon/createGlyphComponent', () => {
   });
 });
 
-const customGlyphs = {
-  MyGlyph: createGlyphComponent('MyGlyph', MyGlyph),
-};
-
 describe('packages/Icon/createIconComponent', () => {
-  const IconComponent = createIconComponent(customGlyphs);
+  const IconComponent = createIconComponent(customTestGlyphs);
 
   test('returns a function', () => {
     expect(typeof IconComponent).toBe('function');
@@ -149,8 +199,17 @@ describe('packages/Icon/createIconComponent', () => {
     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();
+  });
+
   test('returned funciton renders the glyph specified', () => {
-    const { getByTestId } = render(<IconComponent glyph="MyGlyph" />);
+    const { getByTestId } = render(<IconComponent glyph="MyTestSVGRGlyph" />);
     const glyph = getByTestId('my-glyph');
 
     if (!typeIs.element(glyph)) {
@@ -162,7 +221,7 @@ describe('packages/Icon/createIconComponent', () => {
   describe('returned funcion passes through props', () => {
     test('`size` prop as number', () => {
       const { getByTestId } = render(
-        <IconComponent glyph="MyGlyph" size={20} />,
+        <IconComponent glyph="MyTestSVGRGlyph" size={20} />,
       );
       const glyph = getByTestId('my-glyph');
       expect(glyph).toHaveAttribute('height', '20');
@@ -171,7 +230,7 @@ describe('packages/Icon/createIconComponent', () => {
 
     test('`size` prop as Size', () => {
       const { getByTestId } = render(
-        <IconComponent glyph="MyGlyph" size={Size.Large} />,
+        <IconComponent glyph="MyTestSVGRGlyph" size={Size.Large} />,
       );
       const glyph = getByTestId('my-glyph');
       expect(glyph).toHaveAttribute('height', '20');
@@ -180,7 +239,7 @@ describe('packages/Icon/createIconComponent', () => {
 
     test('`role`', () => {
       const { getByTestId } = render(
-        <IconComponent glyph="MyGlyph" role="presentation" />,
+        <IconComponent glyph="MyTestSVGRGlyph" role="presentation" />,
       );
       const glyph = getByTestId('my-glyph');
       expect(glyph).toHaveAttribute('role', 'presentation');

package/src/Icon.story.tsx

@@ -1,16 +1,21 @@
+// TODO: Generate Icon props with controls
 import React from 'react';
-import Icon, { glyphs, Size } from '.';
+import Icon, { glyphs } from '.';
 import { css } from '@leafygreen-ui/emotion';
-import { storiesOf } from '@storybook/react';
-import { color, select } from '@storybook/addon-knobs';
-import { uiColors } from '@leafygreen-ui/palette';
+import { ComponentStory, Meta } from '@storybook/react';
+import { palette } from '@leafygreen-ui/palette';
+
+export default {
+  title: 'Packages/Icons',
+  component: Icon,
+} as Meta<typeof Icon>;
 
 const containerStyle = css`
   width: 150px;
   height: 70px;
   flex-shrink: 0;
   text-align: center;
-  border: 1px solid #babdbe;
+  border: 1px solid ${palette.gray.light1};
   border-radius: 5px;
   display: flex;
   align-items: center;
@@ -21,22 +26,17 @@ const containerStyle = css`
 
 const textStyle = css`
   font-size: 12px;
-  color: ${uiColors.gray.base};
+  color: ${palette.gray.base};
   margin-top: 0.5rem;
 `;
 
-storiesOf('Packages/Icons', module).add('Icon', () => {
-  const fill = color('Fill', '#000000');
-  const size = select('size', Object.values(Size), Size.Default);
-
-  return (
-    <>
-      {Object.keys(glyphs).map(glyph => (
-        <div key={glyph} className={containerStyle}>
-          <Icon glyph={glyph} fill={fill} size={size} />
-          <div className={textStyle}>{glyph}</div>
-        </div>
-      ))}
-    </>
-  );
-});
+export const AllIcons: ComponentStory<typeof Icon> = args => (
+  <>
+    {Object.keys(glyphs).map(glyph => (
+      <div key={glyph} className={containerStyle}>
+        <Icon {...args} glyph={glyph} />
+        <div className={textStyle}>{glyph}</div>
+      </div>
+    ))}
+  </>
+);

package/src/createGlyphComponent.tsx

@@ -15,7 +15,7 @@ export default function createGlyphComponent(
   glyphName: string,
   Glyph: SVGR.Component,
 ): LGGlyph.Component {
-  function GlyphComponent({
+  const GlyphComponent: LGGlyph.Component = ({
     className,
     size = Size.Default,
     fill,
@@ -24,7 +24,7 @@ export default function createGlyphComponent(
     'aria-label': ariaLabel,
     role = 'img',
     ...rest
-  }: LGGlyph.ComponentProps) {
+  }: LGGlyph.ComponentProps) => {
     const fillStyle = css`
       color: ${fill};
     `;
@@ -56,7 +56,7 @@ export default function createGlyphComponent(
         {...rest}
       />
     );
-  }
+  };
 
   GlyphComponent.displayName = glyphName;
 

package/src/createIconComponent.tsx

@@ -21,12 +21,14 @@ export default function createIconComponent<
 >(glyphs: G) {
   const Icon = ({ glyph, ...rest }: IconProps) => {
     const SVGComponent = glyphs[glyph];
-
+    SVGComponent.isGlyph = true;
     return <SVGComponent {...rest} />;
   };
 
   Icon.displayName = 'Icon';
 
+  Icon.isGlyph = true;
+
   Icon.propTypes = {
     glyph: PropTypes.oneOf(Object.keys(glyphs)).isRequired,
     size: PropTypes.oneOfType([

package/src/isComponentGlyph.ts

@@ -1,13 +1,34 @@
+import { ComponentType, isValidElement, ReactNode } from 'react';
 import { LGGlyph } from './types';
 
+type ExtendedComponentType = ComponentType<any> & {
+  [key: string]: any;
+};
 /** Helper type to check if element is a LeafyGreen UI Glyph  */
-export function isComponentGlyph(
-  child: React.ReactNode,
-): child is React.ReactElement<LGGlyph.ComponentProps> {
+function isComponentGlyph(node: ReactNode): node is LGGlyph.Element;
+function isComponentGlyph(
+  component: ExtendedComponentType,
+): component is LGGlyph.Component;
+function isComponentGlyph(
+  child: ReactNode | ExtendedComponentType,
+): child is LGGlyph.Element | LGGlyph.Component {
+  // If we're received a rendered component (i.e. ReactNode)
+  if (isValidElement(child)) {
+    return (
+      child != null &&
+      typeof child === 'object' &&
+      'type' in child &&
+      (child.type as any).isGlyph === true
+    );
+  }
+
+  // If we've recieved a component function
   return (
     child != null &&
-    typeof child === 'object' &&
-    'type' in child &&
-    (child.type as any).isGlyph === true
+    typeof child === 'function' &&
+    'isGlyph' in child &&
+    child.isGlyph === true
   );
 }
+
+export { isComponentGlyph };

package/src/types/LGGlyph.ts

@@ -1,8 +1,10 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactComponentElement } from 'react';
 import * as SVGR from './SVGR';
 
 export interface ComponentProps extends SVGR.ComponentProps {
   size?: number | 'small' | 'default' | 'large' | 'xlarge';
 }
 
-export type Component = ComponentType<ComponentProps>;
+export type Component = ComponentType<ComponentProps> & { isGlyph?: boolean };
+
+export type Element = ReactComponentElement<Component, ComponentProps>;