diff --git a/.changeset/shiny-experts-prove.md b/.changeset/shiny-experts-prove.md index 9826e10a69..acdb283c48 100644 --- a/.changeset/shiny-experts-prove.md +++ b/.changeset/shiny-experts-prove.md @@ -2,4 +2,4 @@ '@leafygreen-ui/icon': minor --- -Adds GraduationHat icon to glyph set +Adds `'Cap'` icon to glyph set diff --git a/packages/icon/README.md b/packages/icon/README.md index ff1bd35eb0..2f3e560c1c 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -47,13 +47,13 @@ const SomeComponent = () => ; ## Properties -| Prop | Type | Description | Default | -| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `glyph` (Required) | `'ActivityFeed'`, `'AddFile'`, `'AllProducts'`, `'Apps'`, `'Array'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Beaker'`, `'Bell'`, `'Biometric'`, `'Boolean'`, `'Building'`, `'Bulb'`, `'Calendar'`, `'Camera'`, `'CaretDown'`, `'CaretLeft'`, `'CaretRight'`, `'CaretUp'`, `'ChartFilled'`, `'Charts'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronDown'`,, `'ChevronLeft'` `'ChevronRight'`,`'ChevronUp'`, `'Clock'`,`'ClockWithArrow'`, `'Clone'`, `'Cloud'`, `'Code'`, `'CodeBlock'`, `'Colon'`, `'Connect'`,`'Copy'`,`'CreditCard'`, `'CurlyBraces'`, `'Dashboard'`, `'Database'`, `'Diagram'`, `'Diagram2'`, `'Diagram3'`, `'Disconnect'`, `'Download'`, `'Drag'`, `'Edit'`, `'Ellipsis'`, `'Email'`, `'Export'`, `'Favorite'`, `'Federation'`, `'File'`, `'Filter'`,`'Folder'`, `'FullScreenEnter'`, `'FullScreenExit'`, `'Guage'`, `'GlobeAmericas'`, `'GovernmentBuilding'`, `'GraduationHat'`, `'Highlight'`, `'Home'`, `'Import'`, `'ImportantWithCircle'`, `'InfoWithCircle'`, `'InviteUser'`, `'Key'`, `'Laptop'`, `'LightningBolt'`, `'Link'`, `'List'`, `'Lock'`, `'LogIn'`, `'LogOut'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'Minus'`, `'Mobile'`, `'MultiDirectionArrow'`, `'MultiLayers'`, `'NavCollapse'`, `'NavExpand'`, `'NoFilter'`, `'NotAllowed'`, `'Note'`, `'OpenNewTab'`, `'Pause'`, `'Person'`, `'PersonGroup'`, `'PersonWithLock'`, `'Pin'`, `'Play'`, `'Plus'`, `'PlusWithCircle'`, `'QuestionMarkWithCircle'`, `'Read'`, `'Redo'`, `'Refresh'`,`'Relationship'`, `'ReplicaSet'`,`'Resize'`, `'Return'`, `'Save'`, `'Serverless'`, `'Settings'`, `'ShardedCluster'`, `'Shell'`, `'SMS'`,`'SortAscending'`, `'SortDescending'`, `'SortHorizontal'`, `'SortVertical'`,`'Sparkle'`, `'SplitHorizontal'`, `'SplitVertical'`, `'Stitch'`, `'String'`, `'Support'`, `'Sweep'`, `'Table'`, `'Tag'`, `'ThumbsDown'`, `'ThumbsUp'`, `'TimeSeries'`, `'TimeSeriesCollection'`, `'Trash'`, `'Undo'`, `'University'`, `'Unlock'`, `'Unsorted'`, `'UpDownCarets'`, `'Upload'`, `'VerticalEllipsis'`, `'Visibility'`, `'VisibilityOff'`, `'Warning'`, `'Wizard'`, `'Wrench'`, `'Write'`,`'X'`, `'XWithCircle'` | Specifies the glyph to use. | | -| `size` | `'small'`, `'default'`, `'large'`, `'xlarge'`, `number` | The height and width of the glyph's viewBox. This can be any `number` or one of the following `'small'`, `'default'`, `'large'`, `'xlarge'` | `'default'` | -| `fill` | `string` | The fill color that is passed to the glyph. By default, the glyph will inherit its fill from the CSS color property of its nearest ancestor. | | -| `title` | `string`, `boolean`, `null` | Renders a title tag with the passed string within the SVG element for screen reader accessibility. Setting this value to `false` will entirely unset the title.
If title is `undefined` or `null`, a human-readable title will be generated based on the glyph's name. | | -| ... | `SVGR.ComponentProps` | All other props will be spread on the `svg` element | | +| Prop | Type | Description | Default | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `glyph` (Required) | `'ActivityFeed'`, `'AddFile'`, `'AllProducts'`, `'Apps'`, `'Array'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Beaker'`, `'Bell'`, `'Biometric'`, `'Boolean'`, `'Building'`, `'Bulb'`, `'Calendar'`, `'Camera'`, `'Cap'`, `'CaretDown'`, `'CaretLeft'`, `'CaretRight'`, `'CaretUp'`, `'ChartFilled'`, `'Charts'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronDown'`,, `'ChevronLeft'` `'ChevronRight'`,`'ChevronUp'`, `'Clock'`,`'ClockWithArrow'`, `'Clone'`, `'Cloud'`, `'Code'`, `'CodeBlock'`, `'Colon'`, `'Connect'`,`'Copy'`,`'CreditCard'`, `'CurlyBraces'`, `'Dashboard'`, `'Database'`, `'Diagram'`, `'Diagram2'`, `'Diagram3'`, `'Disconnect'`, `'Download'`, `'Drag'`, `'Edit'`, `'Ellipsis'`, `'Email'`, `'Export'`, `'Favorite'`, `'Federation'`, `'File'`, `'Filter'`,`'Folder'`, `'FullScreenEnter'`, `'FullScreenExit'`, `'Guage'`, `'GlobeAmericas'`, `'GovernmentBuilding'`, `'Highlight'`, `'Home'`, `'Import'`, `'ImportantWithCircle'`, `'InfoWithCircle'`, `'InviteUser'`, `'Key'`, `'Laptop'`, `'LightningBolt'`, `'Link'`, `'List'`, `'Lock'`, `'LogIn'`, `'LogOut'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'Minus'`, `'Mobile'`, `'MultiDirectionArrow'`, `'MultiLayers'`, `'NavCollapse'`, `'NavExpand'`, `'NoFilter'`, `'NotAllowed'`, `'Note'`, `'OpenNewTab'`, `'Pause'`, `'Person'`, `'PersonGroup'`, `'PersonWithLock'`, `'Pin'`, `'Play'`, `'Plus'`, `'PlusWithCircle'`, `'QuestionMarkWithCircle'`, `'Read'`, `'Redo'`, `'Refresh'`,`'Relationship'`, `'ReplicaSet'`,`'Resize'`, `'Return'`, `'Save'`, `'Serverless'`, `'Settings'`, `'ShardedCluster'`, `'Shell'`, `'SMS'`,`'SortAscending'`, `'SortDescending'`, `'SortHorizontal'`, `'SortVertical'`,`'Sparkle'`, `'SplitHorizontal'`, `'SplitVertical'`, `'Stitch'`, `'String'`, `'Support'`, `'Sweep'`, `'Table'`, `'Tag'`, `'ThumbsDown'`, `'ThumbsUp'`, `'TimeSeries'`, `'TimeSeriesCollection'`, `'Trash'`, `'Undo'`, `'University'`, `'Unlock'`, `'Unsorted'`, `'UpDownCarets'`, `'Upload'`, `'VerticalEllipsis'`, `'Visibility'`, `'VisibilityOff'`, `'Warning'`, `'Wizard'`, `'Wrench'`, `'Write'`,`'X'`, `'XWithCircle'` | Specifies the glyph to use. | | +| `size` | `'small'`, `'default'`, `'large'`, `'xlarge'`, `number` | The height and width of the glyph's viewBox. This can be any `number` or one of the following `'small'`, `'default'`, `'large'`, `'xlarge'` | `'default'` | +| `fill` | `string` | The fill color that is passed to the glyph. By default, the glyph will inherit its fill from the CSS color property of its nearest ancestor. | | +| `title` | `string`, `boolean`, `null` | Renders a title tag with the passed string within the SVG element for screen reader accessibility. Setting this value to `false` will entirely unset the title.
If title is `undefined` or `null`, a human-readable title will be generated based on the glyph's name. | | +| ... | `SVGR.ComponentProps` | All other props will be spread on the `svg` element | | # createIconComponent diff --git a/packages/icon/src/generated/GraduationHat.tsx b/packages/icon/src/generated/Cap.tsx similarity index 84% rename from packages/icon/src/generated/GraduationHat.tsx rename to packages/icon/src/generated/Cap.tsx index 2c7c4d4040..165d5aa166 100644 --- a/packages/icon/src/generated/GraduationHat.tsx +++ b/packages/icon/src/generated/Cap.tsx @@ -2,15 +2,15 @@ * This is a generated file. Do not modify it manually. * * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts -* @checksum f86c3df58bc8f2bc993c22e102b6fd72 +* @checksum 2e7ecb7e84d0149540b3bfdfb0b8931f */ 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 GraduationHatProps extends LGGlyph.ComponentProps {} -const GraduationHat = ({ +export interface CapProps extends LGGlyph.ComponentProps {} +const Cap = ({ className, size = 16, title, @@ -19,14 +19,14 @@ const GraduationHat = ({ fill, role = 'img', ...props -}: GraduationHatProps) => { +}: CapProps) => { const fillStyle = css` color: ${fill}; `; const noFlexShrink = css` flex-shrink: 0; `; - const accessibleProps = generateAccessibleProps(role, 'GraduationHat', { + const accessibleProps = generateAccessibleProps(role, 'Cap', { title, ['aria-label']: ariaLabel, ['aria-labelledby']: ariaLabelledby @@ -35,11 +35,11 @@ const GraduationHat = ({ [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">; }; -GraduationHat.displayName = 'GraduationHat'; -GraduationHat.isGlyph = true; -GraduationHat.propTypes = { +Cap.displayName = 'Cap'; +Cap.isGlyph = true; +Cap.propTypes = { fill: PropTypes.string, size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), className: PropTypes.string }; -export default GraduationHat; \ No newline at end of file +export default Cap; \ No newline at end of file diff --git a/packages/icon/src/glyphs/GraduationHat.svg b/packages/icon/src/glyphs/Cap.svg similarity index 100% rename from packages/icon/src/glyphs/GraduationHat.svg rename to packages/icon/src/glyphs/Cap.svg diff --git a/packages/icon/src/glyphs/index.ts b/packages/icon/src/glyphs/index.ts index 016322bb6c..0406715e6f 100644 --- a/packages/icon/src/glyphs/index.ts +++ b/packages/icon/src/glyphs/index.ts @@ -19,6 +19,7 @@ import Building from './Building.svg'; import Bulb from './Bulb.svg'; import Calendar from './Calendar.svg'; import Camera from './Camera.svg'; +import Cap from './Cap.svg'; import CaretDown from './CaretDown.svg'; import CaretLeft from './CaretLeft.svg'; import CaretRight from './CaretRight.svg'; @@ -65,7 +66,6 @@ import FullScreenExit from './FullScreenExit.svg'; import Gauge from './Gauge.svg'; import GlobeAmericas from './GlobeAmericas.svg'; import GovernmentBuilding from './GovernmentBuilding.svg'; -import GraduationHat from './GraduationHat.svg'; import Highlight from './Highlight.svg'; import Home from './Home.svg'; import Import from './Import.svg'; @@ -165,6 +165,7 @@ const _glyphs = { Bulb, Calendar, Camera, + Cap, CaretDown, CaretLeft, CaretRight, @@ -211,7 +212,6 @@ const _glyphs = { Gauge, GlobeAmericas, GovernmentBuilding, - GraduationHat, Highlight, Home, Import,