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

Sense UI components library

// @flow strict

import * as React from 'react';

import {size2} from '../../styles/variables/_size';
import classify from '../../utils/classify';

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


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

export const ORIENTATION = Object.freeze({
  horizontal: 'horizontal',
  vertical: 'vertical',
});

export type OrientationType = $Values<typeof ORIENTATION>;

export type SeparatorProps = {
  classNames?: ClassNames,
  orientation?: OrientationType,
  width?: string,
  height?: string,
};

export const Separator: React$AbstractComponent<
  SeparatorProps,
  HTMLDivElement,
> = React.forwardRef<SeparatorProps, HTMLDivElement>(
  (
    {
      classNames,
      orientation = ORIENTATION.vertical,
      width,
      height,
    }: SeparatorProps,
    ref,
  ) => {
    // Dynamically compute width and height based on orientation if not provided
    const resolvedWidth =
      width || (orientation === ORIENTATION.vertical ? size2 : 'auto');
    const resolvedHeight =
      height || (orientation === ORIENTATION.horizontal ? size2 : 'auto');

    const style = {
      '--separator-width': resolvedWidth,
      '--separator-height': resolvedHeight,
    };

    return (
      <div
        ref={ref}
        data-testid="Separator"
        style={style}
        className={classify(css.wrapper, classNames?.wrapper)}
      />
    );
  },
);