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

Sense UI components library

// @flow strict

import * as React from 'react';

import classify from '../../utils/classify';
import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
import {BodyLarge, JumboMedium} from '../Text';

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


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

export type TextTileProps = {
  header?: string,
  iconName?: string,
  classNames?: ClassNames,
  description?: string,
};

export const TextTile: React$AbstractComponent<TextTileProps, HTMLDivElement> =
  React.forwardRef<TextTileProps, HTMLDivElement>(
    (
      {header, iconName = 'sparkles', classNames, description}: TextTileProps,
      ref,
    ) => (
      <div
        ref={ref}
        data-testid="TextTile"
        className={classify(css.textTileWrapper, classNames?.wrapper)}
      >
        <div className={classify(css.textTileTitle, classNames?.title)}>
          <Icon
            size={ICON_SIZE.large}
            name={iconName}
            type={ICON_TYPE.solid}
            className={css.sparkles}
          />
          <JumboMedium>{header}</JumboMedium>
        </div>
        <BodyLarge>{description}</BodyLarge>
      </div>
    ),
  );