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

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _font = require("../../utils/font");

var _font2 = _interopRequireDefault(_font);

var _contentHeader = require("../contentHeader");

var _contentHeader2 = _interopRequireDefault(_contentHeader);

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

var _heading2 = _interopRequireDefault(_heading);

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

var styles = {
  list: {
    base: {
      fontFamily: (0, _font2.default)("miller"),
      fontSize: "20px",
      lineHeight: 36 / 20,
      marginLeft: "20px"
    }
  }
};

function ContentSectionList(_ref) {
  var header = _ref.header,
      listItems = _ref.listItems,
      qaHook = _ref.qaHook;

  var isListItemsString = typeof listItems === "string";

  return _react2.default.createElement(
    "section",
    { className: "ContentSection" },
    header && header.title && _react2.default.createElement(_contentHeader2.default, header),
    listItems && _react2.default.createElement(
      "ul",
      { "data-testid": qaHook ? "content-section-list" : null, style: styles.list.base },
      !isListItemsString && listItems.map(function (item, index) {
        return _react2.default.createElement(
          "li",
          { "data-testid": qaHook ? item + "-list-item" : null, key: index },
          item
        );
      }),
      isListItemsString && _react2.default.createElement(
        "li",
        null,
        listItems
      )
    )
  );
}

ContentSectionList.propTypes = {
  /**
   * Props for ContentHeader
   */
  header: _propTypes2.default.shape({
    title: _propTypes2.default.string,
    heading: _propTypes2.default.shape(_heading2.default.propTypes),
    border: _propTypes2.default.oneOf(["", "top", "bottom"])
  }).isRequired,

  /**
   * List item(s) to display
   */
  listItems: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]).isRequired,

  /**
   * Custom data hook
   */
  qaHook: _propTypes2.default.bool
};

ContentSectionList.defaultProps = {
  header: {
    title: "",
    heading: {},
    border: ""
  },

  listItems: "",
  qaHook: false
};

exports.default = ContentSectionList;