feat: #244 add new status indicator component

src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap

@@ -0,0 +1,113 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StatusIndicator > should render as expected 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="neutral"
+    />
+    Neutral
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 2`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="success"
+    />
+    Success
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 3`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="warning"
+    />
+    Warning
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 4`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="pending"
+    />
+    Pending
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 5`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="danger"
+    />
+    Danger
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 6`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="inactive"
+    />
+    Inactive
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 7`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="accent1"
+    />
+    Accent 1
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 8`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="accent2"
+    />
+    Accent 2
+  </div>
+</DocumentFragment>
+`;

src/components/status-indicator/__tests__/status-indicator.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+import { StatusIndicator } from '../status-indicator'
+
+describe('StatusIndicator', () => {
+  it('should render as expected', () => {
+    expect(render(<StatusIndicator variant="neutral">Neutral</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="success">Success</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="warning">Warning</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="pending">Pending</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="danger">Danger</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="inactive">Inactive</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="accent1">Accent 1</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="accent2">Accent 2</StatusIndicator>).asFragment()).toMatchSnapshot()
+  })
+})

src/components/status-indicator/index.ts

@@ -0,0 +1 @@
+export * from './status-indicator'

src/components/status-indicator/status-indicator.mdx

@@ -0,0 +1,23 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as StatusIndicatorStories from './status-indicator.stories'
+
+<Meta of={StatusIndicatorStories} />
+
+# Status Indicator
+
+A Status Indicator is a low-visibility component used to highlight important information.
+
+<Controls />
+
+## Default
+
+<Canvas of={StatusIndicatorStories.Default} />
+
+<RenderHtmlMarkup of={StatusIndicatorStories.Default} />
+
+## Variants
+
+<Canvas of={StatusIndicatorStories.Variants} />
+
+<RenderHtmlMarkup of={StatusIndicatorStories.Variants} />

src/components/status-indicator/status-indicator.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/react'
+import { StatusIndicator } from './status-indicator'
+import { FlexContainer } from '../layout'
+
+const meta = {
+  title: 'Components/Status Indicator',
+  component: StatusIndicator,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['neutral', 'success', 'pending', 'warning', 'danger', 'inactive', 'accent1', 'accent2'],
+      description: 'Defines the status indicator style variant.',
+    },
+    className: {
+      control: 'text',
+      description: 'CSS class for additional styling',
+    },
+  },
+} satisfies Meta<typeof StatusIndicator>
+
+export default meta
+
+export const Default = {
+  args: {
+    children: 'Status Indicator',
+  },
+}
+
+export const Variants = {
+  render: ({}) => (
+    <FlexContainer style={{ gap: 'var(--spacing-7)' }}>
+      <StatusIndicator variant="neutral">Neutral</StatusIndicator>
+      <StatusIndicator variant="success">Success</StatusIndicator>
+      <StatusIndicator variant="pending">Pending</StatusIndicator>
+      <StatusIndicator variant="warning">Warning</StatusIndicator>
+      <StatusIndicator variant="danger">Danger</StatusIndicator>
+      <StatusIndicator variant="inactive">Neutral</StatusIndicator>
+      <StatusIndicator variant="accent1">Accent 1</StatusIndicator>
+      <StatusIndicator variant="accent2">Accent 2</StatusIndicator>
+    </FlexContainer>
+  ),
+}

src/components/status-indicator/status-indicator.tsx

@@ -0,0 +1,35 @@
+import { FC, HTMLAttributes, ReactNode } from 'react'
+import { ElStatusIndicator, ElStatusIndicatorShape } from './styles'
+
+export type StatusIndicatorVariant =
+  | 'neutral'
+  | 'success'
+  | 'pending'
+  | 'warning'
+  | 'danger'
+  | 'inactive'
+  | 'accent1'
+  | 'accent2'
+
+export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * The variant of the status indicator, used to highlight important information
+   *
+   * @default "neutral"
+   */
+  variant?: StatusIndicatorVariant
+
+  /**
+   * The related content associated with the status indicator variant
+   */
+  children: ReactNode
+}
+
+export const StatusIndicator: FC<StatusIndicatorProps> = ({ variant = 'neutral', children, ...rest }) => {
+  return (
+    <ElStatusIndicator {...rest}>
+      <ElStatusIndicatorShape data-variant={variant} />
+      {children}
+    </ElStatusIndicator>
+  )
+}

src/components/status-indicator/styles.ts

@@ -0,0 +1,53 @@
+import { styled } from '@linaria/react'
+
+export const ElStatusIndicatorShape = styled.span`
+  width: var(--size-2);
+  height: var(--size-2);
+  border-radius: 100%;
+
+  &[data-variant='neutral'] {
+    background: var(--icon-info);
+  }
+
+  &[data-variant='success'] {
+    background: var(--icon-success);
+  }
+
+  &[data-variant='pending'] {
+    background: var(--icon-pending);
+  }
+
+  &[data-variant='warning'] {
+    background: var(--icon-warning);
+  }
+
+  &[data-variant='danger'] {
+    background: var(--icon-error);
+  }
+
+  &[data-variant='inactive'] {
+    background: var(--icon-secondary);
+  }
+
+  &[data-variant='accent1'] {
+    background: var(--icon-accent_1);
+  }
+
+  &[data-variant='accent2'] {
+    background: var(--icon-accent_2);
+  }
+`
+
+export const ElStatusIndicator = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-sm);
+  letter-spacing: var(--letter-spacing-sm);
+`

src/index.ts

@@ -31,6 +31,7 @@ export * from './components/select'
 export * from './components/searchable-dropdown'
 export * from './components/snack'
 export * from './components/deprecated-status-indicator'
+export * from './components/status-indicator'
 export * from './components/steps'
 export * from './components/deprecated-table'
 export * from './components/tabs'