Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add variants to icons #355

Merged
merged 27 commits into from
Aug 7, 2024
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
3f33e85
add variant to icons
gabyzif Aug 5, 2024
4abd81b
add variant to icons
gabyzif Aug 5, 2024
5e32046
update the logic for adding variants to icons
gabyzif Aug 5, 2024
7e17fae
add deprecated icons
gabyzif Aug 5, 2024
6c36016
add deprecated icons
gabyzif Aug 5, 2024
04716d4
cleanup
gabyzif Aug 5, 2024
ade8863
rollback style
gabyzif Aug 5, 2024
0aa4cab
create a file for icon types and update the icon component with the n…
gabyzif Aug 5, 2024
7f50e35
remove extra file
gabyzif Aug 5, 2024
d7681d4
feat: icon-variants: update premium icon
gabyzif Aug 5, 2024
771db1f
Update src/types/iconTypes.ts
gabyzif Aug 5, 2024
54dfc77
feat: icons-variant cleanup code
gabyzif Aug 5, 2024
bf83485
feat: icons-variant cleanup code
gabyzif Aug 5, 2024
9f5ac6c
fix: imports of icons
gabyzif Aug 5, 2024
28ffcc9
feat: icons-variant: add documentation for icons
gabyzif Aug 5, 2024
da9e88b
fix: make the workspace-selector label smaller
gabyzif Aug 6, 2024
49eb8db
chore(release): 1.25.0-icons-variant.1 [skip ci]
mparticle-automation Aug 6, 2024
0a2ce7f
Merge branch 'main' into feat/icons-variant
gabyzif Aug 6, 2024
cb57b63
feat: update icons sparkle
gabyzif Aug 6, 2024
d8572d8
Merge remote-tracking branch 'origin/main'
gabyzif Aug 6, 2024
1bb1591
feat: solve conflicts
gabyzif Aug 6, 2024
6648b3c
feat: merge main into icons
gabyzif Aug 6, 2024
4e17c64
feat: merge main into icons branch
gabyzif Aug 6, 2024
55f75f8
feat: merge main into icons branch
gabyzif Aug 6, 2024
297cb5e
Merge branch 'main' into feat/icons-variant
gabyzif Aug 6, 2024
f2eee45
feat: icon-variants cleanup code
gabyzif Aug 6, 2024
1ebae5d
feat: icons remove deprecated comment
gabyzif Aug 7, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions src/components/general/Icon/Icon.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { type Meta } from '@storybook/react'
import React, { type ReactNode } from 'react'
import { Flex, Icon, type IIconProps } from 'src/components'
import { Meta } from '@storybook/react'
import React, { ReactNode } from 'react'
import { Flex, Icon, 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)',
Expand All @@ -13,19 +14,17 @@ 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 }}>{iconName}</p>
</Flex>
)
}
Expand Down Expand Up @@ -55,6 +54,10 @@ const meta: Meta = {
'brand',
],
},
variant: {
control: 'select',
options: ['light', 'duo-tone'],
},
},
}

Expand Down
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 { IconOptions, IconVariant, IconNames } from 'src/types/iconTypes'
gabyzif marked this conversation as resolved.
Show resolved Hide resolved
import './icon.css'

type IconSize = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
Expand All @@ -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 iconVariants = Icons[name] as IconOptions
gabyzif marked this conversation as resolved.
Show resolved Hide resolved

if (iconVariants?.deprecated) {
console.warn(`Icon with name "${name}" is deprecated. Please use "predictions" instead.`)
gabyzif marked this conversation as resolved.
Show resolved Hide resolved
}

const iconVariant = variant || iconVariants.default
const IconComponent = iconVariants[iconVariant] || iconVariants[iconVariants.default]
gabyzif marked this conversation as resolved.
Show resolved Hide resolved

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'
Expand All @@ -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'
Expand All @@ -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_pm_lt_notification.svg?react'

export {
AddIcon,
AlicornIcon,
AnalyticsIcon,
C360Icon,
AnalyticsIconDt,
C360IconDt,
CatalogIcon,
ChartColumnIcon,
ChartLineIcon,
CheckIcon,
CircleNodesIcon,
CloudIcon,
ConnectionsIcon,
DataPlatform,
DataPlatformIconDt,
DatabaseIcon,
DsrIcon,
EmptyIcon,
Expand All @@ -96,12 +96,12 @@ export {
MessageQuestionIcon,
MpLogoIcon,
ObservabilityIcon,
OversightIcon,
SparklesIcon,
PredictionsIconLight,
OversightIconDt,
PredictionsIconDt,
PredictionsIcon,
RemoveIcon,
SearchIcon,
SegmentationIcon,
SegmentationIconDt,
ShieldKeyholeIcon,
SignoutIcon,
SplitIcon,
Expand All @@ -123,5 +123,5 @@ export {
LockIcon,
UnlockIcon,
NotificationIcon,
PremiumDtIcon,
PremiumIconDt,
}
Loading
Loading