@configuratorware/configurator-frontendgui 1.49.9 → 1.50.0

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

@@ -4,16 +4,22 @@ exports[`OptionAmount renders correctly 1`] = `
 <div
   class="OptionAmount-root-4"
 >
-  <svg
-    aria-hidden="true"
-    class="MuiSvgIcon-root OptionAmount-plus-2"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <button
+    class="MuiButtonBase-root AccessibleButton-root-5"
+    tabindex="0"
+    type="button"
   >
-    <path
-      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root OptionAmount-plus-2"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+      />
+    </svg>
+  </button>
   <div
     class="MuiFormControl-root MuiTextField-root OptionAmount-value-3"
   >
@@ -28,15 +34,22 @@ exports[`OptionAmount renders correctly 1`] = `
       />
     </div>
   </div>
-  <svg
-    aria-hidden="true"
-    class="MuiSvgIcon-root OptionAmount-minus-1 disable"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <button
+    class="MuiButtonBase-root AccessibleButton-root-5 Mui-disabled"
+    disabled=""
+    tabindex="-1"
+    type="button"
   >
-    <path
-      d="M19 13H5v-2h14v2z"
-    />
-  </svg>
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root OptionAmount-minus-1 disable"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M19 13H5v-2h14v2z"
+      />
+    </svg>
+  </button>
 </div>
 `;

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

@@ -6,6 +6,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
+import AccessibleButton from '../../../../Shared/Components/AccessibleButton/AccessibleButton';
 
 const useStyles = makeStyles(
     () => {
@@ -133,7 +134,9 @@ const OptionAmount = ({ option, onAmountChange, onSelect, view }) => {
 
     return (
         <div className={clsx(classes.root, view)} onClick={onAmountClicked}>
-            <AddIcon className={classes.plus} onClick={plus} />
+            <AccessibleButton onClick={plus}>
+                <AddIcon className={classes.plus} />
+            </AccessibleButton>
             <TextField
                 value={optionAmount}
                 inputRef={textRef}
@@ -145,7 +148,9 @@ const OptionAmount = ({ option, onAmountChange, onSelect, view }) => {
                     setTimeout(() => target.select(), 0);
                 }}
             />
-            <RemoveIcon className={clsx(classes.minus, !optionAmount && 'disable')} onClick={minus} />
+            <AccessibleButton onClick={minus} disabled={!optionAmount}>
+                <RemoveIcon className={clsx(classes.minus, !optionAmount && 'disable')} />
+            </AccessibleButton>
         </div>
     );
 };

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

@@ -2,47 +2,51 @@
 
 exports[`ProductPart renders with horizontal marker 1`] = `
 <div
-  class="ProductPart-root-16 horizontal custom-css-component"
+  class="ProductPart-root-19 horizontal custom-css-component"
 >
   <div
-    class="ProductPart-marker-19 horizontal selected"
+    class="ProductPart-marker-22 horizontal selected"
   />
-  <div
-    class="ProductPart-content-17 horizontal"
+  <button
+    class="MuiButtonBase-root AccessibleButton-root-24 ProductPart-content-20 horizontal"
+    tabindex="0"
+    type="button"
   >
     <i
-      class="ProductPart-icon-18 horizontal"
+      class="ProductPart-icon-21 horizontal"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
-      class="MuiTypography-root ProductPart-rootTypography-20 MuiTypography-body1"
+      class="MuiTypography-root ProductPart-rootTypography-23 MuiTypography-body1"
     >
       Seat
     </span>
-  </div>
+  </button>
 </div>
 `;
 
 exports[`ProductPart renders with vertical marker 1`] = `
 <div
-  class="ProductPart-root-11 vertical custom-css-component"
+  class="ProductPart-root-13 vertical custom-css-component"
 >
   <div
-    class="ProductPart-marker-14 vertical selected"
+    class="ProductPart-marker-16 vertical selected"
   />
-  <div
-    class="ProductPart-content-12 vertical"
+  <button
+    class="MuiButtonBase-root AccessibleButton-root-18 ProductPart-content-14 vertical"
+    tabindex="0"
+    type="button"
   >
     <i
-      class="ProductPart-icon-13 vertical"
+      class="ProductPart-icon-15 vertical"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
-      class="MuiTypography-root ProductPart-rootTypography-15 MuiTypography-body1"
+      class="MuiTypography-root ProductPart-rootTypography-17 MuiTypography-body1"
     >
       Seat
     </span>
-  </div>
+  </button>
 </div>
 `;
 
@@ -53,8 +57,10 @@ exports[`ProductPart renders without marker 1`] = `
   <div
     class="ProductPart-marker-4 vertical "
   />
-  <div
-    class="ProductPart-content-2 vertical"
+  <button
+    class="MuiButtonBase-root AccessibleButton-root-6 ProductPart-content-2 vertical"
+    tabindex="0"
+    type="button"
   >
     <i
       class="ProductPart-icon-3 vertical"
@@ -65,29 +71,31 @@ exports[`ProductPart renders without marker 1`] = `
     >
       Seat
     </span>
-  </div>
+  </button>
 </div>
 `;
 
 exports[`ProductPart renders without marker when menu is closed 1`] = `
 <div
-  class="ProductPart-root-6 vertical custom-css-component"
+  class="ProductPart-root-7 vertical custom-css-component"
 >
   <div
-    class="ProductPart-marker-9 vertical "
+    class="ProductPart-marker-10 vertical "
   />
-  <div
-    class="ProductPart-content-7 vertical"
+  <button
+    class="MuiButtonBase-root AccessibleButton-root-12 ProductPart-content-8 vertical"
+    tabindex="0"
+    type="button"
   >
     <i
-      class="ProductPart-icon-8 vertical"
+      class="ProductPart-icon-9 vertical"
       style="background-image:url(/images/components/seat.png)"
     />
     <span
-      class="MuiTypography-root ProductPart-rootTypography-10 MuiTypography-body1"
+      class="MuiTypography-root ProductPart-rootTypography-11 MuiTypography-body1"
     >
       Seat
     </span>
-  </div>
+  </button>
 </div>
 `;

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

@@ -7,6 +7,7 @@ import getImageUrl from 'App/Utils/getImageUrl';
 import customClassName from 'App/Utils/customClassName';
 import { Hyphenated } from 'Framework/i18n';
 import { withStyles } from '@material-ui/core/styles';
+import AccessibleButton from '../../../../Shared/Components/AccessibleButton/AccessibleButton';
 
 const ProductPart = ({
     displaySwitchedOptions,
@@ -60,20 +61,14 @@ const ProductPart = ({
     return (
         <div className={clsx(classes.root, direction, customClassName('component'))} ref={setAnchorRef}>
             <div className={`${classes.marker} ${direction} ${selectedAndVisible ? 'selected' : ''}`} />
-            <div className={`${classes.content} ${direction}`} onClick={onClick}>
+            <AccessibleButton className={`${classes.content} ${direction}`} onClick={onClick}>
                 {displayImage()}
                 {displayText()}
-            </div>
+            </AccessibleButton>
         </div>
     );
 };
 
-const MARKER_POSITION = {
-    left: 'left',
-    right: 'right',
-    top: 'top',
-};
-
 ProductPart.defaultProps = {
     optionclassification: {},
     onSelect: () => {},
@@ -95,14 +90,9 @@ ProductPart.propTypes = {
 export const StyledProductPart = withStyles(
     theme => {
         const captionMaxHeight = `calc(${theme.creator.productPart.captionPaddingTop} + ${theme.creator.productPart.lineHeight} * 2)`;
-        const iconMaxHeigth = `calc(${theme.creator.productPart.itemSize} - ${captionMaxHeight}  - ${theme.creator.productPart.captionPaddingTop})`;
+        const iconMaxHeigth = `calc(${theme.creator.productPart.itemSize} - ${captionMaxHeight})`;
 
-        const iconSizeWithoutMarker = `calc(${theme.creator.productPart.itemSize} - ${theme.creator.productPart.spaceBetweenItemAndMarker})`;
-
-        const contentMargin = {
-            right: '0 0 0 ' + theme.creator.productPart.spaceBetweenItemAndMarker,
-            left: '0 ' + theme.creator.productPart.spaceBetweenItemAndMarker + ' 0 0',
-        };
+        const iconSizeWithoutMarker = `calc(${theme.creator.productPart.itemSize})`;
 
         return {
             root: {
@@ -131,22 +121,21 @@ export const StyledProductPart = withStyles(
                 position: 'relative',
 
                 '&.horizontal': {
+                    padding: theme.spacing(1, 0, 0, 0),
                     width: theme.creator.productPart.itemSize,
                     height: 'auto',
-                    float: MARKER_POSITION.top,
                     whiteSpace: 'normal',
                     '& span': {
                         marginBottom: 0,
                     },
+                    [theme.breakpoints.down('xs')]: {
+                        padding: theme.spacing(0.5, 0, 0, 0),
+                    },
                 },
                 '&.vertical': {
+                    padding: theme.spacing(0, 0, 1, 0),
                     width: iconSizeWithoutMarker,
-                    maxHeight: 120,
-                    float: theme.creator.productPartsList.markerVerticalPosition,
-                    margin:
-                        theme.creator.productPartsList.markerVerticalPosition === MARKER_POSITION.right
-                            ? contentMargin.left
-                            : contentMargin.right,
+                    margin: 0,
                 },
             },
             icon: {
@@ -158,6 +147,9 @@ export const StyledProductPart = withStyles(
                 '&.horizontal': {
                     width: theme.creator.productPart.itemSize,
                     height: 'calc(0.75*' + theme.creator.productPart.itemSize + ')',
+                    [theme.breakpoints.down('xs')]: {
+                        maxHeight: `calc(0.75 * ${iconMaxHeigth})`,
+                    },
                 },
                 '&.vertical': {
                     width: iconSizeWithoutMarker,
@@ -172,24 +164,25 @@ export const StyledProductPart = withStyles(
                 },
                 '&.vertical': {
                     width: theme.creator.productPart.markerThickness,
-                    height: `calc(${theme.creator.productPart.itemSize} - 24px)`,
-                    float: theme.creator.productPartsList.markerVerticalPosition,
+                    margin: theme.spacing(0, 0, 1, 0),
                 },
                 '&.selected': {
                     [theme.breakpoints.down('sm')]: {
                         marginBottom: 4,
                     },
+                    [theme.breakpoints.down('xs')]: {
+                        marginBottom: 0,
+                    },
                     backgroundColor: theme.palette.primary.main,
                 },
             },
             rootTypography: {
-                padding: '3px 0 2px 7px',
-                marginBottom: 5,
+                paddingTop: theme.creator.productPart.captionPaddingTop,
                 display: '-webkit-box',
                 overflow: 'hidden',
                 wordWrap: 'break-word',
                 maxWidth: theme.creator.productPart.itemSize,
-                lineHeight: 1,
+                lineHeight: theme.creator.productPart.lineHeight,
                 boxOrient: 'vertical',
                 lineClamp: 3,
                 minHeight: 20,

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

@@ -14,8 +14,6 @@ const useStyles = makeStyles(
             root: {
                 zIndex: 1,
                 '&.horizontal': {
-                    position: 'absolute',
-                    bottom: 8,
                     height: 'auto',
                     // the available width (see container) is reduced by the width of the two arrows
                     width: 'calc(100% - 72px)',

package/src/App/Modules/Creator/Layouts/DefaultLayout.js

@@ -88,7 +88,6 @@ const styles = theme => ({
 
         '&.horizontal': {
             bottom: 2,
-            height: 130,
             [theme.breakpoints.down('xs')]: {
                 width: '100%',
                 left: 0,
@@ -223,6 +222,18 @@ const DefaultLayout = ({
                     })}
                 </div>
                 <div className={clsx(classes.outerContainer, !displayVerticalList && 'withBottomList')}>
+                    <div
+                        className={`${classes.productsList} ${
+                            displayVerticalList ? 'vertical' : 'horizontal'
+                        }`}
+                    >
+                        {renderProductsList({
+                            area: 'products',
+                            width,
+                            classes,
+                            displayVerticalList,
+                        })}
+                    </div>
                     <div
                         className={`${classes.container} ${
                             isPortraitMode ? classes.containerTabletPortrait : ''
@@ -252,18 +263,6 @@ const DefaultLayout = ({
                             classes,
                         })}
                     </div>
-                    <div
-                        className={`${classes.productsList} ${
-                            displayVerticalList ? 'vertical' : 'horizontal'
-                        }`}
-                    >
-                        {renderProductsList({
-                            area: 'products',
-                            width,
-                            classes,
-                            displayVerticalList,
-                        })}
-                    </div>
                 </div>
             </React.Fragment>
         )

package/src/App/Modules/Designer/Components/AddGalleryImage/__snapshots__/index.test.jsx.snap

@@ -7,6 +7,7 @@ exports[`renders correctly 1`] = `
   >
     <h5
       class="MuiTypography-root AddImagePanel-title-3 MuiTypography-h5"
+      id="gallery-image-dialog-title"
     >
       imageLibrary.gallery
     </h5>

package/src/App/Modules/Designer/Components/AddGalleryImage/index.js

@@ -107,6 +107,8 @@ class AddImagePanel extends React.Component {
 
         const applyButtonDisabled = isEmpty(selectedImage);
 
+        const dialogTitleId = 'gallery-image-dialog-title';
+
         return (
             <Dialog
                 open={open}
@@ -115,9 +117,10 @@ class AddImagePanel extends React.Component {
                 onClose={onClose}
                 fullScreen={width === 'sm' || width === 'xs'}
                 classes={{ paper: classes.root }}
+                aria-labelledby={dialogTitleId}
             >
                 <DialogTitle disableTypography={true}>
-                    <Typography variant="h5" className={classes.title}>
+                    <Typography variant="h5" className={classes.title} id={dialogTitleId}>
                         {t('imageLibrary.gallery')}
                     </Typography>
                     <Icon aria-label="close" className={classes.closeButton} onClick={onClose}>

package/src/App/Modules/Designer/Components/DesignerSelectionToolbox/CustomFontOverlay.js

@@ -64,8 +64,6 @@ export const CustomFontOverlay = props => {
             <CustomDialog
                 open={open}
                 onClose={closeOverlay}
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
                 onCancel={closeOverlay}
                 dialogTitle={t('textControlbox.addCustomFont')}
             >

package/src/App/Modules/Designer/Components/Dialog/index.js

@@ -48,7 +48,7 @@ class UIDialog extends React.Component {
                 onClose={onClose}
                 {...other}
             >
-                <DialogTitle onClose={onClose}>
+                <DialogTitle>
                     <b>{dialogTitle}</b>
                     <Icon className={classes.DialogIcon} onClick={onClose}>
                         close

package/src/App/Modules/Designer/Components/ImageControlbox/index.js

@@ -237,8 +237,6 @@ class ImageControlbox extends React.Component {
                 <CustomDialog
                     open={printQualityInfoDialogOpen}
                     onClose={this.handlePrintQualityInfoDialogClose}
-                    aria-labelledby="alert-dialog-title"
-                    aria-describedby="alert-dialog-description"
                 >
                     <DialogContent>
                         <DialogContentText id="alert-dialog-description">

package/src/App/Reducers/Reducer.js

@@ -1,5 +1,6 @@
 import isObject from 'lodash/isObject';
 import reduce from 'lodash/reduce';
+import get from 'lodash/get';
 
 import {
     REQUEST_DATA,
@@ -13,6 +14,7 @@ import {
 const initialState = {
     sources: {},
     isFetching: false,
+    has404Error: false,
 };
 
 function getSourceState(action) {
@@ -61,6 +63,10 @@ function getSourceState(action) {
     }
 }
 
+function has404Error(sourceState) {
+    return get(sourceState, 'error.response.status', null) === 404;
+}
+
 export default function apiReducer(state = initialState, action = {}) {
     switch (action.type) {
         case REQUEST_DATA:
@@ -88,6 +94,7 @@ export default function apiReducer(state = initialState, action = {}) {
                     },
                     false
                 ),
+                has404Error: has404Error(sourceState),
             };
         }
 

package/src/App/Screens/Configurator/Components/Confirm/index.js

@@ -28,13 +28,11 @@ class Confirm extends React.Component {
             <CustomDialog
                 open={confirm !== null}
                 onClose={onCancel}
-                aria-labelledby="alert-dialog-title"
-                aria-describedby="alert-dialog-description"
                 dialogTitle={t('errorDialogTitle')}
                 onCancel={onCancel}
             >
                 <DialogContent>
-                    <DialogContentText id="alert-dialog-description">{message}</DialogContentText>
+                    <DialogContentText>{message}</DialogContentText>
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={onCancel} variant="contained">

package/src/App/Screens/Configurator/Components/Error/index.js

@@ -22,18 +22,9 @@ class Error extends React.Component {
 
         return (
             message && (
-                <CustomDialog
-                    open={true}
-                    onClose={this.handleClose}
-                    aria-labelledby="alert-dialog-title"
-                    aria-describedby="alert-dialog-description"
-                    dialogTitle={t('errorDialogTitle')}
-                >
+                <CustomDialog open={true} onClose={this.handleClose} dialogTitle={t('errorDialogTitle')}>
                     <DialogContent>
-                        <DialogContentText
-                            id="alert-dialog-description"
-                            dangerouslySetInnerHTML={{ __html: message }}
-                        />
+                        <DialogContentText dangerouslySetInnerHTML={{ __html: message }} />
                     </DialogContent>
                     <DialogActions>
                         <Button onClick={this.handleClose} color="primary">

package/src/App/Screens/Configurator/Components/FullScreenView/__snapshots__/index.test.jsx.snap

@@ -4,11 +4,10 @@ exports[`Screens/Configurator/Components/FullScreenView renders correctly 1`] =
 <div
   class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column MuiGrid-align-items-xs-center MuiGrid-justify-content-xs-space-between"
 >
-  <div
-    aria-disabled="false"
+  <button
     class="MuiButtonBase-root MuiButton-root MuiButton-text FullScreenView-buttonView-8 custom-css-preview-button"
-    role="button"
     tabindex="0"
+    type="button"
   >
     <span
       class="MuiButton-label"
@@ -25,6 +24,6 @@ exports[`Screens/Configurator/Components/FullScreenView renders correctly 1`] =
         configurator.previewButton
       </p>
     </span>
-  </div>
+  </button>
 </div>
 `;

package/src/App/Screens/Configurator/Components/FullScreenView/index.js

@@ -80,7 +80,6 @@ const styles = theme => ({
 export const PreviewButton = ({ classes, bottom, top, onClick }) => (
     <AnalyticsWrapper targetId="preview_open">
         <Button
-            component="div"
             className={clsx(
                 classes.button,
                 bottom && classes.buttonBottom,
@@ -157,25 +156,26 @@ class FullScreenView extends React.Component {
             renderButtonOnTop,
         } = this.props;
 
-        const topPreviewButton = renderTopPreviewButton({ ...this.props, onClick: this.openPreview });
+        const topPreviewButton = renderTopPreviewButton({
+            ...this.props,
+            onClick: this.openPreview,
+        });
 
-        return previewOpen ? (
-            <div className={classes.fullScreenWrapper}>
-                <PreviewPortal
-                    closePreviewMode={this.closePreview}
-                    thumbnailClick={this.handleViewChange}
-                    previewOpen={previewOpen}
-                    hasItems={hasItems}
-                    dialogStyle={dialogStyle}
-                >
-                    {children}
-                </PreviewPortal>
-            </div>
-        ) : (
+        return (
             <React.Fragment>
+                {previewOpen && (
+                    <PreviewPortal
+                        closePreviewMode={this.closePreview}
+                        thumbnailClick={this.handleViewChange}
+                        previewOpen={previewOpen}
+                        hasItems={hasItems}
+                        dialogStyle={dialogStyle}
+                    >
+                        {children}
+                    </PreviewPortal>
+                )}
                 {topPreviewButton}
-
-                {children}
+                {!previewOpen && children}
                 {showDesignViewList ? (
                     <Grid
                         container

package/src/App/Screens/Configurator/Components/FullScreenView/index.test.jsx

@@ -18,6 +18,6 @@ describe('Screens/Configurator/Components/FullScreenView', () => {
             />
         );
         expect(wrapper.find('div.custom-css-views')).toHaveLength(1);
-        expect(wrapper.find('div.custom-css-preview-button')).toHaveLength(1);
+        expect(wrapper.find('button.custom-css-preview-button')).toHaveLength(1);
     });
 });