feat: add variants to icons

CHANGELOG.md

@@ -6,6 +6,20 @@
 
 - Allow override theme for ConfigProvider ([#354](https://github.com/mParticle/aquarium/issues/354)) ([29cc614](https://github.com/mParticle/aquarium/commit/29cc614fe5869e80801646b33e71f3f52c640516))
 
+# [1.25.0-icons-variant.1](https://github.com/mParticle/aquarium/compare/v1.24.0...v1.25.0-icons-variant.1) (2024-08-06)
+
+### Bug Fixes
+
+- imports of icons ([9f5ac6c](https://github.com/mParticle/aquarium/commit/9f5ac6c047acea4bdee181f3d21e1bc080b52994))
+
+### Features
+
+- Allow override theme for ConfigProvider ([#354](https://github.com/mParticle/aquarium/issues/354)) ([29cc614](https://github.com/mParticle/aquarium/commit/29cc614fe5869e80801646b33e71f3f52c640516))
+- icon-variants: update premium icon ([d7681d4](https://github.com/mParticle/aquarium/commit/d7681d49a0b63cc6aebb7874e72c0fb89afb8679))
+- icons-variant cleanup code ([bf83485](https://github.com/mParticle/aquarium/commit/bf83485b0867df3ee169e6b5e3ddf682f20245c0))
+- icons-variant cleanup code ([54dfc77](https://github.com/mParticle/aquarium/commit/54dfc77b8d28a9fcc0a55e9de5bdd919f607f0a3))
+- icons-variant: add documentation for icons ([28ffcc9](https://github.com/mParticle/aquarium/commit/28ffcc912eb183ee9ad16ca06149ca03ffe39544))
+
 # [1.24.0](https://github.com/mParticle/aquarium/compare/v1.23.0...v1.24.0) (2024-07-31)
 
 ### Features

src/components/general/Icon/Icon.stories.tsx

@@ -3,8 +3,9 @@ import React, { type ReactNode } from 'react'
 import { Flex, Icon, type IIconProps } from 'src/components'
 import { Icons } from 'src/constants/Icons'
 
-export const IconTable: React.FC<IIconProps> = ({ color = 'black', size = 'lg', name }) => {
+export const IconTable: React.FC<IIconProps> = ({ color = 'black', size = 'lg', name, variant }) => {
   const allIcons = Object.keys(Icons) as Array<keyof typeof Icons>
+
   const iconGridStyle = {
     display: 'grid',
     gridTemplateColumns: 'repeat(6, 1fr)',
@@ -13,24 +14,51 @@ export const IconTable: React.FC<IIconProps> = ({ color = 'black', size = 'lg',
     justifyItems: 'center',
   }
 
-  return (
-    <div style={iconGridStyle}>
-      {name // render either a single selected icon, or all possible icons
-        ? renderIcon(name)
-        : allIcons.map(renderIcon)}
-    </div>
-  )
+  return <div style={iconGridStyle}>{name ? renderIcon(name) : allIcons.map(renderIcon)}</div>
+
+  function renderIcon(iconName: keyof typeof Icons): ReactNode {
+    const icon = Icons[iconName]
+    const isDeprecated = icon.deprecated
+    const textStyle = isDeprecated ? { textDecoration: 'line-through' } : {}
 
-  function renderIcon(iconName: IIconProps['name']): ReactNode {
     return (
       <Flex vertical align="center" key={iconName}>
-        <Icon name={iconName} size={size} color={color} key={iconName} />
-        <p style={{ fontFamily: 'monospace' }}>{iconName}</p>
+        <Icon name={iconName} size={size} color={color} variant={variant} />
+        <p style={{ fontFamily: 'monospace', ...textStyle }}>
+          {isDeprecated ? 'deprecated ' : ''}
+          {iconName}
+        </p>
       </Flex>
     )
   }
 }
 
+const iconTableDocumentation = `
+### Icon Component Documentation
+
+The \`IconTable\` component is used to display a table of all available icons in the project. 
+
+#### Props
+- \`name\`: The name of the icon 
+- \`color\`: The color of the icon. Available options are \`default\`, \`primary\`, \`success\`, \`warning\`, \`error\`, \`info\`, \`white\`, \`black\`, \`text\`, \`strong\`, \`brand\`.
+- \`size\`: The size of the icon. Available options are \`xxxxl\`, \`xxxl\`, \`xxl\`, \`xl\`, \`lg\`, \`md\`, \`sm\`, \`xs\`.
+- \`variant\`: The variant of the icon. Available options are \`light\` and \`duo-tone\`.
+
+#### Updating Icons
+To update the icons:
+
+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.
+3. **Use Icons**: Use the updated icons in your components by referencing their names.
+
+#### Example Usage
+\`\`\`jsx
+<Icon name="new-icon" size="lg" color="primary" variant="light" />
+\`\`\`
+
+This will render the new icon with the specified size, color, and variant.
+`
+
 const meta: Meta = {
   title: 'Aquarium/General/Icons',
   component: IconTable,
@@ -55,6 +83,17 @@ const meta: Meta = {
         'brand',
       ],
     },
+    variant: {
+      control: 'select',
+      options: ['light', 'duo-tone'],
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: iconTableDocumentation,
+      },
+    },
   },
 }
 

src/components/general/Icon/Icon.tsx

@@ -1,4 +1,6 @@
+import React from 'react'
 import { Icons } from 'src/constants/Icons'
+import type { IconOptions, IconVariant, IconNames } from 'src/types/icons'
 import './icon.css'
 
 type IconSize = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
@@ -16,17 +18,29 @@ export type IconColor =
   | 'brand'
 
 export interface IIconProps {
-  name: keyof typeof Icons
+  name: IconNames
   color?: IconColor
   size?: IconSize
+  variant?: IconVariant
 }
 
-export const Icon = (props: IIconProps) => {
-  const { color = 'default', size = 'lg' } = props
+export const Icon: React.FC<IIconProps> = ({ name, color = 'default', size = 'lg', variant }) => {
+  const icon: IconOptions = Icons[name]
+
+  if (icon?.deprecated) {
+    console.warn(`Icon with name "${name}" is deprecated. Please use ${icon?.deprecated} instead.`)
+  }
+
+  const iconVariant = variant ?? icon.default
+  const IconComponent = icon[iconVariant] ?? icon[icon.default]
+
+  if (!IconComponent) {
+    console.error(`Icon with name "${name}" and variant "${iconVariant}" not found.`)
+    return null
+  }
 
-  const IconName = Icons[props.name]
   const className = `icon-size-${size} icon-color-${color}`
-  const iconId = `icon-${props.name}`
+  const iconId = `icon-${name}-${iconVariant}`
 
-  return <IconName className={className} data-test={iconId} />
+  return <IconComponent className={className} data-test={iconId} />
 }

src/components/icons/index.ts

@@ -1,15 +1,15 @@
 import AddIcon from 'src/assets/svg/add.svg?react'
 import AlicornIcon from 'src/assets/svg/alicorn.svg?react'
-import AnalyticsIcon from 'src/assets/svg/mp_pm_dt_analytics.svg?react'
-import C360Icon from 'src/assets/svg/mp_pm_dt_c360.svg?react'
+import AnalyticsIconDt from 'src/assets/svg/mp_pm_dt_analytics.svg?react'
+import C360IconDt from 'src/assets/svg/mp_pm_dt_c360.svg?react'
 import CatalogIcon from 'src/assets/svg/mp_pm_lt_catalog.svg?react'
 import ChartColumnIcon from 'src/assets/svg/chart-column.svg?react'
 import ChartLineIcon from 'src/assets/svg/chart-line.svg?react'
 import CheckIcon from 'src/assets/svg/check.svg?react'
 import CircleNodesIcon from 'src/assets/svg/circle-nodes.svg?react'
 import CloudIcon from 'src/assets/svg/cloud.svg?react'
 import ConnectionsIcon from 'src/assets/svg/connections.svg?react'
-import DataPlatform from 'src/assets/svg/mp_pm_dt_data-platform.svg?react'
+import DataPlatformIconDt from 'src/assets/svg/mp_pm_dt_data-platform.svg?react'
 import DatabaseIcon from 'src/assets/svg/database.svg?react'
 import DsrIcon from 'src/assets/svg/mp_pm_lt_dsr.svg?react'
 import EmptyIcon from 'src/assets/svg/empty.svg?react'
@@ -31,12 +31,12 @@ import PaywallIcon from 'src/assets/svg/paywall.svg?react'
 import MessageQuestionIcon from 'src/assets/svg/message-question.svg?react'
 import MpLogoIcon from 'src/assets/svg/mpLogo.svg?react'
 import ObservabilityIcon from 'src/assets/svg/mp_pm_lt_observability.svg?react'
-import OversightIcon from 'src/assets/svg/mp_pm_dt_oversight.svg?react'
-import PredictionsIconLight from 'src/assets/svg/mp_pm_lt_predictions.svg?react'
-import SparklesIcon from 'src/assets/svg/mp_pm_dt_predictions.svg?react'
+import OversightIconDt from 'src/assets/svg/mp_pm_dt_oversight.svg?react'
+import PredictionsIcon from 'src/assets/svg/mp_pm_lt_predictions.svg?react'
+import PredictionsIconDt from 'src/assets/svg/mp_pm_dt_predictions.svg?react'
 import RemoveIcon from 'src/assets/svg/remove.svg?react'
 import SearchIcon from 'src/assets/svg/search.svg?react'
-import SegmentationIcon from 'src/assets/svg/mp_pm_dt_segmentation.svg?react'
+import SegmentationIconDt from 'src/assets/svg/mp_pm_dt_segmentation.svg?react'
 import ShieldKeyholeIcon from 'src/assets/svg/shield-keyhole.svg?react'
 import SignoutIcon from 'src/assets/svg/signout.svg?react'
 import SplitIcon from 'src/assets/svg/split.svg?react'
@@ -59,21 +59,21 @@ import DirectoryIcon from 'src/assets/svg/mp_pm_lt_directory.svg?react'
 import LockIcon from 'src/assets/svg/mp_act_lt_lock.svg?react'
 import UnlockIcon from 'src/assets/svg/mp_act_lt_unlock.svg?react'
 import NotificationIcon from 'src/assets/svg/mp_pm_lt_notification.svg?react'
-import PremiumDtIcon from 'src/assets/svg/mp_info_dt_premium.svg?react'
+import PremiumIconDt from 'src/assets/svg/mp_info_dt_premium.svg?react'
 
 export {
   AddIcon,
   AlicornIcon,
-  AnalyticsIcon,
-  C360Icon,
+  AnalyticsIconDt,
+  C360IconDt,
   CatalogIcon,
   ChartColumnIcon,
   ChartLineIcon,
   CheckIcon,
   CircleNodesIcon,
   CloudIcon,
   ConnectionsIcon,
-  DataPlatform,
+  DataPlatformIconDt,
   DatabaseIcon,
   DsrIcon,
   EmptyIcon,
@@ -96,12 +96,12 @@ export {
   MessageQuestionIcon,
   MpLogoIcon,
   ObservabilityIcon,
-  OversightIcon,
-  SparklesIcon,
-  PredictionsIconLight,
+  OversightIconDt,
+  PredictionsIconDt,
+  PredictionsIcon,
   RemoveIcon,
   SearchIcon,
-  SegmentationIcon,
+  SegmentationIconDt,
   ShieldKeyholeIcon,
   SignoutIcon,
   SplitIcon,
@@ -123,5 +123,5 @@ export {
   LockIcon,
   UnlockIcon,
   NotificationIcon,
-  PremiumDtIcon,
+  PremiumIconDt,
 }