backpack-ui
Version:
Lonely Planet's Components
178 lines (135 loc) • 3.89 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 _objectAssign = require("object-assign");
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _upperFirst = require("lodash/upperFirst");
var _upperFirst2 = _interopRequireDefault(_upperFirst);
var _settings = require("../../../settings.json");
var _settings2 = _interopRequireDefault(_settings);
var _icon = require("../icon");
var _icon2 = _interopRequireDefault(_icon);
var _color = require("../../utils/color");
var _mixins = require("../../utils/mixins");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _ = { upperFirst: _upperFirst2.default };
var hoverStyles = {
backgroundColor: (0, _color.darken)(_settings2.default.color.white, 12),
textDecoration: "none"
};
var styles = {
base: {
appearance: "none",
backgroundColor: (0, _color.darken)(_settings2.default.color.white, 6),
backfaceVisibility: "hidden",
border: 0,
borderRadius: "100%",
color: _settings2.default.color.darkGray,
cursor: "pointer",
display: "inline-block",
fontWeight: 600,
height: 30 / 15 + "em",
lineHeight: 1,
padding: 0,
position: "relative",
textAlign: "center",
textDecoration: "none",
transition: "background-color " + _settings2.default.timing.default,
verticalAlign: "middle",
whiteSpace: "nowrap",
width: 30 / 15 + "em",
":hover": hoverStyles,
":active": hoverStyles,
":focus": (0, _objectAssign2.default)({}, hoverStyles, (0, _mixins.outline)())
},
size: {
small: {
fontSize: "12px"
},
medium: {
fontSize: "15px"
},
large: {
fontSize: "20px"
}
}
};
function IconButton(_ref) {
var iconName = _ref.iconName;
var label = _ref.label;
var className = _ref.className;
var href = _ref.href;
var onClick = _ref.onClick;
var size = _ref.size;
var owns = _ref.owns;
var Element = href ? "a" : "button";
var role = Element === "a" ? "button" : "";
var style = [styles.base];
if (size) {
style.push(styles.size[size]);
}
var ButtonIcon = _react2.default.createElement(_icon2.default[_.upperFirst(iconName)], {
label: label
});
return _react2.default.createElement(
Element,
{
className: (className ? className + " " : "") + "IconButton",
style: style,
href: href,
onClick: onClick,
role: role,
title: label,
"aria-label": label,
"aria-owns": owns
},
ButtonIcon
);
}
IconButton.propTypes = {
/**
* Name of the icon to display inside of the button
*/
iconName: _react2.default.PropTypes.string.isRequired,
/**
* A descriptive label of the button's purpose
*/
label: _react2.default.PropTypes.string.isRequired,
/**
* A custom classname to append to the default IconButton classname
*/
className: _react2.default.PropTypes.string,
/**
* Pass an href prop to make the button an `a` element instead of a `button`
*/
href: _react2.default.PropTypes.string,
/**
* Function to run when the button is clicked
*/
onClick: _react2.default.PropTypes.func,
/**
* Size of the button
*/
size: _react2.default.PropTypes.oneOf(["small", "medium", "large"]),
/**
* The ID of the sibling element that the button owns, e.g., if the button has
* a menu with an ID of "share-menu", then `owns="share-menu"`.
*/
owns: _react2.default.PropTypes.string
};
IconButton.defaultProps = {
iconName: "",
label: "",
className: "",
href: "",
onClick: null,
size: "medium",
owns: ""
};
IconButton.styles = styles;
exports.default = (0, _radium2.default)(IconButton);