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

Sense UI components library

// @flow strict

import * as React from 'react';

import {ALERT_SEMANTIC} from '../../types/common';
import classify from '../../utils/classify';
import type {InContextAlertProps} from '../InContextAlert';
import {InContextAlert} from '../InContextAlert';

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


export type BannerProps = {
  ...InContextAlertProps,
  alignment?: 'top' | 'bottom',
};

export const Banner: React$AbstractComponent<BannerProps, HTMLDivElement> =
  React.forwardRef<BannerProps, HTMLDivElement>(
    (
      {
        classNames,
        semantic,
        leftIconType = 'solid',
        alignment = 'top',
        ...props
      }: BannerProps,
      ref,
    ): React.Node => (
      <>
        <InContextAlert
          {...props}
          leftIconType={leftIconType}
          semantic={semantic}
          ref={ref}
          classNames={{
            ...classNames,
            wrapper: classify(
              css.bannerContainer,
              {
                [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
                [css.success]: semantic === ALERT_SEMANTIC.success,
                [css.information]: semantic === ALERT_SEMANTIC.information,
                [css.warning]: semantic === ALERT_SEMANTIC.warning,
                [css.danger]: semantic === ALERT_SEMANTIC.danger,
                [css.topAligned]: alignment === 'top',
                [css.bottomAligned]: alignment === 'bottom',
              },
              classNames?.wrapper,
            ),
            alertText: classify(classNames?.alertText),
            actionContainer: classify(
              css.alertContainer,
              classNames?.actionContainer,
            ),
          }}
        />
      </>
    ),
  );