UNPKG

backpack-ui

Version:

Lonely Planet's Components

178 lines (135 loc) 3.89 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 _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);