new composant iconStatus

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 <Icon color={icon.status} name={icon.name} />;
+};

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

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<typeof StatusIcon>;
+
+export default {
+  title: 'Components/statusIcon',
+  component: StatusIcon,
+  argTypes: {
+    status: {
+      control: {
+        disable: true,
+      },
+    },
+    children: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const Playground = {
+  render: ({}: any) => {
+    return (
+      <TextWrapper>
+        <Stack>
+          <Text>Healthy status </Text>
+          <StatusIcon status={StatusCluster.HEALTHY} />{' '}
+        </Stack>
+        <Stack>
+          <Text>Warning status </Text>
+          <StatusIcon status={StatusCluster.WARNING} />
+        </Stack>
+        <Stack>
+          <Text>Critical status </Text>
+          <StatusIcon status={StatusCluster.CRITICAL} />
+        </Stack>
+        <Stack>
+          <Text>Unknown status </Text>
+          <StatusIcon status={StatusCluster.UNKNOWN} />
+        </Stack>
+      </TextWrapper>
+    );
+  },
+};