@configuratorware/configurator-frontendgui 1.28.3 → 1.29.1

package/App/Modules/Designer/Components/ColorPalettes/index.story.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _storybookState = require("@sambego/storybook-state");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var colorPalettes = [{
+  identifier: 'default HKS_colors',
+  colors: [{
+    identifier: 'red',
+    hex_value: 'FF0000',
+    title: 'red'
+  }, {
+    identifier: 'blue',
+    hex_value: '0000FF',
+    title: 'blue'
+  }, {
+    identifier: 'black',
+    hex_value: '000000',
+    title: 'black'
+  }],
+  title: 'HKS'
+}, {
+  identifier: 'default Pantone_colors',
+  colors: [{
+    identifier: 'red',
+    hex_value: 'FF0000',
+    title: 'red'
+  }, {
+    identifier: 'black',
+    hex_value: '000000',
+    title: 'black'
+  }, {
+    identifier: 'white',
+    hex_value: 'FFFFFF',
+    title: 'white'
+  }, {
+    identifier: 'blue',
+    hex_value: '0000FF',
+    title: 'blue'
+  }, {
+    identifier: 'green',
+    hex_value: '00FF00',
+    title: 'green'
+  }],
+  title: 'Pantone'
+}, {
+  identifier: 'default RAL_colors',
+  colors: [{
+    identifier: 'red',
+    hex_value: 'FF0000',
+    title: 'red'
+  }, {
+    identifier: 'black',
+    hex_value: '000000',
+    title: 'black'
+  }, {
+    identifier: 'white',
+    hex_value: 'FFFFFF',
+    title: 'white'
+  }, {
+    identifier: 'yellow',
+    hex_value: 'FFFF00',
+    title: 'yellow'
+  }, {
+    identifier: 'blue',
+    hex_value: '0000FF',
+    title: 'blue'
+  }, {
+    identifier: 'green',
+    hex_value: '00FF00',
+    title: 'green'
+  }, {
+    identifier: 'mint',
+    hex_value: 'BBDDAA',
+    title: 'mint'
+  }, {
+    identifier: 'violett',
+    hex_value: 'AAAAFF',
+    title: 'violett'
+  }, {
+    identifier: 'cyan',
+    hex_value: '00FFFF',
+    title: 'cyan'
+  }, {
+    identifier: 'grey',
+    hex_value: 'eeeeee',
+    title: 'grey'
+  }],
+  title: 'RAL'
+}];
+var colorPalette = [{
+  identifier: 'default HKS_colors',
+  colors: [{
+    identifier: 'red',
+    hex_value: 'FF0000',
+    title: 'red'
+  }, {
+    identifier: 'blue',
+    hex_value: '0000FF',
+    title: 'blue'
+  }, {
+    identifier: 'black',
+    hex_value: '000000',
+    title: 'black'
+  }],
+  title: 'HKS'
+}];
+var store = new _storybookState.Store({
+  customColor: '',
+  colorPalette: 'default HKS_colors'
+});
+
+function onCustomColorChange(event) {
+  store.set({
+    customColor: event.target.value
+  });
+}
+
+function onColorPaletteChange(event) {
+  store.set({
+    colorPalette: event.target.value
+  });
+}
+
+(0, _react2.storiesOf)('ColorPalettes', module).add('boxed component with multiple color palettes', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function (state) {
+    return [/*#__PURE__*/_react["default"].createElement(_index["default"], {
+      boxed: true,
+      colorPalettes: colorPalettes,
+      onColorPaletteChange: onColorPaletteChange,
+      key: 1,
+      colorPaletteIdentifier: state.colorPalette,
+      customColor: state.customColor,
+      onCustomColorChange: onCustomColorChange
+    })];
+  });
+}).add('unboxed component with only one color palette', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function (state) {
+    return [/*#__PURE__*/_react["default"].createElement(_index["default"], {
+      colorPalettes: colorPalette,
+      colorPaletteIdentifier: state.colorPalette,
+      key: 2,
+      customColor: state.customColor,
+      onCustomColorChange: onCustomColorChange
+    })];
+  });
+});

package/App/Modules/Designer/Components/ColorPalettes/index.test.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _lodash = require("lodash");
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-env jest */
+var colorPalettes = {
+  colorPalettes: [{
+    identifier: 'default HKS_colors',
+    colors: [{
+      identifier: 'red',
+      hex_value: '#FF0000',
+      title: 'red'
+    }, {
+      identifier: 'blue',
+      hex_value: '#0000FF',
+      title: 'blue'
+    }, {
+      identifier: 'black',
+      hex_value: '#000000',
+      title: 'black'
+    }],
+    title: 'HKS'
+  }, {
+    identifier: 'default Pantone_colors',
+    colors: [{
+      identifier: 'red',
+      hex_value: '#FF0000',
+      title: 'red'
+    }, {
+      identifier: 'black',
+      hex_value: '#000000',
+      title: 'black'
+    }, {
+      identifier: 'white',
+      hex_value: '#FFFFFF',
+      title: 'white'
+    }, {
+      identifier: 'blue',
+      hex_value: '#0000FF',
+      title: 'blue'
+    }, {
+      identifier: 'green',
+      hex_value: '#00FF00',
+      title: 'green'
+    }],
+    title: 'Pantone'
+  }, {
+    identifier: 'default RAL_colors',
+    colors: [{
+      identifier: 'red',
+      hex_value: '#FF0000',
+      title: 'red'
+    }, {
+      identifier: 'black',
+      hex_value: '#000000',
+      title: 'black'
+    }, {
+      identifier: 'white',
+      hex_value: '#FFFFFF',
+      title: 'white'
+    }, {
+      identifier: 'yellow',
+      hex_value: '#FFFF00',
+      title: 'yellow'
+    }, {
+      identifier: 'blue',
+      hex_value: '#0000FF',
+      title: 'blue'
+    }, {
+      identifier: 'green',
+      hex_value: '#00FF00',
+      title: 'green'
+    }, {
+      identifier: 'mint',
+      hex_value: '#BBDDAA',
+      title: 'mint'
+    }, {
+      identifier: 'violett',
+      hex_value: '#AAAAFF',
+      title: 'violett'
+    }, {
+      identifier: 'cyan',
+      hex_value: '#00FFFF',
+      title: 'cyan'
+    }, {
+      identifier: 'grey',
+      hex_value: '#eeeeee',
+      title: 'grey'
+    }],
+    title: 'RAL'
+  }]
+};
+var color = {
+  identifier: 'grey',
+  hex_value: '#eeeeee',
+  title: 'grey'
+};
+var usedColors = [{
+  hex_value: '000000',
+  identifier: 'black',
+  palette: 'default',
+  value: 'rgb(0, 0, 0)'
+}];
+it('renders correctly', function () {
+  var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    colorPalettes: colorPalettes.colorPalettes,
+    colorPalette: 'HKS',
+    selectedColor: color,
+    colorSelectClick: _lodash.noop,
+    closeColorPalettes: _lodash.noop
+  }));
+  expect(tree).toMatchSnapshot();
+});
+it('renders a boxed component with the boxed prop', function () {
+  var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    width: "xs",
+    colorPalettes: colorPalettes.colorPalettes,
+    colorPalette: 'HKS',
+    selectedColor: color,
+    colorSelectClick: _lodash.noop,
+    closeColorPalettes: _lodash.noop,
+    boxed: true
+  }));
+  expect(tree).toMatchSnapshot();
+});
+it('calls the colorSelectClick callback when the user changes the color', function () {
+  var onChangeHandler = jest.fn();
+  var tree = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    width: "xs",
+    colorPalettes: colorPalettes.colorPalettes,
+    colorPalette: 'HKS',
+    customColor: '',
+    selectedColor: color,
+    colorSelectClick: onChangeHandler,
+    closeColorPalettes: _lodash.noop,
+    usedColors: usedColors,
+    palette: 'default'
+  }));
+  var input = tree.find('div[className^="ColorPalettes-usedColorWrapper"]');
+  input.simulate('mousedown');
+  expect(onChangeHandler).toHaveBeenCalled();
+});