@massds/mayflower-react/dist/AccordionItem/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 _classnames = _interopRequireDefault(require("classnames"));
var _IconCaretDown = _interopRequireDefault(require("../Icon/IconCaretDown.js"));
var _IconCaretCircleRight = _interopRequireDefault(require("../Icon/IconCaretCircleRight.js"));
var _index = _interopRequireDefault(require("../Heading/index.js"));
var _index2 = _interopRequireDefault(require("../Collapse/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); } /**
 * AccordionItem module.
 * @module @massds/mayflower-react/AccordionItem
 * @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
 */ // eslint-disable-next-line import/no-unresolved
// eslint-disable-next-line import/no-unresolved
var AccordionItem = /*#__PURE__*/function (_React$Component) {
  function AccordionItem(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.state = {
      open: false
    };
    _this.handleClick = _this.handleClick.bind(_this);
    return _this;
  }
  _inheritsLoose(AccordionItem, _React$Component);
  var _proto = AccordionItem.prototype;
  _proto.handleClick = function handleClick() {
    var open = this.state.open;
    this.setState({
      open: !open
    });
  };
  _proto.render = function render() {
    var _this$props = this.props,
      secondary = _this$props.secondary,
      border = _this$props.border,
      emphasize = _this$props.emphasize,
      icon = _this$props.icon,
      title = _this$props.title,
      headerLevel = _this$props.headerLevel,
      children = _this$props.children,
      id = _this$props.id,
      info = _this$props.info;
    var open = this.state.open;
    var accordionClasses = (0, _classnames["default"])({
      'ma__accordion-item': !secondary,
      'ma__accordion-item--secondary': secondary,
      'ma__accordion-item--borderless': !border && !secondary
    });
    var buttonClasses = (0, _classnames["default"])({
      'ma__accordion-header__button': !secondary,
      'ma__accordion-header__button--secondary': secondary,
      'is-open': open,
      'ma__accordion-header__button--solid': emphasize && !secondary,
      'ma__accordion-header__button--trans': !emphasize && !secondary
    });
    var headingClasses = (0, _classnames["default"])({
      'ma__accordion-header__title': !secondary,
      'ma__accordion-header__title--secondary': secondary
    });
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: accordionClasses
    }, /*#__PURE__*/_react["default"].createElement("header", {
      className: "ma__accordion-header"
    }, /*#__PURE__*/_react["default"].createElement("button", {
      type: "button",
      className: buttonClasses,
      "aria-label": info,
      onClick: this.handleClick,
      "aria-expanded": open,
      "aria-controls": "expandable-section-" + id,
      id: "button-" + id
    }, icon && !secondary && /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__accordion-header__icon"
    }, icon), secondary && /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__accordion-header__icon--secondary"
    }, /*#__PURE__*/_react["default"].createElement(_IconCaretDown["default"], {
      height: 20,
      width: 20
    })), /*#__PURE__*/_react["default"].createElement(_index["default"], {
      "class": headingClasses,
      text: title,
      level: headerLevel
    }))), /*#__PURE__*/_react["default"].createElement(_index2["default"], {
      "in": open,
      dimension: "height"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__accordion-content__body",
      id: "expandable-section-" + id,
      "aria-labelledby": "button-" + id
    }, children)));
  };
  return AccordionItem;
}(_react["default"].Component);
AccordionItem.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The title of the accordion header */
  title: _propTypes["default"].string.isRequired,
  /** Accessible aria label */
  info: _propTypes["default"].string.isRequired,
  /** The icon to display in the collapsible header */
  icon: _propTypes["default"].element,
  /** Whether the accordion should have a border or not, default is true (border) */
  border: _propTypes["default"].bool,
  /** Where the accordion header's background should remain colored when expanded */
  emphasize: _propTypes["default"].bool,
  /** Content rendered in the collapsed section. Only Paragraph, Table, Heading, OrderedList
      and UnorderList are valid children components to pass to AccordionItem */
  children: _propTypes["default"].element.isRequired,
  /** Whether to style the accordion as secondary or not. */
  secondary: _propTypes["default"].bool,
  /** Heading level for accordion title */
  headerLevel: _propTypes["default"].number,
  /** Expand button id and section id, used for a11y */
  id: _propTypes["default"].string
} : {};
AccordionItem.defaultProps = {
  icon: /*#__PURE__*/_react["default"].createElement(_IconCaretCircleRight["default"], {
    width: 35,
    height: 35
  }),
  border: true,
  emphasize: true,
  secondary: false,
  headerLevel: 2
};
var _default = exports["default"] = AccordionItem;
module.exports = exports.default;