@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 _IconChevron = _interopRequireDefault(require("../Icon/IconChevron.js"));

var _IconCirclechevron = _interopRequireDefault(require("../Icon/IconCirclechevron.js"));

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

var _index2 = _interopRequireDefault(require("../Collapse/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; }

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

  function AccordionItem(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      open: false
    };
    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  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(_IconChevron["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(_IconCirclechevron["default"], {
    width: 35,
    height: 35
  }),
  border: true,
  emphasize: true,
  secondary: false,
  headerLevel: 2
};
var _default = AccordionItem;
exports["default"] = _default;
module.exports = exports.default;