@massds/mayflower-react/dist/AccordionItem/index.mjs

React versions of Mayflower design system UI components

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; }

/**
 * 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 IconChevron from "../Icon/IconChevron.mjs"; // eslint-disable-next-line import/no-unresolved

import IconCirclechevron from "../Icon/IconCirclechevron.mjs";
import Heading from "../Heading/index.mjs";
import Collapse from "../Collapse/index.mjs";

let 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() {
    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(IconChevron, {
      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(IconCirclechevron, {
    width: 35,
    height: 35
  }),
  border: true,
  emphasize: true,
  secondary: false,
  headerLevel: 2
};
export default AccordionItem;