@atlaskit/empty-state/dist/esm/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>}
 *  />;
 * };
 * ```
 */
var EmptyState = function EmptyState(_ref) {
  var buttonGroupLabel = _ref.buttonGroupLabel,
    description = _ref.description,
    header = _ref.header,
    _ref$headingLevel = _ref.headingLevel,
    headingLevel = _ref$headingLevel === void 0 ? 4 : _ref$headingLevel,
    _ref$headingSize = _ref.headingSize,
    headingSize = _ref$headingSize === void 0 ? 'medium' : _ref$headingSize,
    imageHeight = _ref.imageHeight,
    imageUrl = _ref.imageUrl,
    imageWidth = _ref.imageWidth,
    isLoading = _ref.isLoading,
    _ref$maxImageHeight = _ref.maxImageHeight,
    maxImageHeight = _ref$maxImageHeight === void 0 ? 160 : _ref$maxImageHeight,
    _ref$maxImageWidth = _ref.maxImageWidth,
    maxImageWidth = _ref$maxImageWidth === void 0 ? 160 : _ref$maxImageWidth,
    primaryAction = _ref.primaryAction,
    renderImage = _ref.renderImage,
    secondaryAction = _ref.secondaryAction,
    width = _ref.width,
    tertiaryAction = _ref.tertiaryAction,
    testId = _ref.testId;
  var actionsContainer = primaryAction || secondaryAction || isLoading ? /*#__PURE__*/React.createElement(ActionsContainer, null, primaryAction && secondaryAction ? /*#__PURE__*/React.createElement(ButtonGroup, {
    label: buttonGroupLabel || 'Button group',
    testId: testId && "".concat(testId, "-button-group")
  }, secondaryAction, primaryAction) : primaryAction || secondaryAction, /*#__PURE__*/React.createElement(SpinnerContainer, null, isLoading && /*#__PURE__*/React.createElement(Spinner, {
    testId: "empty-state-spinner"
  }))) : null;
  var tag = "h".concat(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: maxImageWidth,
    maxImageHeight: maxImageHeight,
    imageWidth: imageWidth,
    imageHeight: 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;