From a8a42b565983d77afca138aefbd81edb7b3ac45c Mon Sep 17 00:00:00 2001 From: Volodymyr Koval Date: Tue, 5 Nov 2024 16:21:05 +0200 Subject: [PATCH] feat(TMC-620): add new illustrations (#5445) * feat(TMC-620): add new illustrations * feat(TMC-620): add new illustrations --- .changeset/cool-fireants-double.md | 5 ++ .../EmptyState/variants/EmptyStateMedium.tsx | 11 +++- .../illustrations/IconInProgress.tsx | 47 ++++++++++++++ .../components/illustrations/IconUpdate.tsx | 61 +++++++++++++++++++ .../src/components/illustrations/index.ts | 4 ++ .../stories/feedback/EmptyState.stories.tsx | 32 +++++----- 6 files changed, 143 insertions(+), 17 deletions(-) create mode 100644 .changeset/cool-fireants-double.md create mode 100644 packages/design-system/src/components/illustrations/IconInProgress.tsx create mode 100644 packages/design-system/src/components/illustrations/IconUpdate.tsx diff --git a/.changeset/cool-fireants-double.md b/.changeset/cool-fireants-double.md new file mode 100644 index 0000000000..4e23f8dbd1 --- /dev/null +++ b/.changeset/cool-fireants-double.md @@ -0,0 +1,5 @@ +--- +'@talend/design-system': minor +--- + +feat(TMC-620): add new illustrations diff --git a/packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx b/packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx index dd76ae6889..c3e28439d8 100644 --- a/packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx +++ b/packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx @@ -1,6 +1,7 @@ -import EmptyStatePrimitive, { EmptyStatePrimitiveProps } from '../primitive/EmptyStatePrimitive'; import { forwardRef, Ref } from 'react'; + import { Illustration } from '../../illustrations'; +import EmptyStatePrimitive, { EmptyStatePrimitiveProps } from '../primitive/EmptyStatePrimitive'; export type EmptyStateMediumIcon = | 'ACTIVITY' @@ -15,7 +16,9 @@ export type EmptyStateMediumIcon = | 'SEARCH' | 'SETTINGS' | 'USER' - | 'WARNING'; + | 'WARNING' + | 'IN_PROGRESS' + | 'UPDATE'; function getIllustration(icon: EmptyStateMediumIcon) { switch (icon) { @@ -43,6 +46,10 @@ function getIllustration(icon: EmptyStateMediumIcon) { return ; case 'WARNING': return ; + case 'IN_PROGRESS': + return ; + case 'UPDATE': + return ; default: return ; } diff --git a/packages/design-system/src/components/illustrations/IconInProgress.tsx b/packages/design-system/src/components/illustrations/IconInProgress.tsx new file mode 100644 index 0000000000..5a1ebaa7b4 --- /dev/null +++ b/packages/design-system/src/components/illustrations/IconInProgress.tsx @@ -0,0 +1,47 @@ +import styles from './IconDefault.module.scss'; + +export function IconInProgress() { + return ( + + + + + + + + + ); +} diff --git a/packages/design-system/src/components/illustrations/IconUpdate.tsx b/packages/design-system/src/components/illustrations/IconUpdate.tsx new file mode 100644 index 0000000000..8832564bc3 --- /dev/null +++ b/packages/design-system/src/components/illustrations/IconUpdate.tsx @@ -0,0 +1,61 @@ +import styles from './IconDefault.module.scss'; + +export function IconUpdate() { + return ( + + + + + + + + + + ); +} diff --git a/packages/design-system/src/components/illustrations/index.ts b/packages/design-system/src/components/illustrations/index.ts index f4a4bdb705..8c124b35d0 100644 --- a/packages/design-system/src/components/illustrations/index.ts +++ b/packages/design-system/src/components/illustrations/index.ts @@ -3,12 +3,14 @@ import { IconChart } from './IconChart'; import { IconChecklist } from './IconChecklist'; import { IconDefault } from './IconDefault'; import { IconFlask } from './IconFlask'; +import { IconInProgress } from './IconInProgress'; import { IconLightBulb } from './IconLightBulb'; import { IconMessage } from './IconMessage'; import { IconPlug } from './IconPlug'; import { IconRocket } from './IconRocket'; import { IconSearch } from './IconSearch'; import { IconSettings } from './IconSettings'; +import { IconUpdate } from './IconUpdate'; import { IconUser } from './IconUser'; import { IconWarning } from './IconWarning'; import IconSpotDefault from './SpotDefault'; @@ -28,4 +30,6 @@ export const Illustration = { IconSpotDefault, IconUser, IconWarning, + IconInProgress, + IconUpdate, }; diff --git a/packages/design-system/src/stories/feedback/EmptyState.stories.tsx b/packages/design-system/src/stories/feedback/EmptyState.stories.tsx index 196a5813b9..704db554e5 100644 --- a/packages/design-system/src/stories/feedback/EmptyState.stories.tsx +++ b/packages/design-system/src/stories/feedback/EmptyState.stories.tsx @@ -75,22 +75,24 @@ MediumWithAction.argTypes = { illustration: { control: { type: 'select', - options: [ - 'ACTIVITY', - 'CHART', - 'CHECKLIST', - 'DEFAULT', - 'FLASK', - 'LIGHTBULB', - 'MESSAGE', - 'PLUG', - 'ROCKET', - 'SEARCH', - 'SETTINGS', - 'USER', - 'WARNING', - ], }, + options: [ + 'ACTIVITY', + 'CHART', + 'CHECKLIST', + 'DEFAULT', + 'FLASK', + 'LIGHTBULB', + 'MESSAGE', + 'PLUG', + 'ROCKET', + 'SEARCH', + 'SETTINGS', + 'USER', + 'WARNING', + 'IN_PROGRESS', + 'UPDATE', + ], description: 'Define the illustration', }, title: {