@massds/mayflower-react/dist/ImagePromo/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _index = _interopRequireDefault(require("../DecorativeLink/index.js"));
var _index2 = _interopRequireDefault(require("../Image/index.js"));
var _index3 = _interopRequireDefault(require("../Paragraph/index.js"));
var _IconPhone = _interopRequireDefault(require("../Icon/IconPhone.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
 * ImagePromo module.
 * @module @massds/mayflower-react/ImagePromo
 * @requires module:@massds/mayflower-assets/scss/02-molecules/image-promo
 * @requires module:@massds/mayflower-assets/scss/02-molecules/org-info
 * @requires module:@massds/mayflower-assets/scss/01-atoms/decorative-link
 * @requires module:@massds/mayflower-assets/scss/01-atoms/image
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */

// eslint-disable-next-line import/no-unresolved

var ImagePromo = function ImagePromo(props) {
  var HeadingElement = "h" + (props.title.level || 2);
  var sectionClasses = ['ma__image-promo', props.stacked && 'ma__image-promo--stacked', props.small && 'ma__image-promo--small', props.location && props.location.map && 'js-location-listing-link'];
  var imagePromoHeader = /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__image-promo__header"
  }, /*#__PURE__*/_react["default"].createElement(HeadingElement, {
    className: "ma__image-promo__title"
  }, props.tags && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__image-promo__tags"
  }, props.tags.map(function (tag) {
    return /*#__PURE__*/_react["default"].createElement("span", {
      key: tag.id,
      title: tag.label,
      "data-ma-tag-id": tag.id
    }, tag.icon);
  })), props.title ? /*#__PURE__*/_react["default"].createElement(_index["default"], props.title) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.title.text)), props.subTitle && /*#__PURE__*/_react["default"].createElement("h3", {
    className: "ma__org-info__job-title"
  }, props.subTitle));
  return /*#__PURE__*/_react["default"].createElement("section", {
    className: sectionClasses.join(' ')
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__image-promo__image"
  }, props.image && props.image.src && /*#__PURE__*/_react["default"].createElement(_index2["default"], props.image), props.stacked && imagePromoHeader), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__image-promo__details"
  }, !props.stacked && imagePromoHeader, props.location && props.location.text && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__image-promo__location"
  }, /*#__PURE__*/_react["default"].createElement("span", null, props.location.text), props.link && props.link.text && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_index["default"], props.link))), props.phone && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__image-promo__phone"
  }, /*#__PURE__*/_react["default"].createElement(_IconPhone["default"], null), /*#__PURE__*/_react["default"].createElement("span", null, "\xA0"), props.phone.href ? /*#__PURE__*/_react["default"].createElement("a", {
    href: "tel:" + props.phone.href
  }, props.phone.text) : /*#__PURE__*/_react["default"].createElement("span", null, props.phone.text)), props.description && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__image-promo__description"
  }, /*#__PURE__*/_react["default"].createElement(_index3["default"], {
    text: props.description
  })), props.link && !props.location && /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__image-promo__link"
  }, /*#__PURE__*/_react["default"].createElement(_index["default"], props.link))));
};
ImagePromo.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes["default"].shape({
    level: _propTypes["default"].number,
    href: _propTypes["default"].string.isRequired,
    text: _propTypes["default"].string.isRequired
  }),
  tags: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    id: _propTypes["default"].string.isRequired,
    label: _propTypes["default"].string,
    icon: _propTypes["default"].element
  })),
  image: _propTypes["default"].shape({
    src: _propTypes["default"].string,
    alt: _propTypes["default"].string,
    width: _propTypes["default"].number,
    height: _propTypes["default"].number
  }),
  /** Stack image and details */
  stacked: _propTypes["default"].bool,
  /** Stack image and details */
  small: _propTypes["default"].bool,
  /** Add a subtitle field below title */
  subTitle: _propTypes["default"].string,
  description: _propTypes["default"].string,
  link: _propTypes["default"].shape({
    text: _propTypes["default"].string,
    href: _propTypes["default"].string,
    info: _propTypes["default"].string
  }),
  location: _propTypes["default"].shape({
    text: _propTypes["default"].string,
    map: _propTypes["default"].bool
  }),
  phone: _propTypes["default"].shape({
    text: _propTypes["default"].string.isRequired,
    href: _propTypes["default"].string
  })
} : {};
var _default = exports["default"] = ImagePromo;
module.exports = exports.default;