backpack-ui/dist/components/accordion/accordionItem.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _icon2 = require("../icon");

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var mediaQuery = "@media (min-width: " + _mq2.default.min[768] + ")";

var styles = {
  container: {
    borderBottom: "1px solid " + _colors2.default.borderPrimary
  },

  heading: (0, _defineProperty3.default)({
    color: _colors2.default.textPrimary,
    backgroundColor: "transparent",
    display: "block",
    fontSize: "20px",
    fontWeight: 300,
    lineHeight: 24 / 20,
    paddingBottom: "26px",
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: "29px",
    position: "relative",
    textAlign: "left",
    transition: "color " + _timing2.default.fast + " ease-in-out",
    width: "100%",

    ":hover": { color: _colors2.default.linkPrimary },
    ":active": { color: _colors2.default.linkPrimary },
    ":focus": { color: _colors2.default.linkPrimary }

  }, mediaQuery, {
    fontSize: "28px",
    lineHeight: 34 / 28,
    paddingBottom: "39px",
    paddingTop: "44px"
  }),

  icon: (0, _defineProperty3.default)({
    fontSize: "12px",
    float: "right",
    marginRight: "8px",
    marginTop: "4px"

  }, mediaQuery, {
    fontSize: "22px",
    marginRight: "30px",
    marginTop: "10px"
  }),

  content: {
    overflow: "hidden",
    maxHeight: 0
  },

  contentPadding: (0, _defineProperty3.default)({
    paddingBottom: "32px"

  }, mediaQuery, {
    paddingBottom: "48px"
  })
};

var AccordionItem = function AccordionItem(_ref) {
  var heading = _ref.heading,
      content = _ref.content,
      id = _ref.id,
      expanded = _ref.expanded,
      onClick = _ref.onClick,
      style = _ref.style,
      qaHook = _ref.qaHook;
  return _react2.default.createElement(
    "div",
    {
      className: "Accordion-item",
      id: id,
      style: [styles.container, style]
    },
    _react2.default.createElement(
      "button",
      {
        className: "Accordion-itemHeading",
        id: id + "-heading",
        "data-testid": qaHook ? (0, _createQAHook2.default)(heading, "Accordion-itemHeading", "btn") : null,
        "aria-selected": expanded,
        "aria-expanded": expanded,
        "aria-controls": id + "-content",
        role: "tab",
        onClick: onClick,
        style: styles.heading
      },
      heading,
      _react2.default.createElement(
        "div",
        { style: [styles.icon, expanded && { transform: "rotate(45deg)" }] },
        _react2.default.createElement(_icon2.Plus, { label: expanded ? "Collapse" : "Expand" })
      )
    ),
    _react2.default.createElement(
      "div",
      {
        className: "Accordion-itemContent",
        id: id + "-content",
        "data-testid": qaHook ? (0, _createQAHook2.default)(id, "Accordion-itemContent", "content") : null,
        "aria-labelledby": id + "-heading",
        "aria-hidden": !expanded,
        role: "tabpanel",
        style: [styles.content, expanded && {
          transition: "max-height " + _timing2.default.slow + " ease-in-out",
          maxHeight: "500vh"
        }]
      },
      _react2.default.createElement(
        "div",
        { style: styles.contentPadding },
        content
      )
    )
  );
};

AccordionItem.propTypes = {
  heading: _propTypes2.default.string.isRequired,
  content: _propTypes2.default.element.isRequired,
  id: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  expanded: _propTypes2.default.bool,
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

AccordionItem.defaultProps = {
  id: "accordionItem",
  expanded: false,
  qaHook: false
};

exports.default = (0, _radium2.default)(AccordionItem);