backpack-ui/dist/components/numberList/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 _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _numberMarker = require("../numberMarker");

var _numberMarker2 = _interopRequireDefault(_numberMarker);

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

var _createQAHook2 = _interopRequireDefault(_createQAHook);

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

var styles = {
  container: {
    base: {
      color: _colors2.default.textPrimary,
      fontSize: "14px",
      lineHeight: 22 / 14
    }
  },

  list: {
    base: {
      listStyle: "none"
    }
  },

  item: {
    base: {
      borderBottom: 1 / 14 + "em solid " + _colors2.default.borderPrimary,
      display: "flex",
      padding: 13 / 14 + "em " + 12 / 14 + "em " + 13 / 14 + "em " + 6 / 14 + "em"
    },

    notFirst: {
      marginTop: 3 / 14 + "em"
    }
  },

  marker: {
    base: {
      marginTop: 3 / 14 + "em",
      padding: 5 / 14 + "em"
    }
  },

  link: {
    base: {
      marginLeft: 26 / 14 + "em"
    }
  },

  anchor: {
    base: {
      color: "currentColor",
      transition: "color " + _timing2.default.default,

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

function NumberList(_ref) {
  var list = _ref.list,
      qaHook = _ref.qaHook;

  return _react2.default.createElement(
    "div",
    {
      className: "NumberList",
      style: styles.container.base
    },
    _react2.default.createElement(
      "ul",
      { style: styles.list.base, "data-testid": qaHook ? "number-list-ul" : null },
      list.map(function (_ref2, i) {
        var title = _ref2.title,
            url = _ref2.url;
        return _react2.default.createElement(
          "li",
          {
            className: "NumberList-item",
            style: [styles.item.base, i !== 0 && styles.item.notFirst],
            key: i + 1,
            "data-testid": qaHook ? (0, _createQAHook2.default)("number-list-" + (i + 1), title, "li") : null
          },
          _react2.default.createElement(
            "div",
            {
              className: "NumberList-marker",
              style: styles.marker.base
            },
            _react2.default.createElement(_numberMarker2.default, {
              number: i + 1,
              outlined: true
            })
          ),
          _react2.default.createElement(
            "div",
            {
              className: "NumberList-link",
              style: styles.link.base
            },
            _react2.default.createElement(
              "a",
              {
                style: styles.anchor.base,
                href: url,
                key: i + 1
              },
              title
            )
          )
        );
      })
    )
  );
}

NumberList.propTypes = {
  /**
   * An array of items to list
   */
  list: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
  qaHook: _propTypes2.default.bool
};

NumberList.defaultProps = {
  list: [],
  qaHook: false
};

NumberList.styles = styles;

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