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 _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _settings = require("../../../settings.json");

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

var _numberMarker2 = _interopRequireDefault(_numberMarker);

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

var styles = {
  container: {
    base: {
      color: _settings.color.darkGray,
      fontSize: "14px",
      lineHeight: 22 / 14
    }
  },

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

  item: {
    base: {
      borderBottom: 1 / 14 + "em solid " + _settings.color.gray,
      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 " + _settings.timing.default,

      ":hover": {
        color: _settings.color.blue
      },
      ":active": {
        color: _settings.color.blue
      },
      ":focus": {
        color: _settings.color.blue
      }
    }
  }
};

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

  return _react2.default.createElement(
    "div",
    {
      className: "NumberList",
      style: styles.container.base
    },
    _react2.default.createElement(
      "ul",
      { style: styles.list.base },
      list.map(function (_ref2, i) {
        var title = _ref2.title;
        var url = _ref2.url;
        return _react2.default.createElement(
          "li",
          {
            className: "NumberList-item",
            style: [styles.item.base, i !== 0 && styles.item.notFirst],
            key: i + 1
          },
          _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: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string).isRequired
};

NumberList.defaultProps = {
  list: []
};

NumberList.styles = styles;

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