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

React versions of Mayflower design system UI components

/**
 * ContactGroup module.
 * @module @massds/mayflower-react/ContactGroup
 * @requires module:@massds/mayflower-assets/scss/01-atoms/01-atoms/content-link
 * @requires module:@massds/mayflower-assets/scss/01-atoms/02-molecules/contact-group
 * @requires module:@massds/mayflower-assets/scss/01-atoms/decorative-link
 * @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"; // eslint-disable-next-line import/no-unresolved

import IconMarker from "../Icon/IconMarker.mjs"; // eslint-disable-next-line import/no-unresolved

import IconPhone from "../Icon/IconPhone.mjs"; // eslint-disable-next-line import/no-unresolved

import IconLaptop from "../Icon/IconLaptop.mjs"; // eslint-disable-next-line import/no-unresolved

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

const ContactGroup = contactGroup => {
  const icons = {
    SvgMarker: /*#__PURE__*/React.createElement(IconMarker, null),
    SvgPhone: /*#__PURE__*/React.createElement(IconPhone, null),
    SvgLaptop: /*#__PURE__*/React.createElement(IconLaptop, null),
    SvgFax: /*#__PURE__*/React.createElement(IconFax, null)
  };
  const Element = "h" + (contactGroup.level ? contactGroup.level : 2);

  const createItems = item => {
    switch (item.type) {
      case 'online':
        return /*#__PURE__*/React.createElement(DecorativeLink, item.link);

      case 'phone':
        return /*#__PURE__*/React.createElement("a", {
          href: "tel:" + item.link.href,
          className: "ma__content-link ma__content-link--phone"
        }, item.link.text);

      case 'email':
        return /*#__PURE__*/React.createElement("a", {
          href: "mailto:" + item.link.href,
          className: "ma__content-link"
        }, item.link.text);

      case 'address':
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
          className: "ma__contact-group__address",
          dangerouslySetInnerHTML: {
            __html: item.address
          }
        }), item.link.href && /*#__PURE__*/React.createElement("div", {
          className: "ma__contact-group__directions"
        }, /*#__PURE__*/React.createElement(DecorativeLink, item.link)));

      default:
        return /*#__PURE__*/React.createElement("span", {
          className: "ma__contact-group__value"
        }, item.link.text);
    }
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "ma__contact-group"
  }, contactGroup.name && contactGroup.icon && /*#__PURE__*/React.createElement(Element, {
    className: "ma__contact-group__name"
  }, icons[contactGroup.icon], /*#__PURE__*/React.createElement("span", null, contactGroup.name)), contactGroup.items && contactGroup.items.map((item, itemIndex) =>
  /*#__PURE__*/

  /* eslint-disable-next-line react/no-array-index-key */
  React.createElement(React.Fragment, {
    key: "contactGroup.item." + itemIndex
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__contact-group__item"
  }, item.label && /*#__PURE__*/React.createElement("span", {
    className: "ma__contact-group__label"
  }, item.label), createItems(item)), item.details && /*#__PURE__*/React.createElement("p", {
    className: "ma__contact-group__details"
  }, item.details))));
};

ContactGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  /** icon to pass to the contact group */
  icon: PropTypes.oneOf(['SvgMarker', 'SvgPhone', 'SvgLaptop', 'SvgFax']),

  /** The heading text  */
  text: PropTypes.string,

  /** The name of the contact info */
  name: PropTypes.oneOf(['Phone', 'Online', 'Fax', 'Address']),

  /** The heading level, default is 2 */
  level: PropTypes.number,

  /** A set of contact info items */
  items: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.oneOf(['phone', 'online', 'email', 'address']),
    label: PropTypes.string,
    address: PropTypes.string,
    link: PropTypes.shape(DecorativeLink.propTypes),
    details: PropTypes.string
  }))
} : {};
export default ContactGroup;