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
        }
      }));
    });
  });
});