@configuratorware/configurator-frontendgui 1.29.0 → 1.29.1

package/App/Modules/Creator/Components/ProductPart/index.js

@@ -34,8 +34,9 @@ var ProductPart = function ProductPart(_ref) {
       selectedOption = _ref.selectedOption,
       verticalMode = _ref.verticalMode,
       setAnchorRef = _ref.setAnchorRef,
-      classes = _ref.classes;
-  var selected = (0, _get["default"])(selectedOption, 'identifier', null) === (0, _get["default"])(optionclassification, 'identifier', '');
+      classes = _ref.classes,
+      optionListVisible = _ref.optionListVisible;
+  var selected = optionListVisible && (0, _get["default"])(selectedOption, 'identifier', null) === (0, _get["default"])(optionclassification, 'identifier', '');
   var direction = verticalMode ? 'vertical' : 'horizontal';
 
   var displayImage = function displayImage() {
@@ -89,7 +90,8 @@ ProductPart.propTypes = {
   selectedOption: _propTypes["default"].object,
   verticalMode: _propTypes["default"].bool,
   setAnchorRef: _propTypes["default"].func,
-  classes: _propTypes["default"].object
+  classes: _propTypes["default"].object,
+  optionListVisible: _propTypes["default"].bool
 };
 var StyledProductPart = (0, _styles.withStyles)(function (theme) {
   var _root, _selected;

package/App/Modules/Creator/Components/ProductPartsList/index.js

@@ -89,7 +89,8 @@ var ProductPartsList = function ProductPartsList(_ref) {
       vertical = _ref.vertical,
       ProductPartComponent = _ref.ProductPartComponent,
       CallToActionComponent = _ref.CallToActionComponent,
-      width = _ref.width;
+      width = _ref.width,
+      optionListVisible = _ref.optionListVisible;
   var classes = useStyles();
 
   var _useState = (0, _react.useState)(null),
@@ -111,7 +112,8 @@ var ProductPartsList = function ProductPartsList(_ref) {
       onSelect: onSelect,
       optionclassification: option,
       selectedOption: selectedoptionclassification,
-      verticalMode: vertical
+      verticalMode: vertical,
+      optionListVisible: optionListVisible
     }, refProps));
   })), showStartHere && width !== 'xs' && /*#__PURE__*/_react["default"].createElement(CallToActionComponent, {
     offsetDirection: vertical ? 'right' : 'top',
@@ -140,7 +142,8 @@ ProductPartsList.propTypes = {
   displaySwitchedOptions: _propTypes["default"].bool,
   ProductPartComponent: _propTypes["default"].elementType,
   CallToActionComponent: _propTypes["default"].elementType,
-  width: _propTypes["default"].string
+  width: _propTypes["default"].string,
+  optionListVisible: _propTypes["default"].bool
 };
 
 var _default = (0, _core.withWidth)({

package/App/Modules/Creator/Containers/ProductPartsList/index.js

@@ -36,6 +36,7 @@ var mapStateToProps = function mapStateToProps(_ref2) {
     optionclassifications: removeHiddenComponents(configurator.filteredOptionclassifications),
     selectedoptionclassification: configurator.selectedoptionclassification,
     showStartHere: ui.visibilityMap.startHere,
+    optionListVisible: ui.visibilityMap.optionlist,
     vertical: dock ? dock === 'left' : device.screen.orientation === 'landscape'
   };
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.29.0",
+  "version": "1.29.1",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.29.0",
+    "@configuratorware/scripts": "1.29.1",
     "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
@@ -39,8 +39,8 @@
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.29.0",
-    "redhotmagma-visualization": "1.29.0",
+    "redhotmagma-graphics-editor": "1.29.1",
+    "redhotmagma-visualization": "1.29.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Modules/Creator/Components/ProductPart/__snapshots__/index.test.js.snap

@@ -2,20 +2,20 @@
 
 exports[`ProductPart renders with horizontal marker 1`] = `
 <div
-  class="ProductPart-root-11 horizontal custom-css-component"
+  class="ProductPart-root-16 horizontal custom-css-component"
 >
   <div
-    class="ProductPart-marker-14 horizontal selected"
+    class="ProductPart-marker-19 horizontal selected"
   />
   <div
-    class="ProductPart-content-12 horizontal"
+    class="ProductPart-content-17 horizontal"
   >
     <i
-      class="ProductPart-icon-13 horizontal"
+      class="ProductPart-icon-18 horizontal"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
-      class="MuiTypography-root ProductPart-rootTypography-15 MuiTypography-body1"
+      class="MuiTypography-root ProductPart-rootTypography-20 MuiTypography-body1"
     >
       Seat
     </span>
@@ -25,20 +25,20 @@ exports[`ProductPart renders with horizontal marker 1`] = `
 
 exports[`ProductPart renders with vertical marker 1`] = `
 <div
-  class="ProductPart-root-6 vertical custom-css-component"
+  class="ProductPart-root-11 vertical custom-css-component"
 >
   <div
-    class="ProductPart-marker-9 vertical selected"
+    class="ProductPart-marker-14 vertical selected"
   />
   <div
-    class="ProductPart-content-7 vertical"
+    class="ProductPart-content-12 vertical"
   >
     <i
-      class="ProductPart-icon-8 vertical"
+      class="ProductPart-icon-13 vertical"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
-      class="MuiTypography-root ProductPart-rootTypography-10 MuiTypography-body1"
+      class="MuiTypography-root ProductPart-rootTypography-15 MuiTypography-body1"
     >
       Seat
     </span>
@@ -68,3 +68,26 @@ exports[`ProductPart renders without marker 1`] = `
   </div>
 </div>
 `;
+
+exports[`ProductPart renders without marker when menu is closed 1`] = `
+<div
+  class="ProductPart-root-6 vertical custom-css-component"
+>
+  <div
+    class="ProductPart-marker-9 vertical "
+  />
+  <div
+    class="ProductPart-content-7 vertical"
+  >
+    <i
+      class="ProductPart-icon-8 vertical"
+      style="background-image:url(/images/components/seat.png)"
+    />
+    <span
+      class="MuiTypography-root ProductPart-rootTypography-10 MuiTypography-body1"
+    >
+      Seat
+    </span>
+  </div>
+</div>
+`;

package/src/App/Modules/Creator/Components/ProductPart/index.js

@@ -16,8 +16,11 @@ const ProductPart = ({
     verticalMode,
     setAnchorRef,
     classes,
+    optionListVisible,
 }) => {
-    const selected = get(selectedOption, 'identifier', null) === get(optionclassification, 'identifier', '');
+    const selected =
+        optionListVisible &&
+        get(selectedOption, 'identifier', null) === get(optionclassification, 'identifier', '');
     const direction = verticalMode ? 'vertical' : 'horizontal';
 
     const displayImage = () => {
@@ -78,6 +81,7 @@ ProductPart.propTypes = {
     verticalMode: PropTypes.bool,
     setAnchorRef: PropTypes.func,
     classes: PropTypes.object,
+    optionListVisible: PropTypes.bool,
 };
 
 export const StyledProductPart = withStyles(

package/src/App/Modules/Creator/Components/ProductPart/index.test.js

@@ -50,12 +50,24 @@ describe('ProductPart', () => {
         const tree = render(createProductPart(testProductPart));
         expect(tree).toMatchSnapshot();
     });
+    it('renders without marker when menu is closed', () => {
+        const testProductPart = {
+            displaySwitchedOptions: initialState.displaySwitchedOptions,
+            optionclassification: initialState.optionclassification,
+            selectedOption: initialState.selectedOption,
+            onSelect: initialState.onSelect,
+            optionListVisible: false,
+        };
+        const tree = render(createProductPart(testProductPart));
+        expect(tree).toMatchSnapshot();
+    });
     it('renders with vertical marker', () => {
         const testProductPart = {
             displaySwitchedOptions: initialState.displaySwitchedOptions,
             optionclassification: initialState.optionclassification,
             selectedOption: initialState.selectedOption,
             onSelect: initialState.onSelect,
+            optionListVisible: true,
         };
         const tree = render(createProductPart(testProductPart));
         expect(tree).toMatchSnapshot();
@@ -67,6 +79,7 @@ describe('ProductPart', () => {
             selectedOption: initialState.selectedOption,
             onSelect: initialState.onSelect,
             verticalMode: false,
+            optionListVisible: true,
         };
         const tree = render(createProductPart(testProductPart));
         expect(tree).toMatchSnapshot();

package/src/App/Modules/Creator/Components/ProductPartsList/index.js

@@ -50,6 +50,7 @@ const ProductPartsList = ({
     ProductPartComponent,
     CallToActionComponent,
     width,
+    optionListVisible,
 }) => {
     const classes = useStyles();
     const [anchorRef, setAnchorRef] = useState(null);
@@ -70,6 +71,7 @@ const ProductPartsList = ({
                             optionclassification={option}
                             selectedOption={selectedoptionclassification}
                             verticalMode={vertical}
+                            optionListVisible={optionListVisible}
                             {...refProps}
                         />
                     );
@@ -108,6 +110,7 @@ ProductPartsList.propTypes = {
     ProductPartComponent: PropTypes.elementType,
     CallToActionComponent: PropTypes.elementType,
     width: PropTypes.string,
+    optionListVisible: PropTypes.bool,
 };
 
 export default withWidth({ initialWidth: 'lg' })(ProductPartsList);

package/src/App/Modules/Creator/Containers/ProductPartsList/index.js

@@ -19,6 +19,7 @@ const mapStateToProps = ({ configurator, device, ui }) => {
         optionclassifications: removeHiddenComponents(configurator.filteredOptionclassifications),
         selectedoptionclassification: configurator.selectedoptionclassification,
         showStartHere: ui.visibilityMap.startHere,
+        optionListVisible: ui.visibilityMap.optionlist,
         vertical: dock ? dock === 'left' : device.screen.orientation === 'landscape',
     };
 };