Skip to content

Commit

Permalink
feat: add variants to icons (#355)
Browse files Browse the repository at this point in the history
Co-authored-by: Gabriel Tibúrcio <v-gtiburcio@mparticle.com>
Co-authored-by: mparticle-automation <developers@mparticle.com>
3 people authored Aug 7, 2024
1 parent 05c4338 commit 1112674
Showing 6 changed files with 448 additions and 107 deletions.
14 changes: 14 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
61 changes: 50 additions & 11 deletions src/components/general/Icon/Icon.stories.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
},
},
}

26 changes: 20 additions & 6 deletions src/components/general/Icon/Icon.tsx
Original file line number Diff line number Diff line change
@@ -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} />
}
32 changes: 16 additions & 16 deletions src/components/icons/index.ts
Original file line number Diff line number Diff line change
@@ -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,
}
Loading

0 comments on commit 1112674

Please sign in to comment.