backpack-ui
Version:
Lonely Planet's Components
359 lines (303 loc) • 8.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _keys = require("babel-runtime/core-js/object/keys");
var _keys2 = _interopRequireDefault(_keys);
var _defineProperty2 = require("babel-runtime/helpers/defineProperty");
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _listItem2, _container;
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 _mq = require("../../styles/mq");
var _mq2 = _interopRequireDefault(_mq);
var _bullet = require("../bullet");
var _bullet2 = _interopRequireDefault(_bullet);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var currencySymbols = {
AUD: "$",
EUR: "€",
GBP: "£",
USD: "$"
};
var styles = {
container: {
base: {
lineHeight: 1,
fontSize: "18px",
position: "relative"
},
emphasized: {
base: {
fontSize: "36px"
},
parent: {
listItem: (0, _defineProperty3.default)({}, "@media (max-width: " + _mq2.default.max[768] + ")", {
fontSize: "22px"
})
}
},
tag: {
backgroundColor: _colors2.default.accentRed,
color: _colors2.default.bgPrimary,
display: "inline-block",
fontSize: "12px",
padding: 6 / 12 + "em " + 8 / 12 + "em " + 4 / 12 + "em",
textAlign: "center",
verticalAlign: "middle"
},
thin: {
fontSize: "20px"
}
},
amount: {
base: {
display: "inline-block",
fontSize: "1em",
lineHeight: 1
},
emphasized: {
color: _colors2.default.accentRed,
fontWeight: 300
},
tag: {
fontWeight: 600
},
thin: {
fontWeight: 300
}
},
rate: {
base: {
fontSize: 14 / 36 + "em",
fontWeight: 300,
lineHeight: 1
},
parent: {
listItem: (_listItem2 = {}, (0, _defineProperty3.default)(_listItem2, "@media (max-width: " + _mq2.default.max[768] + ")", {
display: "inline-block",
fontSize: "9px",
fontWeight: 400,
lineHeight: 16 / 9
}), (0, _defineProperty3.default)(_listItem2, "@media (min-width: " + _mq2.default.min[768] + ")", {
marginTop: 3 / 14 + "em"
}), _listItem2),
booking: {
bottom: "5px",
display: "inline-block",
position: "absolute",
right: 0
}
}
},
currencySymbol: {
base: {},
emphasized: {
fontSize: 18 / 36 * 100 + "%",
position: "relative",
top: "-.65em"
}
},
bullet: {
base: (0, _defineProperty3.default)({}, "@media (min-width: " + _mq2.default.min[768] + ")", {
display: "none"
})
},
onSale: {
container: (_container = {}, (0, _defineProperty3.default)(_container, "@media (max-width: " + _mq2.default.max[768] + ")", {
paddingTop: "14px",
textAlign: "center"
}), (0, _defineProperty3.default)(_container, "@media (min-width: " + _mq2.default.min[768] + ")", {
borderLeft: "1px solid " + _colors2.default.borderPrimary,
float: "right",
fontWeight: 400,
padding: "2px 0 2px 14px",
textAlign: "right"
}), _container),
label: {
color: _colors2.default.accentGray,
fontWeight: 400,
marginBottom: "7px"
},
oldPrice: {
color: _colors2.default.accentGray,
paddingTop: "4px"
}
},
card: {
salePrice: {
color: _colors2.default.accentGray,
fontSize: "11px",
marginBottom: "8px",
marginLeft: "5px",
textTransform: "uppercase"
},
crossThrough: {
textDecoration: "line-through"
}
}
};
/**
* A standalone price for an item
*/
function Price(_ref) {
var amount = _ref.amount,
discountedAmount = _ref.discountedAmount,
rate = _ref.rate,
currency = _ref.currency,
emphasized = _ref.emphasized,
thin = _ref.thin,
tag = _ref.tag,
parent = _ref.parent,
poiType = _ref.poiType,
style = _ref.style,
qaHook = _ref.qaHook;
return _react2.default.createElement(
"div",
{
className: "Price clearfix",
style: [styles.container.base, emphasized && styles.container.emphasized.base, tag && styles.container.tag, parent && styles.container.emphasized.parent[parent], style]
},
parent === "booking" && poiType === "partnerActivity" && (amount > 0 || discountedAmount > 0) && _react2.default.createElement(
"div",
{
style: [styles.rate.base, styles.onSale.label]
},
"From"
),
parent === "card" && discountedAmount > 0 && _react2.default.createElement(
"div",
{ style: styles.card.salePrice },
"was ",
_react2.default.createElement(
"span",
{ style: styles.card.crossThrough },
currencySymbols[currency],
discountedAmount ? Math.round(amount) : ""
)
),
(amount > 0 || discountedAmount > 0) && _react2.default.createElement(
"div",
{
className: "Price-amount",
style: [styles.amount.base, emphasized && styles.amount.emphasized, thin && styles.amount.thin, tag && styles.amount.tag]
},
emphasized && _react2.default.createElement(
"span",
{
className: "Price-symbol",
style: [styles.currencySymbol.base, emphasized && styles.currencySymbol.emphasized]
},
currencySymbols[currency]
),
!emphasized && "" + currencySymbols[currency],
discountedAmount ? Math.round(discountedAmount) : Math.round(amount)
),
parent === "booking" && discountedAmount > 0 && _react2.default.createElement(
"div",
{
style: [styles.rate.base, styles.onSale.container]
},
_react2.default.createElement(
"div",
null,
_react2.default.createElement(
"strong",
null,
"On sale"
)
),
_react2.default.createElement(
"div",
{ style: styles.onSale.oldPrice },
"Was \u2013 ",
currencySymbols[currency],
discountedAmount ? Math.round(amount) : ""
)
),
rate && _react2.default.createElement(
"div",
{
"data-testid": qaHook ? "rate-div" : null,
className: "Price-rate",
style: [styles.rate.base, parent && styles.rate.parent[parent]]
},
(amount > 0 || discountedAmount > 0) && _react2.default.createElement(
"span",
{
className: "Price-bullet",
style: styles.bullet.base,
"aria-hidden": "true"
},
_react2.default.createElement(_bullet2.default, { space: "both", color: _colors2.default.borderPrimary })
),
rate
)
);
}
Price.propTypes = {
/**
* The price amount
*/
amount: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]).isRequired,
/**
* Discounted price amount
*/
discountedAmount: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
/**
* The rate for the price, i.e., "per night"
*/
rate: _propTypes2.default.string,
/**
* The currency in which the price is displayed in
*/
currency: _propTypes2.default.oneOf((0, _keys2.default)(currencySymbols)),
/**
* Change the color to show emphasis
*/
emphasized: _propTypes2.default.bool,
/**
* Render the price with a thinner font weight and slightly larger size
*/
thin: _propTypes2.default.bool,
/**
* Render the price with a tag-like style
*/
tag: _propTypes2.default.bool,
/**
* Name of parent component in which Price renders in
*/
parent: _propTypes2.default.oneOf(["", "booking", "listItem", "card"]),
/**
* Type of POI
*/
poiType: _propTypes2.default.oneOf(["", "poi", "hotel", "partnerActivity"]),
/**
* Override styles
*/
style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.object])),
/**
* QA Hook
*/
qaHook: _propTypes2.default.bool
};
Price.defaultProps = {
amount: 0,
discountedAmount: 0,
rate: "",
currency: "USD",
emphasized: false,
thin: false,
tag: false,
parent: "",
poiType: "",
qaHook: false
};
Price.styles = styles;
exports.default = (0, _radium2.default)(Price);