@leafygreen-ui/icon 11.7.0 → 11.8.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/glyphCommon.ts","../src/createIconComponent.tsx","../src/createGlyphComponent.tsx","../src/glyphs/index.ts","../src/index.ts","../src/isComponentGlyph.ts"],"sourcesContent":["export const Size = {\n  Small: 'small',\n  Default: 'default',\n  Large: 'large',\n  XLarge: 'xlarge',\n} as const;\n\nexport type Size = typeof Size[keyof typeof Size];\n\nexport const sizeMap: Record<Size, number> = {\n  small: 14,\n  default: 16,\n  large: 20,\n  xlarge: 24,\n} as const;\n\ninterface AccessibleFunctionParams {\n  'aria-labelledby'?: string;\n  'aria-label'?: string;\n  title?: string | null;\n}\n\ntype AccessibleFunctionReturnType =\n  | AccessibleFunctionParams\n  | { 'aria-hidden': true; alt: '' };\n\nexport function generateAccessibleProps(\n  role: 'img' | 'presentation',\n  glyphName: string,\n  {\n    ['aria-label']: ariaLabel,\n    ['aria-labelledby']: ariaLabelledby,\n    title,\n  }: AccessibleFunctionParams,\n): AccessibleFunctionReturnType {\n  switch (role) {\n    case 'img':\n      if (!ariaLabel && !ariaLabelledby && !title) {\n        return { 'aria-label': getGlyphLabel(glyphName) };\n      }\n\n      return {\n        ['aria-labelledby']: ariaLabelledby,\n        ['aria-label']: ariaLabel,\n        title,\n      };\n\n    case 'presentation':\n      return { 'aria-hidden': true, alt: '' };\n  }\n}\n\nexport function getGlyphLabel(name: string) {\n  return `${name.replace(/([a-z])([A-Z])/g, '$1 $2')} Icon`;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { LGGlyph } from './types';\nimport { Size } from './glyphCommon';\n\n// We omit size here because we map string values for size to numbers in this component.\nexport interface IconProps extends Omit<LGGlyph.ComponentProps, 'size'> {\n  glyph: string;\n  size?: Size | number;\n}\n\ntype GlyphObject = Record<string, LGGlyph.Component>;\n\nexport default function createIconComponent<\n  G extends GlyphObject = GlyphObject\n>(glyphs: G) {\n  const Icon = ({ glyph, ...rest }: IconProps) => {\n    const SVGComponent = glyphs[glyph];\n\n    return <SVGComponent {...rest} />;\n  };\n\n  Icon.displayName = 'Icon';\n\n  Icon.propTypes = {\n    glyph: PropTypes.oneOf(Object.keys(glyphs)).isRequired,\n    size: PropTypes.oneOfType([\n      PropTypes.oneOf(Object.values(Size)),\n      PropTypes.number,\n    ]),\n  } as any;\n\n  return Icon;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SVGR, LGGlyph } from './types';\nimport { css, cx } from '@leafygreen-ui/emotion';\nimport { generateAccessibleProps, sizeMap, Size } from './glyphCommon';\n\nexport default function createGlyphComponent(\n  glyphName: string,\n  Glyph: SVGR.Component,\n): LGGlyph.Component {\n  function GlyphComponent({\n    className,\n    size = Size.Default,\n    fill,\n    title,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    role = 'img',\n    ...rest\n  }: LGGlyph.ComponentProps) {\n    const fillStyle = css`\n      color: ${fill};\n    `;\n\n    const renderedSize = typeof size === 'number' ? size : sizeMap[size];\n\n    if (!(role === 'img' || role === 'presentation')) {\n      console.warn(\n        \"Please provide a valid role to this component. Valid options are 'img' and 'presentation'. If you'd like the Icon to be accessible to screen readers please use 'img', otherwise set the role to 'presentation'.\",\n      );\n    }\n\n    return (\n      <Glyph\n        className={cx(\n          {\n            [fillStyle]: fill != null,\n          },\n          className,\n        )}\n        height={renderedSize}\n        width={renderedSize}\n        role={role}\n        {...generateAccessibleProps(role, glyphName, {\n          title,\n          ['aria-label']: ariaLabel,\n          ['aria-labelledby']: ariaLabelledby,\n        })}\n        {...rest}\n      />\n    );\n  }\n\n  GlyphComponent.displayName = glyphName;\n\n  GlyphComponent.isGlyph = true;\n\n  GlyphComponent.propTypes = {\n    fill: PropTypes.string,\n    size: PropTypes.oneOfType([\n      PropTypes.oneOf(Object.values(Size)),\n      PropTypes.number,\n    ]),\n    className: PropTypes.string,\n  };\n\n  return GlyphComponent;\n}\n","import createGlyphComponent from '../createGlyphComponent';\nimport { LGGlyph } from '../types';\n\n// Glyphs\nimport ActivityFeed from './ActivityFeed.svg';\nimport AddFile from './AddFile.svg';\nimport Apps from './Apps.svg';\nimport Array from './Array.svg';\nimport ArrowDown from './ArrowDown.svg';\nimport ArrowLeft from './ArrowLeft.svg';\nimport ArrowRight from './ArrowRight.svg';\nimport ArrowUp from './ArrowUp.svg';\nimport Beaker from './Beaker.svg';\nimport Bell from './Bell.svg';\nimport Building from './Building.svg';\nimport Bulb from './Bulb.svg';\nimport Calendar from './Calendar.svg';\nimport CaretDown from './CaretDown.svg';\nimport CaretLeft from './CaretLeft.svg';\nimport CaretRight from './CaretRight.svg';\nimport CaretUp from './CaretUp.svg';\nimport Charts from './Charts.svg';\nimport Checkmark from './Checkmark.svg';\nimport CheckmarkWithCircle from './CheckmarkWithCircle.svg';\nimport ChevronDown from './ChevronDown.svg';\nimport ChevronLeft from './ChevronLeft.svg';\nimport ChevronRight from './ChevronRight.svg';\nimport ChevronUp from './ChevronUp.svg';\nimport Clock from './Clock.svg';\nimport ClockWithArrow from './ClockWithArrow.svg';\nimport Clone from './Clone.svg';\nimport Cloud from './Cloud.svg';\nimport Code from './Code.svg';\nimport Connect from './Connect.svg';\nimport Copy from './Copy.svg';\nimport CreditCard from './CreditCard.svg';\nimport CurlyBraces from './CurlyBraces.svg';\nimport Database from './Database.svg';\nimport Diagram from './Diagram.svg';\nimport Disconnect from './Disconnect.svg';\nimport Download from './Download.svg';\nimport Edit from './Edit.svg';\nimport Ellipsis from './Ellipsis.svg';\nimport Export from './Export.svg';\nimport Favorite from './Favorite.svg';\nimport File from './File.svg';\nimport Filter from './Filter.svg';\nimport FullScreenEnter from './FullScreenEnter.svg';\nimport FullScreenExit from './FullScreenExit.svg';\nimport Folder from './Folder.svg';\nimport GlobeAmericas from './GlobeAmericas.svg';\nimport GovernmentBuilding from './GovernmentBuilding.svg';\nimport Home from './Home.svg';\nimport ImportantWithCircle from './ImportantWithCircle.svg';\nimport InfoWithCircle from './InfoWithCircle.svg';\nimport InviteUser from './InviteUser.svg';\nimport Key from './Key.svg';\nimport Laptop from './Laptop.svg';\nimport Lock from './Lock.svg';\nimport MagnifyingGlass from './MagnifyingGlass.svg';\nimport Megaphone from './Megaphone.svg';\nimport Menu from './Menu.svg';\nimport Minus from './Minus.svg';\nimport NotAllowed from './NotAllowed.svg';\nimport Note from './Note.svg';\nimport OpenNewTab from './OpenNewTab.svg';\nimport Pause from './Pause.svg';\nimport Person from './Person.svg';\nimport PersonGroup from './PersonGroup.svg';\nimport PersonWithLock from './PersonWithLock.svg';\nimport Play from './Play.svg';\nimport Plus from './Plus.svg';\nimport PlusWithCircle from './PlusWithCircle.svg';\nimport QuestionMarkWithCircle from './QuestionMarkWithCircle.svg';\nimport Redo from './Redo.svg';\nimport Refresh from './Refresh.svg';\nimport ReplicaSet from './ReplicaSet.svg';\nimport Save from './Save.svg';\nimport Serverless from './Serverless.svg';\nimport ShardedCluster from './ShardedCluster.svg';\nimport Settings from './Settings.svg';\nimport Shell from './Shell.svg';\nimport SortAscending from './SortAscending.svg';\nimport SortDescending from './SortDescending.svg';\nimport Stitch from './Stitch.svg';\nimport Support from './Support.svg';\nimport Table from './Table.svg';\nimport TimeSeries from './TimeSeries.svg';\nimport Trash from './Trash.svg';\nimport Undo from './Undo.svg';\nimport University from './University.svg';\nimport Unlock from './Unlock.svg';\nimport Unsorted from './Unsorted.svg';\nimport UpDownCarets from './UpDownCarets.svg';\nimport Upload from './Upload.svg';\nimport VerticalEllipsis from './VerticalEllipsis.svg';\nimport Visibility from './Visibility.svg';\nimport VisibilityOff from './VisibilityOff.svg';\nimport Warning from './Warning.svg';\nimport X from './X.svg';\nimport XWithCircle from './XWithCircle.svg';\n\nconst glyphs = {\n  ActivityFeed,\n  AddFile,\n  Apps,\n  Array,\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  Beaker,\n  Bell,\n  Building,\n  Bulb,\n  Calendar,\n  CaretDown,\n  CaretLeft,\n  CaretRight,\n  CaretUp,\n  Charts,\n  Checkmark,\n  CheckmarkWithCircle,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  Clock,\n  ClockWithArrow,\n  Clone,\n  Cloud,\n  Code,\n  Connect,\n  Copy,\n  CreditCard,\n  CurlyBraces,\n  Database,\n  Diagram,\n  Disconnect,\n  Download,\n  Edit,\n  Ellipsis,\n  Export,\n  Favorite,\n  File,\n  Filter,\n  FullScreenEnter,\n  FullScreenExit,\n  Folder,\n  GlobeAmericas,\n  GovernmentBuilding,\n  Home,\n  ImportantWithCircle,\n  InfoWithCircle,\n  InviteUser,\n  Key,\n  Laptop,\n  Lock,\n  MagnifyingGlass,\n  Megaphone,\n  Menu,\n  Minus,\n  NotAllowed,\n  Note,\n  OpenNewTab,\n  Pause,\n  Person,\n  PersonGroup,\n  PersonWithLock,\n  Play,\n  Plus,\n  PlusWithCircle,\n  QuestionMarkWithCircle,\n  Redo,\n  Refresh,\n  ReplicaSet,\n  Save,\n  Serverless,\n  ShardedCluster,\n  Settings,\n  Shell,\n  SortAscending,\n  SortDescending,\n  Stitch,\n  Support,\n  Table,\n  TimeSeries,\n  Trash,\n  Undo,\n  University,\n  Unlock,\n  Unsorted,\n  UpDownCarets,\n  Upload,\n  VerticalEllipsis,\n  Visibility,\n  VisibilityOff,\n  Warning,\n  X,\n  XWithCircle,\n} as const;\n\ntype GlyphName = keyof typeof glyphs;\n\nconst glyphKeys = Object.keys(glyphs) as Array<GlyphName>;\n\nconst processedGlyphs = glyphKeys.reduce((acc, name) => {\n  acc[name] = createGlyphComponent(name, glyphs[name]);\n\n  return acc;\n}, {} as Record<GlyphName, LGGlyph.Component>);\n\nexport default processedGlyphs;\n","import createIconComponent from './createIconComponent';\nimport glyphs from './glyphs';\n\nexport { default as createIconComponent } from './createIconComponent';\nexport { default as glyphs } from './glyphs';\nexport { Size } from './glyphCommon';\nexport { isComponentGlyph } from './isComponentGlyph';\nexport default createIconComponent(glyphs);\n","import { LGGlyph } from './types';\n\n/** Helper type to check if element is a LeafyGreen UI Glyph  */\nexport function isComponentGlyph(\n  child: React.ReactNode,\n): child is React.ReactElement<LGGlyph.ComponentProps> {\n  return (\n    child != null &&\n    typeof child === 'object' &&\n    'type' in child &&\n    (child.type as any).isGlyph === true\n  );\n}\n"],"names":["Size","Small","Default","Large","XLarge","sizeMap","small","default","large","xlarge","_templateObject","_excluded","createIconComponent","glyphs","Icon","_ref","glyph","rest","_objectWithoutProperties","SVGComponent","___EmotionJSX","displayName","propTypes","PropTypes","oneOf","Object","keys","isRequired","size","oneOfType","values","number","createGlyphComponent","glyphName","Glyph","GlyphComponent","_generateAccessiblePr","className","_ref$size","fill","title","ariaLabelledby","ariaLabel","_ref$role","role","fillStyle","css","renderedSize","console","warn","_extends","cx","_defineProperty","height","width","_ref2","name","aria-label","concat","replace","aria-hidden","alt","generateAccessibleProps","isGlyph","string","ActivityFeed","AddFile","Apps","Array","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Beaker","Bell","Building","Bulb","Calendar","CaretDown","CaretLeft","CaretRight","CaretUp","Charts","Checkmark","CheckmarkWithCircle","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","Clock","ClockWithArrow","Clone","Cloud","Code","Connect","Copy","CreditCard","CurlyBraces","Database","Diagram","Disconnect","Download","Edit","Ellipsis","Export","Favorite","File","Filter","FullScreenEnter","FullScreenExit","Folder","GlobeAmericas","GovernmentBuilding","Home","ImportantWithCircle","InfoWithCircle","InviteUser","Key","Laptop","Lock","MagnifyingGlass","Megaphone","Menu","Minus","NotAllowed","Note","OpenNewTab","Pause","Person","PersonGroup","PersonWithLock","Play","Plus","PlusWithCircle","QuestionMarkWithCircle","Redo","Refresh","ReplicaSet","Save","Serverless","ShardedCluster","Settings","Shell","SortAscending","SortDescending","Stitch","Support","Table","TimeSeries","Trash","Undo","University","Unlock","Unsorted","UpDownCarets","Upload","VerticalEllipsis","Visibility","VisibilityOff","Warning","X","XWithCircle","processedGlyphs","reduce","acc","child","_typeof","type"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/glyphCommon.ts","../src/createIconComponent.tsx","../src/createGlyphComponent.tsx","../src/glyphs/index.ts","../src/index.ts","../src/isComponentGlyph.ts"],"sourcesContent":["export const Size = {\n  Small: 'small',\n  Default: 'default',\n  Large: 'large',\n  XLarge: 'xlarge',\n} as const;\n\nexport type Size = typeof Size[keyof typeof Size];\n\nexport const sizeMap: Record<Size, number> = {\n  small: 14,\n  default: 16,\n  large: 20,\n  xlarge: 24,\n} as const;\n\ninterface AccessibleFunctionParams {\n  'aria-labelledby'?: string;\n  'aria-label'?: string;\n  title?: string | null;\n}\n\ntype AccessibleFunctionReturnType =\n  | AccessibleFunctionParams\n  | { 'aria-hidden': true; alt: '' };\n\nexport function generateAccessibleProps(\n  role: 'img' | 'presentation',\n  glyphName: string,\n  {\n    ['aria-label']: ariaLabel,\n    ['aria-labelledby']: ariaLabelledby,\n    title,\n  }: AccessibleFunctionParams,\n): AccessibleFunctionReturnType {\n  switch (role) {\n    case 'img':\n      if (!ariaLabel && !ariaLabelledby && !title) {\n        return { 'aria-label': getGlyphLabel(glyphName) };\n      }\n\n      return {\n        ['aria-labelledby']: ariaLabelledby,\n        ['aria-label']: ariaLabel,\n        title,\n      };\n\n    case 'presentation':\n      return { 'aria-hidden': true, alt: '' };\n  }\n}\n\nexport function getGlyphLabel(name: string) {\n  return `${name.replace(/([a-z])([A-Z])/g, '$1 $2')} Icon`;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { LGGlyph } from './types';\nimport { Size } from './glyphCommon';\n\n// We omit size here because we map string values for size to numbers in this component.\nexport interface IconProps extends Omit<LGGlyph.ComponentProps, 'size'> {\n  glyph: string;\n  size?: Size | number;\n}\n\ntype GlyphObject = Record<string, LGGlyph.Component>;\n\n/**\n * Returns a single component with a `glyph` prop to select the glyph\n * @param glyphs The set of glyphs\n * @returns Icon component\n */\nexport default function createIconComponent<\n  G extends GlyphObject = GlyphObject\n>(glyphs: G) {\n  const Icon = ({ glyph, ...rest }: IconProps) => {\n    const SVGComponent = glyphs[glyph];\n\n    return <SVGComponent {...rest} />;\n  };\n\n  Icon.displayName = 'Icon';\n\n  Icon.propTypes = {\n    glyph: PropTypes.oneOf(Object.keys(glyphs)).isRequired,\n    size: PropTypes.oneOfType([\n      PropTypes.oneOf(Object.values(Size)),\n      PropTypes.number,\n    ]),\n  } as any;\n\n  return Icon;\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SVGR, LGGlyph } from './types';\nimport { css, cx } from '@leafygreen-ui/emotion';\nimport { generateAccessibleProps, sizeMap, Size } from './glyphCommon';\n\n/**\n * Returns a single glyph component.\n * Process custom glyphs to ensure consistent behavior between custom and built-in icons\n * @param glyphName: string - the display name of the icon\n * @param Glyph: SVGR.Component - the SVG icon component\n * @returns LGGlyph.Component\n */\nexport default function createGlyphComponent(\n  glyphName: string,\n  Glyph: SVGR.Component,\n): LGGlyph.Component {\n  function GlyphComponent({\n    className,\n    size = Size.Default,\n    fill,\n    title,\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabel,\n    role = 'img',\n    ...rest\n  }: LGGlyph.ComponentProps) {\n    const fillStyle = css`\n      color: ${fill};\n    `;\n\n    const renderedSize = typeof size === 'number' ? size : sizeMap[size];\n\n    if (!(role === 'img' || role === 'presentation')) {\n      console.warn(\n        \"Please provide a valid role to this component. Valid options are 'img' and 'presentation'. If you'd like the Icon to be accessible to screen readers please use 'img', otherwise set the role to 'presentation'.\",\n      );\n    }\n\n    return (\n      <Glyph\n        className={cx(\n          {\n            [fillStyle]: fill != null,\n          },\n          className,\n        )}\n        height={renderedSize}\n        width={renderedSize}\n        role={role}\n        {...generateAccessibleProps(role, glyphName, {\n          title,\n          ['aria-label']: ariaLabel,\n          ['aria-labelledby']: ariaLabelledby,\n        })}\n        {...rest}\n      />\n    );\n  }\n\n  GlyphComponent.displayName = glyphName;\n\n  GlyphComponent.isGlyph = true;\n\n  GlyphComponent.propTypes = {\n    fill: PropTypes.string,\n    size: PropTypes.oneOfType([\n      PropTypes.oneOf(Object.values(Size)),\n      PropTypes.number,\n    ]),\n    className: PropTypes.string,\n  };\n\n  return GlyphComponent;\n}\n","import createGlyphComponent from '../createGlyphComponent';\nimport { LGGlyph } from '../types';\n\n// Glyphs\nimport ActivityFeed from './ActivityFeed.svg';\nimport AddFile from './AddFile.svg';\nimport Apps from './Apps.svg';\nimport Array from './Array.svg';\nimport ArrowDown from './ArrowDown.svg';\nimport ArrowLeft from './ArrowLeft.svg';\nimport ArrowRight from './ArrowRight.svg';\nimport ArrowUp from './ArrowUp.svg';\nimport Beaker from './Beaker.svg';\nimport Bell from './Bell.svg';\nimport Building from './Building.svg';\nimport Bulb from './Bulb.svg';\nimport Calendar from './Calendar.svg';\nimport CaretDown from './CaretDown.svg';\nimport CaretLeft from './CaretLeft.svg';\nimport CaretRight from './CaretRight.svg';\nimport CaretUp from './CaretUp.svg';\nimport Charts from './Charts.svg';\nimport Checkmark from './Checkmark.svg';\nimport CheckmarkWithCircle from './CheckmarkWithCircle.svg';\nimport ChevronDown from './ChevronDown.svg';\nimport ChevronLeft from './ChevronLeft.svg';\nimport ChevronRight from './ChevronRight.svg';\nimport ChevronUp from './ChevronUp.svg';\nimport Clock from './Clock.svg';\nimport ClockWithArrow from './ClockWithArrow.svg';\nimport Clone from './Clone.svg';\nimport Cloud from './Cloud.svg';\nimport Code from './Code.svg';\nimport Connect from './Connect.svg';\nimport Copy from './Copy.svg';\nimport CreditCard from './CreditCard.svg';\nimport CurlyBraces from './CurlyBraces.svg';\nimport Database from './Database.svg';\nimport Diagram from './Diagram.svg';\nimport Disconnect from './Disconnect.svg';\nimport Download from './Download.svg';\nimport Edit from './Edit.svg';\nimport Ellipsis from './Ellipsis.svg';\nimport Export from './Export.svg';\nimport Favorite from './Favorite.svg';\nimport File from './File.svg';\nimport Filter from './Filter.svg';\nimport FullScreenEnter from './FullScreenEnter.svg';\nimport FullScreenExit from './FullScreenExit.svg';\nimport Folder from './Folder.svg';\nimport GlobeAmericas from './GlobeAmericas.svg';\nimport GovernmentBuilding from './GovernmentBuilding.svg';\nimport Home from './Home.svg';\nimport ImportantWithCircle from './ImportantWithCircle.svg';\nimport InfoWithCircle from './InfoWithCircle.svg';\nimport InviteUser from './InviteUser.svg';\nimport Key from './Key.svg';\nimport Laptop from './Laptop.svg';\nimport Lock from './Lock.svg';\nimport MagnifyingGlass from './MagnifyingGlass.svg';\nimport Megaphone from './Megaphone.svg';\nimport Menu from './Menu.svg';\nimport Minus from './Minus.svg';\nimport NotAllowed from './NotAllowed.svg';\nimport Note from './Note.svg';\nimport OpenNewTab from './OpenNewTab.svg';\nimport Pause from './Pause.svg';\nimport Person from './Person.svg';\nimport PersonGroup from './PersonGroup.svg';\nimport PersonWithLock from './PersonWithLock.svg';\nimport Play from './Play.svg';\nimport Plus from './Plus.svg';\nimport PlusWithCircle from './PlusWithCircle.svg';\nimport QuestionMarkWithCircle from './QuestionMarkWithCircle.svg';\nimport Redo from './Redo.svg';\nimport Refresh from './Refresh.svg';\nimport ReplicaSet from './ReplicaSet.svg';\nimport Save from './Save.svg';\nimport Serverless from './Serverless.svg';\nimport ShardedCluster from './ShardedCluster.svg';\nimport Settings from './Settings.svg';\nimport Shell from './Shell.svg';\nimport SortAscending from './SortAscending.svg';\nimport SortDescending from './SortDescending.svg';\nimport Stitch from './Stitch.svg';\nimport Support from './Support.svg';\nimport Table from './Table.svg';\nimport TimeSeries from './TimeSeries.svg';\nimport Trash from './Trash.svg';\nimport Undo from './Undo.svg';\nimport University from './University.svg';\nimport Unlock from './Unlock.svg';\nimport Unsorted from './Unsorted.svg';\nimport UpDownCarets from './UpDownCarets.svg';\nimport Upload from './Upload.svg';\nimport VerticalEllipsis from './VerticalEllipsis.svg';\nimport Visibility from './Visibility.svg';\nimport VisibilityOff from './VisibilityOff.svg';\nimport Warning from './Warning.svg';\nimport X from './X.svg';\nimport XWithCircle from './XWithCircle.svg';\n\nconst glyphs = {\n  ActivityFeed,\n  AddFile,\n  Apps,\n  Array,\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  Beaker,\n  Bell,\n  Building,\n  Bulb,\n  Calendar,\n  CaretDown,\n  CaretLeft,\n  CaretRight,\n  CaretUp,\n  Charts,\n  Checkmark,\n  CheckmarkWithCircle,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronUp,\n  Clock,\n  ClockWithArrow,\n  Clone,\n  Cloud,\n  Code,\n  Connect,\n  Copy,\n  CreditCard,\n  CurlyBraces,\n  Database,\n  Diagram,\n  Disconnect,\n  Download,\n  Edit,\n  Ellipsis,\n  Export,\n  Favorite,\n  File,\n  Filter,\n  FullScreenEnter,\n  FullScreenExit,\n  Folder,\n  GlobeAmericas,\n  GovernmentBuilding,\n  Home,\n  ImportantWithCircle,\n  InfoWithCircle,\n  InviteUser,\n  Key,\n  Laptop,\n  Lock,\n  MagnifyingGlass,\n  Megaphone,\n  Menu,\n  Minus,\n  NotAllowed,\n  Note,\n  OpenNewTab,\n  Pause,\n  Person,\n  PersonGroup,\n  PersonWithLock,\n  Play,\n  Plus,\n  PlusWithCircle,\n  QuestionMarkWithCircle,\n  Redo,\n  Refresh,\n  ReplicaSet,\n  Save,\n  Serverless,\n  ShardedCluster,\n  Settings,\n  Shell,\n  SortAscending,\n  SortDescending,\n  Stitch,\n  Support,\n  Table,\n  TimeSeries,\n  Trash,\n  Undo,\n  University,\n  Unlock,\n  Unsorted,\n  UpDownCarets,\n  Upload,\n  VerticalEllipsis,\n  Visibility,\n  VisibilityOff,\n  Warning,\n  X,\n  XWithCircle,\n} as const;\n\ntype GlyphName = keyof typeof glyphs;\n\nconst glyphKeys = Object.keys(glyphs) as Array<GlyphName>;\n\nconst processedGlyphs = glyphKeys.reduce((acc, name) => {\n  acc[name] = createGlyphComponent(name, glyphs[name]);\n\n  return acc;\n}, {} as Record<GlyphName, LGGlyph.Component>);\n\nexport default processedGlyphs;\n","import createIconComponent from './createIconComponent';\nimport glyphs from './glyphs';\n\nexport { LGGlyph } from './types';\nexport { Size } from './glyphCommon';\nexport { default as createIconComponent } from './createIconComponent';\nexport { default as createGlyphComponent } from './createGlyphComponent';\nexport { default as glyphs } from './glyphs';\nexport { isComponentGlyph } from './isComponentGlyph';\nexport default createIconComponent(glyphs);\n","import { LGGlyph } from './types';\n\n/** Helper type to check if element is a LeafyGreen UI Glyph  */\nexport function isComponentGlyph(\n  child: React.ReactNode,\n): child is React.ReactElement<LGGlyph.ComponentProps> {\n  return (\n    child != null &&\n    typeof child === 'object' &&\n    'type' in child &&\n    (child.type as any).isGlyph === true\n  );\n}\n"],"names":["Size","Small","Default","Large","XLarge","sizeMap","small","default","large","xlarge","_templateObject","_excluded","createIconComponent","glyphs","Icon","_ref","glyph","rest","_objectWithoutProperties","SVGComponent","___EmotionJSX","displayName","propTypes","PropTypes","oneOf","Object","keys","isRequired","size","oneOfType","values","number","createGlyphComponent","glyphName","Glyph","GlyphComponent","_generateAccessiblePr","className","_ref$size","fill","title","ariaLabelledby","ariaLabel","_ref$role","role","fillStyle","css","renderedSize","console","warn","_extends","cx","_defineProperty","height","width","_ref2","name","aria-label","concat","replace","aria-hidden","alt","generateAccessibleProps","isGlyph","string","ActivityFeed","AddFile","Apps","Array","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Beaker","Bell","Building","Bulb","Calendar","CaretDown","CaretLeft","CaretRight","CaretUp","Charts","Checkmark","CheckmarkWithCircle","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","Clock","ClockWithArrow","Clone","Cloud","Code","Connect","Copy","CreditCard","CurlyBraces","Database","Diagram","Disconnect","Download","Edit","Ellipsis","Export","Favorite","File","Filter","FullScreenEnter","FullScreenExit","Folder","GlobeAmericas","GovernmentBuilding","Home","ImportantWithCircle","InfoWithCircle","InviteUser","Key","Laptop","Lock","MagnifyingGlass","Megaphone","Menu","Minus","NotAllowed","Note","OpenNewTab","Pause","Person","PersonGroup","PersonWithLock","Play","Plus","PlusWithCircle","QuestionMarkWithCircle","Redo","Refresh","ReplicaSet","Save","Serverless","ShardedCluster","Settings","Shell","SortAscending","SortDescending","Stitch","Support","Table","TimeSeries","Trash","Undo","University","Unlock","Unsorted","UpDownCarets","Upload","VerticalEllipsis","Visibility","VisibilityOff","Warning","X","XWithCircle","processedGlyphs","reduce","acc","child","_typeof","type"],"mappings":"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"}

package/dist/types/LGGlyph.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react';
+import * as SVGR from './SVGR';
+export interface ComponentProps extends SVGR.ComponentProps {
+    size?: number | 'small' | 'default' | 'large' | 'xlarge';
+}
+export declare type Component = ComponentType<ComponentProps>;
+//# sourceMappingURL=LGGlyph.d.ts.map

package/dist/types/LGGlyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGGlyph.d.ts","sourceRoot":"","sources":["../../src/types/LGGlyph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAE/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc;IACzD,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1D;AAED,oBAAY,SAAS,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC"}

package/dist/types/SVGR.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType, SVGProps } from 'react';
+export interface ComponentProps extends SVGProps<SVGSVGElement> {
+    title?: string | null;
+    role?: 'presentation' | 'img';
+}
+export declare type Component = ComponentType<ComponentProps>;
+//# sourceMappingURL=SVGR.d.ts.map

package/dist/types/SVGR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGR.d.ts","sourceRoot":"","sources":["../../src/types/SVGR.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhD,MAAM,WAAW,cAAe,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,cAAc,GAAG,KAAK,CAAC;CAC/B;AAED,oBAAY,SAAS,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * as SVGR from './SVGR';
+export * as LGGlyph from './LGGlyph';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.7.0",
+  "version": "11.8.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -24,7 +24,7 @@
     "xml2json": "^0.11.2"
   },
   "dependencies": {
-    "@leafygreen-ui/lib": "^9.0.1"
+    "@leafygreen-ui/lib": "^9.2.0"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0"
 }

package/src/Icon.spec.tsx

@@ -10,6 +10,7 @@ import { SVGR } from './types';
 import { createIconComponent, glyphs } from '.';
 import createGlyphComponent from './createGlyphComponent';
 import EditIcon from '@leafygreen-ui/icon/dist/Edit';
+import { Size } from './glyphCommon';
 
 function getBaseName(filePath: string): string {
   return path.basename(filePath, path.extname(filePath));
@@ -85,58 +86,105 @@ describe('packages/Icon/glyphs/', () => {
   });
 });
 
-const text = 'Hello world';
+const MyGlyph: SVGR.Component = props => (
+  <svg data-testid="my-glyph" {...props}></svg>
+);
 
-// eslint-disable-next-line react/display-name
-const MyGlyph: SVGR.Component = () => <div>{text}</div>;
-
-describe('packages/Icon/createGlyphComponent createGlyphComponent()', () => {
+describe('packages/Icon/createGlyphComponent', () => {
   const GlyphComponent = createGlyphComponent('MyGlyph', MyGlyph);
 
-  test('createGlyphComponent returns a function', () => {
+  test('returns a function', () => {
     expect(typeof GlyphComponent).toBe('function');
   });
 
-  test('The function returned by createGlyphComponent has the displayName: "MyGlyph"', () => {
+  test('returned function has correct display name', () => {
     expect(GlyphComponent.displayName).toBe('MyGlyph');
   });
 
-  const { container } = render(<GlyphComponent />);
-  const glyph = container.firstChild;
+  test('returned function renders the glyph specified', () => {
+    const { getByTestId } = render(<GlyphComponent />);
+    const glyph = getByTestId('my-glyph');
 
-  test('The function returned by createGlyphComponent renders the glyph specified', () => {
     if (!typeIs.element(glyph)) {
       throw new Error('Glyph was not rendered');
     }
+    expect(glyph.nodeName.toLowerCase()).toBe('svg');
+  });
+
+  describe('returned funcion passes through props', () => {
+    test('`size` prop as number', () => {
+      const { getByTestId } = render(<GlyphComponent size={20} />);
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
 
-    expect(glyph.nodeName.toLowerCase()).toBe('div');
-    expect(glyph.textContent).toBe(text);
+    test('`size` prop as Size', () => {
+      const { getByTestId } = render(<GlyphComponent size={Size.Large} />);
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
+
+    test('`role`', () => {
+      const { getByTestId } = render(<GlyphComponent role="presentation" />);
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('role', 'presentation');
+    });
   });
 });
 
-const customGlyphs = { MyGlyph };
+const customGlyphs = {
+  MyGlyph: createGlyphComponent('MyGlyph', MyGlyph),
+};
 
 describe('packages/Icon/createIconComponent', () => {
   const IconComponent = createIconComponent(customGlyphs);
 
-  test('createIconComponent returns a function', () => {
+  test('returns a function', () => {
     expect(typeof IconComponent).toBe('function');
   });
 
-  test('The function returned by createIconComponent has the displayName: "Icon"', () => {
+  test('returned function has the displayName: "Icon"', () => {
     expect(IconComponent.displayName).toBe('Icon');
   });
 
-  const renderedIcon = render(<IconComponent glyph="MyGlyph" />);
-  const glyph = renderedIcon.container.firstChild;
+  test('returned funciton renders the glyph specified', () => {
+    const { getByTestId } = render(<IconComponent glyph="MyGlyph" />);
+    const glyph = getByTestId('my-glyph');
 
-  test('The function returned by createIconComponent renders the glyph specified', () => {
     if (!typeIs.element(glyph)) {
       throw new Error('Glyph was not rendered');
     }
+    expect(glyph.nodeName.toLowerCase()).toBe('svg');
+  });
+
+  describe('returned funcion passes through props', () => {
+    test('`size` prop as number', () => {
+      const { getByTestId } = render(
+        <IconComponent glyph="MyGlyph" size={20} />,
+      );
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
 
-    expect(glyph.nodeName.toLowerCase()).toBe('div');
-    expect(glyph.textContent).toBe(text);
+    test('`size` prop as Size', () => {
+      const { getByTestId } = render(
+        <IconComponent glyph="MyGlyph" size={Size.Large} />,
+      );
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
+
+    test('`role`', () => {
+      const { getByTestId } = render(
+        <IconComponent glyph="MyGlyph" role="presentation" />,
+      );
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('role', 'presentation');
+    });
   });
 });
 

package/src/createGlyphComponent.tsx

@@ -4,6 +4,13 @@ import { SVGR, LGGlyph } from './types';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap, Size } from './glyphCommon';
 
+/**
+ * Returns a single glyph component.
+ * Process custom glyphs to ensure consistent behavior between custom and built-in icons
+ * @param glyphName: string - the display name of the icon
+ * @param Glyph: SVGR.Component - the SVG icon component
+ * @returns LGGlyph.Component
+ */
 export default function createGlyphComponent(
   glyphName: string,
   Glyph: SVGR.Component,

package/src/createIconComponent.tsx

@@ -11,6 +11,11 @@ export interface IconProps extends Omit<LGGlyph.ComponentProps, 'size'> {
 
 type GlyphObject = Record<string, LGGlyph.Component>;
 
+/**
+ * Returns a single component with a `glyph` prop to select the glyph
+ * @param glyphs The set of glyphs
+ * @returns Icon component
+ */
 export default function createIconComponent<
   G extends GlyphObject = GlyphObject
 >(glyphs: G) {

package/src/index.ts

@@ -1,8 +1,10 @@
 import createIconComponent from './createIconComponent';
 import glyphs from './glyphs';
 
+export { LGGlyph } from './types';
+export { Size } from './glyphCommon';
 export { default as createIconComponent } from './createIconComponent';
+export { default as createGlyphComponent } from './createGlyphComponent';
 export { default as glyphs } from './glyphs';
-export { Size } from './glyphCommon';
 export { isComponentGlyph } from './isComponentGlyph';
 export default createIconComponent(glyphs);

package/src/types/LGGlyph.ts

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

package/src/types/SVGR.ts

@@ -0,0 +1,8 @@
+import { ComponentType, SVGProps } from 'react';
+
+export interface ComponentProps extends SVGProps<SVGSVGElement> {
+  title?: string | null;
+  role?: 'presentation' | 'img';
+}
+
+export type Component = ComponentType<ComponentProps>;

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * as SVGR from './SVGR';
+export * as LGGlyph from './LGGlyph';

package/tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "dist",
     "rootDir": "src"
   },
-  "include": ["src/**/*", "typings/**/*"],
+  "include": ["src/**/*"],
   "references": [
     {
       "path": "../lib"