backpack-ui/dist/components/sidebarSection/index.js

Lonely Planet's Components

"use strict";

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

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

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 _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

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

var _colors2 = _interopRequireDefault(_colors);

var _heading = require("../heading");

var _heading2 = _interopRequireDefault(_heading);

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

var _icon2 = _interopRequireDefault(_icon);

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

var SidebarSection = function (_React$Component) {
  (0, _inherits3.default)(SidebarSection, _React$Component);

  function SidebarSection(props) {
    (0, _classCallCheck3.default)(this, SidebarSection);

    var _this = (0, _possibleConstructorReturn3.default)(this, (SidebarSection.__proto__ || (0, _getPrototypeOf2.default)(SidebarSection)).call(this, props));

    _this.state = {
      collapsed: props.collapsed
    };

    _this.onClick = _this.onClick.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(SidebarSection, [{
    key: "onClick",
    value: function onClick(event) {
      this.setState({
        collapsed: !this.state.collapsed
      });

      event.preventDefault();
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props,
          children = _props.children,
          title = _props.title,
          icon = _props.icon,
          collapsed = _props.collapsed,
          background = _props.background,
          scopedStyles = _props.scopedStyles,
          modifier = _props.modifier,
          contentType = _props.contentType,
          noMargin = _props.noMargin,
          first = _props.first,
          qaHook = _props.qaHook;


      var styles = {
        container: {
          base: (0, _objectAssign2.default)({}, {
            fontSize: "11px",
            paddingBottom: "35px",
            position: "relative"
          }, !first && {
            borderTop: "1px solid " + _colors2.default.borderPrimary,
            paddingTop: "20px"
          }),

          background: {
            backgroundColor: "#e9f2f8", // This color does not exist in settings
            borderTop: 0,
            marginLeft: "-20px",
            paddingBottom: "40px",
            paddingLeft: "20px",
            paddingRight: "20px",
            paddingTop: "20px",
            width: "calc(100% + 40px)"
          },

          booking: !background ? {
            paddingBottom: "62px"
          } : {},

          checkboxes: {
            paddingBottom: "54px"
          },

          map: {
            paddingBottom: 0,
            paddingTop: 0
          },

          collapsed: {
            paddingBottom: 0,
            paddingTop: 0
          }
        },

        header: {
          base: {
            position: "relative"
          }
        },

        collapsibleHeading: {
          base: {
            backgroundColor: "transparent",
            display: "block",
            paddingBottom: "17px",
            paddingTop: "20px",
            position: "relative",
            textAlign: "left",
            width: "100%"
          }
        },

        content: {
          base: {
            marginTop: "14px"
          },

          booking: background ? {
            marginTop: "32px"
          } : {
            marginTop: "22px"
          },

          checkboxes: {
            marginTop: "16px"
          },

          map: {
            marginTop: 0
          },

          slider: {
            marginTop: "36px"
          },

          indented: {
            marginLeft: "20px"
          },

          collapsed: {
            display: "none",
            marginTop: "-1px",
            paddingBottom: "57px"
          },

          expanded: {
            display: "block"
          }
        },

        toggleIcon: {
          base: {
            backgroundColor: "transparent",
            color: _colors2.default.linkPrimary,
            fontSize: "9px",
            marginTop: "-3px",
            position: "absolute",
            right: 0,
            top: "50%"
          }
        }
      };

      var heading = _react2.default.createElement(
        _heading2.default,
        {
          level: 4,
          weight: "thick",
          importance: "normal",
          size: "small",
          caps: true,
          qaHook: qaHook
        },
        icon && _react2.default.createElement(_icon2.default, {
          name: icon,
          size: "small",
          inline: "before",
          color: background ? "" : "gray",
          qaHook: qaHook
        }),
        title
      );

      var collapsibleHeading = _react2.default.createElement(
        "button",
        {
          "data-testid": qaHook ? "sidebar-section-collapsible-heading-btn" : null,
          style: styles.collapsibleHeading.base,
          onClick: this.onClick
        },
        heading,
        _react2.default.createElement(_icon2.default, {
          name: this.state.collapsed ? "triangle-down" : "triangle-up",
          style: styles.toggleIcon.base,
          qaHook: qaHook,
          label: "Expand"
        })
      );

      return _react2.default.createElement(
        "section",
        {
          className: (0, _classnames2.default)("SidebarSection", background && "SidebarSection--background", collapsed && "SidebarSection--expandable", modifier && "SidebarSection--" + modifier),
          style: [styles.container.base, collapsed && styles.container.collapsed, background && styles.container.background, contentType && styles.container[contentType]]
        },
        scopedStyles && _react2.default.createElement(_radium.Style, {
          scopeSelector: ".SidebarSection",
          rules: {
            ul: {
              listStyle: "none"
            }
          }
        }),
        _react2.default.createElement(
          "header",
          {
            className: "SidebarSection-header",
            style: styles.header.base
          },
          collapsed && collapsibleHeading,
          !collapsed && heading
        ),
        _react2.default.createElement(
          "div",
          {
            className: "SidebarSection-content",
            style: [!noMargin && styles.content.base, icon && styles.content.indented, collapsed && styles.content.collapsed, !this.state.collapsed && styles.content.expanded, contentType && styles.content[contentType]],
            "aria-hidden": this.state.collapsed
          },
          children
        )
      );
    }
  }]);
  return SidebarSection;
}(_react2.default.Component);

SidebarSection.propTypes = {
  /**
   * Content for the section
   */
  children: _propTypes2.default.node.isRequired,

  /**
   * The name of the section
   */
  title: _propTypes2.default.string.isRequired,

  /**
   * The name of an icon to be placed to the left of the title
   */
  icon: _propTypes2.default.string,

  /**
   * Should the section be collapsed and expandable
   */
  collapsed: _propTypes2.default.bool,

  /**
   * Should the section be boxed in with a blue background
   */
  background: _propTypes2.default.bool,

  /**
   * Should the component include scoped styles (for user generated content)
   */
  scopedStyles: _propTypes2.default.bool,

  /**
   * A modifier classname to be appended to base classname; usually this is used
   * as a layout styling hook within an SCSS file, so be careful when removing
   */
  modifier: _propTypes2.default.string,

  /**
   * A keyword to define the type of content within `SidebarSection-content`,
   * used to provide additional styling
   */
  contentType: _propTypes2.default.oneOf(["", "booking", "checkboxes", "map", "slider"]),

  /**
   * Should the component have top margin
   */
  noMargin: _propTypes2.default.bool,

  /**
   * Denotes that this is the first section in the sidebar; removes the top
   * border and padding
   */
  first: _propTypes2.default.bool,

  /**
   * QA Hook
   */
  qaHook: _propTypes2.default.bool
};

SidebarSection.defaultProps = {
  children: null,

  title: "",

  icon: "",

  collapsed: false,

  background: false,

  scopedStyles: false,

  modifier: "",

  contentType: "",

  noMargin: false,

  first: false,

  qaHook: false
};

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