@wix/design-system
Version:
@wix/design-system
245 lines (244 loc) • 6.96 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 _HorizontalTimeline = _interopRequireDefault(require("../HorizontalTimeline"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/HorizontalTimeline/test/HorizontalTimeline.visual.jsx",
_this = void 0;
var tests = [{
describe: 'items',
its: [{
it: 'defaults',
props: {
items: [{
label: 'Instructions completed'
}, {
label: 'Domain check'
}, {
label: 'Site is live worldwide'
}]
}
}, {
it: 'should have custom width for items',
props: {
items: [{
label: 'Instructions completed',
width: '50px'
}, {
label: 'Domain check'
}, {
label: 'Site is live worldwide',
width: '5%'
}]
}
}, {
it: 'should have start alignment for label',
props: {
alignLabel: 'start',
items: [{
label: 'Instructions completed'
}, {
label: 'Domain check'
}, {
label: 'Site is live worldwide'
}]
}
}, {
it: 'should have dark skin by default',
props: {
items: [{
label: 'Instructions completed'
}, {
label: 'Domain check'
}, {
label: 'Site is live worldwide'
}]
}
}, {
it: 'should have standard skin when applied',
props: {
skin: 'standard',
items: [{
label: 'Instructions completed',
line: 'filled'
}, {
label: 'Domain check',
line: 'filled'
}, {
label: 'Site is live worldwide',
line: 'filled'
}]
}
}, {
it: 'should have filled line on dark skin',
props: {
items: [{
label: 'Instructions completed',
line: 'filled'
}, {
label: 'Domain check',
line: 'filled'
}, {
label: 'Site is live worldwide',
line: 'filled'
}]
}
}, {
it: 'should have tooltip for long label by default',
props: {
items: [{
label: 'Instructions completed'
}, {
label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
}, {
label: 'Site is live worldwide'
}]
}
}, {
it: 'should not have tooltip for long label when labelEllipsis is false',
props: {
items: [{
label: 'Instructions completed'
}, {
label: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
labelEllipsis: false
}, {
label: 'Site is live worldwide'
}]
}
}, {
it: 'should have dark skin for icons by default',
props: {
items: [{
label: 'Instructions completed',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].CompleteIcon, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 21
}
})
}, {
label: 'Domain check',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].ActiveIcon, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 21
}
})
}, {
label: 'Domain connecting',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].DefaultIcon, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 21
}
})
}, {
label: 'Site is live worldwide',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].DestructiveIcon, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 21
}
})
}, {
label: 'Domain ending',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].BoundaryIcon, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 21
}
})
}]
}
}, {
it: 'should have icons standard skin when applied',
props: {
items: [{
label: 'Instructions completed',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].CompleteIcon, {
skin: "standard",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 21
}
})
}, {
label: 'Domain check',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].ActiveIcon, {
skin: "standard",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 21
}
})
}, {
label: 'Domain connecting',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].DefaultIcon, {
skin: "standard",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 21
}
})
}, {
label: 'Site is live worldwide',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].DestructiveIcon, {
skin: "standard",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 21
}
})
}, {
label: 'Domain ending',
icon: /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"].BoundaryIcon, {
skin: "standard",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 21
}
})
}]
}
}]
}];
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)("".concat(_HorizontalTimeline["default"].displayName).concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement(_HorizontalTimeline["default"], (0, _extends2["default"])({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 21
}
}));
});
});
});