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

Sense UI components library

// @flow strict

import * as React from 'react';

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

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


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

export type FormTitleWrapperProps = {
  classNames?: ClassNames,
  iconType?: IconType,
  iconName?: string,
  iconSize?: IconSize,
  iconColor?: ColorTypes,
  title: React.Node, // Should always atleast have a title
  rightSlot?: React.Node,
};

export const FormTitleWrapper: React$AbstractComponent<
  FormTitleWrapperProps,
  HTMLDivElement,
> = React.forwardRef<FormTitleWrapperProps, HTMLDivElement>(
  (
    {
      classNames,
      iconType,
      iconName,
      iconSize = 'small',
      iconColor,
      title,
      rightSlot,
    }: FormTitleWrapperProps,
    ref,
  ) => (
    <div ref={ref} data-testid="FormTitleWrapper" className={css.container}>
      <div className={classify(css.leftSection, classNames?.wrapper)}>
        {!!iconName && (
          <Icon
            type={iconType}
            name={iconName}
            size={iconSize}
            color={iconColor}
          />
        )}
        {/* This is to safeguard semantics as it internally composes from a subTitleSmall className
            we don't fix the component here as <SubtitleSmall> resolves to <h4> and since title is a React.Node,
            this would break semantics in case custom components are passed inside
         */}
        <div className={classify(css.componentHousing, classNames?.title)}>
          {title}
        </div>
      </div>
      <div className={classify(css.rightSection, classNames?.rightSlot)}>
        {rightSlot}
      </div>
    </div>
  ),
);