From 68026a2dad78616b26be8ce39b485edd5b37bfcf Mon Sep 17 00:00:00 2001
From: momodaadaa99 <daadaa.mohamed@scality.com>
Date: Fri, 8 Nov 2024 17:57:44 +0100
Subject: [PATCH] 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 <Icon color={icon.status} name={icon.name} />;
+};
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<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>
+    );
+  },
+};