@atlaskit/empty-state/dist/es2019/empty-state.js

An empty state appears when there is no data to display and describes what the user can do next.

import React from 'react';
import ButtonGroup from '@atlaskit/button/button-group';
import Heading from '@atlaskit/heading/heading';
import { Box, Text } from '@atlaskit/primitives/compiled';
import Spinner from '@atlaskit/spinner/spinner';
import ActionsContainer from './styled/actions-container';
import Container from './styled/container';
import HeaderImage from './styled/image';
import SpinnerContainer from './styled/spinner-container';
/**
 * __Empty state__
 *
 * A component used for presenting various empty states.
 * e.g. (no items, empty search, broken link, welcome screen etc.)
 *
 * @example
 * ```tsx
 * import EmptyState from '@atlaskit/empty-state';
 *
 * // An example of a 404 state
 * export default () => {
 *  <EmptyState
 *   header="Page not found"
 *   imageUrl="https://cdn.io/images/404"
 *   description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
 *   primaryAction={<Button appearance="primary">Home Page</Button>}
 *   secondaryAction={<Button>Report a problem</Button>}
 *  />;
 * };
 * ```
 */
const EmptyState = ({
  buttonGroupLabel,
  description,
  header,
  headingLevel = 4,
  headingSize = 'medium',
  imageHeight,
  imageUrl,
  imageWidth,
  isLoading,
  maxImageHeight = 160,
  maxImageWidth = 160,
  primaryAction,
  renderImage,
  secondaryAction,
  width,
  tertiaryAction,
  testId
}) => {
  const actionsContainer = primaryAction || secondaryAction || isLoading ? /*#__PURE__*/React.createElement(ActionsContainer, null, primaryAction && secondaryAction ? /*#__PURE__*/React.createElement(ButtonGroup, {
    label: buttonGroupLabel || 'Button group',
    testId: testId && `${testId}-button-group`
  }, secondaryAction, primaryAction) : primaryAction || secondaryAction, /*#__PURE__*/React.createElement(SpinnerContainer, null, isLoading && /*#__PURE__*/React.createElement(Spinner, {
    testId: "empty-state-spinner"
  }))) : null;
  const tag = `h${headingLevel > 0 && headingLevel < 7 ? headingLevel : headingLevel > 6 ? 6 : 4}`;
  return /*#__PURE__*/React.createElement(Container, {
    testId: testId,
    width: width || 'wide'
  }, imageUrl ? /*#__PURE__*/React.createElement(HeaderImage, {
    src: imageUrl,
    maxWidth: maxImageWidth,
    maxHeight: maxImageHeight,
    width: imageWidth,
    height: imageHeight
  }) : renderImage && renderImage({
    maxImageWidth,
    maxImageHeight,
    imageWidth,
    imageHeight
  }), /*#__PURE__*/React.createElement(Box, {
    paddingBlockEnd: "space.200"
  }, /*#__PURE__*/React.createElement(Heading, {
    size: headingSize,
    as: tag
  }, header)), description && /*#__PURE__*/React.createElement(Box, {
    paddingBlockEnd: "space.300"
  }, /*#__PURE__*/React.createElement(Text, {
    as: "p"
  }, description)), actionsContainer, tertiaryAction);
};
export default EmptyState;