diff --git a/src/components/data-display/Avatar/Avatar.stories.tsx b/src/components/data-display/Avatar/Avatar.stories.tsx index ef2f303c7..51eef25d4 100644 --- a/src/components/data-display/Avatar/Avatar.stories.tsx +++ b/src/components/data-display/Avatar/Avatar.stories.tsx @@ -37,7 +37,7 @@ const meta: Meta = { options: ['Users', 'Sparkles'], mapping: { Users: , - Sparkles: , + Sparkles: , }, }, }, diff --git a/src/components/data-display/Collapse/Collapse.stories.tsx b/src/components/data-display/Collapse/Collapse.stories.tsx index 8a1f62e48..ff608aeb6 100644 --- a/src/components/data-display/Collapse/Collapse.stories.tsx +++ b/src/components/data-display/Collapse/Collapse.stories.tsx @@ -339,7 +339,7 @@ export const ExampleExtraNode: Story = { // If you don't want click extra trigger collapse, you can prevent this: event.stopPropagation() }}> - + ) diff --git a/src/components/data-display/Statistic/Statistic.stories.tsx b/src/components/data-display/Statistic/Statistic.stories.tsx index c3c8d88c4..5cb11ad6a 100644 --- a/src/components/data-display/Statistic/Statistic.stories.tsx +++ b/src/components/data-display/Statistic/Statistic.stories.tsx @@ -37,9 +37,9 @@ const meta: Meta = { control: 'select', options: ['check', 'alicorn', 'wrench'], mapping: { - check: , + check: , alicorn: , - wrench: , + wrench: , }, }, suffix: { @@ -96,7 +96,7 @@ export const CustomPrecision: Story = { export const CustomPrefix: Story = { args: { - prefix: , + prefix: , }, } @@ -194,7 +194,7 @@ export const ExampleWithCard: Story = { value={9.3} precision={2} valueStyle={{ color: ColorError }} - prefix={} + prefix={} suffix="%" /> diff --git a/src/components/data-entry/Switch/Switch.stories.tsx b/src/components/data-entry/Switch/Switch.stories.tsx index 8b9e31ee3..0b76d640d 100644 --- a/src/components/data-entry/Switch/Switch.stories.tsx +++ b/src/components/data-entry/Switch/Switch.stories.tsx @@ -121,8 +121,8 @@ export const ExampleTextAndIcon: Story = { } - unCheckedChildren={} + checkedChildren={} + unCheckedChildren={} defaultChecked /> diff --git a/src/components/feedback/Skeleton/Skeleton.stories.tsx b/src/components/feedback/Skeleton/Skeleton.stories.tsx index 581c9e422..e34b2caf8 100644 --- a/src/components/feedback/Skeleton/Skeleton.stories.tsx +++ b/src/components/feedback/Skeleton/Skeleton.stories.tsx @@ -249,7 +249,7 @@ export const ExampleList: Story = { ? [ } text="156" key="list-vertical-star-o" />, } text="156" key="list-vertical-like-o" />, - } text="2" key="list-vertical-message" />, + } text="2" key="list-vertical-message" />, ] : undefined } @@ -276,4 +276,4 @@ export const ExampleList: Story = { ) }, -} \ No newline at end of file +} diff --git a/src/components/general/Button/Button.stories.tsx b/src/components/general/Button/Button.stories.tsx index e5618ec62..5aed7f238 100644 --- a/src/components/general/Button/Button.stories.tsx +++ b/src/components/general/Button/Button.stories.tsx @@ -131,7 +131,7 @@ export const WithIconDefaultColorSM: Story = { export const RoundIconButton: Story = { args: { - icon: , + icon: , children: ' ', type: 'default', shape: 'round', diff --git a/src/components/general/Icon/Icon.stories.tsx b/src/components/general/Icon/Icon.stories.tsx index 9a17c9932..3f35db6d3 100644 --- a/src/components/general/Icon/Icon.stories.tsx +++ b/src/components/general/Icon/Icon.stories.tsx @@ -24,7 +24,7 @@ export const IconTable: React.FC = ({ color = 'black', size = 'lg', return ( -

+

{isDeprecated ? 'deprecated ' : ''} {iconName}

@@ -45,7 +45,8 @@ The \`IconTable\` component is used to display a table of all available icons in - \`variant\`: The variant of the icon. Available options are \`light\` and \`duo-tone\`. #### Updating Icons -To update the icons: + +The icon SVG and icon name are provided by the Design team. and the svg must be minified. 1. **Add New Icons**: Add the new icon SVGs to the \`src/constants/Icons\` directory. The icons should be curated by Design and the svg must be minified. 2. **Update Icon Constants**: Update the \`Icons\` object in \`src/constants/Icons\` to include the new icons. diff --git a/src/components/general/Icon/Icon.tsx b/src/components/general/Icon/Icon.tsx index 9a34515cb..1e2ce7342 100644 --- a/src/components/general/Icon/Icon.tsx +++ b/src/components/general/Icon/Icon.tsx @@ -29,7 +29,7 @@ export const Icon: React.FC = ({ name, color = 'default', size = 'lg const icon: IconOptions = Icons[name] if (icon?.deprecated) { - console.warn(`Icon with name "${name}" is deprecated. Please use ${icon?.deprecated} instead.`) + console.warn(`Icon with name "${name}" is deprecated. Please use "${icon?.deprecated}" instead.`) } const iconVariant = variant ?? icon.default diff --git a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx index 95bf3b261..787009a9a 100644 --- a/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx +++ b/src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx @@ -25,7 +25,7 @@ const defaultTools: IGlobalNavigationItem[] = [ { label: 'Tool 1', isActive: true, - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, @@ -35,7 +35,7 @@ const defaultTools: IGlobalNavigationItem[] = [ }, { label: 'Tool 2', - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, @@ -54,13 +54,13 @@ const defaultManagement: IGlobalNavigationItem[] = [ { label: 'Notifications', hideLabel: true, - icon: , + icon: , hrefOptions: { href: '/' }, }, { label: 'Support', hideLabel: true, - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, @@ -71,7 +71,7 @@ const defaultManagement: IGlobalNavigationItem[] = [ { label: 'Settings', hideLabel: true, - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, @@ -164,7 +164,7 @@ export const Primary: Story = { const mpLogo: IGlobalNavigationLogo = { label: 'Data Platform', - icon: , + icon: , onSuiteLogoClick: () => { alert('Going to mP Home!') }, @@ -200,7 +200,7 @@ function Beta(label: string) { const mpTools: IGlobalNavigationItem[] = [ { label: 'Activity', - icon: , + icon: , type: 'menu', children: [ { hrefOptions: { href: '/' }, label: 'Platform Trends' }, @@ -252,7 +252,7 @@ const mpTools: IGlobalNavigationItem[] = [ }, { label: 'Setup', - icon: , + icon: , type: 'menu', children: [ { hrefOptions: { href: '/' }, label: 'Inputs' }, @@ -263,7 +263,7 @@ const mpTools: IGlobalNavigationItem[] = [ }, { label: 'Directory', - icon: , + icon: , hrefOptions: { href: '/' }, }, ] @@ -273,7 +273,7 @@ const mpManagement: IGlobalNavigationItem[] = [ isActive: true, label: 'Support', hideLabel: true, - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, @@ -284,7 +284,7 @@ const mpManagement: IGlobalNavigationItem[] = [ { label: 'Settings', hideLabel: true, - icon: , + icon: , type: 'menu', children: [ { hrefOptions: { href: '/' }, label: 'Platform Settings' }, @@ -547,13 +547,13 @@ const indLogo: IGlobalNavigationLogo = { const indTools: IGlobalNavigationItem[] = [ { label: 'My Hub', - icon: , + icon: , isActive: true, hrefOptions: { href: '/' }, }, { label: 'Saved', - icon: , + icon: , hrefOptions: { href: '/' }, }, { @@ -567,7 +567,7 @@ const indManagement: IGlobalNavigationItem[] = [ { label: 'Support', hideLabel: true, - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, @@ -578,7 +578,7 @@ const indManagement: IGlobalNavigationItem[] = [ { label: 'Settings', hideLabel: true, - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, @@ -867,7 +867,7 @@ export const Indicative: Story = { const cortexLogo: IGlobalNavigationLogo = { label: 'Predictions', - icon: 'sparkles', + icon: 'predictions', type: 'background-solid', onSuiteLogoClick: () => { alert('Going to Predictions Home!') @@ -877,12 +877,12 @@ const cortexLogo: IGlobalNavigationLogo = { const cortexTools: IGlobalNavigationItem[] = [ { label: 'Pipelines', - icon: , + icon: , hrefOptions: { href: '/' }, }, { label: 'Projects', - icon: , + icon: , hrefOptions: { href: '/' }, isActive: true, }, @@ -893,12 +893,12 @@ const cortexTools: IGlobalNavigationItem[] = [ }, { label: 'API', - icon: , + icon: , hrefOptions: { href: '/' }, }, { label: 'Insights', - icon: , + icon: , hrefOptions: { href: '/' }, }, ] @@ -907,7 +907,7 @@ const cortexManagement: IGlobalNavigationItem[] = [ { label: 'Support', hideLabel: true, - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, @@ -918,7 +918,7 @@ const cortexManagement: IGlobalNavigationItem[] = [ { label: 'Settings', hideLabel: true, - icon: , + icon: , type: 'menu', children: [ { label: 'option 1', hrefOptions: { href: '/' } }, diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx index 456d470d0..d05ac89bc 100644 --- a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx +++ b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx @@ -204,7 +204,7 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) { label: ( {workspace.label} - {workspace.isActive && } + {workspace.isActive && } ), id: workspace.id, diff --git a/src/components/navigation/Steps/Steps.stories.tsx b/src/components/navigation/Steps/Steps.stories.tsx index 14e7d093b..6c03d3454 100644 --- a/src/components/navigation/Steps/Steps.stories.tsx +++ b/src/components/navigation/Steps/Steps.stories.tsx @@ -185,7 +185,7 @@ export const ExampleIcon: Story = { { title: 'Verification', status: 'finish', - icon: , + icon: , }, { title: 'Pay', @@ -195,7 +195,7 @@ export const ExampleIcon: Story = { { title: 'Done', status: 'wait', - icon: , + icon: , }, ]} /> @@ -737,4 +737,4 @@ export const ExampleInline: Story = { ) }, -} \ No newline at end of file +} diff --git a/src/constants/Icons.ts b/src/constants/Icons.ts index 6a27aec99..65802bc65 100644 --- a/src/constants/Icons.ts +++ b/src/constants/Icons.ts @@ -91,22 +91,43 @@ export const Icons: Record = { chartColumn: { light: ChartColumnIcon, default: 'light', + deprecated: 'trends', }, chartLine: { light: ChartLineIcon, default: 'light', + deprecated: 'trends', + }, + trends: { + light: ChartLineIcon, + default: 'light', }, check: { light: CheckIcon, default: 'light', + deprecated: 'selected', + }, + selected: { + light: CheckIcon, + default: 'light', }, circleNodes: { light: CircleNodesIcon, default: 'light', + deprecated: 'pipelines', + }, + pipelines: { + light: CircleNodesIcon, + default: 'light', }, cloud: { light: CloudIcon, default: 'light', + deprecated: 'api', + }, + api: { + light: CloudIcon, + default: 'light', }, connections: { light: ConnectionsIcon, @@ -143,6 +164,11 @@ export const Icons: Record = { folderClosed: { light: FolderClosedIcon, default: 'light', + deprecated: 'savedProjects', + }, + savedProjects: { + light: FolderClosedIcon, + default: 'light', }, forwarding: { light: ForwardingIcon, @@ -151,14 +177,29 @@ export const Icons: Record = { gear: { light: GearIcon, default: 'light', + deprecated: 'settings', + }, + settings: { + light: GearIcon, + default: 'light', }, grid: { light: GridIcon, default: 'light', + deprecated: 'myHub', + }, + myHub: { + light: GridIcon, + default: 'light', }, heart: { light: HeartIcon, default: 'light', + deprecated: 'favorite', + }, + favorite: { + light: HeartIcon, + default: 'light', }, help: { light: HelpIcon, @@ -175,6 +216,11 @@ export const Icons: Record = { lightBulb: { light: LightBulbIcon, default: 'light', + deprecated: 'insights', + }, + insights: { + light: LightBulbIcon, + default: 'light', }, liveStream: { light: LiveStreamIcon, @@ -187,6 +233,11 @@ export const Icons: Record = { messageQuestion: { light: MessageQuestionIcon, default: 'light', + deprecated: 'support', + }, + support: { + light: MessageQuestionIcon, + default: 'light', }, mpLogo: { light: MpLogoIcon, @@ -204,6 +255,10 @@ export const Icons: Record = { light: RemoveIcon, default: 'light', }, + close: { + light: RemoveIcon, + default: 'light', + }, search: { light: SearchIcon, default: 'light', @@ -215,14 +270,29 @@ export const Icons: Record = { shieldKeyhole: { light: ShieldKeyholeIcon, default: 'light', + deprecated: 'privacy', + }, + privacy: { + light: ShieldKeyholeIcon, + default: 'light', }, signout: { light: SignoutIcon, default: 'light', + deprecated: 'logout', + }, + logout: { + light: SignoutIcon, + default: 'light', }, siteMap: { 'duo-tone': DataPlatformIconDt, default: 'duo-tone', + deprecated: 'dataPlatform', + }, + dataPlatform: { + 'duo-tone': DataPlatformIconDt, + default: 'duo-tone', }, sparkles: { light: PredictionsIcon, @@ -238,6 +308,11 @@ export const Icons: Record = { split: { light: SplitIcon, default: 'light', + deprecated: 'journeys', + }, + journeys: { + light: SplitIcon, + default: 'light', }, systemAlerts: { light: SystemAlertsIcon, @@ -263,9 +338,18 @@ export const Icons: Record = { light: UsersIcon, default: 'light', }, + audiences: { + light: UsersIcon, + default: 'light', + }, wrench: { light: WrenchIcon, default: 'light', + deprecated: 'setup', + }, + setup: { + light: WrenchIcon, + default: 'light', }, zoomIn: { light: ZoomIn, diff --git a/src/types/icons.ts b/src/types/icons.ts index b106bdee4..965dfb484 100644 --- a/src/types/icons.ts +++ b/src/types/icons.ts @@ -78,3 +78,20 @@ export type IconNames = | 'unlock' | 'notification' | 'overview' + | 'trends' + | 'settings' + | 'support' + | 'close' + | 'privacy' + | 'dataPlatform' + | 'journeys' + | 'setup' + | 'logout' + | 'audiences' + | 'selected' + | 'pipelines' + | 'api' + | 'savedProjects' + | 'myHub' + | 'favorite' + | 'insights'