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

Sense UI components library

// @flow strict

import * as React from 'react';

import {
  colorDanger,
  colorDangerLightest,
  colorGrayLightest,
  colorInformation,
  colorInformationLightest,
  colorNeutral,
  colorNeutralLightest,
  colorSuccess,
  colorSuccessLightest,
  colorWarning,
  colorWarningLightest,
} from '../../styles/variables/_color';
import classify from '../../utils/classify';
import type {IconSize, IconType} from '../Icon';
import {Icon} from '../Icon';
import {ButtonTextSmall} from '../Text';

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


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

export const BADGE_COLOR = Object.freeze({
  gray: colorGrayLightest,
  red: colorDangerLightest,
  redDark: colorDanger,
  orange: colorWarningLightest,
  orangeDark: colorWarning,
  green: colorSuccessLightest,
  greenDark: colorSuccess,
  blue: colorInformationLightest,
  blueDark: colorInformation,
  indigo: colorNeutralLightest,
  indigoDark: colorNeutral,
});

export type BadgeColorType = $Keys<typeof BADGE_COLOR>;

export type BaseBadgeProps = {
  classNames?: ClassNames,
  fill?: BadgeColorType,
};

export type BadgeProps = {
  ...BaseBadgeProps,
  text: string,
};

export type IconBadgeProps = {
  ...BaseBadgeProps,
  iconName: string,
  iconType?: IconType,
  iconSize?: IconSize,
  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
  ariaLabel?: string,
};

export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
  React.forwardRef<BadgeProps, HTMLDivElement>(
    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => {
      const isDark = fill.includes('Dark');

      return (
        <div
          data-testid="Badge"
          style={{
            '--wrapperBgColor': BADGE_COLOR[fill],
          }}
          className={classify(
            css.badgeWrapper,
            {
              [css.fixedWidth]: text.length <= 2,
            },
            classNames?.wrapper,
          )}
          ref={ref}
        >
          <ButtonTextSmall
            className={classify(
              {
                [css.dark]: isDark,
                [css.light]: !isDark,
              },
              classNames?.text,
            )}
          >
            {text}
          </ButtonTextSmall>
        </div>
      );
    },
  );

export const IconBadge: React$AbstractComponent<
  IconBadgeProps,
  HTMLDivElement,
> = React.forwardRef<IconBadgeProps, HTMLDivElement>(
  (
    {
      classNames,
      fill = 'gray',
      iconName,
      iconSize = 'small',
      iconType = 'solid',
      ariaLabel,
      onClick,
    }: IconBadgeProps,
    ref,
  ): React.Node => {
    const isDark = fill.includes('Dark');

    return (
      <div
        data-testid="Badge"
        style={{
          '--wrapperBgColor': BADGE_COLOR[fill],
        }}
        className={classify(
          css.badgeWrapper,
          css.iconContainer,
          classNames?.wrapper,
        )}
        ref={ref}
      >
        <Icon
          name={iconName}
          type={iconType}
          size={iconSize}
          ariaLabel={ariaLabel}
          onClick={onClick}
          className={classify(
            {
              [css.dark]: isDark,
              [css.light]: !isDark,
            },
            classNames?.icon,
          )}
        />
      </div>
    );
  },
);