@leafygreen-ui/icon 11.16.1 → 11.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/README.md +7 -7
- package/dist/ThumbsDown.js +2 -0
- package/dist/ThumbsDown.js.map +1 -0
- package/dist/ThumbsUp.js +2 -0
- package/dist/ThumbsUp.js.map +1 -0
- package/dist/esm/ThumbsDown.js +2 -0
- package/dist/esm/ThumbsDown.js.map +1 -0
- package/dist/esm/ThumbsUp.js +2 -0
- package/dist/esm/ThumbsUp.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/generated/ThumbsDown.d.ts +17 -0
- package/dist/generated/ThumbsDown.d.ts.map +1 -0
- package/dist/generated/ThumbsUp.d.ts +17 -0
- package/dist/generated/ThumbsUp.d.ts.map +1 -0
- package/dist/glyphs/index.d.ts +9 -1
- package/dist/glyphs/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Icon.story.tsx +4 -1
- package/src/generated/ThumbsDown.tsx +67 -0
- package/src/generated/ThumbsUp.tsx +67 -0
- package/src/glyphs/ThumbsDown.svg +3 -0
- package/src/glyphs/ThumbsUp.svg +3 -0
- package/src/glyphs/index.ts +4 -0
- package/stories.js +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/glyphCommon.ts","../src/createGlyphComponent.tsx","../src/createIconComponent.tsx","../src/glyphs/index.ts","../src/Icon.tsx","../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';\n\nimport { css, cx } from '@leafygreen-ui/emotion';\n\nimport { generateAccessibleProps, Size, sizeMap } from './glyphCommon';\nimport { LGGlyph, SVGR } from './types';\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 function createGlyphComponent(\n glyphName: string,\n Glyph: SVGR.Component,\n): LGGlyph.Component {\n const GlyphComponent: LGGlyph.Component = ({\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 React from 'react';\nimport kebabCase from 'lodash/kebabCase';\nimport PropTypes from 'prop-types';\n\nimport { Size } from './glyphCommon';\nimport { LGGlyph } from './types';\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 /**\n * The name of the icon glyph\n */\n glyph: string;\n\n /**\n * Size of the icon\n */\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 function createIconComponent<G extends GlyphObject = GlyphObject>(\n glyphs: G,\n) {\n const Icon = ({ glyph, ...rest }: IconProps) => {\n const SVGComponent = glyphs[glyph];\n\n if (SVGComponent) {\n return <SVGComponent {...rest} />;\n } else {\n // TODO: improve fuzzy match\n // Suggest the proper icon casing if there's a near match\n const nearMatch = Object.keys(glyphs).find(\n key => kebabCase(key) === kebabCase(glyph),\n );\n console.error(\n 'Error in Icon',\n `Could not find glyph named \"${glyph}\" in the icon set.`,\n nearMatch && `Did you mean \"${nearMatch}?\"`,\n );\n return <></>;\n }\n };\n\n Icon.displayName = 'Icon';\n\n Icon.isGlyph = true;\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 { 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 Biometric from './Biometric.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 ChartFilled from './ChartFilled.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 Cursor from './Cursor.svg';\nimport Dashboard from './Dashboard.svg';\nimport Database from './Database.svg';\nimport Diagram from './Diagram.svg';\nimport Diagram2 from './Diagram2.svg';\nimport Diagram3 from './Diagram3.svg';\nimport Disconnect from './Disconnect.svg';\nimport Download from './Download.svg';\nimport Drag from './Drag.svg';\nimport Edit from './Edit.svg';\nimport Ellipsis from './Ellipsis.svg';\nimport Email from './Email.svg';\nimport Export from './Export.svg';\nimport Favorite from './Favorite.svg';\nimport File from './File.svg';\nimport Filter from './Filter.svg';\nimport Folder from './Folder.svg';\nimport FullScreenEnter from './FullScreenEnter.svg';\nimport FullScreenExit from './FullScreenExit.svg';\nimport Gauge from './Gauge.svg';\nimport GlobeAmericas from './GlobeAmericas.svg';\nimport GovernmentBuilding from './GovernmentBuilding.svg';\nimport Highlight from './Highlight.svg';\nimport Home from './Home.svg';\nimport Import from './Import.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 Link from './Link.svg';\nimport Lock from './Lock.svg';\nimport LogIn from './LogIn.svg';\nimport LogOut from './LogOut.svg';\nimport MagnifyingGlass from './MagnifyingGlass.svg';\nimport Megaphone from './Megaphone.svg';\nimport Menu from './Menu.svg';\nimport Minus from './Minus.svg';\nimport NoFilter from './NoFilter.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 Read from './Read.svg';\nimport Redo from './Redo.svg';\nimport Refresh from './Refresh.svg';\nimport Relationship from './Relationship.svg';\nimport ReplicaSet from './ReplicaSet.svg';\nimport Resize from './Resize.svg';\nimport Save from './Save.svg';\nimport Serverless from './Serverless.svg';\nimport Settings from './Settings.svg';\nimport ShardedCluster from './ShardedCluster.svg';\nimport Shell from './Shell.svg';\nimport SMS from './SMS.svg';\nimport SortAscending from './SortAscending.svg';\nimport SortDescending from './SortDescending.svg';\nimport SplitHorizontal from './SplitHorizontal.svg';\nimport SplitVertical from './SplitVertical.svg';\nimport Stitch from './Stitch.svg';\nimport Support from './Support.svg';\nimport Sweep from './Sweep.svg';\nimport Table from './Table.svg';\nimport Tag from './Tag.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 Wizard from './Wizard.svg';\nimport Wrench from './Wrench.svg';\nimport Write from './Write.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 Biometric,\n Building,\n Bulb,\n Calendar,\n CaretDown,\n CaretLeft,\n CaretRight,\n CaretUp,\n ChartFilled,\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 Cursor,\n Dashboard,\n Database,\n Diagram,\n Diagram2,\n Diagram3,\n Disconnect,\n Download,\n Drag,\n Edit,\n Ellipsis,\n Email,\n Export,\n Favorite,\n File,\n Filter,\n FullScreenEnter,\n FullScreenExit,\n Folder,\n Gauge,\n GlobeAmericas,\n GovernmentBuilding,\n Highlight,\n Home,\n Import,\n ImportantWithCircle,\n InfoWithCircle,\n InviteUser,\n Key,\n Laptop,\n Link,\n Lock,\n LogIn,\n LogOut,\n MagnifyingGlass,\n Megaphone,\n Menu,\n Minus,\n NoFilter,\n NotAllowed,\n Note,\n OpenNewTab,\n Pause,\n Person,\n PersonGroup,\n PersonWithLock,\n Play,\n Plus,\n PlusWithCircle,\n QuestionMarkWithCircle,\n Read,\n Redo,\n Refresh,\n Relationship,\n ReplicaSet,\n Resize,\n Save,\n Serverless,\n ShardedCluster,\n Settings,\n Shell,\n SMS,\n SortAscending,\n SortDescending,\n SplitHorizontal,\n SplitVertical,\n Stitch,\n Support,\n Sweep,\n Table,\n Tag,\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 Wizard,\n Wrench,\n Write,\n X,\n XWithCircle,\n} as const;\n\nexport type GlyphName = keyof typeof _glyphs;\n\nconst glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;\n\nexport const glyphs = glyphKeys.reduce((acc, name) => {\n acc[name] = createGlyphComponent(name, _glyphs[name]);\n\n return acc;\n}, {} as Record<GlyphName, LGGlyph.Component>);\n","import { createIconComponent } from './createIconComponent';\nimport { glyphs } from './glyphs';\n\nexport const Icon = createIconComponent(glyphs);\n","import { ComponentType, isValidElement, ReactNode } from 'react';\n\nimport { LGGlyph } from './types';\n\ntype ExtendedComponentType = ComponentType<any> & {\n [key: string]: any;\n};\n/**\n * Helper type to check if element is a LeafyGreen UI Glyph\n * @internal\n */\nfunction isComponentGlyph(node: ReactNode): node is LGGlyph.Element;\nfunction isComponentGlyph(\n component: ExtendedComponentType,\n): component is LGGlyph.Component;\nfunction isComponentGlyph(\n child: ReactNode | ExtendedComponentType,\n): child is LGGlyph.Element | LGGlyph.Component {\n // If we're received a rendered component (i.e. ReactNode)\n if (isValidElement(child)) {\n return (\n child != null &&\n typeof child === 'object' &&\n 'type' in child &&\n (child.type as any).isGlyph === true\n );\n }\n\n // If we've recieved a component function\n return (\n child != null &&\n typeof child === 'function' &&\n 'isGlyph' in child &&\n child.isGlyph === true\n );\n}\n\nexport { isComponentGlyph };\n"],"names":["_templateObject","Size","Small","Default","Large","XLarge","sizeMap","small","default","large","xlarge","_excluded","createGlyphComponent","glyphName","Glyph","GlyphComponent","_ref","_generateAccessiblePr","className","_ref$size","size","fill","title","ariaLabelledby","ariaLabel","_ref$role","role","rest","_objectWithoutProperties","fillStyle","css","renderedSize","console","warn","React","createElement","_extends","cx","_defineProperty","height","width","_ref2","name","concat","replace","alt","generateAccessibleProps","displayName","isGlyph","propTypes","PropTypes","string","oneOfType","oneOf","Object","values","number","createIconComponent","glyphs","Icon","glyph","SVGComponent","nearMatch","keys","find","key","kebabCase","error","Fragment","isRequired","_glyphs","ActivityFeed","AddFile","Apps","Array","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Beaker","Bell","Biometric","Building","Bulb","Calendar","CaretDown","CaretLeft","CaretRight","CaretUp","ChartFilled","Charts","Checkmark","CheckmarkWithCircle","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","Clock","ClockWithArrow","Clone","Cloud","Code","Connect","Copy","CreditCard","CurlyBraces","Cursor","Dashboard","Database","Diagram","Diagram2","Diagram3","Disconnect","Download","Drag","Edit","Ellipsis","Email","Export","Favorite","File","Filter","FullScreenEnter","FullScreenExit","Folder","Gauge","GlobeAmericas","GovernmentBuilding","Highlight","Home","Import","ImportantWithCircle","InfoWithCircle","InviteUser","Key","Laptop","Link","Lock","LogIn","LogOut","MagnifyingGlass","Megaphone","Menu","Minus","NoFilter","NotAllowed","Note","OpenNewTab","Pause","Person","PersonGroup","PersonWithLock","Play","Plus","PlusWithCircle","QuestionMarkWithCircle","Read","Redo","Refresh","Relationship","ReplicaSet","Resize","Save","Serverless","ShardedCluster","Settings","Shell","SMS","SortAscending","SortDescending","SplitHorizontal","SplitVertical","Stitch","Support","Sweep","Table","Tag","TimeSeries","Trash","Undo","University","Unlock","Unsorted","UpDownCarets","Upload","VerticalEllipsis","Visibility","VisibilityOff","Warning","Wizard","Wrench","Write","X","XWithCircle","reduce","acc","child","isValidElement","_typeof","type"],"mappings":"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AC,mYACAC,gnBACAC,6mBACAC,ySACAC,gdACAC,2bACAC,siBACAC,6pBACAC,ioBACAC,qmBACAC,iWACAC,iYACAC,koBACAC,2aACAC,gjBACAC,41BACAC,qaACAC,grBACAC,qvBACAC,4bACAC,kaACAC,2UACAC,8QACAC,idACAC,gZACAC,0hBACAC,mrBACAC,kVACAC,8kBACAC,0wBACAC,otBACAC,wTACAC,+XACAC,+VACAC,8pBACAC,guCACAC,yhBACAC,ywBACAC,ibACAC,6eACAC,6aACAC,ylCACAC,kYACAC,ovBACAC,8lCACAC,8aACAC,ueACAC,2dACAC,+dACAC,mWACAC,2VACAC,qTACAC,8bACAC,yxBACAC,wcACAC,qYACAC,6mBACAC,mXACAC,+gBACAC,i5BACAC,meACAC,0jBACAC,scACAC,yjBACAC,gZACAC,4xBACAC,ooCACAC,oaACAC,gvBACAC,8pBACAC,+tCACAC,+fACAC,ucAGSvI,GADKJ,OAAOS,KAAKO,IACE4H,QAAO,SAAUC,EAAKzJ,GAElD,OADAyJ,EAAIzJ,GAAQ9B,EAAqB8B,EAAM4B,GAAQ5B,IACxCyJ,IACN,IC5PQxI,GAAOF,GAAoBC,+JCMtC,SAA0B0I,GAExB,OAAkBC,EAAAA,eAAeD,GACf,MAATA,GAAoC,WAAnBE,EAAQF,IAAuB,SAAUA,IAAgC,IAAvBA,EAAMG,KAAKvJ,QAIvE,MAAToJ,GAAkC,mBAAVA,GAAwB,YAAaA,IAA2B,IAAlBA,EAAMpJ"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/glyphCommon.ts","../src/createGlyphComponent.tsx","../src/createIconComponent.tsx","../src/glyphs/index.ts","../src/Icon.tsx","../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';\n\nimport { css, cx } from '@leafygreen-ui/emotion';\n\nimport { generateAccessibleProps, Size, sizeMap } from './glyphCommon';\nimport { LGGlyph, SVGR } from './types';\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 function createGlyphComponent(\n glyphName: string,\n Glyph: SVGR.Component,\n): LGGlyph.Component {\n const GlyphComponent: LGGlyph.Component = ({\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 React from 'react';\nimport kebabCase from 'lodash/kebabCase';\nimport PropTypes from 'prop-types';\n\nimport { Size } from './glyphCommon';\nimport { LGGlyph } from './types';\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 /**\n * The name of the icon glyph\n */\n glyph: string;\n\n /**\n * Size of the icon\n */\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 function createIconComponent<G extends GlyphObject = GlyphObject>(\n glyphs: G,\n) {\n const Icon = ({ glyph, ...rest }: IconProps) => {\n const SVGComponent = glyphs[glyph];\n\n if (SVGComponent) {\n return <SVGComponent {...rest} />;\n } else {\n // TODO: improve fuzzy match\n // Suggest the proper icon casing if there's a near match\n const nearMatch = Object.keys(glyphs).find(\n key => kebabCase(key) === kebabCase(glyph),\n );\n console.error(\n 'Error in Icon',\n `Could not find glyph named \"${glyph}\" in the icon set.`,\n nearMatch && `Did you mean \"${nearMatch}?\"`,\n );\n return <></>;\n }\n };\n\n Icon.displayName = 'Icon';\n\n Icon.isGlyph = true;\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 { 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 Biometric from './Biometric.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 ChartFilled from './ChartFilled.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 Cursor from './Cursor.svg';\nimport Dashboard from './Dashboard.svg';\nimport Database from './Database.svg';\nimport Diagram from './Diagram.svg';\nimport Diagram2 from './Diagram2.svg';\nimport Diagram3 from './Diagram3.svg';\nimport Disconnect from './Disconnect.svg';\nimport Download from './Download.svg';\nimport Drag from './Drag.svg';\nimport Edit from './Edit.svg';\nimport Ellipsis from './Ellipsis.svg';\nimport Email from './Email.svg';\nimport Export from './Export.svg';\nimport Favorite from './Favorite.svg';\nimport File from './File.svg';\nimport Filter from './Filter.svg';\nimport Folder from './Folder.svg';\nimport FullScreenEnter from './FullScreenEnter.svg';\nimport FullScreenExit from './FullScreenExit.svg';\nimport Gauge from './Gauge.svg';\nimport GlobeAmericas from './GlobeAmericas.svg';\nimport GovernmentBuilding from './GovernmentBuilding.svg';\nimport Highlight from './Highlight.svg';\nimport Home from './Home.svg';\nimport Import from './Import.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 Link from './Link.svg';\nimport Lock from './Lock.svg';\nimport LogIn from './LogIn.svg';\nimport LogOut from './LogOut.svg';\nimport MagnifyingGlass from './MagnifyingGlass.svg';\nimport Megaphone from './Megaphone.svg';\nimport Menu from './Menu.svg';\nimport Minus from './Minus.svg';\nimport NoFilter from './NoFilter.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 Read from './Read.svg';\nimport Redo from './Redo.svg';\nimport Refresh from './Refresh.svg';\nimport Relationship from './Relationship.svg';\nimport ReplicaSet from './ReplicaSet.svg';\nimport Resize from './Resize.svg';\nimport Save from './Save.svg';\nimport Serverless from './Serverless.svg';\nimport Settings from './Settings.svg';\nimport ShardedCluster from './ShardedCluster.svg';\nimport Shell from './Shell.svg';\nimport SMS from './SMS.svg';\nimport SortAscending from './SortAscending.svg';\nimport SortDescending from './SortDescending.svg';\nimport SplitHorizontal from './SplitHorizontal.svg';\nimport SplitVertical from './SplitVertical.svg';\nimport Stitch from './Stitch.svg';\nimport Support from './Support.svg';\nimport Sweep from './Sweep.svg';\nimport Table from './Table.svg';\nimport Tag from './Tag.svg';\nimport ThumbsDown from './ThumbsDown.svg';\nimport ThumbsUp from './ThumbsUp.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 Wizard from './Wizard.svg';\nimport Wrench from './Wrench.svg';\nimport Write from './Write.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 Biometric,\n Building,\n Bulb,\n Calendar,\n CaretDown,\n CaretLeft,\n CaretRight,\n CaretUp,\n ChartFilled,\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 Cursor,\n Dashboard,\n Database,\n Diagram,\n Diagram2,\n Diagram3,\n Disconnect,\n Download,\n Drag,\n Edit,\n Ellipsis,\n Email,\n Export,\n Favorite,\n File,\n Filter,\n FullScreenEnter,\n FullScreenExit,\n Folder,\n Gauge,\n GlobeAmericas,\n GovernmentBuilding,\n Highlight,\n Home,\n Import,\n ImportantWithCircle,\n InfoWithCircle,\n InviteUser,\n Key,\n Laptop,\n Link,\n Lock,\n LogIn,\n LogOut,\n MagnifyingGlass,\n Megaphone,\n Menu,\n Minus,\n NoFilter,\n NotAllowed,\n Note,\n OpenNewTab,\n Pause,\n Person,\n PersonGroup,\n PersonWithLock,\n Play,\n Plus,\n PlusWithCircle,\n QuestionMarkWithCircle,\n Read,\n Redo,\n Refresh,\n Relationship,\n ReplicaSet,\n Resize,\n Save,\n Serverless,\n ShardedCluster,\n Settings,\n Shell,\n SMS,\n SortAscending,\n SortDescending,\n SplitHorizontal,\n SplitVertical,\n Stitch,\n Support,\n Sweep,\n Table,\n Tag,\n ThumbsDown,\n ThumbsUp,\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 Wizard,\n Wrench,\n Write,\n X,\n XWithCircle,\n} as const;\n\nexport type GlyphName = keyof typeof _glyphs;\n\nconst glyphKeys = Object.keys(_glyphs) as Array<GlyphName>;\n\nexport const glyphs = glyphKeys.reduce((acc, name) => {\n acc[name] = createGlyphComponent(name, _glyphs[name]);\n\n return acc;\n}, {} as Record<GlyphName, LGGlyph.Component>);\n","import { createIconComponent } from './createIconComponent';\nimport { glyphs } from './glyphs';\n\nexport const Icon = createIconComponent(glyphs);\n","import { ComponentType, isValidElement, ReactNode } from 'react';\n\nimport { LGGlyph } from './types';\n\ntype ExtendedComponentType = ComponentType<any> & {\n [key: string]: any;\n};\n/**\n * Helper type to check if element is a LeafyGreen UI Glyph\n * @internal\n */\nfunction isComponentGlyph(node: ReactNode): node is LGGlyph.Element;\nfunction isComponentGlyph(\n component: ExtendedComponentType,\n): component is LGGlyph.Component;\nfunction isComponentGlyph(\n child: ReactNode | ExtendedComponentType,\n): child is LGGlyph.Element | LGGlyph.Component {\n // If we're received a rendered component (i.e. ReactNode)\n if (isValidElement(child)) {\n return (\n child != null &&\n typeof child === 'object' &&\n 'type' in child &&\n (child.type as any).isGlyph === true\n );\n }\n\n // If we've recieved a component function\n return (\n child != null &&\n typeof child === 'function' &&\n 'isGlyph' in child &&\n child.isGlyph === true\n );\n}\n\nexport { isComponentGlyph };\n"],"names":["_templateObject","Size","Small","Default","Large","XLarge","sizeMap","small","default","large","xlarge","_excluded","createGlyphComponent","glyphName","Glyph","GlyphComponent","_ref","_generateAccessiblePr","className","_ref$size","size","fill","title","ariaLabelledby","ariaLabel","_ref$role","role","rest","_objectWithoutProperties","fillStyle","css","renderedSize","console","warn","React","createElement","_extends","cx","_defineProperty","height","width","_ref2","name","concat","replace","alt","generateAccessibleProps","displayName","isGlyph","propTypes","PropTypes","string","oneOfType","oneOf","Object","values","number","createIconComponent","glyphs","Icon","glyph","SVGComponent","nearMatch","keys","find","key","kebabCase","error","Fragment","isRequired","_glyphs","ActivityFeed","AddFile","Apps","Array","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Beaker","Bell","Biometric","Building","Bulb","Calendar","CaretDown","CaretLeft","CaretRight","CaretUp","ChartFilled","Charts","Checkmark","CheckmarkWithCircle","ChevronDown","ChevronLeft","ChevronRight","ChevronUp","Clock","ClockWithArrow","Clone","Cloud","Code","Connect","Copy","CreditCard","CurlyBraces","Cursor","Dashboard","Database","Diagram","Diagram2","Diagram3","Disconnect","Download","Drag","Edit","Ellipsis","Email","Export","Favorite","File","Filter","FullScreenEnter","FullScreenExit","Folder","Gauge","GlobeAmericas","GovernmentBuilding","Highlight","Home","Import","ImportantWithCircle","InfoWithCircle","InviteUser","Key","Laptop","Link","Lock","LogIn","LogOut","MagnifyingGlass","Megaphone","Menu","Minus","NoFilter","NotAllowed","Note","OpenNewTab","Pause","Person","PersonGroup","PersonWithLock","Play","Plus","PlusWithCircle","QuestionMarkWithCircle","Read","Redo","Refresh","Relationship","ReplicaSet","Resize","Save","Serverless","ShardedCluster","Settings","Shell","SMS","SortAscending","SortDescending","SplitHorizontal","SplitVertical","Stitch","Support","Sweep","Table","Tag","ThumbsDown","ThumbsUp","TimeSeries","Trash","Undo","University","Unlock","Unsorted","UpDownCarets","Upload","VerticalEllipsis","Visibility","VisibilityOff","Warning","Wizard","Wrench","Write","X","XWithCircle","reduce","acc","child","isValidElement","_typeof","type"],"mappings":"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AC,mYACAC,gnBACAC,6mBACAC,ySACAC,gdACAC,2bACAC,siBACAC,6pBACAC,ioBACAC,qmBACAC,iWACAC,iYACAC,koBACAC,2aACAC,gjBACAC,41BACAC,qaACAC,grBACAC,qvBACAC,4bACAC,kaACAC,2UACAC,8QACAC,idACAC,gZACAC,0hBACAC,mrBACAC,kVACAC,8kBACAC,0wBACAC,otBACAC,wTACAC,+XACAC,+VACAC,8pBACAC,guCACAC,yhBACAC,ywBACAC,ibACAC,6eACAC,6aACAC,ylCACAC,kYACAC,ovBACAC,8lCACAC,8aACAC,ueACAC,2dACAC,+dACAC,mWACAC,2VACAC,qTACAC,8bACAC,yxBACAC,wcACAC,qYACAC,ooBACAC,ynBACAC,6mBACAC,mXACAC,+gBACAC,i5BACAC,meACAC,0jBACAC,scACAC,yjBACAC,gZACAC,4xBACAC,ooCACAC,oaACAC,gvBACAC,8pBACAC,+tCACAC,+fACAC,ucAGSzI,GADKJ,OAAOS,KAAKO,IACE8H,QAAO,SAAUC,EAAK3J,GAElD,OADA2J,EAAI3J,GAAQ9B,EAAqB8B,EAAM4B,GAAQ5B,IACxC2J,IACN,IChQQ1I,GAAOF,GAAoBC,+JCMtC,SAA0B4I,GAExB,OAAkBC,EAAAA,eAAeD,GACf,MAATA,GAAoC,WAAnBE,EAAQF,IAAuB,SAAUA,IAAgC,IAAvBA,EAAMG,KAAKzJ,QAIvE,MAATsJ,GAAkC,mBAAVA,GAAwB,YAAaA,IAA2B,IAAlBA,EAAMtJ"}
|
package/package.json
CHANGED
package/src/Icon.story.tsx
CHANGED
|
@@ -6,6 +6,7 @@ import { css } from '@leafygreen-ui/emotion';
|
|
|
6
6
|
import {
|
|
7
7
|
storybookExcludedControlParams,
|
|
8
8
|
StoryMetaType,
|
|
9
|
+
StoryType,
|
|
9
10
|
} from '@leafygreen-ui/lib';
|
|
10
11
|
import { palette } from '@leafygreen-ui/palette';
|
|
11
12
|
|
|
@@ -53,7 +54,7 @@ const textStyle = css`
|
|
|
53
54
|
margin-top: 0.5rem;
|
|
54
55
|
`;
|
|
55
56
|
|
|
56
|
-
export const Single:
|
|
57
|
+
export const Single: StoryType<typeof Icon> = (args: IconProps) => {
|
|
57
58
|
if (!args.glyph) {
|
|
58
59
|
args = {
|
|
59
60
|
...args,
|
|
@@ -70,6 +71,7 @@ Single.argTypes = {
|
|
|
70
71
|
options: Object.keys(glyphs),
|
|
71
72
|
},
|
|
72
73
|
};
|
|
74
|
+
Single.parameters = { chromatic: { disableSnapshot: true } };
|
|
73
75
|
|
|
74
76
|
export const AllIcons: StoryFn<IconProps> = (
|
|
75
77
|
args: Omit<IconProps, 'glyph'>,
|
|
@@ -93,3 +95,4 @@ export const AllIcons: StoryFn<IconProps> = (
|
|
|
93
95
|
);
|
|
94
96
|
|
|
95
97
|
export const Error = () => <Icon glyph="glyph-does-not-exist" />;
|
|
98
|
+
Error.parameters = { chromatic: { disableSnapshot: true } };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This is a generated file. Do not modify it manually.
|
|
3
|
+
*
|
|
4
|
+
* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
|
|
5
|
+
* @checksum 3769b90f5d31bc34a7d517f152aaeb88
|
|
6
|
+
*/
|
|
7
|
+
import { css, cx } from '@leafygreen-ui/emotion';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
|
|
11
|
+
import { generateAccessibleProps, sizeMap } from '../glyphCommon';
|
|
12
|
+
import { LGGlyph } from '../types';
|
|
13
|
+
export interface ThumbsDownProps extends LGGlyph.ComponentProps {}
|
|
14
|
+
const ThumbsDown = ({
|
|
15
|
+
className,
|
|
16
|
+
size = 16,
|
|
17
|
+
title,
|
|
18
|
+
['aria-label']: ariaLabel,
|
|
19
|
+
['aria-labelledby']: ariaLabelledby,
|
|
20
|
+
fill,
|
|
21
|
+
role = 'img',
|
|
22
|
+
...props
|
|
23
|
+
}: ThumbsDownProps) => {
|
|
24
|
+
const fillStyle = css`
|
|
25
|
+
color: ${fill};
|
|
26
|
+
`;
|
|
27
|
+
const noFlexShrink = css`
|
|
28
|
+
flex-shrink: 0;
|
|
29
|
+
`;
|
|
30
|
+
const accessibleProps = generateAccessibleProps(role, 'ThumbsDown', {
|
|
31
|
+
title,
|
|
32
|
+
['aria-label']: ariaLabel,
|
|
33
|
+
['aria-labelledby']: ariaLabelledby,
|
|
34
|
+
});
|
|
35
|
+
return (
|
|
36
|
+
<svg
|
|
37
|
+
className={cx(
|
|
38
|
+
{
|
|
39
|
+
[fillStyle]: fill != null,
|
|
40
|
+
},
|
|
41
|
+
noFlexShrink,
|
|
42
|
+
className,
|
|
43
|
+
)}
|
|
44
|
+
height={typeof size === 'number' ? size : sizeMap[size]}
|
|
45
|
+
width={typeof size === 'number' ? size : sizeMap[size]}
|
|
46
|
+
role={role}
|
|
47
|
+
{...accessibleProps}
|
|
48
|
+
{...props}
|
|
49
|
+
viewBox="0 0 16 16"
|
|
50
|
+
>
|
|
51
|
+
<path
|
|
52
|
+
fillRule="evenodd"
|
|
53
|
+
clipRule="evenodd"
|
|
54
|
+
d="M8.01852 15C8.53023 15 8.99812 14.7199 9.22744 14.2764L11.728 9.43945C11.7542 9.38879 11.7773 9.33683 11.7972 9.28386C11.8277 9.28652 11.8584 9.28788 11.8896 9.28788L13.9843 9.28788C14.5453 9.28788 15 8.84694 15 8.30303L15 3.18182C15 2.6379 14.5453 2 13.9844 2L11.8896 2C11.6144 2 11 2 11 2C11 2 10.3639 2 9.85827 2L3.99311 2C3.02273 2 2.18787 2.66552 2.00017 3.5887L1.03904 8.31597C0.791531 9.53331 1.7524 10.6667 3.03198 10.6667L5.31958 10.6667L5.31958 12.3829C5.31958 13.8283 6.52794 15 8.01852 15ZM9.85827 8.66091L7.65371 12.9252C7.47137 12.8096 7.35088 12.6099 7.35088 12.3829L7.35088 10.0758C7.35088 9.31427 6.71427 8.69697 5.92897 8.69697L3.64387 8.69697C3.32769 8.69697 3.09089 8.40718 3.15389 8.09735L3.9117 4.37008C3.95907 4.1371 4.16394 3.9697 4.40168 3.9697L9.85827 3.9697L9.85827 8.66091Z"
|
|
55
|
+
fill={'currentColor'}
|
|
56
|
+
/>
|
|
57
|
+
</svg>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
ThumbsDown.displayName = 'ThumbsDown';
|
|
61
|
+
ThumbsDown.isGlyph = true;
|
|
62
|
+
ThumbsDown.propTypes = {
|
|
63
|
+
fill: PropTypes.string,
|
|
64
|
+
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
65
|
+
className: PropTypes.string,
|
|
66
|
+
};
|
|
67
|
+
export default ThumbsDown;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This is a generated file. Do not modify it manually.
|
|
3
|
+
*
|
|
4
|
+
* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
|
|
5
|
+
* @checksum 0b77533073b39d30f99e7b2c246febd9
|
|
6
|
+
*/
|
|
7
|
+
import { css, cx } from '@leafygreen-ui/emotion';
|
|
8
|
+
import PropTypes from 'prop-types';
|
|
9
|
+
import * as React from 'react';
|
|
10
|
+
|
|
11
|
+
import { generateAccessibleProps, sizeMap } from '../glyphCommon';
|
|
12
|
+
import { LGGlyph } from '../types';
|
|
13
|
+
export interface ThumbsUpProps extends LGGlyph.ComponentProps {}
|
|
14
|
+
const ThumbsUp = ({
|
|
15
|
+
className,
|
|
16
|
+
size = 16,
|
|
17
|
+
title,
|
|
18
|
+
['aria-label']: ariaLabel,
|
|
19
|
+
['aria-labelledby']: ariaLabelledby,
|
|
20
|
+
fill,
|
|
21
|
+
role = 'img',
|
|
22
|
+
...props
|
|
23
|
+
}: ThumbsUpProps) => {
|
|
24
|
+
const fillStyle = css`
|
|
25
|
+
color: ${fill};
|
|
26
|
+
`;
|
|
27
|
+
const noFlexShrink = css`
|
|
28
|
+
flex-shrink: 0;
|
|
29
|
+
`;
|
|
30
|
+
const accessibleProps = generateAccessibleProps(role, 'ThumbsUp', {
|
|
31
|
+
title,
|
|
32
|
+
['aria-label']: ariaLabel,
|
|
33
|
+
['aria-labelledby']: ariaLabelledby,
|
|
34
|
+
});
|
|
35
|
+
return (
|
|
36
|
+
<svg
|
|
37
|
+
className={cx(
|
|
38
|
+
{
|
|
39
|
+
[fillStyle]: fill != null,
|
|
40
|
+
},
|
|
41
|
+
noFlexShrink,
|
|
42
|
+
className,
|
|
43
|
+
)}
|
|
44
|
+
height={typeof size === 'number' ? size : sizeMap[size]}
|
|
45
|
+
width={typeof size === 'number' ? size : sizeMap[size]}
|
|
46
|
+
role={role}
|
|
47
|
+
{...accessibleProps}
|
|
48
|
+
{...props}
|
|
49
|
+
viewBox="0 0 16 16"
|
|
50
|
+
>
|
|
51
|
+
<path
|
|
52
|
+
fillRule="evenodd"
|
|
53
|
+
clipRule="evenodd"
|
|
54
|
+
d="M7.98148 1C7.46977 1 7.00188 1.28007 6.77256 1.72365L4.27198 6.56054C4.24579 6.61121 4.22269 6.66317 4.20275 6.71614C4.17234 6.71348 4.14155 6.71212 4.11043 6.71212H2.01565C1.45472 6.71212 1 7.15306 1 7.69697V12.8182C1 13.3621 1.45472 14 2.01565 14H4.11043C4.38564 14 5 14 5 14C5 14 5.63614 14 6.14173 14H12.0069C12.9773 14 13.8121 13.3345 13.9998 12.4113L14.961 7.68402C15.2085 6.46669 14.2476 5.33333 12.968 5.33333H10.6804V3.61709C10.6804 2.17171 9.47206 1 7.98148 1ZM6.14173 7.33909L8.34629 3.0748C8.52863 3.19038 8.64912 3.39009 8.64912 3.61709V5.92424C8.64912 6.68572 9.28573 7.30303 10.071 7.30303H12.3561C12.6723 7.30303 12.9091 7.59282 12.8461 7.90265L12.0883 11.6299C12.0409 11.8629 11.8361 12.0303 11.5983 12.0303L6.14173 12.0303V7.33909Z"
|
|
55
|
+
fill={'currentColor'}
|
|
56
|
+
/>
|
|
57
|
+
</svg>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
ThumbsUp.displayName = 'ThumbsUp';
|
|
61
|
+
ThumbsUp.isGlyph = true;
|
|
62
|
+
ThumbsUp.propTypes = {
|
|
63
|
+
fill: PropTypes.string,
|
|
64
|
+
size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
65
|
+
className: PropTypes.string,
|
|
66
|
+
};
|
|
67
|
+
export default ThumbsUp;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="#000" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.01852 15C8.53023 15 8.99812 14.7199 9.22744 14.2764L11.728 9.43945C11.7542 9.38879 11.7773 9.33683 11.7972 9.28386C11.8277 9.28652 11.8584 9.28788 11.8896 9.28788L13.9843 9.28788C14.5453 9.28788 15 8.84694 15 8.30303L15 3.18182C15 2.6379 14.5453 2 13.9844 2L11.8896 2C11.6144 2 11 2 11 2C11 2 10.3639 2 9.85827 2L3.99311 2C3.02273 2 2.18787 2.66552 2.00017 3.5887L1.03904 8.31597C0.791531 9.53331 1.7524 10.6667 3.03198 10.6667L5.31958 10.6667L5.31958 12.3829C5.31958 13.8283 6.52794 15 8.01852 15ZM9.85827 8.66091L7.65371 12.9252C7.47137 12.8096 7.35088 12.6099 7.35088 12.3829L7.35088 10.0758C7.35088 9.31427 6.71427 8.69697 5.92897 8.69697L3.64387 8.69697C3.32769 8.69697 3.09089 8.40718 3.15389 8.09735L3.9117 4.37008C3.95907 4.1371 4.16394 3.9697 4.40168 3.9697L9.85827 3.9697L9.85827 8.66091Z" fill="#000"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="#000" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.98148 1C7.46977 1 7.00188 1.28007 6.77256 1.72365L4.27198 6.56054C4.24579 6.61121 4.22269 6.66317 4.20275 6.71614C4.17234 6.71348 4.14155 6.71212 4.11043 6.71212H2.01565C1.45472 6.71212 1 7.15306 1 7.69697V12.8182C1 13.3621 1.45472 14 2.01565 14H4.11043C4.38564 14 5 14 5 14C5 14 5.63614 14 6.14173 14H12.0069C12.9773 14 13.8121 13.3345 13.9998 12.4113L14.961 7.68402C15.2085 6.46669 14.2476 5.33333 12.968 5.33333H10.6804V3.61709C10.6804 2.17171 9.47206 1 7.98148 1ZM6.14173 7.33909L8.34629 3.0748C8.52863 3.19038 8.64912 3.39009 8.64912 3.61709V5.92424C8.64912 6.68572 9.28573 7.30303 10.071 7.30303H12.3561C12.6723 7.30303 12.9091 7.59282 12.8461 7.90265L12.0883 11.6299C12.0409 11.8629 11.8361 12.0303 11.5983 12.0303L6.14173 12.0303V7.33909Z" fill="#000"/>
|
|
3
|
+
</svg>
|
package/src/glyphs/index.ts
CHANGED
|
@@ -108,6 +108,8 @@ import Support from './Support.svg';
|
|
|
108
108
|
import Sweep from './Sweep.svg';
|
|
109
109
|
import Table from './Table.svg';
|
|
110
110
|
import Tag from './Tag.svg';
|
|
111
|
+
import ThumbsDown from './ThumbsDown.svg';
|
|
112
|
+
import ThumbsUp from './ThumbsUp.svg';
|
|
111
113
|
import TimeSeries from './TimeSeries.svg';
|
|
112
114
|
import Trash from './Trash.svg';
|
|
113
115
|
import Undo from './Undo.svg';
|
|
@@ -233,6 +235,8 @@ const _glyphs = {
|
|
|
233
235
|
Sweep,
|
|
234
236
|
Table,
|
|
235
237
|
Tag,
|
|
238
|
+
ThumbsDown,
|
|
239
|
+
ThumbsUp,
|
|
236
240
|
TimeSeries,
|
|
237
241
|
Trash,
|
|
238
242
|
Undo,
|