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

React versions of Mayflower design system UI components

/**
 * UtilityPanel module.
 * @module @massds/mayflower-react/UtilityPanel
 * @requires module:@massds/mayflower-assets/scss/03-organisms/utility-panel
 * @requires module:@massds/mayflower-assets/scss/01-atoms/decorative-link
 */
import React from "react";
import PropTypes from "prop-types";
import Paragraph from "../Paragraph/index.mjs";
import DecorativeLink from "../DecorativeLink/index.mjs";

const UtilityPanel = utilityPanel => {
  const descriptionClasses = ['ma__utility-panel__description'];
  const links = utilityPanel.links;

  if (!Array.isArray(links) || links.length === 0) {
    descriptionClasses.push('ma__utility-panel__description--full');
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "ma__utility-panel"
  }, /*#__PURE__*/React.createElement("div", {
    className: descriptionClasses.join(' ')
  }, /*#__PURE__*/React.createElement(Paragraph, utilityPanel.description)), /*#__PURE__*/React.createElement("ul", {
    className: "ma__utility-panel__items"
  }, links.map((decorativeLink, index) =>
  /*#__PURE__*/
  // eslint-disable-next-line react/no-array-index-key
  React.createElement("li", {
    className: "ma__utility-panel__item js-clickable",
    key: index
  }, /*#__PURE__*/React.createElement(DecorativeLink, decorativeLink)))));
};

UtilityPanel.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Text describing the contents of the panel */
  description: PropTypes.shape(Paragraph.propTypes).isRequired,

  /** Links to display in the panel */
  links: PropTypes.arrayOf(PropTypes.shape(DecorativeLink.propTypes))
} : {};
UtilityPanel.defaultProps = {
  links: []
};
export default UtilityPanel;