@wix/design-system
Version:
@wix/design-system
432 lines (431 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _StatisticsWidget = _interopRequireDefault(require("../StatisticsWidget"));
var _constants = require("../constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/StatisticsWidget/test/StatisticsWidget.visual.jsx",
_this = void 0;
var sizes = Object.values(_constants.SIZES);
var tests = [{
describe: 'sanity',
its: [{
it: '3 items',
props: {
items: [{
value: '$7,500',
description: 'Monday',
percentage: 21,
invertedPercentage: true
}, {
value: '1 200 000',
description: 'Tuesday',
descriptionInfo: 'Sales on Tuesday',
percentage: 11
}, {
value: '21k',
description: 'Wednesday'
}]
}
}, {
it: '5 items',
props: {
items: [{
value: '$500',
description: 'Monday',
percentage: 21
}, {
value: '$1,500',
description: 'Tuesday',
percentage: 21,
invertedPercentage: true
}, {
value: '$2,500',
percentage: -11
}, {
value: '$3,500',
description: 'Thursday',
percentage: -11,
invertedPercentage: true,
descriptionInfo: 'Sales on Thursday'
}, {
value: '0',
description: 'Friday',
percentage: 0,
invertedPercentage: true,
descriptionInfo: 'Sales on Friday'
}]
}
}, {
it: '> 5 items',
props: {
items: [{
value: '$500',
description: 'Monday'
}, {
value: '$1,500',
description: 'Tuesday',
percentage: 21,
invertedPercentage: true
}, {
value: '$2,500',
percentage: 11
}, {
value: '$3,500',
description: 'Thursday',
percentage: 0,
invertedPercentage: true,
descriptionInfo: 'Sales on Thursday'
}, {
value: '$4,500',
description: 'Friday',
descriptionInfo: 'Sales on Friday'
}, {
value: '$5,500',
description: 'Saturday',
percentage: 0
}]
}
}]
}, {
describe: 'title',
its: [{
it: 'without short text in a value',
props: {
items: [{
value: '$7,500,000,000'
}, {
value: '$1,200,000'
}, {
value: '$1,872'
}, {
value: 'Testing very very long text'
}]
}
}, {
it: 'with tiny values',
props: {
size: 'tiny',
items: [{
value: '$7,500,000,000'
}, {
value: '$1,200,000'
}, {
value: '$1,872'
}]
}
}, {
it: 'with items alignment to start',
props: {
size: 'tiny',
alignItems: 'start',
items: [{
value: '$7,500,'
}, {
value: '$1,200'
}, {
value: '$1,872'
}]
}
}, {
it: 'with short text in a value',
props: {
items: [{
value: '$7,500,000,000',
valueInShort: '$7,5B'
}, {
value: '$1,200,000',
valueInShort: '$1,2M'
}, {
value: '$1,872',
valueInShort: '$1,8K'
}, {
value: 'Testing very very long text',
valueInShort: 'Text'
}]
}
}, {
it: 'empty values',
props: {
items: [{
description: 'Sales'
}, {
description: 'Views'
}, {
description: 'Revenues'
}]
}
}]
}, {
describe: 'description',
its: [{
it: 'extra long description',
props: {
items: [{
value: '$1,000',
description: 'The income out of trading goods on Monday',
descriptionInfo: 'Sales on Monday'
}, {
value: '$2,000',
description: 'The income out of trading goods on Tuesday'
}, {
value: '$3,000',
description: 'The income out of trading goods on Wednesday'
}, {
value: '$4,000',
description: 'The income out of trading goods on Thursday',
descriptionInfo: 'Sales on Thursday'
}, {
value: '$4,000',
description: 'The income out of trading goods on Friday'
}]
}
}, {
it: 'Info icons',
props: {
items: [{
value: '$500',
description: 'Monday',
descriptionInfo: 'Sales on Thursday'
}, {
value: '$1,500',
descriptionInfo: 'I am not visible because there is no description'
}, {
value: '$2,500',
description: 'Wednesday',
descriptionInfo: 'Sales on Wednesday'
}, {
value: '$2,500',
description: 'The income out of trading goods on Thursday',
descriptionInfo: 'Sales on Wednesday'
}, {
value: '$4,250,000,000',
valueInShort: '$4,3B',
description: 'The income out of trading goods on Friday'
}]
}
}, {
it: 'empty values',
props: {
items: [{
description: 'Views'
}, {
description: 'Likes'
}, {
description: 'Revenue'
}]
}
}, {
it: 'With tiny values',
props: {
size: 'tiny',
items: [{
value: '$500',
description: 'Monday',
descriptionInfo: 'Sales on Thursday'
}, {
value: '$1,500',
descriptionInfo: 'I am not visible because there is no description'
}, {
value: '$2,500',
description: 'Wednesday',
descriptionInfo: 'Sales on Wednesday'
}, {
value: '$2,500',
description: 'The income out of trading goods on Thursday',
descriptionInfo: 'Sales on Wednesday'
}, {
value: '$4,250,000,000',
valueInShort: '$4,3B',
description: 'The income out of trading goods on Friday'
}]
}
}]
}, {
describe: 'trends',
its: [{
it: 'trends and inverted trends',
props: {
items: [{
value: '$500',
description: 'Monday',
percentage: 21
}, {
value: '$1,500',
description: 'Tuesday',
percentage: 21,
invertedPercentage: true
}, {
value: '$2,500',
percentage: -11
}, {
value: '$3,500',
description: 'Thursday',
percentage: -11,
invertedPercentage: true,
descriptionInfo: 'Sales on Thursday'
}, {
value: '0',
description: 'Friday',
percentage: 0,
invertedPercentage: true,
descriptionInfo: 'Sales on Friday'
}]
}
}]
}, {
describe: 'children',
its: [{
it: 'renders children',
props: {
items: [{
value: '100',
description: 'Money',
children: /*#__PURE__*/_react["default"].createElement("div", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 375,
columnNumber: 25
}
}, "That's a lot")
}]
}
}]
}, {
describe: 'size',
its: sizes.map(function (size) {
return {
it: size,
props: {
size: size,
items: [{
value: '1,500',
description: 'Orders',
percentage: 21,
invertedPercentage: true
}, {
value: '$2,500',
description: 'Outcome',
percentage: -11
}, {
value: '$3,500',
description: 'Revenue',
percentage: -11,
invertedPercentage: true,
descriptionInfo: 'Sales on Thursday'
}]
}
};
})
}, {
describe: 'isLoading',
its: [{
it: 'renders a loader aligned to start',
props: {
isLoading: true,
alignItems: 'start',
items: [{
value: '1,500',
description: 'Orders',
percentage: 21,
invertedPercentage: true
}, {
value: '$2,500',
description: 'Outcome',
percentage: -11
}, {
value: '$3,500',
description: 'Revenue',
percentage: -11,
invertedPercentage: true,
descriptionInfo: 'Sales on Thursday'
}]
}
}]
}];
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)("StatisticsWidget".concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement("div", {
style: {
marginLeft: 100,
marginTop: 100
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 450,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_StatisticsWidget["default"], (0, _extends2["default"])({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 451,
columnNumber: 11
}
})));
});
});
});
[{
props: {},
it: 'default (tiny)'
}, {
props: {
size: 'tiny'
},
it: 'tiny'
}, {
props: {
size: 'large'
},
it: 'large'
}].forEach(function (_ref3) {
var props = _ref3.props,
it = _ref3.it;
(0, _react2.storiesOf)("Layout And Spacing| StatisticsWidget/size", module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement("div", {
style: {
marginLeft: 100,
marginTop: 100
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 473,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_StatisticsWidget["default"], (0, _extends2["default"])({
items: [{
value: '1,500',
description: 'Orders',
percentage: 21,
invertedPercentage: true
}, {
value: '$2,500',
description: 'Outcome',
percentage: -11
}, {
value: '$3,500',
description: 'Revenue',
percentage: -11,
invertedPercentage: true,
descriptionInfo: 'Sales on Thursday'
}]
}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 474,
columnNumber: 7
}
})));
});
});