@wix/design-system
Version:
@wix/design-system
290 lines (289 loc) • 9.19 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _Slider = _interopRequireDefault(require("../Slider"));
var _Box = _interopRequireDefault(require("../../Box"));
var _Layout = require("../../Layout");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Slider/test/Slider.visual.jsx",
_this = void 0;
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) { (0, _defineProperty2["default"])(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; }
var commonProps = {
min: 0,
max: 10,
value: 4,
displayMarks: false,
onChange: function onChange(e) {
return e;
},
direction: 'horizontal'
};
var tests = [{
describe: 'Horizontal',
its: [{
it: 'default',
props: _objectSpread({}, commonProps)
}, {
it: 'disabled',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
disabled: true
})
}, {
it: 'displayMarks',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
displayMarks: true
})
}, {
it: 'step = 2',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
step: 2,
displayMarks: true
})
}, {
it: 'custom marks',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
marks: {
0: '$0',
2: '$79',
4: '$129',
6: '$199',
8: '$349',
10: '$499'
},
displayMarks: true
})
}, {
it: 'start point',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
startPoint: 4,
displayMarks: true
})
}, {
it: 'has a gradient applied when color name is passed',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
gradientColor: 'pink'
})
}, {
it: 'has a gradient applied when rgb color code is passed to it',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
gradientColor: 'rgb(17,122,135)'
})
}, {
it: 'has a gradient applied when hex color code is passed to it',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
gradientColor: '#FFAC89'
})
}, {
it: 'has gradient fall back to blue when incorrect value is passed',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
gradientColor: 'qwerty'
})
}, {
it: 'has a gradient and is disabled',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
gradientColor: 'red',
disabled: true
})
}]
}, {
describe: 'Vertical',
its: [{
it: 'default',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
direction: 'vertical'
})
}, {
it: 'disabled',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
disabled: true,
direction: 'vertical'
})
}, {
it: 'displayMarks',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
displayMarks: true,
direction: 'vertical'
})
}, {
it: 'step = 2',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
step: 2,
displayMarks: true,
direction: 'vertical'
})
}, {
it: 'custom marks',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
marks: {
0: '$0',
2: '$79',
4: '$129',
6: '$199',
8: '$349',
10: '$499'
},
displayMarks: true,
direction: 'vertical'
})
}, {
it: 'start point',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
startPoint: 4,
displayMarks: true,
direction: 'vertical'
})
}, {
it: 'is vertical and has a gradient applied when color name is passed',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
gradientColor: 'pink',
direction: 'vertical'
})
}, {
it: 'is vertical has a gradient and is disabled',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
gradientColor: 'red',
disabled: true,
direction: 'vertical'
})
}]
}, {
describe: 'marksLabelAlignment',
its: [{
it: 'is horizontal and has marksLabelAlignment set to inline and has displayMarks set to true',
props: {
direction: 'horizontal',
marksLabelAlignment: 'inside',
displayMarks: true
}
}, {
it: 'is horizontal and has marksLabelAlignment set to inline and has custom marks and has displayMarks set to true',
props: {
direction: 'horizontal',
marksLabelAlignment: 'inside',
marks: {
0: '$0',
2: '$79',
4: '$129',
6: '$199',
8: '$349',
10: '$499'
},
displayMarks: true
}
}, {
it: 'is vertical and has marksLabelAlignment set to inline and has displayMarks set to true',
props: {
direction: 'horizontal',
marksLabelAlignment: 'inside',
displayMarks: true
}
}, {
it: 'is vertical and has marksLabelAlignment set to inline and has custom marks and has displayMarks set to true',
props: {
direction: 'vertical',
marksLabelAlignment: 'inside',
marks: {
0: '$0',
2: '$79',
4: '$129',
6: '$199',
8: '$349',
10: '$499'
},
displayMarks: true
}
}]
}];
tests.forEach(function (_ref) {
var describe = _ref.describe,
its = _ref.its;
its.forEach(function (_ref2) {
var it = _ref2.it,
props = _ref2.props;
(0, _react2.storiesOf)("Slider".concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
margin: "sp2",
direction: "vertical",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_Layout.Layout, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 9
}
}, [0, 4, 10].map(function (value, key) {
return /*#__PURE__*/_react["default"].createElement(_Layout.Cell, {
key: key,
span: props.direction === 'vertical' ? 3 : 12,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 13
}
}, props.direction === 'vertical' ? /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: 'flex',
direction: 'column',
gap: '100px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 17
}
}, (0, _toConsumableArray2["default"])(Array(2)).map(function (e, i) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: i,
style: {
height: 500
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 21
}
}, /*#__PURE__*/_react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, commonProps, props, {
value: value,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 23
}
})));
})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _toConsumableArray2["default"])(Array(2)).map(function (e, i) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: i,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 21
}
}, /*#__PURE__*/_react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, commonProps, props, {
value: value,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 23
}
})));
})));
})));
});
});
});