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

Sense UI components library

// @flow strict

import * as React from 'react';

import type {AlertSemanticType} from '../../types/common';
import classify from '../../utils/classify';
import type {IconSize, IconType} from '../Icon';
import {SemanticIcon} from '../Icon';

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


type ClassNames = $ReadOnly<{
  wrapper?: string,
  topFoldContent?: string,
  middleFoldContent?: string,
  bottomFoldContent?: string,
}>;

export type KPIBoxProps = {
  classNames?: ClassNames,
  semantic?: AlertSemanticType,
  topContent?: React.Node,
  middleContent?: React.Node,
  bottomContent?: React.Node,
  iconName?: string,
  iconSize?: IconSize,
  iconType?: IconType,
  ...
};

export const KPIBox: React$AbstractComponent<KPIBoxProps, HTMLDivElement> =
  React.forwardRef<KPIBoxProps, HTMLDivElement>(
    (
      {
        classNames,
        semantic = 'neutral',
        topContent,
        middleContent,
        bottomContent,
        iconName,
        iconSize = 'large',
        iconType = 'solid',
        ...props
      }: KPIBoxProps,
      ref,
    ) => (
      <div
        {...props}
        ref={ref}
        data-testid="KPIBox"
        className={classify(css.wrapper, classNames?.wrapper)}
      >
        {!!iconName && (
          <SemanticIcon
            semantic={semantic}
            name={iconName}
            size={iconSize}
            type={iconType}
          />
        )}

        <div className={css.textContainer}>
          {!!topContent && (
            <div
              className={classify(
                css.topFoldContent,
                classNames?.topFoldContent,
              )}
            >
              {topContent}
            </div>
          )}
          {!!middleContent && (
            <div
              className={classify(
                css.middleFoldContent,
                classNames?.middleFoldContent,
              )}
            >
              {middleContent}
            </div>
          )}
          {!!bottomContent && (
            <div
              className={classify(
                css.bottomFoldContent,
                classNames?.bottomFoldContent,
              )}
            >
              {bottomContent}
            </div>
          )}
        </div>
      </div>
    ),
  );