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

React versions of Mayflower design system UI components

/**
 * 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
 */
import React from "react";
import PropTypes from "prop-types";
import DecorativeLink from "../DecorativeLink/index.mjs";
import Image from "../Image/index.mjs";
import Paragraph from "../Paragraph/index.mjs"; // eslint-disable-next-line import/no-unresolved

import IconPhone from "../Icon/IconPhone.mjs";

const ImagePromo = props => {
  const HeadingElement = "h" + (props.title.level || 2);
  const 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'];
  const imagePromoHeader = /*#__PURE__*/React.createElement("div", {
    className: "ma__image-promo__header"
  }, /*#__PURE__*/React.createElement(HeadingElement, {
    className: "ma__image-promo__title"
  }, props.tags && /*#__PURE__*/React.createElement("div", {
    className: "ma__image-promo__tags"
  }, props.tags.map(tag => /*#__PURE__*/React.createElement("span", {
    key: tag.id,
    title: tag.label,
    "data-ma-tag-id": tag.id
  }, tag.icon))), props.title ? /*#__PURE__*/React.createElement(DecorativeLink, props.title) : /*#__PURE__*/React.createElement(React.Fragment, null, props.title.text)), props.subTitle && /*#__PURE__*/React.createElement("h3", {
    className: "ma__org-info__job-title"
  }, props.subTitle));
  return /*#__PURE__*/React.createElement("section", {
    className: sectionClasses.join(' ')
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__image-promo__image"
  }, props.image && props.image.src && /*#__PURE__*/React.createElement(Image, props.image), props.stacked && imagePromoHeader), /*#__PURE__*/React.createElement("div", {
    className: "ma__image-promo__details"
  }, !props.stacked && imagePromoHeader, props.location && props.location.text && /*#__PURE__*/React.createElement("div", {
    className: "ma__image-promo__location"
  }, /*#__PURE__*/React.createElement("span", null, props.location.text), props.link && props.link.text && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DecorativeLink, props.link))), props.phone && /*#__PURE__*/React.createElement("div", {
    className: "ma__image-promo__phone"
  }, /*#__PURE__*/React.createElement(IconPhone, null), /*#__PURE__*/React.createElement("span", null, "\xA0"), props.phone.href ? /*#__PURE__*/React.createElement("a", {
    href: "tel:" + props.phone.href
  }, props.phone.text) : /*#__PURE__*/React.createElement("span", null, props.phone.text)), props.description && /*#__PURE__*/React.createElement("div", {
    className: "ma__image-promo__description"
  }, /*#__PURE__*/React.createElement(Paragraph, {
    text: props.description
  })), props.link && !props.location && /*#__PURE__*/React.createElement("div", {
    className: "ma__image-promo__link"
  }, /*#__PURE__*/React.createElement(DecorativeLink, props.link))));
};

ImagePromo.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.shape({
    level: PropTypes.number,
    href: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired
  }),
  tags: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    label: PropTypes.string,
    icon: PropTypes.element
  })),
  image: PropTypes.shape({
    src: PropTypes.string,
    alt: PropTypes.string,
    width: PropTypes.number,
    height: PropTypes.number
  }),

  /** Stack image and details */
  stacked: PropTypes.bool,

  /** Stack image and details */
  small: PropTypes.bool,

  /** Add a subtitle field below title */
  subTitle: PropTypes.string,
  description: PropTypes.string,
  link: PropTypes.shape({
    text: PropTypes.string,
    href: PropTypes.string,
    info: PropTypes.string
  }),
  location: PropTypes.shape({
    text: PropTypes.string,
    map: PropTypes.bool
  }),
  phone: PropTypes.shape({
    text: PropTypes.string.isRequired,
    href: PropTypes.string
  })
} : {};
export default ImagePromo;