Skip to content

Commit

Permalink
feat(TMC-620): add new illustrations (#5445)
Browse files Browse the repository at this point in the history 
* feat(TMC-620): add new illustrations

* feat(TMC-620): add new illustrations
  • Loading branch information
@VolodymyrKovalM
VolodymyrKovalM authored Nov 5, 2024
1 parent 89731e8 commit a8a42b5
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 17 deletions.
5 changes: 5 additions & 0 deletions .changeset/cool-fireants-double.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/design-system': minor
---

feat(TMC-620): add new illustrations
11 changes: 9 additions & 2 deletions packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -15,7 +16,9 @@ export type EmptyStateMediumIcon =
| 'SEARCH'
| 'SETTINGS'
| 'USER'
| 'WARNING';
| 'WARNING'
| 'IN_PROGRESS'
| 'UPDATE';

function getIllustration(icon: EmptyStateMediumIcon) {
switch (icon) {
Expand Down Expand Up @@ -43,6 +46,10 @@ function getIllustration(icon: EmptyStateMediumIcon) {
return <Illustration.IconUser />;
case 'WARNING':
return <Illustration.IconWarning />;
case 'IN_PROGRESS':
return <Illustration.IconInProgress />;
case 'UPDATE':
return <Illustration.IconUpdate />;
default:
return <Illustration.IconDefault />;
}
Expand Down
47 changes: 47 additions & 0 deletions packages/design-system/src/components/illustrations/IconInProgress.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import styles from './IconDefault.module.scss';

export function IconInProgress() {
return (
<svg
width="40"
height="40"
fill="none"
viewBox="0 0 40 40"
xmlns="http://www.w3.org/2000/svg"
className={styles.mediumIllustration}
>
<circle
cx="21"
cy="21.49"
r="16"
fill="var(--coral-color-illustration-color-03, hsla(138, 19%, 90%, 1))"
/>
<path
fill="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
fillRule="evenodd"
d="M19.5 4.49a1 1 0 0 1 1-1 17.5 17.5 0 0 1 0 35 1 1 0 1 1 0-2 15.5 15.5 0 1 0 0-31 1 1 0 0 1-1-1Z"
clipRule="evenodd"
/>
<path
fill="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
fillRule="evenodd"
d="M20.684 37.478a1 1 0 0 1-.989 1.01c-.19.003-.382.002-.572-.002a1 1 0 1 1 .043-2c.168.004.338.005.507.003a1 1 0 0 1 1.011.989Zm-5.884-.64a1 1 0 0 1-1.281.598 17.49 17.49 0 0 1-1.063-.426 1 1 0 0 1 .805-1.831c.31.136.624.262.941.377a1 1 0 0 1 .598 1.282Zm-5.707-3.005a1 1 0 0 1-1.412.062 17.622 17.622 0 0 1-.82-.8 1 1 0 0 1 1.445-1.384 15.53 15.53 0 0 0 .725.71 1 1 0 0 1 .062 1.412Zm-4.122-4.96a1 1 0 0 1-1.33-.483 17.514 17.514 0 0 1-.45-1.053 1 1 0 0 1 1.864-.726c.123.315.256.626.399.933a1 1 0 0 1-.483 1.329Zm-1.911-6.16a1 1 0 0 1-1.043-.956 17.552 17.552 0 0 1-.013-1.145 1 1 0 1 1 2 .043 15.54 15.54 0 0 0 .011 1.015 1 1 0 0 1-.955 1.043Zm.592-6.423a1 1 0 0 1-.598-1.281c.13-.36.273-.714.426-1.063a1 1 0 1 1 1.831.805c-.136.31-.262.623-.377.941a1 1 0 0 1-1.282.598Zm3.005-5.707a1 1 0 0 1-.062-1.413 17.54 17.54 0 0 1 .8-.819A1 1 0 0 1 8.78 9.796a15.353 15.353 0 0 0-.71.725 1 1 0 0 1-1.412.062Zm4.96-4.123a1 1 0 0 1 .483-1.329c.347-.161.698-.311 1.053-.45a1 1 0 1 1 .726 1.864c-.315.123-.626.256-.933.399a1 1 0 0 1-1.329-.484Zm6.16-1.91a1 1 0 0 1 .956-1.043c.19-.009.38-.014.572-.016a1 1 0 0 1 .022 2c-.17.002-.338.006-.507.014a1 1 0 0 1-1.043-.955Z"
clipRule="evenodd"
/>
<path
fill="var(----coral-color-neutral-background, hsla(0, 0%, 100%, 1))"
d="m11.354 22.865 5.657 5.657a.5.5 0 0 0 .707 0l1.15-1.15 1.502-1.502 1.503-1.503L26.5 19.74l2.532-2.532a.5.5 0 0 0 0-.707l-2.475-2.475a.5.5 0 0 0-.707 0l-8.132 8.132a.5.5 0 0 1-.707 0l-2.475-2.475a.5.5 0 0 0-.707 0l-2.475 2.474a.5.5 0 0 0 0 .708Z"
/>
<path
stroke="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
strokeLinecap="round"
strokeWidth="2"
d="m26.499 19.74 2.532-2.532a.5.5 0 0 0 0-.707l-2.475-2.475a.5.5 0 0 0-.707 0l-8.131 8.132a.5.5 0 0 1-.708 0l-2.475-2.475a.5.5 0 0 0-.707 0l-2.475 2.474a.5.5 0 0 0 0 .708l5.657 5.657a.5.5 0 0 0 .707 0l1.15-1.15 1.502-1.502 1.503-1.503"
/>
<path
fill="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
d="M25 21.99a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
/>
</svg>
);
}
61 changes: 61 additions & 0 deletions packages/design-system/src/components/illustrations/IconUpdate.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import styles from './IconDefault.module.scss';

export function IconUpdate() {
return (
<svg
width="40"
height="40"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={styles.mediumIllustration}
>
<path
d="M30.0095 6.24959C22.254 0.437176 11.2551 2.01233 5.44266 9.7678C-0.369752 17.5233 1.2054 28.5222 8.96087 34.3346C16.7163 40.147 27.7153 38.5719 33.5277 30.8164C36.1968 27.2551 37.308 23.0098 36.9784 18.8968"
stroke="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
strokeWidth="2"
strokeLinecap="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.2523 9.79297C18.1842 9.79297 17.3184 10.6588 17.3184 11.7268C17.3184 13.7912 15.0836 15.0814 13.2958 14.0492C12.3708 13.5152 11.1881 13.8321 10.6541 14.7571L9.68714 16.4318C9.15313 17.3568 9.47004 18.5395 10.395 19.0735C12.1828 20.1057 12.1828 22.6863 10.395 23.7185C9.47004 24.2525 9.15313 25.4352 9.68714 26.3602L10.6541 28.0349C11.1881 28.9599 12.3708 29.2768 13.2958 28.7428C15.0836 27.7106 17.3184 29.0009 17.3184 31.0653C17.3184 32.1333 18.1842 32.9992 19.2523 32.9992H21.1861C22.2541 32.9992 23.12 32.1333 23.12 31.0653C23.12 29.0009 25.3548 27.7106 27.1426 28.7428C28.0676 29.2768 29.2503 28.9599 29.7843 28.0349L30.7512 26.3602C31.2852 25.4352 30.9683 24.2525 30.0434 23.7185C28.2555 22.6863 28.2555 20.1057 30.0434 19.0735C30.9683 18.5395 31.2852 17.3568 30.7512 16.4318L29.7843 14.7571C29.2503 13.8321 28.0676 13.5152 27.1426 14.0492C25.3548 15.0814 23.12 13.7912 23.12 11.7268C23.12 10.6588 22.2541 9.79297 21.1861 9.79297H19.2523ZM18.8365 14.29C15.6324 14.29 13.0349 16.8875 13.0349 20.0916C13.0349 23.2957 15.6324 25.8931 18.8365 25.8931C22.0406 25.8931 24.638 23.2957 24.638 20.0916C24.638 16.8875 22.0406 14.29 18.8365 14.29Z"
fill="var(--coral-color-illustration-color-03, hsla(138, 19%, 90%, 1))"
/>
<path
d="M22.034 30.0204C22.034 31.0884 21.1682 31.9542 20.1002 31.9542H18.1663C17.0983 31.9542 16.2325 31.0884 16.2325 30.0204C16.2325 27.956 13.9977 26.6656 12.2098 27.6978C11.2849 28.2319 10.1021 27.9149 9.56813 26.99L8.60121 25.3152C8.06719 24.3903 8.3841 23.2076 9.30904 22.6736C11.0969 21.6413 11.0969 19.0608 9.30904 18.0286C8.3841 17.4946 8.06719 16.3119 8.60121 15.3869L9.56813 13.7122C10.1021 12.7872 11.2849 12.4703 12.2098 13.0043C13.9976 14.0365 16.2325 12.7463 16.2325 10.6819C16.2325 9.61386 17.0983 8.74805 18.1663 8.74805H20.1002C21.1682 8.74805 22.034 9.61386 22.034 10.6819C22.034 12.7463 24.2689 14.0365 26.0567 13.0043C26.9816 12.4703 28.1643 12.7872 28.6984 13.7121L29.6653 15.3869C30.1993 16.3119 29.8824 17.4946 28.9574 18.0286C27.1696 19.0608 27.1696 21.6414 28.9574 22.6736C29.8824 23.2076 30.1993 24.3903 29.6653 25.3153L28.6984 26.99C28.1643 27.915 26.9816 28.2319 26.0567 27.6979C25.1628 27.1818 24.1571 27.2463 23.3749 27.6979"
stroke="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M15 20C15 22.2091 16.7909 24 19 24C21.2091 24 23 22.2091 23 20C23 17.7909 21.2091 16 19 16"
stroke="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
strokeWidth="2"
strokeLinecap="round"
/>
<path
d="M17 16.999C17 17.5513 16.5523 17.999 16 17.999C15.4477 17.999 15 17.5513 15 16.999C15 16.4467 15.4477 15.999 16 15.999C16.5523 15.999 17 16.4467 17 16.999Z"
fill="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
/>
<line
x1="27"
y1="8"
x2="31.3246"
y2="8"
stroke="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
strokeWidth="2"
strokeLinecap="round"
/>
<line
x1="31.3613"
y1="3"
x2="31.3613"
y2="8"
stroke="var(--coral-color-illustration-color-02, hsla(0, 0%, 35%, 1))"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
);
}
4 changes: 4 additions & 0 deletions packages/design-system/src/components/illustrations/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -28,4 +30,6 @@ export const Illustration = {
IconSpotDefault,
IconUser,
IconWarning,
IconInProgress,
IconUpdate,
};
32 changes: 17 additions & 15 deletions packages/design-system/src/stories/feedback/EmptyState.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit a8a42b5

Please sign in to comment.