@wix/design-system
Version:
@wix/design-system
270 lines • 7.36 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/ColorInput/test/ColorInput.visual.jsx",
_this = this;
import React from 'react';
import { storiesOf } from '@storybook/react';
import FormField from '../../FormField';
import ColorInput from '../ColorInput';
import { Cell, Layout } from '../../Layout';
var TestContainer = function TestContainer(_ref) {
var children = _ref.children;
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'absolute',
top: 0,
left: 0,
width: '1024px',
height: '100%',
backgroundColor: '#f0f4f7'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 3
}
}, children);
};
var ColorInputWithFormFieldStatus = function ColorInputWithFormFieldStatus(props) {
return /*#__PURE__*/React.createElement(Layout, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 5
}
}, /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 7
}
}, /*#__PURE__*/React.createElement(FormField, {
status: props.status,
statusMessage: props.statusMessage,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 9
}
}, /*#__PURE__*/React.createElement(ColorInput, {
value: "#FF0000",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 11
}
})), /*#__PURE__*/React.createElement(ColorInput, {
value: "#FF0000",
status: props.status,
placeholder: "choose",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 9
}
})));
};
var tests = [{
describe: 'ColorInput',
its: [{
it: 'ColorInput states',
props: {
storyFunction: function storyFunction() {
return /*#__PURE__*/React.createElement(TestContainer, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement("div", {
style: {
margin: '10px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 15
}
}, /*#__PURE__*/React.createElement(Layout, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 17
}
}, /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 19
}
}, /*#__PURE__*/React.createElement(ColorInput, {
value: "#FF0000",
size: "large",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 21
}
})), /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 19
}
}, /*#__PURE__*/React.createElement(ColorInput, {
value: "#FF0000",
size: "medium",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 21
}
})), /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 19
}
}, /*#__PURE__*/React.createElement(ColorInput, {
value: "#FF0000",
size: "small",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 21
}
})))), /*#__PURE__*/React.createElement("div", {
style: {
margin: '10px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 15
}
}, /*#__PURE__*/React.createElement(Layout, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 17
}
}, /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 19
}
}, /*#__PURE__*/React.createElement(ColorInput, {
value: "#FF0000",
status: "error",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 21
}
})), /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 19
}
}, /*#__PURE__*/React.createElement(ColorInput, {
value: "",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 21
}
})), /*#__PURE__*/React.createElement(Cell, {
span: 4,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 19
}
}, /*#__PURE__*/React.createElement(ColorInput, {
value: "#FF0000",
disabled: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 21
}
})))));
}
}
}]
}];
var ColorInputWithFormFieldStatusTests = [{
describe: 'ColorInputWithFormField',
its: [{
it: 'error',
props: {
options: [],
status: 'error',
statusMessage: 'This is an error'
}
}, {
it: 'warning',
props: {
options: [],
status: 'warning',
statusMessage: 'This is a warning'
}
}]
}];
tests.forEach(function (_ref2) {
var describe = _ref2.describe,
its = _ref2.its;
its.forEach(function (_ref3) {
var it = _ref3.it,
props = _ref3.props;
storiesOf("ColorInput".concat(describe ? '/' + describe : ''), module).add(it, props.storyFunction);
});
});
ColorInputWithFormFieldStatusTests.forEach(function (_ref4) {
var describe = _ref4.describe,
its = _ref4.its;
its.forEach(function (_ref5) {
var it = _ref5.it,
props = _ref5.props;
storiesOf("ColorInput".concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/React.createElement(ColorInputWithFormFieldStatus, _extends({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 13
}
}));
});
});
});