backpack-ui
Version:
Lonely Planet's Components
247 lines (206 loc) • 7.45 kB
JavaScript
"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 _upperFirst = require("lodash/upperFirst");
var _upperFirst2 = _interopRequireDefault(_upperFirst);
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _timing = require("../../styles/timing");
var _timing2 = _interopRequireDefault(_timing);
var _typography = require("../../styles/typography");
var _zIndex = require("../../styles/zIndex");
var _zIndex2 = _interopRequireDefault(_zIndex);
var _color = require("../../utils/color");
var _icon = require("../../utils/icon");
var _icon2 = _interopRequireDefault(_icon);
var _mixins = require("../../utils/mixins");
var _propTypes3 = require("../../utils/propTypes");
var _propTypes4 = _interopRequireDefault(_propTypes3);
var _createQAHook = require("../../utils/createQAHook");
var _createQAHook2 = _interopRequireDefault(_createQAHook);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _ = { upperFirst: _upperFirst2.default };
var styles = {
container: {
alignItems: "center",
backgroundColor: "transparent",
backfaceVisibility: "hidden",
border: 0,
color: _colors2.default.textPrimary,
cursor: "pointer",
display: "inline-flex",
flexDirection: "column",
justifyContent: "center",
lineHeight: _typography.lineHeightReset,
paddingLeft: 0,
paddingRight: 0,
paddingTop: 0,
paddingBottom: 0,
position: "relative",
textAlign: "center",
textDecoration: "none",
transition: "color " + _timing2.default.fast,
verticalAlign: "middle",
whiteSpace: "nowrap",
WebkitTapHighlightColor: (0, _color.rgba)(_colors2.default.bgOverlay, 0.04),
":focus": (0, _mixins.outline)(4)
},
background: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
width: "100%",
height: "100%",
border: 0,
borderRadius: "100%",
backgroundColor: (0, _color.darken)(_colors2.default.bgPrimary, 6)
},
icon: {
display: "block",
marginLeft: "auto",
marginRight: "auto",
zIndex: _zIndex2.default.default
}
};
var fontSize = {
32: 12,
40: 16,
56: 24
};
function IconButton(_ref) {
var iconName = _ref.iconName,
label = _ref.label,
id = _ref.id,
className = _ref.className,
href = _ref.href,
onClick = _ref.onClick,
size = _ref.size,
owns = _ref.owns,
backgroundColor = _ref.backgroundColor,
color = _ref.color,
hoverBackgroundColor = _ref.hoverBackgroundColor,
hoverBackgroundScale = _ref.hoverBackgroundScale,
hoverColor = _ref.hoverColor,
border = _ref.border,
borderWidth = _ref.borderWidth,
borderColor = _ref.borderColor,
shadow = _ref.shadow,
transitionDuration = _ref.transitionDuration,
style = _ref.style,
qaHook = _ref.qaHook;
var Element = "div";
if (href) {
Element = "a";
} else if (onClick) {
Element = "button";
}
var role = Element === "a" ? "button" : null;
var dimensions = {
height: size + "px",
width: size + "px"
};
var hoverBackgroundColorClassName = "";
if (hoverBackgroundColor) {
hoverBackgroundColorClassName = "IconButton-hoverBackgroundColor-" + hoverBackgroundColor.replace(/\W+/g, "");
}
var hoverBackgroundScaleClassName = "";
if (typeof hoverBackgroundScale === "number") {
hoverBackgroundScaleClassName = "IconButton-hoverBackgroundScale-" + String(hoverBackgroundScale).replace(".", "_");
}
var shadowClassName = shadow ? "IconButton-shadow" : "";
var classNames = ["IconButton", className || "", hoverBackgroundColorClassName, hoverBackgroundScaleClassName, shadowClassName];
return _react2.default.createElement(
Element,
{
id: id,
className: classNames.join(" "),
style: [styles.container, { transition: "color " + transitionDuration }, dimensions, fontSize[size] && { fontSize: fontSize[size] }, color && { color: color }, hoverColor && { ":hover": { color: hoverColor } }, style],
"data-testid": qaHook ? (0, _createQAHook2.default)(label, "icon", "" + (Element === "a" ? "link" : Element)) : null,
href: href,
onClick: onClick,
role: role,
title: label,
"aria-label": label,
"aria-owns": owns
},
hoverBackgroundColor && _react2.default.createElement(_radium.Style, {
scopeSelector: "." + hoverBackgroundColorClassName + ":hover",
rules: {
".IconButton-background": {
backgroundColor: hoverBackgroundColor + " !important"
}
}
}),
typeof hoverBackgroundScale === "number" && _react2.default.createElement(_radium.Style, {
scopeSelector: "." + hoverBackgroundScaleClassName + ":hover",
rules: {
".IconButton-background": {
transform: "scale(" + hoverBackgroundScale + ")"
}
}
}),
shadow && _react2.default.createElement(_radium.Style, {
scopeSelector: "." + shadowClassName + ":active",
rules: {
".IconButton-background": {
boxShadow: (0, _color.rgba)(_colors2.default.bgOverlay, 0.2) + " 0 " + 4 / fontSize[size] / 3 + "em " + 16 / fontSize[size] / 2 + "em !important"
}
}
}),
_react2.default.createElement("div", {
key: 1,
className: "IconButton-background",
style: [styles.background, backgroundColor && { backgroundColor: backgroundColor }, { transition: "background-color " + transitionDuration + ", transform " + transitionDuration + ", box-shadow " + transitionDuration + " ease-in-out" }, border && { border: borderWidth + " solid " + borderColor }, shadow && { boxShadow: (0, _color.rgba)(_colors2.default.bgOverlay, 0.2) + " 0 " + 4 / fontSize[size] + "em " + 16 / fontSize[size] + "em" }]
}),
(0, _icon2.default)(_.upperFirst(iconName), { label: label, style: styles.icon })
);
}
IconButton.propTypes = {
iconName: _propTypes2.default.string.isRequired,
label: _propTypes2.default.string.isRequired,
id: _propTypes2.default.string,
className: _propTypes2.default.string,
href: _propTypes2.default.string,
onClick: _propTypes2.default.func,
size: _propTypes2.default.oneOf([32, 40, 56]),
owns: _propTypes2.default.string,
backgroundColor: _propTypes2.default.string,
color: _propTypes2.default.string,
hoverBackgroundColor: _propTypes2.default.string,
hoverBackgroundScale: _propTypes2.default.number,
hoverColor: _propTypes2.default.string,
border: _propTypes2.default.bool,
borderWidth: _propTypes2.default.string,
borderColor: _propTypes2.default.string,
shadow: _propTypes2.default.bool,
transitionDuration: _propTypes2.default.string,
style: _propTypes4.default.style,
qaHook: _propTypes2.default.bool
};
IconButton.defaultProps = {
id: null,
className: null,
href: null,
onClick: null,
size: 32,
owns: null,
color: "",
hoverColor: "",
border: false,
borderWidth: "1px",
borderColor: "currentColor",
shadow: false,
transitionDuration: _timing2.default.default,
style: null,
qaHook: false
};
exports.default = (0, _radium2.default)(IconButton);