@wix/design-system
Version:
@wix/design-system
345 lines • 9.19 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["options", "elementToRender", "prefixIcon"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/SegmentedToggle/test/SegmentedToggle.visual.jsx",
_this = this;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { storiesOf } from '@storybook/react';
import { LockLocked } from '@wix/wix-ui-icons-common';
import SegmentedToggle from '../SegmentedToggle';
import { Layout, Cell } from '../..';
var options = [{
value: 'option1',
text: 'Option1'
}, {
value: 'option2',
text: 'Option2'
}, {
value: 'option3',
text: 'Option3'
}, {
value: 'option4',
text: 'Option4'
}];
var defaultProps = {
defaultSelected: options[0].value
};
var childElementOptions = {
button: 'button',
icon: 'icon'
};
var renderSegmentedButton = function renderSegmentedButton(_ref) {
var value = _ref.value,
text = _ref.text,
prefixIcon = _ref.prefixIcon;
return /*#__PURE__*/React.createElement(SegmentedToggle.Button, {
key: value,
prefixIcon: prefixIcon,
value: value,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 3
}
}, text);
};
var renderSegmentedIcon = function renderSegmentedIcon(_ref2) {
var value = _ref2.value,
tooltipText = _ref2.tooltipText;
return /*#__PURE__*/React.createElement(SegmentedToggle.Icon, {
key: value,
value: value,
tooltipText: tooltipText,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 3
}
}, /*#__PURE__*/React.createElement(LockLocked, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 5
}
}));
};
var renderSegmentedToggle = function renderSegmentedToggle(props) {
var options = props.options,
elementToRender = props.elementToRender,
prefixIcon = props.prefixIcon,
rest = _objectWithoutProperties(props, _excluded);
var optionsToRender = [];
for (var i = 0; i < options.length; i++) {
if (childElementOptions.button === elementToRender) {
optionsToRender.push(renderSegmentedButton(_objectSpread(_objectSpread({}, options[i]), {}, {
prefixIcon: prefixIcon
})));
} else {
optionsToRender.push(renderSegmentedIcon(_objectSpread(_objectSpread({}, options[i]), {}, {
tooltipText: 'title'
})));
}
}
return /*#__PURE__*/React.createElement(SegmentedToggle, _extends({}, rest, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 10
}
}), optionsToRender);
};
var tests = [{
describe: 'Toggle Button',
its: [{
it: 'enabled',
props: {
disabled: false,
elementToRender: childElementOptions.button
}
}, {
it: 'disabled',
props: {
disabled: true,
elementToRender: childElementOptions.button
}
}, {
it: 'prefix',
props: {
prefixIcon: /*#__PURE__*/React.createElement(LockLocked, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 23
}
}),
elementToRender: childElementOptions.button
}
}, {
it: 'size medium',
props: {
prefixIcon: /*#__PURE__*/React.createElement(LockLocked, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 23
}
}),
elementToRender: childElementOptions.button,
size: 'medium'
}
}, {
it: 'size tiny',
props: {
prefixIcon: /*#__PURE__*/React.createElement(LockLocked, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 23
}
}),
elementToRender: childElementOptions.button,
size: 'tiny'
}
}, {
it: 'size small',
props: {
prefixIcon: /*#__PURE__*/React.createElement(LockLocked, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 23
}
}),
elementToRender: childElementOptions.button,
size: 'small'
}
}]
}, {
describe: 'Icon Button',
its: [{
it: 'enabled',
props: {
disabled: false,
elementToRender: childElementOptions.icon
}
}, {
it: 'disabled',
props: {
disabled: true,
elementToRender: childElementOptions.icon
}
}, {
it: 'size medium',
props: {
elementToRender: childElementOptions.icon,
size: 'medium'
}
}, {
it: 'size small',
props: {
elementToRender: childElementOptions.icon,
size: 'small'
}
}]
}, {
describe: 'Icon Button',
its: [{
it: 'enabled',
props: {
disabled: false,
elementToRender: childElementOptions.icon
}
}, {
it: 'disabled',
props: {
disabled: true,
elementToRender: childElementOptions.icon
}
}, {
it: 'size medium',
props: {
elementToRender: childElementOptions.icon,
size: 'medium'
}
}, {
it: 'size small',
props: {
elementToRender: childElementOptions.icon,
size: 'small'
}
}]
}, {
describe: 'Width',
its: [{
it: 'equal for all buttons',
props: {
elementToRender: childElementOptions.button,
options: [{
value: 'Option1',
text: 'Very very very long label'
}, {
value: 'Option2',
text: 'Short label'
}]
}
}]
}, {
describe: 'fullWidth',
its: [{
it: 'button',
props: {
fullWidth: true,
size: 'small',
elementToRender: childElementOptions.button
}
}, {
it: 'icon',
props: {
fullWidth: true,
size: 'small',
elementToRender: childElementOptions.icon
}
}]
}];
tests.forEach(function (_ref3) {
var describe = _ref3.describe,
its = _ref3.its;
its.forEach(function (_ref4) {
var it = _ref4.it,
props = _ref4.props;
storiesOf("SegmentedToggle".concat(describe ? '/' + describe : ''), module).add(it, function () {
var twoOptions = options.slice(0, 2);
return /*#__PURE__*/React.createElement("div", {
style: {
width: '1024px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Layout, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 15
}
}, renderSegmentedToggle(_objectSpread(_objectSpread({
options: twoOptions
}, props), defaultProps))), /*#__PURE__*/React.createElement(Cell, {
span: 6,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 15
}
}, renderSegmentedToggle(_objectSpread(_objectSpread({
options: options
}, props), defaultProps)))));
});
});
});
storiesOf("SegmentedToggle/Toggle Button", module).add('long text', function () {
var longTextOptions = [{
value: 'option1',
text: 'Option1'
}, {
value: 'option2',
text: 'Option2'
}, {
value: 'option3',
text: 'Option3'
}, {
value: 'option4',
text: 'Very long fancy and hardly fitting tab'
}];
return /*#__PURE__*/React.createElement(Layout, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 5
}
}, /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 7
}
}, renderSegmentedToggle(_objectSpread({
options: longTextOptions,
prefixIcon: /*#__PURE__*/React.createElement(LockLocked, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 23
}
}),
elementToRender: childElementOptions.button
}, defaultProps))));
});