feat: TET-863 add Status component

src/components/Status/Status.props.ts

@@ -0,0 +1,10 @@
+import { StatusConfig } from './Status.styles';
+import type { StatusAppearance } from './StatusAppearance.type';
+import type { StatusEmphasis } from './StatusEmphasis.type';
+
+export type StatusProps = {
+  appearance?: StatusAppearance;
+  custom?: StatusConfig;
+  emphasis?: StatusEmphasis;
+  label: string;
+};

src/components/Status/Status.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Status } from './Status';
+import { StatusEmphasis } from './StatusEmphasis.type';
+
+import { StatusDocs } from '@/docs-components/StatusDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+
+const meta = {
+  title: 'Status',
+  component: Status,
+  tags: ['autodocs'],
+  argTypes: {
+    emphasis: {
+      control: {
+        type: 'select',
+        options: ['high', 'medium', 'low'] satisfies StatusEmphasis[],
+      },
+    },
+  },
+  args: {
+    appearance: 'grey',
+    emphasis: 'high',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An indicator that conveys the current state or condition of a process, item, or user. Status indicators often use colors, icons, or text to communicate information, such as online presence, approval, or completion.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/status">
+          <StatusDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof Status>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    appearance: 'grey',
+    emphasis: 'high',
+    label: 'status',
+  },
+};

src/components/Status/Status.styles.ts

@@ -0,0 +1,222 @@
+import type { StatusAppearance } from './StatusAppearance.type';
+
+import { BaseProps } from '@/types';
+
+export type StatusConfig = {
+  appearance?: Partial<
+    Record<
+      StatusAppearance,
+      { emphasis?: Partial<Record<'high' | 'medium' | 'low', BaseProps>> }
+    >
+  >;
+  dot: {
+    appearance: Partial<
+      Record<
+        StatusAppearance,
+        { emphasis?: Partial<Record<'high' | 'medium' | 'low', BaseProps>> }
+      >
+    >;
+  } & BaseProps<'appearance'>;
+  hasLabel?: BaseProps;
+  innerElements: {
+    label?: BaseProps;
+  };
+} & BaseProps<'appearance'>;
+
+export const defaultConfig = {
+  display: 'flex',
+  w: 'fit-content',
+  h: '$size-xSmall',
+  gap: '$space-component-gap-small',
+  alignItems: 'center',
+  text: '$typo-body-medium',
+  dot: {
+    w: '8px',
+    h: '8px',
+    borderRadius: '$border-radius-full',
+    appearance: {
+      grey: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-white-content-primary',
+            p: '$space-component-padding-null $space-component-padding-small',
+            borderRadius: '$border-radius-medium',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-grey-background-strong',
+            p: '$space-component-padding-null $space-component-padding-small',
+            borderRadius: '$border-radius-medium',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-grey-background-strong',
+          },
+        },
+      },
+      blue: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-white-content-primary',
+            p: '$space-component-padding-null $space-component-padding-small',
+            borderRadius: '$border-radius-medium',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-blue-background-strong',
+            p: '$space-component-padding-null $space-component-padding-small',
+            borderRadius: '$border-radius-medium',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-blue-background-strong',
+          },
+        },
+      },
+      green: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-white-content-primary',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-green-background-strong',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-green-background-strong',
+          },
+        },
+      },
+      red: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-white-content-primary',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-red-background-strong',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-red-background-strong',
+          },
+        },
+      },
+      orange: {
+        emphasis: {
+          high: {
+            backgroundColor: '$color-nonSemantic-grey-content-primary',
+          },
+          medium: {
+            backgroundColor: '$color-nonSemantic-orange-background-strong',
+          },
+          low: {
+            backgroundColor: '$color-nonSemantic-orange-background-strong',
+          },
+        },
+      },
+    },
+  },
+  appearance: {
+    grey: {
+      emphasis: {
+        high: {
+          backgroundColor: '$color-nonSemantic-grey-background-strong',
+          color: '$color-nonSemantic-white-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          backgroundColor: '$color-nonSemantic-grey-background-muted',
+          color: '$color-nonSemantic-grey-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          backgroundColor: '$color-transparent',
+          color: '$color-nonSemantic-grey-content-primary',
+          borderRadius: '$border-radius-medium',
+        },
+      },
+    },
+    blue: {
+      emphasis: {
+        high: {
+          backgroundColor: '$color-nonSemantic-blue-background-strong',
+          color: '$color-nonSemantic-white-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          backgroundColor: '$color-nonSemantic-blue-background-muted',
+          color: '$color-nonSemantic-blue-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          backgroundColor: '$color-transparent',
+          color: '$color-nonSemantic-blue-content-primary',
+        },
+      },
+    },
+    green: {
+      emphasis: {
+        high: {
+          color: '$color-nonSemantic-white-content-primary',
+          backgroundColor: '$color-nonSemantic-green-background-strong',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          color: '$color-nonSemantic-green-content-primary',
+          backgroundColor: '$color-nonSemantic-green-background-muted',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          color: '$color-nonSemantic-green-content-primary',
+        },
+      },
+    },
+    red: {
+      emphasis: {
+        high: {
+          color: '$color-nonSemantic-white-content-primary',
+          backgroundColor: '$color-nonSemantic-red-background-strong',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          color: '$color-nonSemantic-red-content-primary',
+          backgroundColor: '$color-nonSemantic-red-background-muted',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          color: '$color-nonSemantic-red-content-primary',
+          backgroundColor: '$color-transparent',
+        },
+      },
+    },
+    orange: {
+      emphasis: {
+        high: {
+          backgroundColor: '$color-nonSemantic-orange-background-strong',
+          color: '$color-nonSemantic-grey-content-primary',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        medium: {
+          color: '$color-nonSemantic-orange-content-primary',
+          backgroundColor: '$color-nonSemantic-orange-background-muted',
+          p: '$space-component-padding-null $space-component-padding-small',
+          borderRadius: '$border-radius-medium',
+        },
+        low: {
+          color: '$color-nonSemantic-orange-content-primary',
+          backgroundColor: '$color-transparent',
+        },
+      },
+    },
+  },
+  innerElements: {
+    label: {},
+  },
+} satisfies StatusConfig;
+
+export const statusStyles = {
+  defaultConfig,
+};