@storybook/design-system
Version:
Storybook design system
182 lines (164 loc) • 14.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Button = exports.StyledButton = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _theming = require("@storybook/theming");
var _polished = require("polished");
var _styles = require("./shared/styles");
var _animation = require("./shared/animation");
var _excluded = ["children", "isDisabled", "isLoading", "loadingText", "isLink", "ButtonWrapper", "appearance"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var Text = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
target: "eotfes63"
} : {
target: "eotfes63",
label: "Text"
})(process.env.NODE_ENV === "production" ? {
name: "x9illq",
styles: "display:inline-block;vertical-align:top"
} : {
name: "x9illq",
styles: "display:inline-block;vertical-align:top",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var Loading = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
target: "eotfes62"
} : {
target: "eotfes62",
label: "Loading"
})(process.env.NODE_ENV === "production" ? {
name: "142i4ns",
styles: "position:absolute;top:50%;left:0;right:0;opacity:0"
} : {
name: "142i4ns",
styles: "position:absolute;top:50%;left:0;right:0;opacity:0",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var APPEARANCES = {
PRIMARY: 'primary',
PRIMARY_OUTLINE: 'primaryOutline',
SECONDARY: 'secondary',
SECONDARY_OUTLINE: 'secondaryOutline',
TERTIARY: 'tertiary',
OUTLINE: 'outline',
INVERSE_PRIMARY: 'inversePrimary',
INVERSE_SECONDARY: 'inverseSecondary',
INVERSE_OUTLINE: 'inverseOutline',
INVERSE: 'inverse',
INVERSE_NO_CHROME: 'inverseNoChrome'
};
var SIZES = {
SMALL: 'small',
MEDIUM: 'medium'
};
var StyledButton = (0, _theming.styled)("button", process.env.NODE_ENV === "production" ? {
target: "eotfes61"
} : {
target: "eotfes61",
label: "StyledButton"
})("border:0;border-radius:3em;cursor:pointer;display:inline-block;overflow:hidden;padding:", function (props) {
return props.size === SIZES.SMALL ? '8px 16px' : '13px 20px';
}, ";position:relative;text-align:center;text-decoration:none;transition:all 150ms ease-out;transform:translate3d(0, 0, 0);will-change:transform;vertical-align:top;white-space:nowrap;user-select:none;opacity:1;margin:0;background:transparent;font-size:", function (props) {
return props.size === SIZES.SMALL ? _styles.typography.size.s1 : _styles.typography.size.s2;
}, "px;font-weight:", _styles.typography.weight.extrabold, ";line-height:1;", function (props) {
return !props.isLoading && "\n &:hover {\n transform: translate3d(0, -2px, 0);\n box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;\n }\n\n &:active {\n transform: translate3d(0, 0, 0);\n }\n ";
}, " ", Text, "{transform:scale3d(1, 1, 1) translate3d(0, 0, 0);transition:transform 700ms ", _animation.easing.rubber, ";opacity:1;}", Loading, "{transform:translate3d(0, 100%, 0);}svg{height:", function (props) {
return props.size === SIZES.SMALL ? '12' : '14';
}, "px;width:", function (props) {
return props.size === SIZES.SMALL ? '12' : '14';
}, "px;vertical-align:top;margin-right:", function (props) {
return props.size === SIZES.SMALL ? '4' : '6';
}, "px;margin-top:", function (props) {
return props.size === SIZES.SMALL ? '0' : '-1';
}, "px;margin-bottom:", function (props) {
return props.size === SIZES.SMALL ? '0' : '-1';
}, "px;pointer-events:none;}", function (props) {
return props.disabled && "\n cursor: not-allowed !important;\n opacity: 0.5;\n &:hover {\n transform: none;\n }\n ";
}, " ", function (props) {
return props.isUnclickable && "\n cursor: default !important;\n pointer-events: none;\n &:hover {\n transform: none;\n }\n ";
}, " ", function (props) {
return props.isLoading && "\n cursor: progress !important;\n opacity: 0.7;\n\n ".concat(Loading, " {\n transition: transform 700ms ").concat(_animation.easing.rubber, ";\n transform: translate3d(0, -50%, 0);\n opacity: 1;\n }\n\n ").concat(Text, " {\n transform: scale3d(0, 0, 1) translate3d(0, -100%, 0);\n opacity: 0;\n }\n\n &:hover {\n transform: none;\n }\n ");
}, " ", function (props) {
return props.containsIcon && "\n svg {\n display: block;\n margin: 0;\n height: ".concat(props.size === SIZES.SMALL ? '14' : '16', "px;\n width: ").concat(props.size === SIZES.SMALL ? '14' : '16', "px;\n }\n padding: ").concat(props.size === SIZES.SMALL ? '7' : '12', "px;\n ");
}, " ", function (props) {
return props.appearance === APPEARANCES.PRIMARY && "\n background: ".concat(_styles.color.primary, ";\n color: ").concat(_styles.color.lightest, ";\n\n ").concat(!props.isLoading && "\n &:hover {\n background: ".concat((0, _polished.darken)(0.05, _styles.color.primary), ";\n }\n &:active {\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;\n }\n "), "\n ");
}, " ", function (props) {
return props.appearance === APPEARANCES.SECONDARY && "\n background: ".concat(_styles.color.secondary, ";\n color: ").concat(_styles.color.lightest, ";\n\n ").concat(!props.isLoading && "\n &:hover {\n background: ".concat((0, _polished.darken)(0.05, _styles.color.secondary), ";\n }\n &:active {\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;\n }\n "), "\n ");
}, " ", function (props) {
return props.appearance === APPEARANCES.TERTIARY && "\n background: ".concat(_styles.color.tertiary, ";\n color: ").concat(_styles.color.darkest, ";\n\n ").concat(!props.isLoading && "\n &:hover {\n background: ".concat((0, _polished.darken)(0.05, _styles.color.tertiary), ";\n }\n &:active {\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;\n }\n "), "\n ");
}, " ", function (props) {
return props.appearance === APPEARANCES.OUTLINE && "\n box-shadow: ".concat((0, _polished.opacify)(0.05, _styles.color.border), " 0 0 0 1px inset;\n color: ").concat(_styles.color.dark, ";\n background: transparent;\n\n ").concat(!props.isLoading && "\n &:hover {\n box-shadow: ".concat((0, _polished.opacify)(0.3, _styles.color.border), " 0 0 0 1px inset;\n }\n\n &:active {\n background: ").concat((0, _polished.opacify)(0.05, _styles.color.border), ";\n box-shadow: transparent 0 0 0 1px inset;\n color: ").concat(_styles.color.darkest, ";\n }\n\n &:active:focus:hover {\n ", "\n background: ").concat((0, _polished.opacify)(0.05, _styles.color.border), ";\n box-shadow: transparent 0 0 0 1px inset;\n }\n "), ";\n ");
}, ";", function (props) {
return props.appearance === APPEARANCES.PRIMARY_OUTLINE && "\n box-shadow: ".concat(_styles.color.primary, " 0 0 0 1px inset;\n color: ").concat(_styles.color.primary, ";\n\n &:hover {\n box-shadow: ").concat(_styles.color.primary, " 0 0 0 1px inset;\n background: transparent;\n }\n\n &:active {\n background: ").concat(_styles.color.primary, ";\n box-shadow: ").concat(_styles.color.primary, " 0 0 0 1px inset;\n color: ").concat(_styles.color.lightest, ";\n }\n ");
}, ";", function (props) {
return props.appearance === APPEARANCES.SECONDARY_OUTLINE && "\n box-shadow: ".concat(_styles.color.secondary, " 0 0 0 1px inset;\n color: ").concat(_styles.color.secondary, ";\n\n &:hover {\n box-shadow: ").concat(_styles.color.secondary, " 0 0 0 1px inset;\n background: transparent;\n }\n\n &:active {\n background: ").concat(_styles.color.secondary, ";\n box-shadow: ").concat(_styles.color.secondary, " 0 0 0 1px inset;\n color: ").concat(_styles.color.lightest, ";\n }\n ");
}, ";", function (props) {
return props.appearance === APPEARANCES.INVERSE_PRIMARY && "\n background: ".concat(_styles.color.lightest, ";\n color: ").concat(_styles.color.primary, ";\n\n ").concat(!props.isLoading && "\n &:hover {\n background: ".concat(_styles.color.lightest, ";\n }\n &:active {\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;\n }\n "), "\n ");
}, " ", function (props) {
return props.appearance === APPEARANCES.INVERSE_SECONDARY && "\n background: ".concat(_styles.color.lightest, ";\n color: ").concat(_styles.color.secondary, ";\n\n ").concat(!props.isLoading && "\n &:hover {\n background: ".concat(_styles.color.lightest, ";\n }\n &:active {\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;\n }\n "), "\n ");
}, " ", function (props) {
return props.appearance === APPEARANCES.INVERSE_OUTLINE && "\n box-shadow: ".concat(_styles.color.lightest, " 0 0 0 1px inset;\n color: ").concat(_styles.color.lightest, ";\n\n &:hover {\n box-shadow: ").concat(_styles.color.lightest, " 0 0 0 1px inset;\n background: transparent;\n }\n\n &:active {\n background: ").concat(_styles.color.lightest, ";\n box-shadow: ").concat(_styles.color.lightest, " 0 0 0 1px inset;\n color: ").concat(_styles.color.darkest, ";\n }\n ");
}, ";", function (props) {
return props.appearance === APPEARANCES.INVERSE && "\n background: ".concat(_styles.color.tr10, ";\n color: ").concat(_styles.color.lightest, ";\n\n ").concat(!props.isLoading && "\n &:hover {\n background: ".concat(_styles.color.tr10, ";\n box-shadow: none;\n }\n &:active {\n box-shadow: none;\n }\n "), "\n ");
}, " ", function (props) {
return props.appearance === APPEARANCES.INVERSE_NO_CHROME && "\n background: transparent;\n color: ".concat(_styles.color.lightest, ";\n\n ").concat(!props.isLoading && "\n &:hover {\n background: transparent;\n box-shadow: none;\n }\n &:active {\n box-shadow: none;\n }\n ", "\n ");
}, ";");
exports.StyledButton = StyledButton;
var ButtonLink = (0, _theming.styled)("a", process.env.NODE_ENV === "production" ? {
target: "eotfes60"
} : {
target: "eotfes60",
label: "ButtonLink"
})();
var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
var children = _ref.children,
_ref$isDisabled = _ref.isDisabled,
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
isLoading = _ref.isLoading,
_ref$loadingText = _ref.loadingText,
loadingText = _ref$loadingText === void 0 ? null : _ref$loadingText,
isLink = _ref.isLink,
_ref$ButtonWrapper = _ref.ButtonWrapper,
ButtonWrapper = _ref$ButtonWrapper === void 0 ? null : _ref$ButtonWrapper,
_ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'tertiary' : _ref$appearance,
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
if (ButtonWrapper) {
return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
as: ButtonWrapper,
disabled: isDisabled,
isLoading: isLoading,
appearance: appearance
}, rest, {
// @ts-ignore
ref: ref
}), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Text, null, children), isLoading && /*#__PURE__*/_react["default"].createElement(Loading, null, loadingText || 'Loading...')));
}
if (isLink) {
return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
as: ButtonLink,
isLoading: isLoading,
appearance: appearance
}, rest, {
// @ts-ignore
ref: ref
}), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Text, null, children), isLoading && /*#__PURE__*/_react["default"].createElement(Loading, null, loadingText || 'Loading...')));
}
return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
disabled: isDisabled,
isLoading: isLoading,
appearance: appearance
}, rest, {
ref: ref
}), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Text, null, children), isLoading && /*#__PURE__*/_react["default"].createElement(Loading, null, loadingText || 'Loading...')));
});
exports.Button = Button;
Button.displayName = 'button';