backpack-ui
Version:
Lonely Planet's Components
149 lines (126 loc) • 3.08 kB
JavaScript
"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);