@storybook/design-system
Version:
Storybook design system
282 lines (249 loc) • 13.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Select = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _theming = require("@storybook/theming");
var _styles = require("./shared/styles");
var _animation = require("./shared/animation");
var _Icon = require("./Icon");
var _Spinner = require("./Spinner");
var _excluded = ["id", "options", "value", "appearance", "label", "hideLabel", "error", "icon", "className", "inProgress", "disabled", "stackLevel"];
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 _ref6 = process.env.NODE_ENV === "production" ? {
name: "1lv1yo7",
styles: "display:inline-flex"
} : {
name: "zaf6eo-SelectContainer",
styles: "display:inline-flex;label:SelectContainer;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var SelectContainer = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e12i1xrq9"
} : {
target: "e12i1xrq9",
label: "SelectContainer"
})(function (props) {
return props.appearance === 'tertiary' && _ref6;
}, ";");
var Label = (0, _theming.styled)("label", process.env.NODE_ENV === "production" ? {
target: "e12i1xrq8"
} : {
target: "e12i1xrq8",
label: "Label"
})("font-weight:", _styles.typography.weight.bold, ";font-size:", _styles.typography.size.s2, "px;");
var _ref5 = process.env.NODE_ENV === "production" ? {
name: "1ed4kgp",
styles: "border:0px!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(100%)!important;clip-path:inset(100%)!important;height:1px!important;overflow:hidden!important;padding:0px!important;position:absolute!important;white-space:nowrap!important;width:1px!important"
} : {
name: "9k4rx4-LabelWrapper",
styles: "border:0px!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(100%)!important;clip-path:inset(100%)!important;height:1px!important;overflow:hidden!important;padding:0px!important;position:absolute!important;white-space:nowrap!important;width:1px!important;label:LabelWrapper;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var LabelWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e12i1xrq7"
} : {
target: "e12i1xrq7",
label: "LabelWrapper"
})("margin-bottom:0.5em;", function (props) {
return props.hideLabel && _ref5;
}, ";");
var _ref3 = process.env.NODE_ENV === "production" ? {
name: "g8zzui",
styles: "cursor:progress"
} : {
name: "1ijlmdj-Selector",
styles: "cursor:progress;label:Selector;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var _ref4 = process.env.NODE_ENV === "production" ? {
name: "1sfig4b",
styles: "cursor:not-allowed"
} : {
name: "1rgfbw6-Selector",
styles: "cursor:not-allowed;label:Selector;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var Selector = (0, _theming.styled)("select", process.env.NODE_ENV === "production" ? {
target: "e12i1xrq6"
} : {
target: "e12i1xrq6",
label: "Selector"
})("appearance:none;border:0;border-radius:0;font-size:", _styles.typography.size.s2, "px;line-height:20px;padding:10px 3em 10px 15px;position:relative;outline:none;width:100%;margin:0;display:block;", function (props) {
return props.disabled && _ref4;
}, " ", function (props) {
return props.inProgress && _ref3;
}, ";");
var OptionWrapper = (0, _theming.styled)("option", process.env.NODE_ENV === "production" ? {
target: "e12i1xrq5"
} : {
target: "e12i1xrq5",
label: "OptionWrapper"
})();
var Arrow = ( /*#__PURE__*/0, _theming.styled)(function (props) {
return /*#__PURE__*/_react["default"].createElement(_Icon.Icon, (0, _extends2["default"])({}, props, {
icon: "arrowdown"
}));
}, process.env.NODE_ENV === "production" ? {
target: "e12i1xrq4"
} : {
target: "e12i1xrq4",
label: "Arrow"
})();
var SelectIcon = ( /*#__PURE__*/0, _theming.styled)(_Icon.Icon, process.env.NODE_ENV === "production" ? {
target: "e12i1xrq3"
} : {
target: "e12i1xrq3",
label: "SelectIcon"
})();
var SelectSpinner = ( /*#__PURE__*/0, _theming.styled)(_Spinner.Spinner, process.env.NODE_ENV === "production" ? {
target: "e12i1xrq2"
} : {
target: "e12i1xrq2",
label: "SelectSpinner"
})(process.env.NODE_ENV === "production" ? {
name: "u3rxzg",
styles: "right:16px;left:auto;z-index:2"
} : {
name: "u3rxzg",
styles: "right:16px;left:auto;z-index:2",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var SelectError = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e12i1xrq1"
} : {
target: "e12i1xrq1",
label: "SelectError"
})("position:absolute;right:0;top:0;transition:all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);font-size:", _styles.typography.size.s1, "px;font-family:", _styles.typography.type.primary, ";color:", _styles.color.negative, ";line-height:40px;padding-right:2.75em;pointer-events:none;");
var _ref2 = process.env.NODE_ENV === "production" ? {
name: "lp4qij",
styles: "position:relative;&:focus{z-index:2;}"
} : {
name: "16i8lnv-stackLevelDefinedStyling",
styles: "position:relative;&:focus{z-index:2;};label:stackLevelDefinedStyling;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var getStackLevelStyling = function getStackLevelStyling(props) {
var radius = 4;
var stackLevelDefinedStyling = _ref2;
switch (props.stackLevel) {
case 'top':
return /*#__PURE__*/(0, _theming.css)("border-top-left-radius:", radius, "px;border-top-right-radius:", radius, "px;border-bottom-left-radius:0;border-bottom-right-radius:0;", stackLevelDefinedStyling, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getStackLevelStyling;"));
case 'middle':
return /*#__PURE__*/(0, _theming.css)("border-radius:0px;margin-top:-1px;", stackLevelDefinedStyling, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getStackLevelStyling;"));
case 'bottom':
return /*#__PURE__*/(0, _theming.css)("border-bottom-left-radius:", radius, "px;border-bottom-right-radius:", radius, "px;border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px;", stackLevelDefinedStyling, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getStackLevelStyling;"));
default:
return /*#__PURE__*/(0, _theming.css)("border-radius:", radius, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:getStackLevelStyling;"));
}
};
var _ref = process.env.NODE_ENV === "production" ? {
name: "o9ww1u",
styles: "opacity:0.5"
} : {
name: "1rqhrq7-SelectWrapper",
styles: "opacity:0.5;label:SelectWrapper;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var SelectWrapper = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
target: "e12i1xrq0"
} : {
target: "e12i1xrq0",
label: "SelectWrapper"
})("display:inline-block;position:relative;vertical-align:top;width:100%;&:before{content:'';bottom:1px;right:1px;top:1px;width:2em;margin-left:1px;position:absolute;z-index:3;pointer-events:none;}", Arrow, "{position:absolute;z-index:3;pointer-events:none;height:12px;margin-top:-6px;right:12px;top:50%;path{fill:", _styles.color.mediumdark, ";}}", Selector, "{box-shadow:", _styles.color.border, " 0 0 0 1px inset;", function (props) {
return getStackLevelStyling(props);
}, ";}", Selector, ":focus{box-shadow:", _styles.color.secondary, " 0 0 0 1px inset;}", function (props) {
return props.disabled && _ref;
}, " ", Selector, "{background-color:", _styles.color.lightest, ";color:", _styles.color.darkest, ";}", function (props) {
return props.appearance === 'tertiary' && "\n width: auto;\n height: auto;\n\n ".concat(Selector, " {\n color: ").concat(_styles.color.darkest, ";\n background-color: transparent;\n padding: 0 1.5em 0 0;\n text-decoration: none;\n box-shadow: none;\n }\n &:before {\n content: none;\n }\n ").concat(Arrow, " {\n right: 0;\n top: 10px;\n }\n ").concat(SelectSpinner, " {\n right: 0;\n }\n ").concat(SelectIcon, " {\n left: 0;\n top: 10px;\n }\n ").concat(SelectError, " {\n position: relative;\n line-height: 20px;\n margin-top: 8px;\n }\n ");
}, " ", function (props) {
return props.hasIcon && "\n ".concat(Selector, " {\n padding-left: ").concat(props.appearance === 'tertiary' ? '20px' : '40px', ";\n }\n\n ").concat(Selector, " + ").concat(SelectIcon, " {\n transition: all 150ms ease-out;\n position: absolute;\n top: ").concat(props.appearance === 'tertiary' ? '10px' : '50%', ";\n left: ").concat(props.appearance === 'tertiary' ? 0 : '0.8em', ";\n height: 1em;\n width: 1em;\n margin-top: -0.5em;\n z-index: 2;\n\n path {\n fill: ").concat(_styles.color.mediumdark, ";\n }\n }\n ").concat(Selector, ":focus + ").concat(SelectIcon, " path {\n fill: ").concat(_styles.color.darker, ";\n }\n ");
}, " ", function (props) {
return props.error && "\n ".concat(Selector, " {\n box-shadow: ").concat(_styles.color.red, " 0 0 0 1px inset;\n &:focus {\n box-shadow: ").concat(_styles.color.red, " 0 0 0 1px inset !important;\n }\n }\n\n ").concat(Selector, " + ").concat(SelectIcon, " {\n ").concat( /*#__PURE__*/(0, _theming.css)("animation:", _animation.jiggle, " 700ms ease-out;" + (process.env.NODE_ENV === "production" ? "" : ";label:SelectWrapper;")), "\n path {\n fill: ").concat(_styles.color.red, ";\n }\n }\n ");
}, ";");
var Option = function Option(_ref7) {
var label = _ref7.label,
value = _ref7.value;
return /*#__PURE__*/_react["default"].createElement(OptionWrapper, {
value: value
}, label);
};
var Select = function Select(_ref8) {
var id = _ref8.id,
_ref8$options = _ref8.options,
options = _ref8$options === void 0 ? [{
label: 'Loading',
value: 'loading'
}] : _ref8$options,
_ref8$value = _ref8.value,
value = _ref8$value === void 0 ? 'loading' : _ref8$value,
_ref8$appearance = _ref8.appearance,
appearance = _ref8$appearance === void 0 ? 'default' : _ref8$appearance,
label = _ref8.label,
_ref8$hideLabel = _ref8.hideLabel,
hideLabel = _ref8$hideLabel === void 0 ? false : _ref8$hideLabel,
error = _ref8.error,
icon = _ref8.icon,
className = _ref8.className,
_ref8$inProgress = _ref8.inProgress,
inProgress = _ref8$inProgress === void 0 ? false : _ref8$inProgress,
_ref8$disabled = _ref8.disabled,
disabled = _ref8$disabled === void 0 ? false : _ref8$disabled,
_ref8$stackLevel = _ref8.stackLevel,
stackLevel = _ref8$stackLevel === void 0 ? undefined : _ref8$stackLevel,
other = (0, _objectWithoutProperties2["default"])(_ref8, _excluded);
var spinnerId;
var errorId;
var ariaDescribedBy;
if (inProgress) {
spinnerId = "".concat(id, "-in-progress");
ariaDescribedBy = spinnerId;
}
if (error) {
errorId = "".concat(id, "-error");
ariaDescribedBy = "".concat(ariaDescribedBy || '', " ").concat(errorId);
}
return /*#__PURE__*/_react["default"].createElement(SelectContainer, {
className: className,
appearance: appearance
}, /*#__PURE__*/_react["default"].createElement(LabelWrapper, {
hideLabel: hideLabel
}, /*#__PURE__*/_react["default"].createElement(Label, {
htmlFor: id
}, label)), /*#__PURE__*/_react["default"].createElement(SelectWrapper, {
appearance: appearance,
hasIcon: !!icon,
"data-error": error,
error: error,
disabled: disabled,
inProgress: inProgress,
stackLevel: stackLevel
}, !inProgress && /*#__PURE__*/_react["default"].createElement(Arrow, null), /*#__PURE__*/_react["default"].createElement(Selector, (0, _extends2["default"])({
id: id,
value: value
}, other, {
disabled: disabled || inProgress,
inProgress: inProgress,
"aria-describedby": ariaDescribedBy,
"aria-invalid": !!error,
"aria-busy": inProgress
}), options.map(function (option) {
return /*#__PURE__*/_react["default"].createElement(Option, (0, _extends2["default"])({}, option, {
key: option.value
}));
})), icon && /*#__PURE__*/_react["default"].createElement(SelectIcon, {
icon: icon,
"aria-hidden": true
}), error && /*#__PURE__*/_react["default"].createElement(SelectError, {
id: errorId
}, error), inProgress && /*#__PURE__*/_react["default"].createElement(SelectSpinner, {
id: spinnerId,
"aria-label": "Loading",
inForm: true
})));
};
exports.Select = Select;