UNPKG

backpack-ui

Version:

Lonely Planet's Components

149 lines (126 loc) 3.08 kB
"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);