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

Sense UI components library

// @flow strict
import * as React from 'react';

import type {ColorTypes} from '../../../types/typography';
import {TEXT_COLORS} from '../../../types/typography';
import {classify} from '../../../utils/classify';
import {Card, PADDING_SIZES} from '../../Card';
import {ConditionalWrapper} from '../../ConditionalWrapper';
import type {IconType} from '../../Icon';
import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
import type {Orientation} from '../Timeline';
import {ORIENTATION} from '../Timeline';

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


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

export type TimelineItemProps = {
  id?: string,
  title?: React.Node,
  iconName: string,
  children: React.Node,
  iconType?: IconType,
  iconColor?: ColorTypes,
  classNames?: ClassNames,
  description?: React.Node,
  orientation?: Orientation,
  parentComponent?: React.Node,
  enableCardWrapper?: boolean,
};

const TimelineItem_ = (
  {
    id,
    title,
    iconName,
    iconType = ICON_TYPE.solid,
    children,
    iconColor = TEXT_COLORS.information,
    classNames,
    description,
    orientation = ORIENTATION.left,
    parentComponent,
    enableCardWrapper = true,
  }: TimelineItemProps,
  ref,
): React.Node => (
  <div
    id={id}
    key={id}
    data-testid="Timeline-item"
    className={classify(css.timelineItemWrapper, classNames?.wrapper)}
    style={{
      '--align': orientation === 'left' ? 'flex-start' : 'flex-end',
    }}
    ref={ref}
  >
    {parentComponent}
    <div
      style={{
        '--direction': orientation === 'left' ? 'row' : 'row-reverse',
      }}
      className={css.timelineItemContent}
    >
      <div className={css.timelineItemIconWrapper}>
        <Icon
          name={iconName}
          type={iconType}
          size={ICON_SIZE.small}
          color={iconColor}
          className={classify(css.timelineItemIcon, classNames?.icon)}
        />
        <div className={css.timelineItemBorder}>
          <div className={css.border} />
        </div>
      </div>
      <div className={css.timelineItemEventDetails}>
        <div className={css.timelineItemInfo}>
          <div className={classify(css.timelineItemTitle, classNames?.title)}>
            {title}
          </div>
          {description ? (
            <div
              className={classify(
                css.timelineItemDescription,
                classNames?.description,
              )}
            >
              {description}
            </div>
          ) : null}
        </div>
        <ConditionalWrapper
          condition={enableCardWrapper}
          wrapper={(children) => (
            <Card
              paddingTop={PADDING_SIZES.small}
              paddingBottom={PADDING_SIZES.small}
              classNames={{
                wrapper: classify(
                  css.timelineItemCardWrapper,
                  classNames?.card,
                ),
              }}
            >
              {children}
            </Card>
          )}
        >
          {children}
        </ConditionalWrapper>
      </div>
    </div>
  </div>
);

export const TimelineItem = (React.forwardRef<
  TimelineItemProps,
  HTMLDivElement,
>(TimelineItem_): React$AbstractComponent<TimelineItemProps, HTMLDivElement>);