@massds/mayflower-react/dist/AccordionItem/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); }
/**
 * 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
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
// eslint-disable-next-line import/no-unresolved
import IconCaretDown from "../Icon/IconCaretDown.mjs";
// eslint-disable-next-line import/no-unresolved
import IconCaretCircleRight from "../Icon/IconCaretCircleRight.mjs";
import Heading from "../Heading/index.mjs";
import Collapse from "../Collapse/index.mjs";
let 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() {
    const open = this.state.open;
    this.setState({
      open: !open
    });
  };
  _proto.render = function render() {
    const _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;
    const open = this.state.open;
    const accordionClasses = classNames({
      'ma__accordion-item': !secondary,
      'ma__accordion-item--secondary': secondary,
      'ma__accordion-item--borderless': !border && !secondary
    });
    const buttonClasses = classNames({
      '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
    });
    const headingClasses = classNames({
      'ma__accordion-header__title': !secondary,
      'ma__accordion-header__title--secondary': secondary
    });
    return /*#__PURE__*/React.createElement("div", {
      className: accordionClasses
    }, /*#__PURE__*/React.createElement("header", {
      className: "ma__accordion-header"
    }, /*#__PURE__*/React.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.createElement("div", {
      className: "ma__accordion-header__icon"
    }, icon), secondary && /*#__PURE__*/React.createElement("div", {
      className: "ma__accordion-header__icon--secondary"
    }, /*#__PURE__*/React.createElement(IconCaretDown, {
      height: 20,
      width: 20
    })), /*#__PURE__*/React.createElement(Heading, {
      "class": headingClasses,
      text: title,
      level: headerLevel
    }))), /*#__PURE__*/React.createElement(Collapse, {
      "in": open,
      dimension: "height"
    }, /*#__PURE__*/React.createElement("div", {
      className: "ma__accordion-content__body",
      id: "expandable-section-" + id,
      "aria-labelledby": "button-" + id
    }, children)));
  };
  return AccordionItem;
}(React.Component);
AccordionItem.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The title of the accordion header */
  title: PropTypes.string.isRequired,
  /** Accessible aria label */
  info: PropTypes.string.isRequired,
  /** The icon to display in the collapsible header */
  icon: PropTypes.element,
  /** Whether the accordion should have a border or not, default is true (border) */
  border: PropTypes.bool,
  /** Where the accordion header's background should remain colored when expanded */
  emphasize: PropTypes.bool,
  /** Content rendered in the collapsed section. Only Paragraph, Table, Heading, OrderedList
      and UnorderList are valid children components to pass to AccordionItem */
  children: PropTypes.element.isRequired,
  /** Whether to style the accordion as secondary or not. */
  secondary: PropTypes.bool,
  /** Heading level for accordion title */
  headerLevel: PropTypes.number,
  /** Expand button id and section id, used for a11y */
  id: PropTypes.string
} : {};
AccordionItem.defaultProps = {
  icon: /*#__PURE__*/React.createElement(IconCaretCircleRight, {
    width: 35,
    height: 35
  }),
  border: true,
  emphasize: true,
  secondary: false,
  headerLevel: 2
};
export default AccordionItem;