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

React versions of Mayflower design system UI components

function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * SectionLinks module.
 * @module @massds/mayflower-react/SectionLinks
 * @requires module:@massds/mayflower-assets/scss/01-atoms/decorative-link
 * @requires module:@massds/mayflower-assets/scss/02-molecules/accordion-item
 * @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 AccordionItem from "../AccordionItem/index.mjs";
let SectionCard = /*#__PURE__*/function (_React$Component) {
  function SectionCard(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _defineProperty(_this, "getCardContent", mobile => {
      const _this$props = _this.props,
        description = _this$props.description,
        index = _this$props.index,
        title = _this$props.title,
        children = _this$props.children,
        seeAll = _this$props.seeAll;
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("nav", {
        className: mobile ? 'ma__section-links__toggle-content-mobile' : 'ma__section-links__toggle-content',
        "aria-labelledby": mobile ? null : "sectionCard" + index,
        id: mobile ? null : "sectionCardContent" + index
      }, description && /*#__PURE__*/React.createElement("p", {
        className: "ma__section-links__description"
      }, description), /*#__PURE__*/React.createElement("div", {
        className: "ma__section-links__mobile-title"
      }, title.href && title.href.length > 0 && /*#__PURE__*/React.createElement("div", {
        className: "ma__section-links__mobile-title"
      }, /*#__PURE__*/React.createElement(DecorativeLink, {
        href: title.href,
        text: "Learn More",
        info: "learn more about " + title.text
      }))), /*#__PURE__*/React.createElement("ul", {
        className: "ma__section-links__items"
      },
      // eslint-disable-next-line react/prop-types
      children && children.map((child, i) =>
      /*#__PURE__*/
      // eslint-disable-next-line react/no-array-index-key
      React.createElement("li", {
        className: "ma__section-links__item",
        key: "sectionCard" + index + ".Link" + i
      }, child)))), seeAll && /*#__PURE__*/React.createElement("div", {
        className: "ma__section-links__footer"
      }, /*#__PURE__*/React.createElement(DecorativeLink, {
        href: seeAll.href,
        text: seeAll.text
      })));
    });
    _defineProperty(_this, "handleClick", e => {
      e.preventDefault();
      const expanded = _this.state.expanded;
      _this.setState({
        expanded: !expanded
      });
    });
    _this.updateWindowDimensions = _this.updateWindowDimensions.bind(_this);
    _this.state = {
      width: 1200,
      expanded: false
    };
    return _this;
  }
  _inheritsLoose(SectionCard, _React$Component);
  var _proto = SectionCard.prototype;
  _proto.componentDidMount = function componentDidMount() {
    this.updateWindowDimensions();
    // eslint-disable-next-line no-undef
    window.addEventListener('resize', this.updateWindowDimensions);
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    // eslint-disable-next-line no-undef
    window.removeEventListener('resize', this.updateWindowDimensions);
  };
  _proto.updateWindowDimensions = function updateWindowDimensions() {
    // eslint-disable-next-line no-undef
    this.setState({
      width: window.innerWidth
    });
  };
  _proto.render = function render() {
    const _this$state = this.state,
      expanded = _this$state.expanded,
      width = _this$state.width;
    const _this$props2 = this.props,
      index = _this$props2.index,
      title = _this$props2.title;
    const accordionClasses = expanded ? 'is-open' : 'is-closed';
    if (width > 481) {
      return /*#__PURE__*/React.createElement("section", {
        className: "ma__section-links"
      }, /*#__PURE__*/React.createElement("div", {
        className: "ma__section-links__content"
      }, /*#__PURE__*/React.createElement("h2", {
        className: "ma__section-links__title",
        id: "sectionCard" + index
      }, title.href && title.href.length > 0 ? /*#__PURE__*/React.createElement(DecorativeLink, {
        href: title.href,
        text: title.text
      }) : title.text), this.getCardContent(false)));
    }
    return /*#__PURE__*/React.createElement("section", {
      className: "ma__section-links " + accordionClasses
    }, /*#__PURE__*/React.createElement(AccordionItem, {
      title: title.text,
      emphasize: false,
      icon: null,
      id: "sectionCard" + index
    }, this.getCardContent(true)));
  };
  return SectionCard;
}(React.Component);
SectionCard.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The title of the card, it can be a link or just a heading text.
  If title is a link (has href), the link will be rendered as a "Learn More" link on mobile below the title and description. */
  title: PropTypes.shape({
    // If href is provided, the card title will render as a decorative link. Otherwise it will render as a heading text
    href: PropTypes.string,
    text: PropTypes.string.isRequired
  }),
  /** An optional decorative link rendered at the bottom of the card on desktop. This is usually used to link to a landing page for the category. */
  seeAll: PropTypes.shape({
    href: PropTypes.string,
    text: PropTypes.string
  }),
  /** An optional description of the card rendered below the card title. */
  description: PropTypes.string,
  /** A unique number index of the card used for setting key and id */
  index: PropTypes.number,
  /** An array of child components to render as links inside of the card. Currently the options passed into the card from budget homepages are either CalloutLinks or DecorativeLinks. */
  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
} : {};
export default SectionCard;