backpack-ui
Version:
Lonely Planet's Components
368 lines (295 loc) • 8.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
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 _objectAssign = require("object-assign");
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _classnames = require("classnames");
var _classnames2 = _interopRequireDefault(_classnames);
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _timing = require("../../styles/timing");
var _timing2 = _interopRequireDefault(_timing);
var _color = require("../../utils/color");
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 hoverStyles = {
base: {
textDecoration: "none"
},
blue: {
backgroundColor: (0, _color.lighten)(_colors2.default.linkPrimary, 7),
color: _colors2.default.bgPrimary
},
white: {
backgroundColor: _colors2.default.bgPrimary,
color: (0, _color.lighten)(_colors2.default.linkPrimary, 14)
},
red: {
backgroundColor: (0, _color.lighten)(_colors2.default.accentRed, 7),
color: _colors2.default.bgPrimary
},
gray: {
backgroundColor: _colors2.default.bgPrimary,
color: (0, _color.lighten)(_colors2.default.textPrimary, 100)
},
transparent: {
backgroundColor: "transparent",
color: _colors2.default.textOverlay
}
};
var styles = {
base: {
appearance: "none",
WebkitAppearance: "none",
backfaceVisibility: "hidden",
border: 0,
borderRadius: 0,
cursor: "pointer",
display: "inline-block",
fontWeight: 600,
lineHeight: 1,
overflow: "hidden",
paddingLeft: 30 / 13 + "em",
paddingRight: 30 / 13 + "em",
textAlign: "center",
textDecoration: "none",
textOverflow: "ellipsis",
letterSpacing: "0.6px",
textTransform: "uppercase",
transition: "color " + _timing2.default.default + " ease-in-out,\n background-color " + _timing2.default.default + " ease-in-out,\n opacity " + _timing2.default.default + " ease-in-out",
verticalAlign: "middle",
whiteSpace: "nowrap",
":hover": hoverStyles.base,
":active": hoverStyles.base,
":focus": (0, _objectAssign2.default)({}, hoverStyles.base, (0, _mixins.outline)())
},
color: {
blue: {
backgroundColor: _colors2.default.linkPrimary,
color: _colors2.default.textOverlay,
boxShadow: "none",
":hover": hoverStyles.blue,
":focus": hoverStyles.blue,
":active": hoverStyles.blue
},
gray: {
backgroundColor: "transparent",
color: _colors2.default.textPrimary,
boxShadow: "0 0 0 1px " + _colors2.default.borderPrimary + " inset",
":hover": hoverStyles.gray,
":focus": hoverStyles.gray,
":active": hoverStyles.gray
},
white: {
backgroundColor: _colors2.default.bgPrimary,
color: _colors2.default.linkPrimary,
boxShadow: "0 0 0 1px " + _colors2.default.linkPrimary + " inset",
":hover": hoverStyles.white,
":focus": hoverStyles.white,
":active": hoverStyles.white
},
red: {
backgroundColor: _colors2.default.accentRed,
color: _colors2.default.textOverlay,
boxShadow: "0 0 0 1px " + _colors2.default.accentRed + " inset",
":hover": hoverStyles.red,
":focus": hoverStyles.red,
":active": hoverStyles.red
},
transparent: {
backgroundColor: "transparent",
color: _colors2.default.textOverlay,
boxShadow: "0 0 0 1px " + _colors2.default.bgPrimary + " inset",
":hover": hoverStyles.transparent,
":focus": hoverStyles.transparent,
":active": hoverStyles.transparent
}
},
size: {
tiny: {
fontSize: "9px",
paddingBottom: 9 / 9 + "em",
paddingLeft: 19 / 9 + "em",
paddingRight: 19 / 9 + "em",
paddingTop: 12 / 9 + "em"
},
small: {
fontSize: "11px",
paddingBottom: 15 / 11 + "em",
paddingTop: 18 / 11 + "em"
},
medium: {
fontSize: "13px",
paddingBottom: 21 / 13 + "em",
paddingTop: 26 / 13 + "em"
},
large: {
fontSize: "15px",
paddingBottom: 23 / 15 + "em",
paddingTop: 28 / 15 + "em"
},
huge: {
fontSize: "17px",
paddingBottom: 25 / 17 + "em",
paddingTop: 30 / 17 + "em"
}
},
type: {
rounded: {
base: {
borderRadius: "100px", // a value large enough to scale
paddingLeft: 21 / 9 + "em",
paddingRight: 21 / 9 + "em",
paddingTop: 12 / 9 + "em"
},
tiny: {
paddingBottom: 9 / 9 + "em"
},
small: {
paddingBottom: 10 / 9 + "em"
},
medium: {
paddingBottom: 9 / 9 + "em"
},
large: {
paddingBottom: 10 / 9 + "em"
},
huge: {
paddingBottom: 9 / 9 + "em"
}
},
full: {
display: "block",
width: "100%"
}
},
disabled: {
cursor: "not-allowed",
opacity: 0.5
}
};
/**
* Button component
*
* @usage
* <Button href="/foo">Bar</Button>
*/
function Button(_ref) {
var href = _ref.href,
children = _ref.children,
onClick = _ref.onClick,
color = _ref.color,
size = _ref.size,
rounded = _ref.rounded,
full = _ref.full,
border = _ref.border,
disabled = _ref.disabled,
customStyles = _ref.customStyles,
className = _ref.className,
qaHook = _ref.qaHook,
rest = (0, _objectWithoutProperties3.default)(_ref, ["href", "children", "onClick", "color", "size", "rounded", "full", "border", "disabled", "customStyles", "className", "qaHook"]);
var Element = href ? "a" : "button";
var role = Element === "a" ? "button" : null;
var style = [styles.base, color && styles.color[color], size && styles.size[size], rounded && styles.type.rounded.base, rounded && styles.type.rounded[size], full && styles.type.full, customStyles, disabled && styles.disabled, !border && {
boxShadow: "none"
}];
return _react2.default.createElement(
Element,
(0, _extends3.default)({
className: (0, _classnames2.default)("Button", className),
style: style,
href: href,
"data-testid": qaHook ? (0, _createQAHook2.default)(children, (0, _classnames2.default)("Button", className), "btn") : null,
onClick: onClick,
role: role,
disabled: disabled
}, rest),
children
);
}
Button.propTypes = {
/**
* Pass an href prop to make the button an `a` element instead of a `button`
*/
href: _propTypes2.default.string,
/**
* Content for the button
*/
children: _propTypes2.default.node.isRequired,
/**
* Function to run when the button is clicked
*/
onClick: _propTypes2.default.func,
/**
* Color of the button
*/
color: _propTypes2.default.oneOf(["blue", "white", "gray", "red", "transparent"]),
/**
* Size of the button
* tiny: 30 px tall
* small: 44 px tall
* medium: 60 px tall
* large: 66 px tall
* huge: 72 px tall
*/
size: _propTypes2.default.oneOf(["tiny", "small", "medium", "large", "huge"]),
/**
* Use a rounded button
*/
rounded: _propTypes2.default.bool,
/**
* Allow button to span available width
*/
full: _propTypes2.default.bool,
/**
* Special styles passed in props
*/
customStyles: _propTypes4.default.style,
/**
* Use a border
*/
border: _propTypes2.default.bool,
/**
* Disable button
*/
disabled: _propTypes2.default.bool,
/**
* Add classname to button
*/
className: _propTypes2.default.string,
/**
* Add qa-hook to button
*/
qaHook: _propTypes2.default.bool
};
Button.defaultProps = {
href: null,
onClick: null,
color: "blue",
size: "medium",
rounded: false,
full: false,
border: false,
children: "Button",
disabled: false,
customStyles: null,
className: null,
qaHook: false
};
Button.styles = styles;
exports.default = (0, _radium2.default)(Button);