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

Sense UI components library

// @flow strict

import * as React from 'react';

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

import {
  ForbiddenImage,
  NotFoundImage,
  ServerErrorImage,
  UnauthorizedImage,
} from './ErrorImages';

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


type ClassNames = $ReadOnly<{
  wrapper?: string,
  image?: string,
  heading?: string,
  title?: string,
  description?: string,
  children?: string,
}>;

export type ErrorMessageProps = {
  classNames?: ClassNames,
  children?: React.Node,
  imageVariant?: 'unauthorized' | 'forbidden' | 'notFound' | 'serverError',
  title?: React.Node,
  description?: React.Node,
  heading?: React.Node,
  customImageUrl?: string,
  ...
};

export const ErrorMessage: React$AbstractComponent<
  ErrorMessageProps,
  HTMLDivElement,
> = React.forwardRef<ErrorMessageProps, HTMLDivElement>(
  (
    {
      classNames,
      children,
      imageVariant,
      title,
      description,
      customImageUrl,
      heading,
      ...props
    }: ErrorMessageProps,
    ref,
  ): React.Node => (
    <div
      {...props}
      data-testid="ErrorMessage"
      className={classify(css.wrapper, classNames?.wrapper)}
      ref={ref}
    >
      {!!imageVariant && !customImageUrl && (
        <div className={classify(css.image, classNames?.image)}>
          {imageVariant === 'unauthorized' && <UnauthorizedImage />}
          {imageVariant === 'forbidden' && <ForbiddenImage />}
          {imageVariant === 'notFound' && <NotFoundImage />}
          {imageVariant === 'serverError' && <ServerErrorImage />}
        </div>
      )}
      {customImageUrl && (
        <img
          className={classify(css.image, classNames?.image)}
          src={customImageUrl}
          alt="Empty State"
        />
      )}
      {!!heading && (
        <div className={classify(css.heading, classNames?.heading)}>
          {heading}
        </div>
      )}
      {!!title && (
        <div className={classify(css.title, classNames?.title)}>{title}</div>
      )}
      {!!description && (
        <div className={classify(css.description, classNames?.description)}>
          {description}
        </div>
      )}
      {!!children && (
        <div className={classify(css.childrenWrapper, classNames?.children)}>
          {children}
        </div>
      )}
    </div>
  ),
);