nishant-design-system/lib/components/Badge/Badge.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import {
  colorDangerLightest,
  colorGrayLightest,
  colorInformationLightest,
  colorNeutralLightest,
  colorSuccessLightest,
  colorWarningLightest,
} from '../../styles/variables/_color';
import classify from '../../utils/classify';
import {ButtonTextSmall} from '../Text/Text';

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


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

export const BADGE_COLOR = Object.freeze({
  gray: colorGrayLightest,
  red: colorDangerLightest,
  orange: colorWarningLightest,
  green: colorSuccessLightest,
  blue: colorInformationLightest,
  indigo: colorNeutralLightest,
});

export type BadgeColorType = $Keys<typeof BADGE_COLOR>;

export type BadgeProps = {
  classNames?: ClassNames,
  text: string,
  fill?: BadgeColorType,
};

export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
  React.forwardRef<BadgeProps, HTMLDivElement>(
    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => (
      <div
        data-testid="Badge"
        className={classify(
          css.badgeWrapper,
          {
            [css.fixedWidth]: text.length <= 2,
          },
          classNames?.wrapper,
        )}
        style={{
          backgroundColor: BADGE_COLOR[fill],
        }}
        ref={ref}
      >
        <ButtonTextSmall>{text}</ButtonTextSmall>
      </div>
    ),
  );