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

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _index = _interopRequireDefault(require("../DecorativeLink/index.js"));

var _index2 = _interopRequireDefault(require("../AccordionItem/index.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var SectionCard = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(SectionCard, _React$Component);

  function SectionCard(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_this), "getCardContent", function (mobile) {
      var _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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].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["default"].createElement("p", {
        className: "ma__section-links__description"
      }, description), /*#__PURE__*/_react["default"].createElement("div", {
        className: "ma__section-links__mobile-title"
      }, title.href && title.href.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
        className: "ma__section-links__mobile-title"
      }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
        href: title.href,
        text: "Learn More",
        info: "learn more about " + title.text
      }))), /*#__PURE__*/_react["default"].createElement("ul", {
        className: "ma__section-links__items"
      }, // eslint-disable-next-line react/prop-types
      children && children.map(function (child, i) {
        return (
          /*#__PURE__*/
          // eslint-disable-next-line react/no-array-index-key
          _react["default"].createElement("li", {
            className: "ma__section-links__item",
            key: "sectionCard" + index + ".Link" + i
          }, child)
        );
      }))), seeAll && /*#__PURE__*/_react["default"].createElement("div", {
        className: "ma__section-links__footer"
      }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
        href: seeAll.href,
        text: seeAll.text
      })));
    });

    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
      e.preventDefault();
      var expanded = _this.state.expanded;

      _this.setState({
        expanded: !expanded
      });
    });

    _this.updateWindowDimensions = _this.updateWindowDimensions.bind(_assertThisInitialized(_this));
    _this.state = {
      width: 1200,
      expanded: false
    };
    return _this;
  }

  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() {
    var _this$state = this.state,
        expanded = _this$state.expanded,
        width = _this$state.width;
    var _this$props2 = this.props,
        index = _this$props2.index,
        title = _this$props2.title;
    var accordionClasses = expanded ? 'is-open' : 'is-closed';

    if (width > 481) {
      return /*#__PURE__*/_react["default"].createElement("section", {
        className: "ma__section-links"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "ma__section-links__content"
      }, /*#__PURE__*/_react["default"].createElement("h2", {
        className: "ma__section-links__title",
        id: "sectionCard" + index
      }, title.href && title.href.length > 0 ? /*#__PURE__*/_react["default"].createElement(_index["default"], {
        href: title.href,
        text: title.text
      }) : title.text), this.getCardContent(false)));
    }

    return /*#__PURE__*/_react["default"].createElement("section", {
      className: "ma__section-links " + accordionClasses
    }, /*#__PURE__*/_react["default"].createElement(_index2["default"], {
      title: title.text,
      emphasize: false,
      icon: null,
      id: "sectionCard" + index
    }, this.getCardContent(true)));
  };

  return SectionCard;
}(_react["default"].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["default"].shape({
    // If href is provided, the card title will render as a decorative link. Otherwise it will render as a heading text
    href: _propTypes["default"].string,
    text: _propTypes["default"].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["default"].shape({
    href: _propTypes["default"].string,
    text: _propTypes["default"].string
  }),

  /** An optional description of the card rendered below the card title. */
  description: _propTypes["default"].string,

  /** A unique number index of the card used for setting key and id */
  index: _propTypes["default"].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["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object])
} : {};
var _default = SectionCard;
exports["default"] = _default;
module.exports = exports.default;