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

Sense UI components library

// @flow strict

import * as React from 'react';

import classify from '../../utils/classify';

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


export type StickyBarProps = {
  className?: string,
  children: React.Node,
  position?: 'top' | 'bottom',
  ...
};

export type StickyBarChildProps = {
  className?: string,
  children: React.Node,
  ...
};

export const StickyBarLeftSlot = ({
  className,
  children,
  ...props
}: StickyBarChildProps): React.Node => (
  <div {...props} className={classify(css.leftSlot, className)}>
    {children}
  </div>
);

export const StickyBarRightSlot = ({
  className,
  children,
  ...props
}: StickyBarChildProps): React.Node => (
  <div {...props} className={classify(css.rightSlot, className)}>
    {children}
  </div>
);

export const StickyBar: React$AbstractComponent<
  StickyBarProps,
  HTMLDivElement,
> = React.forwardRef<StickyBarProps, HTMLDivElement>(
  (
    {className, children, position = 'bottom', ...props}: StickyBarProps,
    ref,
  ) => (
    <div
      {...props}
      ref={ref}
      data-testid="StickyBar"
      className={classify(
        css.wrapper,
        {
          [css.top]: position === 'top',
          [css.bottom]: position === 'bottom',
        },
        className,
      )}
    >
      {children}
    </div>
  ),
);