backpack-ui/dist/components/amenities/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 _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

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

var _colors2 = _interopRequireDefault(_colors);

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

var _font2 = _interopRequireDefault(_font);

var _grid = require("../../utils/grid");

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var baseFontSize = 13;

var styles = {
  container: {
    base: {
      fontFamily: (0, _font2.default)("benton"),
      fontSize: baseFontSize + "px",
      lineHeight: 24 / baseFontSize
    }
  },

  list: {
    base: {
      listStyle: "none",
      marginTop: 0,
      marginRight: 0,
      marginBottom: 0,
      marginLeft: 0,
      padding: 0
    },

    single: {
      marginTop: -5 / baseFontSize + "em" // bring top of text 30px from header
    },

    grouped: {
      marginBottom: -23 / baseFontSize + "em" // offset item.grouped bottom margin
    }
  },

  item: {
    base: {
      color: _colors2.default.textPrimary
    },

    grouped: {
      base: {
        WebkitColumnBreakInside: "avoid",
        pageBreakInside: "avoid",
        breakInside: "avoid",
        display: "inline-block",
        marginBottom: 23 / baseFontSize + "em",
        width: "100%"
      }
    }
  },

  heading: {
    base: {
      color: _colors2.default.textPrimary,
      fontSize: 14 / baseFontSize + "em",
      fontWeight: 600,
      lineHeight: 24 / 14,
      margin: 0
    }
  }
};

function markup(htmlContent) {
  return {
    __html: htmlContent
  };
}
var getListItems = function getListItems(items, capitalize, qaHook) {
  var ListItems = items.map(function (item, index) {
    return _react2.default.createElement("li", {
      key: index,
      "data-testid": qaHook ? (0, _createQAHook2.default)("list-item-" + index, "list-item-" + index, "li") : null,
      dangerouslySetInnerHTML: markup(item),
      style: [styles.item.base, capitalize && { textTransform: "capitalize" }]
    });
  });

  return ListItems;
};

var getGroupedItems = function getGroupedItems(items, qaHook) {
  var GroupedItems = items.map(function (group, index) {
    var groupedItemStyle = [styles.item.grouped.base];

    return _react2.default.createElement(
      "div",
      {
        style: groupedItemStyle,
        key: index
      },
      _react2.default.createElement(
        "h5",
        { style: styles.heading.base, "data-testid": qaHook ? (0, _createQAHook2.default)(group.title, "group-title", "header") : null },
        group.title
      ),
      _react2.default.createElement(
        "ul",
        { "data-testid": qaHook ? "amenities-list" : null, style: styles.list.base },
        getListItems(group.items, group.capitalize, "grouped")
      )
    );
  });

  return GroupedItems;
};

/**
 * Amenities list component
 */
function Amenities(_ref) {
  var columns = _ref.columns,
      _ref$items = _ref.items,
      items = _ref$items === undefined ? [] : _ref$items,
      listType = _ref.listType,
      qaHook = _ref.qaHook;

  var columnWidth = (0, _grid.span)(6 / columns + " of 6", "static");

  var style = {
    list: {
      single: [styles.list.base, styles.list.single],
      grouped: [styles.list.base, styles.list.single, styles.list.grouped]
    }
  };

  if (columns !== 1) {
    style.list[listType].push({
      columns: columnWidth + " " + columns,
      columnGap: 24 / 13 + "em"
    });
  }

  var ListComponent = listType === "single" ? _react2.default.createElement(
    "ul",
    {
      className: "Amenities-list",
      style: style.list.single
    },
    getListItems(items, false, qaHook)
  ) : _react2.default.createElement(
    "div",
    {
      className: "Amenities-list",
      style: style.list.grouped
    },
    getGroupedItems(items, qaHook)
  );

  return _react2.default.createElement(
    "div",
    {
      className: "Amenities",
      style: styles.container.base
    },
    ListComponent
  );
}

Amenities.propTypes = {
  /**
   * Data
   */
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string
  })).isRequired,

  /**
   * Number of columns to span
   */
  columns: _propTypes2.default.oneOf([1, 2, 3]),

  /**
   * Type of list
   */
  listType: _propTypes2.default.oneOf(["single", "grouped"]),

  /**
   * Type of qa hook
   */
  qaHook: _propTypes2.default.bool
};

Amenities.defaultProps = {
  items: [],
  columns: 1,
  listType: "single",
  qaHook: false
};

Amenities.styles = styles;

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