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

React versions of Mayflower design system UI components

/**
 * LinkList module.
 * @module @massds/mayflower-react/LinkList
 * @requires module:@massds/mayflower-assets/scss/03-organisms/link-list
 * @requires module:@massds/mayflower-assets/scss/01-atoms/comp-heading
 * @requires module:@massds/mayflower-assets/scss/01-atoms/decorative-link
 */
import React from "react";
import PropTypes from "prop-types";

// import child components
import CompHeading from "../CompHeading/index.mjs";
import Paragraph from "../Paragraph/index.mjs";
import DecorativeLink from "../DecorativeLink/index.mjs";
import nanoid from "nanoid";
const LinkList = props => {
  const compHeading = props.compHeading,
    description = props.description,
    stacked = props.stacked,
    hideBullets = props.hideBullets,
    links = props.links,
    more = props.more;
  const bulletClass = hideBullets ? 'ma__link-list__items--no-bullets' : '';
  const length = links.length;
  const halfLength = Math.ceil(length / 2);
  return /*#__PURE__*/React.createElement("section", {
    className: "ma__link-list"
  }, compHeading && /*#__PURE__*/React.createElement(CompHeading, compHeading), description && /*#__PURE__*/React.createElement(Paragraph, description), /*#__PURE__*/React.createElement("div", {
    className: "ma__link-list__container"
  }, stacked || length < 4 ? /*#__PURE__*/React.createElement("ul", {
    className: "ma__link-list__items " + bulletClass
  }, links.map((link, index) =>
  /*#__PURE__*/
  /* eslint-disable-next-line react/no-array-index-key */
  React.createElement("li", {
    className: "ma__link-list__item",
    key: index
  }, /*#__PURE__*/React.createElement(DecorativeLink, link)))) : /*#__PURE__*/React.createElement("ul", {
    className: "ma__link-list__items ma__link-list__items_columns " + bulletClass
  }, links.slice(0, halfLength).map((link, index) =>
  /*#__PURE__*/
  /* eslint-disable-next-line react/no-array-index-key */
  React.createElement("li", {
    className: "ma__link-list__item item-left",
    key: index
  }, /*#__PURE__*/React.createElement(DecorativeLink, link))), links.slice(halfLength, length).map(link =>
  /*#__PURE__*/
  /* eslint-disable-next-line react/no-array-index-key */
  React.createElement("li", {
    className: "ma__link-list__item item-right",
    key: nanoid()
  }, /*#__PURE__*/React.createElement(DecorativeLink, link))))), /*#__PURE__*/React.createElement("div", {
    className: "ma__link-list__see-all"
  }, more && /*#__PURE__*/React.createElement(DecorativeLink, more)));
};
LinkList.propTypes = process.env.NODE_ENV !== "production" ? {
  /** `@atoms/headings/CompHeading` */
  compHeading: PropTypes.shape(CompHeading.PropTypes),
  /** short description rendered below the heading, note that this version renders `@atoms/text/Paragraph` instead of rich text */
  description: PropTypes.shape(Paragraph.PropTypes),
  /** Render links as a stacked list instead of two columns */
  stacked: PropTypes.bool,
  /** Hide bullets for the list of links */
  hideBullets: PropTypes.bool,
  /** List of links rendered */
  links: PropTypes.arrayOf(PropTypes.shape(DecorativeLink.PropTypes)).isRequired,
  /** `@atoms/DecorativeLink` as see all link */
  more: PropTypes.shape(DecorativeLink.PropTypes)
} : {};
export default LinkList;