@spaced-out/ui-design-system/lib/components/StatusIndicator/StatusIndicator.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import * as COLORS from '../../styles/variables/_color';
import classify from '../../utils/classify';

import css from './StatusIndicator.module.css';


type ClassNames = $ReadOnly<{wrapper?: string}>;

export const STATUS_SEMANTIC = Object.freeze({
  primary: 'primary',
  information: 'information',
  success: 'success',
  warning: 'warning',
  danger: 'danger',
  neutral: 'neutral',
  secondary: 'secondary',
});

export type StatusSemanticType = $Values<typeof STATUS_SEMANTIC>;

export type StatusIndicatorProps = {
  classNames?: ClassNames,
  status?: StatusSemanticType,
  withBorder?: boolean,
  borderColorToken?: $Keys<typeof COLORS>,
  disabled?: boolean,
  ...
};

export const StatusIndicator: React$AbstractComponent<
  StatusIndicatorProps,
  HTMLDivElement,
> = React.forwardRef<StatusIndicatorProps, HTMLDivElement>(
  (
    {
      classNames,
      status = 'information',
      withBorder,
      borderColorToken = 'colorBackgroundTertiary',
      disabled,
      ...props
    }: StatusIndicatorProps,
    ref,
  ): React.Node => (
    <div
      {...props}
      data-testid="StatusIndicator"
      className={classify(
        css.statusWrapper,
        css[status],
        {
          [css.withBorder]: withBorder,
          [css.disabled]: disabled,
        },
        classNames?.wrapper,
      )}
      ref={ref}
      style={{
        '--border-color':
          COLORS[borderColorToken] || COLORS['colorBackgroundTertiary'],
      }}
    ></div>
  ),
);