@leafygreen-ui/icon 11.9.0 → 11.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.9.0",
+  "version": "11.10.2",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -24,7 +24,15 @@
     "xml2json": "^0.11.2"
   },
   "dependencies": {
-    "@leafygreen-ui/lib": "^9.2.0"
+    "@leafygreen-ui/lib": "^9.4.2"
   },
-  "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: 'Components/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/generated/Folder.tsx

@@ -2,7 +2,7 @@
  * This is a generated file. Do not modify it manually.
  *
  * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
- * @checksum 252783398afac591317ac483bbfcf384
+ * @checksum 2a9ff3a6b8b82526ffa33853f432f626
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -49,7 +49,7 @@ const Folder = ({
       viewBox="0 0 16 16"
     >
       <path
-        d="M2 1C1.44772 1 1 1.44772 1 2V12C1 12.5523 1.44772 13 2 13H14C14.5523 13 15 12.5523 15 12V4C15 3.44772 14.5523 3 14 3H8C7.44772 3 7 2.55228 7 2C7 1.44772 6.55228 1 6 1H2Z"
+        d="M2 2C1.44772 2 1 2.44772 1 3V13C1 13.5523 1.44772 14 2 14H14C14.5523 14 15 13.5523 15 13V5C15 4.44772 14.5523 4 14 4H8C7.44772 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2H2Z"
         fill={'currentColor'}
       />
     </svg>

package/src/generated/Relationship.tsx

@@ -0,0 +1,66 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum 2e86b84e6912939cc6e356b19936e56c
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface RelationshipProps extends LGGlyph.ComponentProps {}
+
+const Relationship = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: RelationshipProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Relationship', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['aria-labelledby']: ariaLabelledby,
+  });
+  return (
+    <svg
+      className={cx(
+        {
+          [fillStyle]: fill != null,
+        },
+        noFlexShrink,
+        className,
+      )}
+      height={typeof size === 'number' ? size : sizeMap[size]}
+      width={typeof size === 'number' ? size : sizeMap[size]}
+      role={role}
+      {...accessibleProps}
+      {...props}
+      viewBox="0 0 16 16"
+    >
+      <path
+        d="M0.5 2C0.5 1.44772 0.947715 1 1.5 1H3.5C4.05228 1 4.5 1.44772 4.5 2V3H5.99999C7.3807 3 8.49998 4.11929 8.49998 5.5V10.5C8.49998 11.3284 9.17156 12 9.99999 12H11.5V11C11.5 10.4477 11.9477 10 12.5 10H14.5C15.0523 10 15.5 10.4477 15.5 11V14C15.5 14.5523 15.0523 15 14.5 15H12.5C11.9477 15 11.5 14.5523 11.5 14V13H9.99999C8.61928 13 7.49998 11.8807 7.49998 10.5V5.5C7.49998 4.67157 6.82841 4 5.99999 4H4.5V5C4.5 5.55228 4.05228 6 3.5 6H1.5C0.947715 6 0.5 5.55228 0.5 5V2Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Relationship.displayName = 'Relationship';
+Relationship.isGlyph = true;
+Relationship.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Relationship;

package/src/glyphs/Folder.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 1C1.44772 1 1 1.44772 1 2V12C1 12.5523 1.44772 13 2 13H14C14.5523 13 15 12.5523 15 12V4C15 3.44772 14.5523 3 14 3H8C7.44772 3 7 2.55228 7 2C7 1.44772 6.55228 1 6 1H2Z" fill="#000000"/>
+<path d="M2 2C1.44772 2 1 2.44772 1 3V13C1 13.5523 1.44772 14 2 14H14C14.5523 14 15 13.5523 15 13V5C15 4.44772 14.5523 4 14 4H8C7.44772 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2H2Z" fill="black"/>
 </svg>

package/src/glyphs/Relationship.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 2C0.5 1.44772 0.947715 1 1.5 1H3.5C4.05228 1 4.5 1.44772 4.5 2V3H5.99999C7.3807 3 8.49998 4.11929 8.49998 5.5V10.5C8.49998 11.3284 9.17156 12 9.99999 12H11.5V11C11.5 10.4477 11.9477 10 12.5 10H14.5C15.0523 10 15.5 10.4477 15.5 11V14C15.5 14.5523 15.0523 15 14.5 15H12.5C11.9477 15 11.5 14.5523 11.5 14V13H9.99999C8.61928 13 7.49998 11.8807 7.49998 10.5V5.5C7.49998 4.67157 6.82841 4 5.99999 4H4.5V5C4.5 5.55228 4.05228 6 3.5 6H1.5C0.947715 6 0.5 5.55228 0.5 5V2Z" fill="#000000"/>
+</svg>

package/src/glyphs/index.ts

@@ -78,6 +78,7 @@ import PlusWithCircle from './PlusWithCircle.svg';
 import QuestionMarkWithCircle from './QuestionMarkWithCircle.svg';
 import Redo from './Redo.svg';
 import Refresh from './Refresh.svg';
+import Relationship from './Relationship.svg';
 import ReplicaSet from './ReplicaSet.svg';
 import Save from './Save.svg';
 import Serverless from './Serverless.svg';
@@ -184,6 +185,7 @@ const glyphs = {
   QuestionMarkWithCircle,
   Redo,
   Refresh,
+  Relationship,
   ReplicaSet,
   Save,
   Serverless,

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>;