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: {