@leafygreen-ui/icon 11.22.1 → 11.23.0

package/dist/isComponentGlyph.d.ts

@@ -1,8 +1,8 @@
 import { ComponentType, ReactNode } from 'react';
 import { LGGlyph } from './types';
-declare type ExtendedComponentType = ComponentType<any> & {
+declare type ExtendedComponentType = (ComponentType<any> & {
     [key: string]: any;
-};
+});
 /**
  * Helper type to check if element is a LeafyGreen UI Glyph
  * @internal

package/dist/isComponentGlyph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isComponentGlyph.d.ts","sourceRoot":"","sources":["../src/isComponentGlyph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,aAAK,qBAAqB,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG;IAChD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AACF;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,IAAI,OAAO,CAAC,OAAO,CAAC;AACpE,iBAAS,gBAAgB,CACvB,SAAS,EAAE,qBAAqB,GAC/B,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC;AAuBlC,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"isComponentGlyph.d.ts","sourceRoot":"","sources":["../src/isComponentGlyph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAIlC,aAAK,qBAAqB,GACxB,CAAE,aAAa,CAAC,GAAG,CAAC,GAAG;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA,CAAC;AACN;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,IAAI,OAAO,CAAC,OAAO,CAAC;AACpE,iBAAS,gBAAgB,CACvB,SAAS,EAAE,qBAAqB,GAC/B,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC;AAuBlC,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.22.1",
+  "version": "11.23.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -24,16 +24,16 @@
   },
   "devDependencies": {
     "@leafygreen-ui/palette": "^4.0.7",
+    "@leafygreen-ui/lib": "^11.0.0",
+    "@svgr/core": "^5.3.1",
+    "@types/meow": "^6.0.0",
     "@types/xml2json": "^0.11.0",
-    "xml2json": "^0.12.0",
-    "@leafygreen-ui/lib": "^10.4.3"
+    "meow": "^6.1.0",
+    "xml2json": "^0.12.0"
   },
   "dependencies": {
     "@leafygreen-ui/emotion": "^4.0.7",
-    "@svgr/core": "^5.3.1",
-    "@types/meow": "^6.0.0",
-    "lodash": "^4.17.21",
-    "meow": "^6.1.0"
+    "lodash": "^4.17.21"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",

package/src/Icon.spec.tsx

@@ -44,26 +44,26 @@ const customTestGlyphs = {
 
 describe('packages/Icon/isComponentGlyph', () => {
   test('returns `true` for a rendered component', () => {
-    const TestNode: React.ComponentType<any> & { isGlyph?: boolean } = () => (
-      <div />
-    );
+    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 />
-    );
+    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 />
-    );
+    const TestNode: React.ComponentType<any> & {
+      isGlyph?: boolean;
+    } = () => <div />;
     TestNode.isGlyph = false;
     const renderedTestNode = <TestNode />;
     expect(isComponentGlyph(TestNode)).toBeFalsy();

package/src/generated/Mobile.tsx

@@ -0,0 +1,45 @@
+/**
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum c37bbd7b2c50f10b5914bf52a3ecd2c0
+*/
+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 MobileProps extends LGGlyph.ComponentProps {}
+const Mobile = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: MobileProps) => {
+  const fillStyle = css`
+        color: ${fill};
+      `;
+  const noFlexShrink = css`
+        flex-shrink: 0;
+      `;
+  const accessibleProps = generateAccessibleProps(role, 'Mobile', {
+    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 fillRule="evenodd" clipRule="evenodd" d="M11 3H5V13H11V3ZM5 1C4.44772 1 4 1.44772 4 2V14C4 14.5523 4.44772 15 5 15H11C11.5523 15 12 14.5523 12 14V2C12 1.44772 11.5523 1 11 1H5Z" fill={'currentColor'} /></svg>;
+};
+Mobile.displayName = 'Mobile';
+Mobile.isGlyph = true;
+Mobile.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string
+};
+export default Mobile;

package/src/generated/NavCollapse.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 2ea5bd5022b3f89ef21314161e9c7bb6
+* @checksum 9b540c7a71105a9b0c34a3dbc73589f0
 */
 import * as React from "react";
 import PropTypes from 'prop-types';
@@ -33,7 +33,7 @@ const NavCollapse = ({
   });
   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="M7.5 4H6.5C5.39543 4 4.5 4.89543 4.5 6V10C4.5 11.1046 5.39543 12 6.5 12H7.5V4Z" fill={'currentColor'} /><path d="M8.21716 8.28284C8.06095 8.12663 8.06095 7.87337 8.21716 7.71716L10.7627 5.17157C10.919 5.01536 11.1722 5.01536 11.3284 5.17157C11.4846 5.32778 11.4846 5.58105 11.3284 5.73726L9.06569 8L11.3284 10.2627C11.4846 10.419 11.4846 10.6722 11.3284 10.8284C11.1722 10.9846 10.919 10.9846 10.7627 10.8284L8.21716 8.28284Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V4ZM4 3.25H12C12.4142 3.25 12.75 3.58579 12.75 4V12C12.75 12.4142 12.4142 12.75 12 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12V4C3.25 3.58579 3.58579 3.25 4 3.25Z" fill={'currentColor'} /></svg>;
+  }, 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="M11.3891 4.81802C11.1938 4.62275 10.8772 4.62275 10.682 4.81802L7.85354 7.64644C7.65828 7.84171 7.65828 8.15829 7.85354 8.35355L10.682 11.182C10.8772 11.3772 11.1938 11.3772 11.3891 11.182L11.7426 10.8284C11.9379 10.6331 11.9379 10.3166 11.7426 10.1213L9.62131 8L11.7426 5.87868C11.9379 5.68342 11.9379 5.36683 11.7426 5.17157L11.3891 4.81802Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4ZM5 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V12C2.5 12.8284 3.17157 13.5 4 13.5H5L5 2.5ZM6.5 2.5L6.5 13.5H12C12.8284 13.5 13.5 12.8284 13.5 12V4C13.5 3.17157 12.8284 2.5 12 2.5H6.5Z" fill={'currentColor'} /></svg>;
 };
 NavCollapse.displayName = 'NavCollapse';
 NavCollapse.isGlyph = true;

package/src/generated/NavExpand.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 e5a0c8d34e8fcc2a863a98a6e53e105f
+* @checksum 7d863a9289f65c7499427e501961017d
 */
 import * as React from "react";
 import PropTypes from 'prop-types';
@@ -33,7 +33,7 @@ const NavExpand = ({
   });
   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="M8.5 4H9.5C10.6046 4 11.5 4.89543 11.5 6V10C11.5 11.1046 10.6046 12 9.5 12H8.5V4Z" fill={'currentColor'} /><path d="M7.78284 8.28284C7.93905 8.12663 7.93905 7.87337 7.78284 7.71716L5.23726 5.17157C5.08105 5.01536 4.82778 5.01536 4.67157 5.17157C4.51536 5.32778 4.51536 5.58105 4.67157 5.73726L6.93431 8L4.67157 10.2627C4.51536 10.419 4.51536 10.6722 4.67157 10.8284C4.82778 10.9846 5.08105 10.9846 5.23726 10.8284L7.78284 8.28284Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M14 4C14 2.89543 13.1046 2 12 2H4C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4ZM12 3.25H4C3.58579 3.25 3.25 3.58579 3.25 4V12C3.25 12.4142 3.58579 12.75 4 12.75H12C12.4142 12.75 12.75 12.4142 12.75 12V4C12.75 3.58579 12.4142 3.25 12 3.25Z" fill={'currentColor'} /></svg>;
+  }, 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="M4.61091 4.81802C4.80616 4.62275 5.12277 4.62275 5.31803 4.81802L8.14646 7.64644C8.34172 7.84171 8.34172 8.15829 8.14646 8.35355L5.31803 11.182C5.12277 11.3772 4.80621 11.3772 4.61091 11.182L4.25736 10.8284C4.06211 10.6331 4.06211 10.3166 4.25736 10.1213L6.37869 8L4.25736 5.87868C4.06211 5.68342 4.06211 5.36683 4.25736 5.17157L4.61091 4.81802Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M12 1C13.6569 1 15 2.34315 15 4V12C15 13.6569 13.6569 15 12 15H4C2.34315 15 1 13.6569 1 12V4C1 2.34315 2.34315 1 4 1H12ZM11 2.5H12C12.8284 2.5 13.5 3.17157 13.5 4V12C13.5 12.8284 12.8284 13.5 12 13.5H11V2.5ZM9.5 2.5V13.5H4C3.17157 13.5 2.5 12.8284 2.5 12V4C2.5 3.17157 3.17157 2.5 4 2.5H9.5Z" fill={'currentColor'} /></svg>;
 };
 NavExpand.displayName = 'NavExpand';
 NavExpand.isGlyph = true;

package/src/glyphCommon.ts

@@ -5,7 +5,7 @@ export const Size = {
   XLarge: 'xlarge',
 } as const;
 
-export type Size = typeof Size[keyof typeof Size];
+export type Size = (typeof Size)[keyof typeof Size];
 
 export const sizeMap: Record<Size, number> = {
   small: 14,

package/src/glyphs/Mobile.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 fill-rule="evenodd" clip-rule="evenodd" d="M11 3H5V13H11V3ZM5 1C4.44772 1 4 1.44772 4 2V14C4 14.5523 4.44772 15 5 15H11C11.5523 15 12 14.5523 12 14V2C12 1.44772 11.5523 1 11 1H5Z" fill="#000"/>
+</svg>

package/src/glyphs/NavCollapse.svg

@@ -1,5 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.5 4H6.5C5.39543 4 4.5 4.89543 4.5 6V10C4.5 11.1046 5.39543 12 6.5 12H7.5V4Z" fill="#000"/>
-<path d="M8.21716 8.28284C8.06095 8.12663 8.06095 7.87337 8.21716 7.71716L10.7627 5.17157C10.919 5.01536 11.1722 5.01536 11.3284 5.17157C11.4846 5.32778 11.4846 5.58105 11.3284 5.73726L9.06569 8L11.3284 10.2627C11.4846 10.419 11.4846 10.6722 11.3284 10.8284C11.1722 10.9846 10.919 10.9846 10.7627 10.8284L8.21716 8.28284Z" fill="#000"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H12C13.1046 2 14 2.89543 14 4V12C14 13.1046 13.1046 14 12 14H4C2.89543 14 2 13.1046 2 12V4ZM4 3.25H12C12.4142 3.25 12.75 3.58579 12.75 4V12C12.75 12.4142 12.4142 12.75 12 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12V4C3.25 3.58579 3.58579 3.25 4 3.25Z" fill="#000"/>
+<path d="M11.3891 4.81802C11.1938 4.62275 10.8772 4.62275 10.682 4.81802L7.85354 7.64644C7.65828 7.84171 7.65828 8.15829 7.85354 8.35355L10.682 11.182C10.8772 11.3772 11.1938 11.3772 11.3891 11.182L11.7426 10.8284C11.9379 10.6331 11.9379 10.3166 11.7426 10.1213L9.62131 8L11.7426 5.87868C11.9379 5.68342 11.9379 5.36683 11.7426 5.17157L11.3891 4.81802Z" fill="#000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4ZM5 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V12C2.5 12.8284 3.17157 13.5 4 13.5H5L5 2.5ZM6.5 2.5L6.5 13.5H12C12.8284 13.5 13.5 12.8284 13.5 12V4C13.5 3.17157 12.8284 2.5 12 2.5H6.5Z" fill="#000"/>
 </svg>

package/src/glyphs/NavExpand.svg

@@ -1,5 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.5 4H9.5C10.6046 4 11.5 4.89543 11.5 6V10C11.5 11.1046 10.6046 12 9.5 12H8.5V4Z" fill="#000"/>
-<path d="M7.78284 8.28284C7.93905 8.12663 7.93905 7.87337 7.78284 7.71716L5.23726 5.17157C5.08105 5.01536 4.82778 5.01536 4.67157 5.17157C4.51536 5.32778 4.51536 5.58105 4.67157 5.73726L6.93431 8L4.67157 10.2627C4.51536 10.419 4.51536 10.6722 4.67157 10.8284C4.82778 10.9846 5.08105 10.9846 5.23726 10.8284L7.78284 8.28284Z" fill="#000"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 4C14 2.89543 13.1046 2 12 2H4C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4ZM12 3.25H4C3.58579 3.25 3.25 3.58579 3.25 4V12C3.25 12.4142 3.58579 12.75 4 12.75H12C12.4142 12.75 12.75 12.4142 12.75 12V4C12.75 3.58579 12.4142 3.25 12 3.25Z" fill="#000"/>
+<path d="M4.61091 4.81802C4.80616 4.62275 5.12277 4.62275 5.31803 4.81802L8.14646 7.64644C8.34172 7.84171 8.34172 8.15829 8.14646 8.35355L5.31803 11.182C5.12277 11.3772 4.80621 11.3772 4.61091 11.182L4.25736 10.8284C4.06211 10.6331 4.06211 10.3166 4.25736 10.1213L6.37869 8L4.25736 5.87868C4.06211 5.68342 4.06211 5.36683 4.25736 5.17157L4.61091 4.81802Z" fill="#000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C13.6569 1 15 2.34315 15 4V12C15 13.6569 13.6569 15 12 15H4C2.34315 15 1 13.6569 1 12V4C1 2.34315 2.34315 1 4 1H12ZM11 2.5H12C12.8284 2.5 13.5 3.17157 13.5 4V12C13.5 12.8284 12.8284 13.5 12 13.5H11V2.5ZM9.5 2.5V13.5H4C3.17157 13.5 2.5 12.8284 2.5 12V4C2.5 3.17157 3.17157 2.5 4 2.5H9.5Z" fill="#000"/>
 </svg>

package/src/glyphs/index.ts

@@ -79,6 +79,7 @@ import MagnifyingGlass from './MagnifyingGlass.svg';
 import Megaphone from './Megaphone.svg';
 import Menu from './Menu.svg';
 import Minus from './Minus.svg';
+import Mobile from './Mobile.svg';
 import MultiDirectionArrow from './MultiDirectionArrow.svg';
 import MultiLayers from './MultiLayers.svg';
 import NavCollapse from './NavCollapse.svg';
@@ -217,6 +218,7 @@ const _glyphs = {
   Megaphone,
   Menu,
   Minus,
+  Mobile,
   MultiDirectionArrow,
   MultiLayers,
   NavCollapse,

package/src/isComponentGlyph.ts

@@ -2,9 +2,12 @@ import { ComponentType, isValidElement, ReactNode } from 'react';
 
 import { LGGlyph } from './types';
 
-type ExtendedComponentType = ComponentType<any> & {
-  [key: string]: any;
-};
+type Unknown = {} | null | undefined;
+
+type ExtendedComponentType =
+  | ComponentType<any> & {
+      [key: string]: any;
+    };
 /**
  * Helper type to check if element is a LeafyGreen UI Glyph
  * @internal
@@ -14,7 +17,7 @@ function isComponentGlyph(
   component: ExtendedComponentType,
 ): component is LGGlyph.Component;
 function isComponentGlyph(
-  child: ReactNode | ExtendedComponentType,
+  child: ReactNode | ExtendedComponentType | Unknown,
 ): child is LGGlyph.Element | LGGlyph.Component {
   // If we're received a rendered component (i.e. ReactNode)
   if (isValidElement(child)) {
@@ -26,7 +29,7 @@ function isComponentGlyph(
     );
   }
 
-  // If we've recieved a component function
+  // If we've received a component function
   return (
     child != null &&
     typeof child === 'function' &&