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

Sense UI components library

// @flow strict

import * as React from 'react';

import type {AlertSemanticType} from '../../types/common';
import {ALERT_SEMANTIC} from '../../types/common';
import classify from '../../utils/classify';
import {ClickableCard} from '../Card';
import {Chip} from '../Chip';
import type {IconSize, IconType} from '../Icon';
import {ICON_SIZE, ICON_TYPE, SemanticIcon} from '../Icon';
import {RadioButton} from '../RadioButton';
import {BodyMedium, SubTitleMedium} from '../Text';

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


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

export type RadioTileProps = {
  id: string,
  classNames?: ClassNames,
  semantic?: AlertSemanticType,
  header?: string,
  description?: string,
  chipItems?: Array<string>,
  onTileClick?: (e: SyntheticEvent<HTMLElement>, id: string) => void,
  iconName?: string,
  iconSize?: IconSize,
  iconType?: IconType,
  isSelected?: boolean,
};

export const RadioTile: React$AbstractComponent<
  RadioTileProps,
  HTMLDivElement,
> = React.forwardRef<RadioTileProps, HTMLDivElement>(
  (
    {
      classNames,
      id,
      semantic = ALERT_SEMANTIC.neutral,
      header,
      description,
      chipItems,
      iconName,
      iconSize = ICON_SIZE.medium,
      iconType = ICON_TYPE.solid,
      onTileClick,
      isSelected = false,
      ...props
    }: RadioTileProps,
    ref,
  ) => {
    const handleTileClick = (e: SyntheticEvent<HTMLElement>) => {
      onTileClick && onTileClick(e, id);
    };

    return (
      <ClickableCard
        {...props}
        ref={ref}
        data-testid="RadioTile"
        classNames={{
          wrapper: classify(css.wrapper, classNames?.wrapper),
        }}
        onClick={handleTileClick}
      >
        <div className={css.iconContainer}>
          {!!iconName && (
            <SemanticIcon
              semantic={semantic}
              name={iconName}
              size={iconSize}
              type={iconType}
            />
          )}
        </div>
        <div className={css.contentContainer}>
          <div className={css.textContainer}>
            {!!header && <SubTitleMedium>{header}</SubTitleMedium>}
            {!!description && (
              <BodyMedium color="secondary">{description}</BodyMedium>
            )}
          </div>
          {!!chipItems?.length && (
            <div className={css.chipsContainer}>
              {chipItems.map((item, index) => (
                // eslint-disable-next-line react/no-array-index-key
                <Chip key={index} semantic="primary">
                  {item}
                </Chip>
              ))}
            </div>
          )}
        </div>
        <div className={css.btnContainer}>
          <RadioButton
            classNames={{wrapper: css.radioButtonWrapper}}
            value={id}
            selectedValue={isSelected ? id : ''}
            tabIndex={-1}
          />
        </div>
      </ClickableCard>
    );
  },
);