@configuratorware/configurator-frontendgui 1.49.9 → 1.50.0

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

@@ -2,8 +2,11 @@
 
 exports[`Option calls the children prop if provided 1`] = `
 <div
-  class="Option-root-133 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-146 Option-root-142 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000"
@@ -23,44 +26,50 @@ exports[`Option calls the render prop if provided 1`] = `
 
 exports[`Option renders with Delay link 1`] = `
 <div
-  class="Option-root-85 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-95 Option-root-91 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-84"
+      class="Option-image-90"
     />
     <div
-      class="Option-text-86"
+      class="Option-text-92"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-82 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-88 MuiTypography-body2"
         >
           <div
-            class="Option-title-83"
+            class="Option-title-89"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-79"
+            class="Option-price-85"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-80"
+            class="Option-details-86"
           >
             <div>
               <a
-                class="Option-iconWithText-81"
+                aria-disabled="false"
+                class="MuiButtonBase-root AccessibleButton-root-95 Option-iconWithText-87"
+                role="button"
+                tabindex="0"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-78"
+                  class="MuiSvgIcon-root Option-materialIcon-84"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -84,44 +93,50 @@ exports[`Option renders with Delay link 1`] = `
 
 exports[`Option renders with Incompatibility link 1`] = `
 <div
-  class="Option-root-61 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-69 Option-root-65 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-60"
+      class="Option-image-64"
     />
     <div
-      class="Option-text-62"
+      class="Option-text-66"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-58 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-62 MuiTypography-body2"
         >
           <div
-            class="Option-title-59"
+            class="Option-title-63"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-55"
+            class="Option-price-59"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-56"
+            class="Option-details-60"
           >
             <div>
               <a
-                class="Option-iconWithText-57"
+                aria-disabled="false"
+                class="MuiButtonBase-root AccessibleButton-root-69 Option-iconWithText-61"
+                role="button"
+                tabindex="0"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-54 custom-css-rule-info-icon-option"
+                  class="MuiSvgIcon-root Option-materialIcon-58 custom-css-rule-info-icon-option"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -130,7 +145,7 @@ exports[`Option renders with Incompatibility link 1`] = `
                   />
                 </svg>
                 <p
-                  class="MuiTypography-root Option-iconWithText-57 MuiTypography-body2"
+                  class="MuiTypography-root Option-iconWithText-61 MuiTypography-body2"
                 />
               </a>
             </div>
@@ -144,43 +159,46 @@ exports[`Option renders with Incompatibility link 1`] = `
 
 exports[`Option renders with Not Available link 1`] = `
 <div
-  class="Option-root-73 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-82 Option-root-78 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000 disabled"
   >
     <div
-      class="Option-image-72"
+      class="Option-image-77"
     />
     <div
-      class="Option-text-74"
+      class="Option-text-79"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-70 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-75 MuiTypography-body2"
         >
           <div
-            class="Option-title-71"
+            class="Option-title-76"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-67"
+            class="Option-price-72"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-68"
+            class="Option-details-73"
           >
             <div
-              class="Option-iconWithText-69"
+              class="Option-iconWithText-74"
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root Option-materialIcon-66"
+                class="MuiSvgIcon-root Option-materialIcon-71"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -203,36 +221,39 @@ exports[`Option renders with Not Available link 1`] = `
 
 exports[`Option renders with Option Group button 1`] = `
 <div
-  class="Option-root-97 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-108 Option-root-104 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-96"
+      class="Option-image-103"
     />
     <div
-      class="Option-text-98"
+      class="Option-text-105"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-94 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-101 MuiTypography-body2"
         >
           <div
-            class="Option-title-95"
+            class="Option-title-102"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-91"
+            class="Option-price-98"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-92"
+            class="Option-details-99"
           >
             <div>
               <div
@@ -289,35 +310,38 @@ exports[`Option renders with Option Group button 1`] = `
 
 exports[`Option renders with TextInput 1`] = `
 <div
-  class="Option-root-145 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-159 Option-root-155 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-144"
+      class="Option-image-154"
     >
       <img
         src="/images/options/010002011000.png"
       />
     </div>
     <div
-      class="Option-text-146"
+      class="Option-text-156"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-142 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-152 MuiTypography-body2"
         >
           <div
-            class="Option-title-143"
+            class="Option-title-153"
           >
             Argentina 1000
           </div>
           <div
-            class="MuiFormControl-root MuiTextField-root Option-optionTextInput-148"
+            class="MuiFormControl-root MuiTextField-root Option-optionTextInput-158"
             translate="no"
           >
             <div
@@ -333,12 +357,12 @@ exports[`Option renders with TextInput 1`] = `
             </div>
           </div>
           <div
-            class="Option-price-139"
+            class="Option-price-149"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-140"
+            class="Option-details-150"
           />
         </div>
       </div>
@@ -349,8 +373,11 @@ exports[`Option renders with TextInput 1`] = `
 
 exports[`Option renders with an available image 1`] = `
 <div
-  class="Option-root-9 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-13 Option-root-9 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000"
@@ -393,44 +420,50 @@ exports[`Option renders with an available image 1`] = `
 
 exports[`Option renders with details 1`] = `
 <div
-  class="Option-root-49 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-56 Option-root-52 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-48"
+      class="Option-image-51"
     />
     <div
-      class="Option-text-50"
+      class="Option-text-53"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-46 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-49 MuiTypography-body2"
         >
           <div
-            class="Option-title-47"
+            class="Option-title-50"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-43"
+            class="Option-price-46"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-44"
+            class="Option-details-47"
           >
             <div>
               <a
-                class="Option-iconWithText-45"
+                aria-disabled="false"
+                class="MuiButtonBase-root AccessibleButton-root-56 Option-iconWithText-48"
+                role="button"
+                tabindex="0"
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root Option-materialIcon-42 custom-css-rule-info-icon-option"
+                  class="MuiSvgIcon-root Option-materialIcon-45 custom-css-rule-info-icon-option"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
@@ -439,7 +472,7 @@ exports[`Option renders with details 1`] = `
                   />
                 </svg>
                 <p
-                  class="MuiTypography-root Option-iconWithText-45 MuiTypography-body2"
+                  class="MuiTypography-root Option-iconWithText-48 MuiTypography-body2"
                 />
               </a>
             </div>
@@ -453,55 +486,64 @@ exports[`Option renders with details 1`] = `
 
 exports[`Option renders with selectable amount 1`] = `
 <div
-  class="Option-root-33 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-39 Option-root-35 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
-    class="content 010002011000 Option-withAmount-35"
+    class="content 010002011000 Option-withAmount-37"
   >
     <div
-      class="Option-image-32"
+      class="Option-image-34"
     />
     <div
-      class="Option-text-34"
+      class="Option-text-36"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-30 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-32 MuiTypography-body2"
         >
           <div
-            class="Option-title-31"
+            class="Option-title-33"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-27"
+            class="Option-price-29"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-28"
+            class="Option-details-30"
           />
         </div>
       </div>
     </div>
     <div
-      class="OptionAmount-root-40"
+      class="OptionAmount-root-43"
     >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root OptionAmount-plus-38"
-        focusable="false"
-        viewBox="0 0 24 24"
+      <button
+        class="MuiButtonBase-root AccessibleButton-root-39"
+        tabindex="0"
+        type="button"
       >
-        <path
-          d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root OptionAmount-plus-41"
+          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-39"
+        class="MuiFormControl-root MuiTextField-root OptionAmount-value-42"
       >
         <div
           class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
@@ -514,16 +556,23 @@ exports[`Option renders with selectable amount 1`] = `
           />
         </div>
       </div>
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root OptionAmount-minus-37 disable"
-        focusable="false"
-        viewBox="0 0 24 24"
+      <button
+        class="MuiButtonBase-root AccessibleButton-root-39 Mui-disabled"
+        disabled=""
+        tabindex="-1"
+        type="button"
       >
-        <path
-          d="M19 13H5v-2h14v2z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root OptionAmount-minus-40 disable"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 13H5v-2h14v2z"
+          />
+        </svg>
+      </button>
     </div>
   </div>
 </div>
@@ -531,36 +580,39 @@ exports[`Option renders with selectable amount 1`] = `
 
 exports[`Option renders without an available image 1`] = `
 <div
-  class="Option-root-21 custom-css-option"
+  aria-disabled="false"
+  class="MuiButtonBase-root AccessibleButton-root-26 Option-root-22 custom-css-option"
   data-option="010002011000"
+  role="button"
+  tabindex="0"
 >
   <div
     class="content 010002011000"
   >
     <div
-      class="Option-image-20"
+      class="Option-image-21"
     />
     <div
-      class="Option-text-22"
+      class="Option-text-23"
     >
       <div
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
       >
         <div
-          class="MuiTypography-root Option-optionList-18 MuiTypography-body2"
+          class="MuiTypography-root Option-optionList-19 MuiTypography-body2"
         >
           <div
-            class="Option-title-19"
+            class="Option-title-20"
           >
             Argentina 1000
           </div>
           <div
-            class="Option-price-15"
+            class="Option-price-16"
           >
             € 123.00
           </div>
           <div
-            class="Option-details-16"
+            class="Option-details-17"
           />
         </div>
       </div>

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

@@ -20,6 +20,7 @@ import customClassName from 'App/Utils/customClassName';
 import OptionAmount from '../OptionAmount';
 import OptionGroup from '../OptionGroup';
 import getImageUrl from '../../../../Utils/getImageUrl';
+import AccessibleButton from '../../../../Shared/Components/AccessibleButton/AccessibleButton';
 
 const styles = theme => {
     const textWidthWithAmount =
@@ -48,12 +49,10 @@ const styles = theme => {
         description: {},
         materialIcon: {},
         price: {},
-        details: {
-            display: 'inline-block',
-        },
+        details: {},
         iconWithText: {
             lineHeight: customValues.icon.lineHeight,
-            display: 'flex',
+            display: 'inline-flex',
             verticalAlign: 'middle',
             '& $materialIcon': {
                 float: 'left',
@@ -99,13 +98,14 @@ const styles = theme => {
             padding: 10,
             cursor: 'pointer',
             fontSize: customValues.textArea.fontSize,
-            display: 'table',
-            width: '94%',
+            display: 'flex',
+
             '& .content': {
                 position: 'relative',
-                display: 'table-cell',
+                display: 'flex',
                 verticalAlign: 'middle',
                 margin: 0,
+                flex: 1,
             },
             '& .disabled': {
                 cursor: 'not-allowed',
@@ -319,10 +319,14 @@ const Option = ({ children, render, ...props }) => {
                 case 'yellow':
                     return (
                         <div>
-                            <a className={classes.iconWithText} onClick={onLateDeliveryClicked}>
+                            <AccessibleButton
+                                component="a"
+                                className={classes.iconWithText}
+                                onClick={onLateDeliveryClicked}
+                            >
                                 <RestoreRoundedIcon className={classes.materialIcon} />{' '}
                                 <Typography variant={'body2'}>{translations.lateDelivery}</Typography>
-                            </a>
+                            </AccessibleButton>
                         </div>
                     );
                 case 'green':
@@ -367,7 +371,11 @@ const Option = ({ children, render, ...props }) => {
             <div className={classes.details}>
                 {displayDetails && (
                     <div>
-                        <a className={classes.iconWithText} onClick={onDetailsClicked}>
+                        <AccessibleButton
+                            component="a"
+                            className={classes.iconWithText}
+                            onClick={onDetailsClicked}
+                        >
                             <InfoRoundedIcon
                                 className={clsx(
                                     classes.materialIcon,
@@ -377,7 +385,7 @@ const Option = ({ children, render, ...props }) => {
                             <Typography variant={'body2'} className={classes.iconWithText}>
                                 {translations.details}
                             </Typography>
-                        </a>
+                        </AccessibleButton>
                     </div>
                 )}
 
@@ -423,7 +431,7 @@ const Option = ({ children, render, ...props }) => {
     };
 
     const renderControls = view => {
-        if (isEnabled() && amountIsSelectable) {
+        if (isEnabled() && amountIsSelectable && OptionAmountComponent) {
             return (
                 <OptionAmountComponent
                     view={view}
@@ -498,7 +506,13 @@ const Option = ({ children, render, ...props }) => {
 
     const renderItem = () => {
         return (
-            <div className={getRootClassName()} data-option={option.identifier} onClick={onOptionClicked}>
+            <AccessibleButton
+                component="div"
+                className={getRootClassName()}
+                data-option={option.identifier}
+                onClick={onOptionClicked}
+                notAccessible={props.notAccessible}
+            >
                 <div className={getContentClassName()}>
                     {typeof children === 'function' ? (
                         children(getRenderProps())
@@ -514,7 +528,7 @@ const Option = ({ children, render, ...props }) => {
                         </>
                     )}
                 </div>
-            </div>
+            </AccessibleButton>
         );
     };
 
@@ -535,6 +549,7 @@ Option.defaultProps = {
     viewStockInformation: () => {},
     OptionAmountComponent: OptionAmount,
     OptionGroupComponent: OptionGroup,
+    notAccessible: false,
 };
 
 Option.propTypes = {
@@ -554,6 +569,7 @@ Option.propTypes = {
     isAdminMode: PropTypes.bool,
     children: PropTypes.func,
     render: PropTypes.func,
+    notAccessible: PropTypes.bool,
 };
 
 export default withStyles(styles, { name: 'Option' })(Option);