fix: rename icons (#364)

Co-authored-by: mparticle-automation <[email protected]>
mParticle · Aug 19, 2024 · 223c47d · 223c47d
1 parent 2de2ee5
commit 223c47d
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 40 deletions.
diff --git 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<typeof Avatar> = {
       options: ['Users', 'Sparkles'],
       mapping: {
         Users: <Icon name="users" />,
-        Sparkles: <Icon name="sparkles" />,
+        Sparkles: <Icon name="predictions" variant="duo-tone" />,
       },
     },
   },

diff --git 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()
         }}>
-        <Icon name="gear" />
+        <Icon name="settings" />
       </span>
     )
 

diff --git 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<typeof Statistic> = {
       control: 'select',
       options: ['check', 'alicorn', 'wrench'],
       mapping: {
-        check: <Icon name="check" />,
+        check: <Icon name="selected" />,
         alicorn: <Icon name="alicorn" />,
-        wrench: <Icon name="wrench" />,
+        wrench: <Icon name="setup" />,
       },
     },
     suffix: {
@@ -96,7 +96,7 @@ export const CustomPrecision: Story = {
 
 export const CustomPrefix: Story = {
   args: {
-    prefix: <Icon name="check" />,
+    prefix: <Icon name="selected" />,
   },
 }
 
@@ -194,7 +194,7 @@ export const ExampleWithCard: Story = {
                 value={9.3}
                 precision={2}
                 valueStyle={{ color: ColorError }}
-                prefix={<Icon name="wrench" />}
+                prefix={<Icon name="setup" />}
                 suffix="%"
               />
             </Card>

diff --git 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 = {
           <Switch checkedChildren="Checked Text" unCheckedChildren="Unchecked Text" defaultChecked />
           <Switch checkedChildren="1" unCheckedChildren="0" />
           <Switch
-            checkedChildren={<Icon name="check" />}
-            unCheckedChildren={<Icon name="messageQuestion" />}
+            checkedChildren={<Icon name="selected" />}
+            unCheckedChildren={<Icon name="support" />}
             defaultChecked
           />
         </Space>

diff --git a/src/components/feedback/Skeleton/Skeleton.stories.tsx b/src/components/feedback/Skeleton/Skeleton.stories.tsx
@@ -249,7 +249,7 @@ export const ExampleList: Story = {
                   ? [
                       <IconText icon={<Icon name="alicorn"></Icon>} text="156" key="list-vertical-star-o" />,
                       <IconText icon={<Icon name="users" />} text="156" key="list-vertical-like-o" />,
-                      <IconText icon={<Icon name="gear" />} text="2" key="list-vertical-message" />,
+                      <IconText icon={<Icon name="setup" />} text="2" key="list-vertical-message" />,
                     ]
                   : undefined
               }
@@ -276,4 +276,4 @@ export const ExampleList: Story = {
       </ExampleStory>
     )
   },
-}
+}
diff --git 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 name="siteMap" size="xl" />,
+    icon: <Icon name="dataPlatform" size="xl" />,
     children: ' ',
     type: 'default',
     shape: 'round',

diff --git 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<IIconProps> = ({ color = 'black', size = 'lg',
     return (
       <Flex vertical align="center" key={iconName}>
         <Icon name={iconName} size={size} color={color} variant={variant} />
-        <p style={{ fontFamily: 'monospace', ...textStyle }}>
+        <p style={{ fontFamily: 'monospace', textAlign: 'center', ...textStyle }}>
           {isDeprecated ? 'deprecated ' : ''}
           {iconName}
         </p>
@@ -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
@@ -29,7 +29,7 @@ export const Icon: React.FC<IIconProps> = ({ 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
@@ -25,7 +25,7 @@ const defaultTools: IGlobalNavigationItem[] = [
   {
     label: 'Tool 1',
     isActive: true,
-    icon: <Icon name="shieldKeyhole" />,
+    icon: <Icon name="privacy" />,
     type: 'menu',
     children: [
       { label: 'option 1', hrefOptions: { href: '/' } },
@@ -35,7 +35,7 @@ const defaultTools: IGlobalNavigationItem[] = [
   },
   {
     label: 'Tool 2',
-    icon: <Icon name="heart" />,
+    icon: <Icon name="favorite" />,
     type: 'menu',
     children: [
       { label: 'option 1', hrefOptions: { href: '/' } },
@@ -54,13 +54,13 @@ const defaultManagement: IGlobalNavigationItem[] = [
   {
     label: 'Notifications',
     hideLabel: true,
-    icon: <Icon name="cloud" />,
+    icon: <Icon name="api" />,
     hrefOptions: { href: '/' },
   },
   {
     label: 'Support',
     hideLabel: true,
-    icon: <Icon name="messageQuestion" />,
+    icon: <Icon name="support" />,
     type: 'menu',
     children: [
       { label: 'option 1', hrefOptions: { href: '/' } },
@@ -71,7 +71,7 @@ const defaultManagement: IGlobalNavigationItem[] = [
   {
     label: 'Settings',
     hideLabel: true,
-    icon: <Icon name="gear" />,
+    icon: <Icon name="settings" />,
     type: 'menu',
     children: [
       { label: 'option 1', hrefOptions: { href: '/' } },
@@ -164,7 +164,7 @@ export const Primary: Story = {
 
 const mpLogo: IGlobalNavigationLogo = {
   label: 'Data Platform',
-  icon: <Icon name="siteMap" />,
+  icon: <Icon name="dataPlatform" />,
   onSuiteLogoClick: () => {
     alert('Going to mP Home!')
   },
@@ -200,7 +200,7 @@ function Beta(label: string) {
 const mpTools: IGlobalNavigationItem[] = [
   {
     label: 'Activity',
-    icon: <Icon name="chartLine" />,
+    icon: <Icon name="trends" />,
     type: 'menu',
     children: [
       { hrefOptions: { href: '/' }, label: 'Platform Trends' },
@@ -252,7 +252,7 @@ const mpTools: IGlobalNavigationItem[] = [
   },
   {
     label: 'Setup',
-    icon: <Icon name="wrench" />,
+    icon: <Icon name="setup" />,
     type: 'menu',
     children: [
       { hrefOptions: { href: '/' }, label: 'Inputs' },
@@ -263,7 +263,7 @@ const mpTools: IGlobalNavigationItem[] = [
   },
   {
     label: 'Directory',
-    icon: <Icon name="grid" />,
+    icon: <Icon name="myHub" />,
     hrefOptions: { href: '/' },
   },
 ]
@@ -273,7 +273,7 @@ const mpManagement: IGlobalNavigationItem[] = [
     isActive: true,
     label: 'Support',
     hideLabel: true,
-    icon: <Icon name="messageQuestion" />,
+    icon: <Icon name="support" />,
     type: 'menu',
     children: [
       { label: 'option 1', hrefOptions: { href: '/' } },
@@ -284,7 +284,7 @@ const mpManagement: IGlobalNavigationItem[] = [
   {
     label: 'Settings',
     hideLabel: true,
-    icon: <Icon name="gear" />,
+    icon: <Icon name="settings" />,
     type: 'menu',
     children: [
       { hrefOptions: { href: '/' }, label: 'Platform Settings' },
@@ -547,13 +547,13 @@ const indLogo: IGlobalNavigationLogo = {
 const indTools: IGlobalNavigationItem[] = [
   {
     label: 'My Hub',
-    icon: <Icon name="grid" />,
+    icon: <Icon name="myHub" />,
     isActive: true,
     hrefOptions: { href: '/' },
   },
   {
     label: 'Saved',
-    icon: <Icon name="folderClosed" />,
+    icon: <Icon name="savedProjects" />,
     hrefOptions: { href: '/' },
   },
   {
@@ -567,7 +567,7 @@ const indManagement: IGlobalNavigationItem[] = [
   {
     label: 'Support',
     hideLabel: true,
-    icon: <Icon name="messageQuestion" />,
+    icon: <Icon name="support" />,
     type: 'menu',
     children: [
       { label: 'option 1', hrefOptions: { href: '/' } },
@@ -578,7 +578,7 @@ const indManagement: IGlobalNavigationItem[] = [
   {
     label: 'Settings',
     hideLabel: true,
-    icon: <Icon name="gear" />,
+    icon: <Icon name="settings" />,
     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 name="circleNodes" />,
+    icon: <Icon name="predictions" variant="duo-tone" />,
     hrefOptions: { href: '/' },
   },
   {
     label: 'Projects',
-    icon: <Icon name="split" />,
+    icon: <Icon name="journeys" />,
     hrefOptions: { href: '/' },
     isActive: true,
   },
@@ -893,12 +893,12 @@ const cortexTools: IGlobalNavigationItem[] = [
   },
   {
     label: 'API',
-    icon: <Icon name="cloud" />,
+    icon: <Icon name="predictions" variant="duo-tone" />,
     hrefOptions: { href: '/' },
   },
   {
     label: 'Insights',
-    icon: <Icon name="lightBulb" />,
+    icon: <Icon name="insights" />,
     hrefOptions: { href: '/' },
   },
 ]
@@ -907,7 +907,7 @@ const cortexManagement: IGlobalNavigationItem[] = [
   {
     label: 'Support',
     hideLabel: true,
-    icon: <Icon name="messageQuestion" />,
+    icon: <Icon name="support" />,
     type: 'menu',
     children: [
       { label: 'option 1', hrefOptions: { href: '/' } },
@@ -918,7 +918,7 @@ const cortexManagement: IGlobalNavigationItem[] = [
   {
     label: 'Settings',
     hideLabel: true,
-    icon: <Icon name="gear" />,
+    icon: <Icon name="settings" />,
     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
@@ -204,7 +204,7 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) {
             label: (
               <Flex justify="space-between" align="center" gap="small">
                 {workspace.label}
-                {workspace.isActive && <Icon name="check" size="xs" color="text" />}
+                {workspace.isActive && <Icon name="selected" size="xs" color="text" />}
               </Flex>
             ),
             id: workspace.id,

diff --git 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 name="gear" />,
+              icon: <Icon name="settings" />,
             },
             {
               title: 'Pay',
@@ -195,7 +195,7 @@ export const ExampleIcon: Story = {
             {
               title: 'Done',
               status: 'wait',
-              icon: <Icon name="check" size="sm" />,
+              icon: <Icon name="selected" size="sm" />,
             },
           ]}
         />
@@ -737,4 +737,4 @@ export const ExampleInline: Story = {
       </ExampleStory>
     )
   },
-}
+}