new composant iconStatus

src/lib/components/statusicon/StatusIcon.component.tsx

@@ -0,0 +1,55 @@
+import { Icon, IconName } from '../icon/Icon.component';
+import {
+  STATUS_WARNING,
+  STATUS_CRITICAL,
+  STATUS_HEALTHY,
+} from '../../components/constants';
+import { CoreUITheme } from '../../style/theme';
+import { Loader } from '../loader/Loader.component';
+
+export enum Status {
+  HEALTHY = 'healthy',
+  WARNING = 'warning',
+  CRITICAL = 'critical',
+  UNKNOWN = 'unknown',
+  LOADING = 'loading',
+}
+
+export const StatusIcon = ({ status }: { status: Status }) => {
+  if (status === 'loading') {
+    return <Loader />;
+  }
+  const icon: { color: keyof CoreUITheme; name: IconName; label: string } =
+    (() => {
+      switch (status) {
+        case STATUS_HEALTHY:
+          return {
+            color: 'statusHealthy',
+            name: 'Check-circle',
+            label: 'Healthy status icon',
+          };
+
+        case STATUS_WARNING:
+          return {
+            color: 'statusWarning',
+            name: 'Times-circle',
+            label: 'Warning status icon',
+          };
+
+        case STATUS_CRITICAL:
+          return {
+            color: 'statusCritical',
+            name: 'Times-circle',
+            label: 'Critical status icon',
+          };
+        default:
+          return {
+            color: 'textTertiary',
+            name: 'Info',
+            label: 'Information status icon',
+          };
+      }
+    })();
+
+  return <Icon color={icon.color} name={icon.name} aria-label={icon.label} />;
+};

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,46 @@
+import React from 'react';
+import {
+  Status,
+  StatusIcon,
+} from '../src/lib/components/statusicon/StatusIcon.component';
+import { Wrapper } from './common';
+import { Stack, Text } from '../src/lib';
+
+export default {
+  title: 'Components/statusIcon',
+  component: StatusIcon,
+};
+
+export const Playground = {
+  args: {
+    status: 'healthy',
+  },
+};
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Stack>
+          <Text>Healthy status </Text>
+          <StatusIcon status={Status.HEALTHY} />{' '}
+        </Stack>
+        <Stack>
+          <Text>Warning status </Text>
+          <StatusIcon status={Status.WARNING} />
+        </Stack>
+        <Stack>
+          <Text>Critical status </Text>
+          <StatusIcon status={Status.CRITICAL} />
+        </Stack>
+        <Stack>
+          <Text>Loading status </Text>
+          <StatusIcon status={Status.LOADING} />
+        </Stack>
+        <Stack>
+          <Text>Unknown status </Text>
+          <StatusIcon status={Status.UNKNOWN} />
+        </Stack>
+      </Wrapper>
+    );
+  },
+};