@shopify/polaris/dist/esm/components/CalloutCard/CalloutCard.js

Shopify’s product component library

import React$1 from 'react';
import { classNames } from '../../utilities/css.js';
import { Image as Image$1 } from '../Image/Image.js';
import { CancelSmallMinor } from '@shopify/polaris-icons';
import { Button as Button$1 } from '../Button/Button.js';
import { buttonFrom } from '../Button/utils.js';
import { ButtonGroup as ButtonGroup$1 } from '../ButtonGroup/ButtonGroup.js';
import { Heading as Heading$1 } from '../Heading/Heading.js';
import { Card as Card$1 } from '../Card/Card.js';
import { TextContainer as TextContainer$1 } from '../TextContainer/TextContainer.js';
import styles from './CalloutCard.scss.js';

function CalloutCard({
  title,
  children,
  illustration,
  primaryAction,
  secondaryAction,
  onDismiss
}) {
  var primaryActionMarkup = buttonFrom(primaryAction);
  var secondaryActionMarkup = secondaryAction ? buttonFrom(secondaryAction, {
    plain: true
  }) : null;
  var buttonMarkup = secondaryActionMarkup ? /*#__PURE__*/React$1.createElement(ButtonGroup$1, null, primaryActionMarkup, secondaryActionMarkup) : primaryActionMarkup;
  var dismissButton = onDismiss ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.Dismiss
  }, /*#__PURE__*/React$1.createElement(Button$1, {
    plain: true,
    icon: CancelSmallMinor,
    onClick: onDismiss,
    accessibilityLabel: "Dismiss card"
  })) : null;
  var imageClassName = classNames(styles.Image, onDismiss && styles.DismissImage);
  return /*#__PURE__*/React$1.createElement(Card$1, null, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Container
  }, dismissButton, /*#__PURE__*/React$1.createElement(Card$1.Section, null, /*#__PURE__*/React$1.createElement("div", {
    className: styles.CalloutCard
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Content
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Title
  }, /*#__PURE__*/React$1.createElement(Heading$1, null, title)), /*#__PURE__*/React$1.createElement(TextContainer$1, null, children), /*#__PURE__*/React$1.createElement("div", {
    className: styles.Buttons
  }, buttonMarkup)), /*#__PURE__*/React$1.createElement(Image$1, {
    alt: "",
    className: imageClassName,
    source: illustration
  })))));
}

export { CalloutCard };