@age/quantum
Version:
Catho react components
265 lines (244 loc) • 11.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _shared = require("../shared");
var _theme = require("../shared/theme");
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var ButtonIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
displayName: "Button__ButtonIcon",
componentId: "j889qw-0"
})(["pointer-events:none;margin-right:8px;"]);
var buttonFontAndLineProps = function buttonFontAndLineProps(_ref) {
var size = _ref.size,
baseFontSize = _ref.theme.baseFontSize;
var fontSizes = {
xsmall: "".concat(baseFontSize * 0.75, "px"),
small: "".concat(baseFontSize * 0.75, "px"),
medium: "".concat(baseFontSize, "px"),
large: "".concat(baseFontSize * 1.25, "px"),
xlarge: "".concat(baseFontSize * 1.5, "px")
};
var lineHeights = {
xsmall: "".concat(baseFontSize, "px"),
small: "".concat(baseFontSize * 0.75 * 1.5, "px"),
medium: "".concat(baseFontSize * 1.5, "px"),
large: "".concat(baseFontSize * 1.75, "px"),
xlarge: "".concat(baseFontSize * 2, "px")
};
return "\n font-size: ".concat(fontSizes[size], ";\n line-height: ").concat(lineHeights[size], ";\n ");
};
var StyledButton = _styledComponents.default.button.withConfig({
displayName: "Button__StyledButton",
componentId: "j889qw-1"
})(["align-items:center;display:flex;font-weight:bold;justify-content:center;border-radius:4px;", " ", " ", " ", " ", " transition:all 0.2s ease-in-out;", " ", ""], function (props) {
return "cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";");
}, buttonFontAndLineProps, function (_ref2) {
var size = _ref2.size,
_ref2$theme$spacing = _ref2.theme.spacing,
xsmall = _ref2$theme$spacing.xsmall,
large = _ref2$theme$spacing.large,
xlarge = _ref2$theme$spacing.xlarge,
xxlarge = _ref2$theme$spacing.xxlarge,
xxxlarge = _ref2$theme$spacing.xxxlarge;
var heights = {
xsmall: "".concat(large, "px"),
small: "".concat(xlarge, "px"),
medium: "".concat(xxlarge, "px"),
large: "".concat(xxxlarge, "px"),
xlarge: "".concat(xxxlarge + xsmall, "px")
};
return "min-height: ".concat(heights[size], ";");
}, function (_ref3) {
var size = _ref3.size,
_ref3$theme$spacing = _ref3.theme.spacing,
xsmall = _ref3$theme$spacing.xsmall,
xxsmall = _ref3$theme$spacing.xxsmall,
medium = _ref3$theme$spacing.medium;
var borderWidth = 2;
var borderSize = borderWidth * 2;
var paddings = {
xsmall: "".concat(xxsmall - borderSize, "px ").concat(xsmall, "px"),
small: "".concat(xsmall - borderSize, "px ").concat(medium, "px"),
medium: "".concat(xsmall - borderSize, "px ").concat(medium, "px"),
large: "".concat(xsmall - borderSize, "px ").concat(medium, "px"),
xlarge: "".concat(xsmall - borderSize, "px ").concat(medium, "px")
};
return "padding: ".concat(paddings[size], ";");
}, function (props) {
return props.center && "\n margin-left: auto;\n margin-right: auto;\n ";
}, function (props) {
return props.full && "width: 100%;";
}, function (_ref4) {
var skin = _ref4.skin,
theme = _ref4.theme,
disabled = _ref4.disabled,
stroked = _ref4.stroked;
var _theme$components$but = theme.components.button.skins[skin],
_theme$components$but2 = _theme$components$but.mainColor,
mainColor100 = _theme$components$but2[100],
mainColor700 = _theme$components$but2[700],
mainColor900 = _theme$components$but2[900],
text0 = _theme$components$but.text[0],
_theme$colors$neutral = theme.colors.neutral,
neutral0 = _theme$colors$neutral[0],
neutral300 = _theme$colors$neutral[300],
neutral500 = _theme$colors$neutral[500],
neutral700 = _theme$colors$neutral[700];
var bgColor;
var textColor;
var borderColor;
if (disabled && stroked) {
bgColor = neutral300;
borderColor = neutral500;
textColor = neutral700;
} else if (stroked) {
bgColor = neutral0;
borderColor = mainColor700;
textColor = mainColor700;
} else if (disabled) {
bgColor = neutral300;
borderColor = bgColor;
textColor = neutral700;
} else {
bgColor = mainColor700;
borderColor = bgColor;
textColor = text0;
}
return "\n background-color: ".concat(bgColor, ";\n color: ").concat(textColor, ";\n border: 2px solid ").concat(borderColor, ";\n\n ").concat((0, _shared.shadow)(2, neutral500)({
theme: theme
}), "\n\n :hover {\n ").concat(!disabled ? "\n ".concat((0, _shared.shadow)(4, mainColor900)({
theme: theme
}), "\n background-color: ").concat(stroked ? mainColor100 : mainColor900, ";\n border-color: ").concat(mainColor900, ";\n ") : '', "\n }\n\n :focus,\n :focus-within {\n ").concat(!disabled ? (0, _shared.shadow)(4, mainColor700)({
theme: theme
}) : '', "\n }\n\n :active {\n ").concat(!disabled ? "\n ".concat((0, _shared.shadow)(8, mainColor900)({
theme: theme
}), "\n background-color: ").concat(stroked ? mainColor100 : mainColor900, ";\n ") : '', "\n }\n\n ").concat(ButtonIcon, " {\n ").concat(function (_ref5) {
var size = _ref5.size,
_ref5$theme$spacing = _ref5.theme.spacing,
xxsmall = _ref5$theme$spacing.xxsmall,
medium = _ref5$theme$spacing.medium,
large = _ref5$theme$spacing.large;
var fontSizes = {
xsmall: "".concat(medium, "px"),
small: "".concat(medium, "px"),
medium: "".concat(large, "px"),
large: "".concat(large, "px"),
xlarge: "".concat(large, "px")
};
return "\n font-size: ".concat(fontSizes[size], ";\n margin-right: ").concat(xxsmall, "px;\n ");
}, "\n }\n ");
});
var Button = function Button(_ref6) {
var children = _ref6.children,
icon = _ref6.icon,
size = _ref6.size,
$as = _ref6.$as,
theme = _ref6.theme,
rest = _objectWithoutProperties(_ref6, ["children", "icon", "size", "$as", "theme"]);
return _react.default.createElement(StyledButton, _extends({
as: $as
}, rest, {
size: size,
theme: theme
}), icon && _react.default.createElement(ButtonIcon, {
size: size,
name: icon,
theme: theme
}), children);
};
Button.defaultProps = {
center: false,
disabled: false,
stroked: false,
full: false,
icon: '',
size: 'medium',
skin: 'primary',
type: 'button',
children: undefined,
$as: undefined,
onClick: function onClick() {},
theme: {
colors: _theme.colors,
baseFontSize: _theme.baseFontSize,
spacing: _theme.spacing,
breakpoints: _shared.theme.breakpoints,
components: {
button: _theme.components.button
}
}
};
Button.propTypes = {
center: _propTypes.default.bool,
disabled: _propTypes.default.bool,
stroked: _propTypes.default.bool,
full: _propTypes.default.bool,
/** Icon name. The full catalogue can be found
* [here](/?selectedKind=1.%20Foundation&selectedStory=Icons) */
icon: _propTypes.default.string,
size: _propTypes.default.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
skin: _propTypes.default.oneOf(['neutral', 'primary', 'secondary', 'success', 'warning', 'error']),
type: _propTypes.default.oneOf(['button', 'reset', 'submit']),
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
/** https://www.styled-components.com/docs/api#as-polymorphic-prop */
$as: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.string]),
onClick: _propTypes.default.func,
theme: _propTypes.default.shape({
baseFontSize: _propTypes.default.number,
colors: _propTypes.default.object,
spacing: _propTypes.default.object,
breakpoints: _propTypes.default.object,
components: _propTypes.default.shape({
button: _propTypes.default.object
})
})
};
var IconButton = (0, _styledComponents.default)(Button).withConfig({
displayName: "Button__IconButton",
componentId: "j889qw-2"
})(["", ""], function (_ref7) {
var skin = _ref7.skin,
theme = _ref7.theme;
var _theme$components$but3 = theme.components.button.skins[skin].mainColor,
mainColor300 = _theme$components$but3[300],
mainColor500 = _theme$components$but3[500],
mainColor700 = _theme$components$but3[700];
return "\n border-radius: 50%;\n border: none;\n color: ".concat((0, _shared.hexToRgba)(mainColor500, 0.5), ";\n width: 40px;\n\n background-color: transparent;\n box-shadow: none;\n outline: none;\n\n ").concat(ButtonIcon, " {\n margin-right: 0;\n }\n\n :hover,\n :focus {\n box-shadow: none;\n background-color: ").concat((0, _shared.hexToRgba)(mainColor300, 0.4), ";\n color: ").concat(mainColor700, ";\n }\n\n :active {\n box-shadow: none;\n background-color: ").concat((0, _shared.hexToRgba)(mainColor300, 0.5), ";\n color: ").concat(mainColor700, ";\n }\n ");
});
IconButton.propTypes = {
size: _propTypes.default.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
skin: _propTypes.default.oneOf(['neutral', 'primary', 'secondary', 'success', 'warning', 'error']),
theme: _propTypes.default.shape({
baseFontSize: _propTypes.default.number,
colors: _propTypes.default.object,
spacing: _propTypes.default.object,
components: _propTypes.default.shape({
button: _propTypes.default.object
})
})
};
IconButton.defaultProps = {
size: 'medium',
skin: 'neutral',
theme: {
breakpoints: _shared.theme.breakpoints,
gutter: '8px',
baseFontSize: _theme.baseFontSize,
spacing: _theme.spacing,
components: {
button: _theme.components.button
}
}
};
Button.Icon = IconButton;
var _default = Button;
exports.default = _default;