@storybook/design-system
Version:
Storybook design system
137 lines (119 loc) • 6.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ButtonToggle = ButtonToggle;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _polished = require("polished");
var _react = _interopRequireDefault(require("react"));
var _theming = require("@storybook/theming");
var _styles = require("./shared/styles");
var _Link = require("./Link");
var _TooltipNote = require("./tooltip/TooltipNote");
var _WithTooltip = _interopRequireDefault(require("./tooltip/WithTooltip"));
var _excluded = ["titles", "onSelectIndex", "selectedIndex", "appearance"];
var activePadding = 20;
var inActivePadding = 15;
var StyledButton = (0, _theming.styled)("button", process.env.NODE_ENV === "production" ? {
target: "e1p5p6l04"
} : {
target: "e1p5p6l04",
label: "StyledButton"
})("border:0;border-radius:3em;cursor:pointer;display:inline-block;overflow:hidden;padding:8px ", inActivePadding, "px;position:relative;text-align:center;text-decoration:none;transition:background-color 150ms ease-out,color 150ms ease-out;transform:translate3d(0, 0, 0);vertical-align:top;white-space:nowrap;user-select:none;opacity:1;margin:0;font-size:", _styles.typography.size.s1, "px;font-weight:", _styles.typography.weight.extrabold, ";line-height:1;color:", _styles.color.dark, ";background-color:transparent;", function (props) {
return props.isActive && /*#__PURE__*/(0, _theming.css)("background-color:", _styles.color.lightest, ";box-shadow:", (0, _polished.opacify)(0.05, _styles.color.border), " 0 0 0 1px inset;color:", _styles.color.darkest, ";padding-right:", activePadding, "px;padding-left:", activePadding, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:StyledButton;"));
}, ";");
var TooltipWrapper = ( /*#__PURE__*/0, _theming.styled)(_WithTooltip["default"], process.env.NODE_ENV === "production" ? {
target: "e1p5p6l03"
} : {
target: "e1p5p6l03",
label: "TooltipWrapper"
})(function (props) {
return props.isActive && /*#__PURE__*/(0, _theming.css)("&:first-child{margin-right:-", activePadding - inActivePadding, "px;}:not(:first-child):not(:last-child){margin-left:-", activePadding - inActivePadding, "px;margin-right:-", activePadding - inActivePadding, "px;}&:last-child{margin-left:-", activePadding - inActivePadding, "px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:TooltipWrapper;"));
}, " &:first-child ", StyledButton, "{padding-left:", activePadding, "px;}&:last-child ", StyledButton, "{padding-right:", activePadding, "px;}&:hover ", StyledButton, "{position:relative;z-index:1;}");
var PillButton = ( /*#__PURE__*/0, _theming.styled)(_Link.Link, process.env.NODE_ENV === "production" ? {
target: "e1p5p6l02"
} : {
target: "e1p5p6l02",
label: "PillButton"
})("font-size:", _styles.typography.size.s1, "px;font-weight:", _styles.typography.weight.bold, ";line-height:1;display:inline-block;vertical-align:top;padding:4px 8px;border-radius:10px;&:hover{background:", _styles.background.calmBlue, ";color:", _styles.color.secondary, ";img,svg{opacity:1;}}img,svg{height:1rem;width:1rem;opacity:0.3;transition:all 150ms ease-out;margin:-3px 0;}", function (props) {
return props.active && /*#__PURE__*/(0, _theming.css)("background:", _styles.background.calmBlue, ";color:", _styles.color.secondary, ";img,svg{opacity:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:PillButton;"));
}, ";");
var TabButton = ( /*#__PURE__*/0, _theming.styled)(_Link.Link, process.env.NODE_ENV === "production" ? {
target: "e1p5p6l01"
} : {
target: "e1p5p6l01",
label: "TabButton"
})("font-size:", _styles.typography.size.s2 - 1, "px;font-weight:", _styles.typography.weight.bold, ";line-height:20px;display:inline-block;padding:10px 15px;&:hover{color:", _styles.color.secondary, ";}", function (props) {
return props.active && /*#__PURE__*/(0, _theming.css)("color:", _styles.color.secondary, ";box-shadow:", _styles.color.secondary, " 0 -3px 0 0 inset;" + (process.env.NODE_ENV === "production" ? "" : ";label:TabButton;"));
}, ";");
var Wrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1p5p6l00"
} : {
target: "e1p5p6l00",
label: "Wrapper"
})("display:inline-flex;align-items:center;white-space:nowrap;", function (props) {
return props.appearance === 'outline' && /*#__PURE__*/(0, _theming.css)("background-color:", (0, _polished.opacify)(0.05, _styles.color.border), ";border-radius:3em;" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;"));
}, ";");
function ButtonToggle(_ref) {
var titles = _ref.titles,
onSelectIndex = _ref.onSelectIndex,
selectedIndex = _ref.selectedIndex,
appearance = _ref.appearance,
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
return /*#__PURE__*/_react["default"].createElement(Wrapper, (0, _extends2["default"])({
appearance: appearance
}, props), titles.map(function (_ref2, index) {
var title = _ref2.title,
tooltip = _ref2.tooltip;
switch (appearance) {
case 'pill':
return /*#__PURE__*/_react["default"].createElement(PillButton // eslint-disable-next-line react/no-array-index-key
, {
key: index,
active: index === selectedIndex,
onClick: function onClick() {
return onSelectIndex(index);
},
title: tooltip,
secondary: true,
isButton: true
}, title);
case 'tab':
return /*#__PURE__*/_react["default"].createElement(TabButton // eslint-disable-next-line react/no-array-index-key
, {
key: index,
active: index === selectedIndex,
onClick: function onClick() {
return onSelectIndex(index);
},
title: tooltip,
secondary: true,
isButton: true
}, title);
case 'outline':
return /*#__PURE__*/_react["default"].createElement(TooltipWrapper, {
tagName: "span",
key: typeof title === 'string' ? title : index,
hasChrome: false,
placement: "bottom",
trigger: "hover",
tooltip: /*#__PURE__*/_react["default"].createElement(_TooltipNote.TooltipNote, {
note: tooltip
}),
isActive: index === selectedIndex
}, /*#__PURE__*/_react["default"].createElement(StyledButton, {
isActive: index === selectedIndex,
onClick: function onClick() {
return onSelectIndex(index);
}
}, title));
default:
return 'this appearance is not supported';
}
}));
}
ButtonToggle.defaultProps = {
appearance: 'outline'
};