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

Shopify’s product component library

import React$1 from 'react';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames } from '../../utilities/css.js';
import { HorizontalDotsMinor } from '@shopify/polaris-icons';
import { Popover as Popover$1 } from '../Popover/Popover.js';
import { ActionList as ActionList$1 } from '../ActionList/ActionList.js';
import { Button as Button$1 } from '../Button/Button.js';
import { buttonFrom } from '../Button/utils.js';
import { useToggle as useToggle$1 } from '../../utilities/use-toggle.js';
import { ButtonGroup as ButtonGroup$1 } from '../ButtonGroup/ButtonGroup.js';
import { Stack as Stack$1 } from '../Stack/Stack.js';
import { Heading as Heading$1 } from '../Heading/Heading.js';
import { Card as Card$1 } from '../Card/Card.js';
import styles from './MediaCard.scss.js';

function MediaCard({
  title,
  children,
  primaryAction,
  secondaryAction,
  description,
  popoverActions = [],
  portrait = false,
  size = 'medium'
}) {
  var i18n = useI18n();
  var {
    value: popoverActive,
    toggle: togglePopoverActive
  } = useToggle$1(false);
  var popoverActivator = /*#__PURE__*/React$1.createElement(Button$1, {
    icon: HorizontalDotsMinor,
    onClick: togglePopoverActive,
    size: "slim",
    plain: true,
    accessibilityLabel: i18n.translate('Polaris.MediaCard.popoverButton')
  });
  var popoverActionsMarkup = popoverActions.length > 0 ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.Popover
  }, /*#__PURE__*/React$1.createElement(Popover$1, {
    active: popoverActive,
    activator: popoverActivator,
    onClose: togglePopoverActive,
    preferredAlignment: "left",
    preferredPosition: "below"
  }, /*#__PURE__*/React$1.createElement(ActionList$1, {
    items: popoverActions,
    onActionAnyItem: togglePopoverActive
  }))) : null;
  var primaryActionMarkup = /*#__PURE__*/React$1.createElement("div", {
    className: styles.PrimaryAction
  }, buttonFrom(primaryAction));
  var secondaryActionMarkup = secondaryAction ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.SecondaryAction
  }, buttonFrom(secondaryAction, {
    plain: true
  })) : null;
  var actionClassName = classNames(styles.ActionContainer, portrait && styles.portrait);
  var actionMarkup = /*#__PURE__*/React$1.createElement("div", {
    className: actionClassName
  }, /*#__PURE__*/React$1.createElement(ButtonGroup$1, null, primaryActionMarkup, secondaryActionMarkup));
  var mediaCardClassName = classNames(styles.MediaCard, portrait && styles.portrait);
  var mediaContainerClassName = classNames(styles.MediaContainer, portrait && styles.portrait, size === 'small' && styles.sizeSmall);
  var infoContainerClassName = classNames(styles.InfoContainer, portrait && styles.portrait, size === 'small' && styles.sizeSmall);
  return /*#__PURE__*/React$1.createElement(Card$1, null, /*#__PURE__*/React$1.createElement("div", {
    className: mediaCardClassName
  }, /*#__PURE__*/React$1.createElement("div", {
    className: mediaContainerClassName
  }, children), /*#__PURE__*/React$1.createElement("div", {
    className: infoContainerClassName
  }, /*#__PURE__*/React$1.createElement(Card$1.Section, null, popoverActionsMarkup, /*#__PURE__*/React$1.createElement(Stack$1, {
    vertical: true,
    spacing: "tight"
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Heading
  }, /*#__PURE__*/React$1.createElement(Heading$1, null, title)), /*#__PURE__*/React$1.createElement("p", {
    className: styles.Description
  }, description), actionMarkup)))));
}

export { MediaCard };