@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
151 lines (150 loc) • 7.67 kB
JavaScript
"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(e) { return e && e.__esModule ? e : { "default": e }; }
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
*/
var SectionCard = /*#__PURE__*/function (_React$Component) {
function SectionCard(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_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(_this, "handleClick", function (e) {
e.preventDefault();
var 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() {
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 = exports["default"] = SectionCard;
module.exports = exports.default;