From 684747d7e524fa9ecf057fd8a5fbdd7ecfe006f1 Mon Sep 17 00:00:00 2001 From: momodaadaa99 Date: Fri, 8 Nov 2024 17:57:44 +0100 Subject: [PATCH 1/4] new composant iconStatus --- .../statusicon/StatusIcon.component.tsx | 34 +++++++++++ src/lib/components/tablev2/TableUtils.ts | 13 +++-- stories/statusicon.stories.tsx | 57 +++++++++++++++++++ 3 files changed, 98 insertions(+), 6 deletions(-) create mode 100644 src/lib/components/statusicon/StatusIcon.component.tsx create mode 100644 stories/statusicon.stories.tsx diff --git a/src/lib/components/statusicon/StatusIcon.component.tsx b/src/lib/components/statusicon/StatusIcon.component.tsx new file mode 100644 index 0000000000..29e76a8f3a --- /dev/null +++ b/src/lib/components/statusicon/StatusIcon.component.tsx @@ -0,0 +1,34 @@ +import { Icon, IconName } from '../icon/Icon.component'; + +import { + STATUS_WARNING, + STATUS_CRITICAL, + STATUS_HEALTH, +} from '../tablev2/TableUtils'; + +export enum StatusCluster { + HEALTHY = 'healthy', + WARNING = 'warning', + CRITICAL = 'critical', + UNKNOWN = 'unknown', +} + +export const StatusIcon = ({ status }: { status: StatusCluster }) => { + const icon: { status: string; name: IconName } = (() => { + switch (status) { + case STATUS_HEALTH: + return { status: 'statusHealthy', name: 'Check-circle' }; + + case STATUS_WARNING: + return { status: 'statusWarning', name: 'Times-circle' }; + + case STATUS_CRITICAL: + return { status: 'statusCritical', name: 'Times-circle' }; + + default: + return { status: 'textTertiary', name: 'Info' }; + } + })(); + + return ; +}; diff --git a/src/lib/components/tablev2/TableUtils.ts b/src/lib/components/tablev2/TableUtils.ts index ee74caa8ea..ab9727b9a8 100644 --- a/src/lib/components/tablev2/TableUtils.ts +++ b/src/lib/components/tablev2/TableUtils.ts @@ -1,7 +1,8 @@ -const STATUS_CRITICAL = 'critical'; -const STATUS_WARNING = 'warning'; -const STATUS_NONE = 'none'; -const STATUS_HEALTH = 'healthy'; +export const STATUS_CRITICAL = 'critical'; +export const STATUS_WARNING = 'warning'; +export const STATUS_NONE = 'none'; +export const STATUS_HEALTH = 'healthy'; +export const STATUS_UNKNOWN = 'unknown'; type StatusType = | typeof STATUS_CRITICAL @@ -34,8 +35,8 @@ export function compareHealth( return weights[status1] === weights[status2] ? 0 : weights[status1] > weights[status2] - ? 1 - : -1; + ? 1 + : -1; } export function convertRemToPixels(rem) { diff --git a/stories/statusicon.stories.tsx b/stories/statusicon.stories.tsx new file mode 100644 index 0000000000..7dae62f861 --- /dev/null +++ b/stories/statusicon.stories.tsx @@ -0,0 +1,57 @@ +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { + StatusCluster, + StatusIcon, +} from '../src/lib/components/statusicon/StatusIcon.component'; +import { Wrapper } from './common'; +import styled from 'styled-components'; +import { Stack, Text } from '../src/lib'; + +const TextWrapper = styled(Wrapper)` + min-height: 0; +`; + +type Story = StoryObj; + +export default { + title: 'Components/statusIcon', + component: StatusIcon, + argTypes: { + status: { + control: { + disable: true, + }, + }, + children: { + control: { + disable: true, + }, + }, + }, +}; + +export const Playground = { + render: ({}: any) => { + return ( + + + Healthy status + {' '} + + + Warning status + + + + Critical status + + + + Unknown status + + + + ); + }, +}; From acd0166f52279e9456553ac96e2ba410b6388323 Mon Sep 17 00:00:00 2001 From: momodaadaa99 Date: Fri, 8 Nov 2024 18:28:59 +0100 Subject: [PATCH 2/4] fix playground --- stories/statusicon.stories.tsx | 31 ++++++++----------------------- 1 file changed, 8 insertions(+), 23 deletions(-) diff --git a/stories/statusicon.stories.tsx b/stories/statusicon.stories.tsx index 7dae62f861..82c29b1cb3 100644 --- a/stories/statusicon.stories.tsx +++ b/stories/statusicon.stories.tsx @@ -1,40 +1,25 @@ -import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { StatusCluster, StatusIcon, } from '../src/lib/components/statusicon/StatusIcon.component'; import { Wrapper } from './common'; -import styled from 'styled-components'; import { Stack, Text } from '../src/lib'; -const TextWrapper = styled(Wrapper)` - min-height: 0; -`; - -type Story = StoryObj; - export default { title: 'Components/statusIcon', component: StatusIcon, - argTypes: { - status: { - control: { - disable: true, - }, - }, - children: { - control: { - disable: true, - }, - }, - }, }; export const Playground = { - render: ({}: any) => { + args: { + status: 'healthy', + }, +}; +export const Default = { + render: ({}) => { return ( - + Healthy status {' '} @@ -51,7 +36,7 @@ export const Playground = { Unknown status - + ); }, }; From 96b78d95b6f3a5ebc8baa699b1a8ea135983846b Mon Sep 17 00:00:00 2001 From: momodaadaa99 Date: Wed, 20 Nov 2024 16:43:35 +0100 Subject: [PATCH 3/4] Fix PR --- .../statusicon/StatusIcon.component.tsx | 55 ++++++++++++------- stories/statusicon.stories.tsx | 14 +++-- 2 files changed, 45 insertions(+), 24 deletions(-) diff --git a/src/lib/components/statusicon/StatusIcon.component.tsx b/src/lib/components/statusicon/StatusIcon.component.tsx index 29e76a8f3a..816008d993 100644 --- a/src/lib/components/statusicon/StatusIcon.component.tsx +++ b/src/lib/components/statusicon/StatusIcon.component.tsx @@ -1,34 +1,51 @@ import { Icon, IconName } from '../icon/Icon.component'; - import { STATUS_WARNING, STATUS_CRITICAL, - STATUS_HEALTH, -} from '../tablev2/TableUtils'; + STATUS_HEALTHY, +} from '../../components/constants'; +import { CoreUITheme } from '../../style/theme'; +import { Loader } from '../loader/Loader.component'; -export enum StatusCluster { +export enum Status { HEALTHY = 'healthy', WARNING = 'warning', CRITICAL = 'critical', UNKNOWN = 'unknown', + LOADING = 'loading', } -export const StatusIcon = ({ status }: { status: StatusCluster }) => { - const icon: { status: string; name: IconName } = (() => { - switch (status) { - case STATUS_HEALTH: - return { status: 'statusHealthy', name: 'Check-circle' }; - - case STATUS_WARNING: - return { status: 'statusWarning', name: 'Times-circle' }; +export const StatusIcon = ({ status }: { status: Status }) => { + if (status === 'loading') { + return ; + } + const icon: { color: keyof CoreUITheme; name: IconName; label: string } = + (() => { + switch (status) { + case STATUS_HEALTHY: + return { + color: 'statusHealthy', + name: 'Check-circle', + label: 'Healthy', + }; - case STATUS_CRITICAL: - return { status: 'statusCritical', name: 'Times-circle' }; + case STATUS_WARNING: + return { + color: 'statusWarning', + name: 'Times-circle', + label: 'Warning', + }; - default: - return { status: 'textTertiary', name: 'Info' }; - } - })(); + case STATUS_CRITICAL: + return { + color: 'statusCritical', + name: 'Times-circle', + label: 'Critical', + }; + default: + return { color: 'textTertiary', name: 'Info', label: 'Info' }; + } + })(); - return ; + return ; }; diff --git a/stories/statusicon.stories.tsx b/stories/statusicon.stories.tsx index 82c29b1cb3..3529a5c1df 100644 --- a/stories/statusicon.stories.tsx +++ b/stories/statusicon.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { - StatusCluster, + Status, StatusIcon, } from '../src/lib/components/statusicon/StatusIcon.component'; import { Wrapper } from './common'; @@ -22,19 +22,23 @@ export const Default = { Healthy status - {' '} + {' '} Warning status - + Critical status - + + + + Loading status + Unknown status - + ); From a19bcd6f3f82d08097a658317d771c199687e45a Mon Sep 17 00:00:00 2001 From: momodaadaa99 Date: Wed, 20 Nov 2024 17:57:02 +0100 Subject: [PATCH 4/4] add labels for icons status --- .../components/statusicon/StatusIcon.component.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/lib/components/statusicon/StatusIcon.component.tsx b/src/lib/components/statusicon/StatusIcon.component.tsx index 816008d993..faa2962963 100644 --- a/src/lib/components/statusicon/StatusIcon.component.tsx +++ b/src/lib/components/statusicon/StatusIcon.component.tsx @@ -26,26 +26,30 @@ export const StatusIcon = ({ status }: { status: Status }) => { return { color: 'statusHealthy', name: 'Check-circle', - label: 'Healthy', + label: 'Healthy status icon', }; case STATUS_WARNING: return { color: 'statusWarning', name: 'Times-circle', - label: 'Warning', + label: 'Warning status icon', }; case STATUS_CRITICAL: return { color: 'statusCritical', name: 'Times-circle', - label: 'Critical', + label: 'Critical status icon', }; default: - return { color: 'textTertiary', name: 'Info', label: 'Info' }; + return { + color: 'textTertiary', + name: 'Info', + label: 'Information status icon', + }; } })(); - return ; + return ; };