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

Sense UI components library

// @flow strict

import * as React from 'react';

import {TEXT_COLORS} from '../../types/typography';
import classify from '../../utils/classify';
import type {IconSize, IconType} from '../Icon';
import {Icon} from '../Icon';

import typographyStyle from '../../styles/typography.module.css';
import css from './BadgedIcon.module.css';


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

export type BadgedIconProps = {
  type?: IconType,
  name: string,
  size?: IconSize,
  ariaLabel?: string,
  showBadge?: boolean,
  classNames?: ClassNames,
};

export const BadgedIcon = ({
  name,
  showBadge = true,
  classNames,
  size = 'medium',
  type = 'solid',
  ariaLabel,
}: BadgedIconProps): React.Node => (
  <>
    {!!name && (
      <div
        className={classify(css.iconContainer, css[size], classNames?.wrapper)}
      >
        <Icon
          ariaLabel={ariaLabel}
          name={name}
          className={classNames?.icon}
          name={name}
          size={size === 'large' ? 'medium' : size}
          type={type}
          color={TEXT_COLORS.clickable}
        />
        {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
      </div>
    )}
  </>
);

const BadgeIcon = ({className}: {className: ?string}): React.Node => (
  <svg
    className={classify(
      css.badgeIcon,
      typographyStyle[TEXT_COLORS['clickable']],
      className,
    )}
    viewBox="0 0 12 13"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z"
      fill="currentColor"
    />
  </svg>
);