@bytebrand/fe-ui-core 4.2.136 → 4.2.137

package/source/components/Checkout/CheckoutStepper/CheckoutStepper.tsx

@@ -1,70 +1,70 @@
-import React, { FunctionComponent } from 'react';
-import { isMobileOnly } from 'react-device-detect';
-import { useStyles } from './CheckoutStepperClasses';
-import styles from './CheckoutStepper.styl';
-import { Hidden } from 'react-grid-system';
-import { Stepper, Step, StepButton, IconSVG } from '../../../../common';
-
-interface ICheckoutStepper {
-  steps: [];
-  activeStep?: number;
-  handleStep?: (index: number) => () => void;
-  completed?: any;
-  t?: (phrase: string) => {};
-}
-
-const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ steps, activeStep, completed, handleStep, t }) => {
-  const classes = useStyles();
-  return (
-    <div className={`${classes.root} ${styles.stepperWrapper}`}>
-      <Stepper
-        className={classes.stepper}
-        nonLinear
-        orientation={isMobileOnly ? 'horizontal' : 'vertical'}
-        alternativeLabel={isMobileOnly}
-        activeStep={activeStep}>
-        {steps.map(({ title, pathname }, index) => {
-          const labelRep = !!title && !isMobileOnly ? title.replace('-', '') : title;
-          return (
-            <Step key={pathname}
-              className={`${completed.has(steps[index].pathname) ? classes.isCompleted : ''}
-              ${completed.has(steps[index].pathname) ? classes.completeLine : ''}
-              ${activeStep === index && classes.activeLine}
-              `}
-              >
-              <StepButton
-                onClick={handleStep(index)}
-                classes={{
-                  root: classes.buttonItem,
-                  horizontal: classes.labelWrap,
-                  vertical: classes.verticalWrap
-                }}
-                className={`
-                  ${activeStep === index ? classes.active : classes.default}
-                  ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}>
-                <span>{labelRep}</span>
-                <Hidden xs sm md>
-                  {activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false}/>}
-                  {!completed.has(steps[index].pathname) &&
-                    <span
-                      className={`
-                        ${classes.minutes}
-                        ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}
-                    >
-                      {steps[index].minutes}
-                      &nbsp;
-                      {steps[index].minutes === 1 ? t('CheckoutPage:minute') : t('CheckoutPage:minutes')}
-                    </span>
-                  }
-                </Hidden>
-              </StepButton>
-            </Step>
-          );
-        }
-        )}
-      </Stepper>
-    </div >
-  );
-};
-
-export default CheckoutStepper;
+import React, { FunctionComponent } from 'react';
+import { isMobileOnly } from 'react-device-detect';
+import { useStyles } from './CheckoutStepperClasses';
+import styles from './CheckoutStepper.styl';
+import { Hidden } from 'react-grid-system';
+import { Stepper, Step, StepButton, IconSVG } from '../../../../common';
+
+interface ICheckoutStepper {
+  steps: [];
+  activeStep?: number;
+  handleStep?: (index: number) => () => void;
+  completed?: any;
+  t?: (phrase: string) => {};
+}
+
+const CheckoutStepper: FunctionComponent<ICheckoutStepper> = ({ steps, activeStep, completed, handleStep, t }) => {
+  const classes = useStyles();
+  return (
+    <div className={`${classes.root} ${styles.stepperWrapper}`}>
+      <Stepper
+        className={classes.stepper}
+        nonLinear
+        orientation={isMobileOnly ? 'horizontal' : 'vertical'}
+        alternativeLabel={isMobileOnly}
+        activeStep={activeStep}>
+        {steps.map(({ title, pathname }, index) => {
+          const labelRep = !!title && !isMobileOnly ? title.replace('-', '') : title;
+          return (
+            <Step key={pathname}
+              className={`${completed.has(steps[index].pathname) ? classes.isCompleted : ''}
+              ${completed.has(steps[index].pathname) ? classes.completeLine : ''}
+              ${activeStep === index && classes.activeLine}
+              `}
+              >
+              <StepButton
+                onClick={handleStep(index)}
+                classes={{
+                  root: classes.buttonItem,
+                  horizontal: classes.labelWrap,
+                  vertical: classes.verticalWrap
+                }}
+                className={`
+                  ${activeStep === index ? classes.active : classes.default}
+                  ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}>
+                <span>{labelRep}</span>
+                <Hidden xs sm md>
+                  {activeStep !== index && <IconSVG name='menuArrow' className={styles.menuArrow} customDimensions={false}/>}
+                  {!completed.has(steps[index].pathname) &&
+                    <span
+                      className={`
+                        ${classes.minutes}
+                        ${completed.has(steps[index].pathname) && activeStep !== index && classes.completeStep}`}
+                    >
+                      {steps[index].minutes}
+                      &nbsp;
+                      {steps[index].minutes === 1 ? t('CheckoutPage:minute') : t('CheckoutPage:minutes')}
+                    </span>
+                  }
+                </Hidden>
+              </StepButton>
+            </Step>
+          );
+        }
+        )}
+      </Stepper>
+    </div >
+  );
+};
+
+export default CheckoutStepper;

package/source/components/Checkout/CheckoutStepper/CheckoutStepperClasses.js

@@ -1,174 +1,174 @@
-import { makeStyles } from '@bytebrand/fe-ui-core/common';
-
-export const useStyles = makeStyles(theme => ({
-  root: {
-    '& .MuiStepLabel-label.MuiStepLabel-alternativeLabel': {
-      fontSize: 10,
-      maxWidth: 56
-    },
-    '& .MuiStepLabel-label.MuiStepLabel-active' : {
-      fontWeight: 'bold'
-    },
-    '& .MuiSvgIcon-root': {
-      width: 24,
-      height: 24
-    },
-    '& .MuiStepConnector-line' : {
-      borderWidth: '2px'
-    },
-    '& .MuiStepConnector-vertical': {
-      marginLeft: 50,
-      padding: '12px 0 16px'
-    }
-  },
-  checkoutFooter: {
-    display: 'block',
-    width: '100%',
-    textAlign: 'center',
-    background: '#f2f2f2',
-    color: '#757575',
-    fontSize: '7px'
-  },
-  checkoutFooterItem: {
-    margin: '0 4px'
-  },
-  button: {
-    marginRight: theme.spacing(1)
-  },
-  backButton: {
-    marginRight: theme.spacing(1)
-  },
-  buttonWeiter: {
-    width: '328px',
-    margin: '16px auto',
-    display: 'block',
-    height: '44px',
-    textTransform: 'none'
-  },
-  isCompleted: {
-    display: 'inline-block',
-    '& $line': {
-      borderColor: '#005CCB',
-    },
-  },
-  instructions: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
-  },
-  stepper: {
-    '&.MuiStepper-root': {
-      padding: 0
-      // overflow: 'scroll'
-    }
-  },
-  isCompleted : {
-      '&.MuiStep-vertical + .MuiStepConnector-vertical' : {
-        '& .MuiStepConnector-line' : {
-          borderColor: '#005CCB'
-        }
-      },
-  },
-  active: {
-    '@media (min-width: 992px)': {
-      backgroundColor: 'rgba(0, 92, 203, 0.08)',
-    },
-    '& .MuiStepIcon-text': {
-      fill: 'white !important'
-    },
-    '& .MuiStepIcon-active': {
-      color: '#005CCB',
-      fontWeight: 'bold'
-    },
-    '& .MuiStepConnector-line' : {
-      borderColor: '#005CCB',
-      borderTopWidth: '2px'
-    }
-  },
-  buttonItem: {
-    margin: 0,
-    padding: 0
-  },
-  labelWrap: {
-    '& .MuiStepLabel-label': {
-      marginTop: 7,
-      lineHeight: '11px'
-    }
-  },
-  verticalWrap: {
-    padding: '14px 0 14px 26px',
-    borderRadius: '0px 38px 38px 0px',
-    boxSizing: 'border-box',
-    '& .MuiStepLabel-iconContainer': {
-      paddingRight: 17
-    },
-
-    '& .MuiSvgIcon-root': {
-      width: 48,
-      height: 48
-    },
-
-    '& .MuiStepLabel-label': {
-      color: 'rgba(0, 0, 0, 0.83)',
-      fontWeight: 'bold',
-      fontSize: 22
-    }
-  },
-  minutes: {
-    fontSize: 14,
-    color: 'rgba(0, 0, 0, 0.63)',
-    display: 'block',
-    textAlign: 'left',
-    fontWeight: 400
-  },
-  default: {
-    '& .MuiStepIcon-text': {
-      fill: 'grey'
-    },
-    '& .MuiStepIcon-root': {
-      color: 'transparent',
-      border: '1px solid grey',
-      boxSizing: 'border-box',
-      borderRadius: '50%'
-    },
-    '& .MuiStepLabel-label': {
-      color: 'rgba(0, 0, 0, 0.38)',
-      fontWeight: 400
-    }
-
-  },
-  completeStep: {
-    color: '#005CCB',
-    '& .MuiStepIcon-root' : {
-      borderColor: '#005CCB',
-      borderWidth: '2px'
-    },
-    '& .MuiStepIcon-text': {
-      fill: '#005CCB',
-      fontWeight: 'bold'
-    },
-    '& .MuiStepLabel-label.MuiStepLabel-alternativeLabel' : {
-      color: '#005CCB'
-    },
-    '& .MuiStepLabel-label' : {
-      color: '#005CCB'
-    },
-    '& .MuiStepConnector-lineVertical' : {
-      borderColor: '#005CCB'
-    }
-  },
-  completeLine : {
-    '& .MuiStepConnector-line' : {
-      borderColor: '#005CCB',
-      borderTopWidth: '2px'
-    },
-    '& .MuiStepConnector-line.MuiStepConnector-lineVertical' : {
-      borderColor: '#005CCB'
-    }
-  },
-  activeLine : {
-    '& .MuiStepConnector-line' : {
-      borderColor: '#005CCB',
-      borderTopWidth: '2px'
-    }
-  }
+import { makeStyles } from '@bytebrand/fe-ui-core/common';
+
+export const useStyles = makeStyles(theme => ({
+  root: {
+    '& .MuiStepLabel-label.MuiStepLabel-alternativeLabel': {
+      fontSize: 10,
+      maxWidth: 56
+    },
+    '& .MuiStepLabel-label.MuiStepLabel-active' : {
+      fontWeight: 'bold'
+    },
+    '& .MuiSvgIcon-root': {
+      width: 24,
+      height: 24
+    },
+    '& .MuiStepConnector-line' : {
+      borderWidth: '2px'
+    },
+    '& .MuiStepConnector-vertical': {
+      marginLeft: 50,
+      padding: '12px 0 16px'
+    }
+  },
+  checkoutFooter: {
+    display: 'block',
+    width: '100%',
+    textAlign: 'center',
+    background: '#f2f2f2',
+    color: '#757575',
+    fontSize: '7px'
+  },
+  checkoutFooterItem: {
+    margin: '0 4px'
+  },
+  button: {
+    marginRight: theme.spacing(1)
+  },
+  backButton: {
+    marginRight: theme.spacing(1)
+  },
+  buttonWeiter: {
+    width: '328px',
+    margin: '16px auto',
+    display: 'block',
+    height: '44px',
+    textTransform: 'none'
+  },
+  isCompleted: {
+    display: 'inline-block',
+    '& $line': {
+      borderColor: '#005CCB',
+    },
+  },
+  instructions: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  stepper: {
+    '&.MuiStepper-root': {
+      padding: 0
+      // overflow: 'scroll'
+    }
+  },
+  isCompleted : {
+      '&.MuiStep-vertical + .MuiStepConnector-vertical' : {
+        '& .MuiStepConnector-line' : {
+          borderColor: '#005CCB'
+        }
+      },
+  },
+  active: {
+    '@media (min-width: 992px)': {
+      backgroundColor: 'rgba(0, 92, 203, 0.08)',
+    },
+    '& .MuiStepIcon-text': {
+      fill: 'white !important'
+    },
+    '& .MuiStepIcon-active': {
+      color: '#005CCB',
+      fontWeight: 'bold'
+    },
+    '& .MuiStepConnector-line' : {
+      borderColor: '#005CCB',
+      borderTopWidth: '2px'
+    }
+  },
+  buttonItem: {
+    margin: 0,
+    padding: 0
+  },
+  labelWrap: {
+    '& .MuiStepLabel-label': {
+      marginTop: 7,
+      lineHeight: '11px'
+    }
+  },
+  verticalWrap: {
+    padding: '14px 0 14px 26px',
+    borderRadius: '0px 38px 38px 0px',
+    boxSizing: 'border-box',
+    '& .MuiStepLabel-iconContainer': {
+      paddingRight: 17
+    },
+
+    '& .MuiSvgIcon-root': {
+      width: 48,
+      height: 48
+    },
+
+    '& .MuiStepLabel-label': {
+      color: 'rgba(0, 0, 0, 0.83)',
+      fontWeight: 'bold',
+      fontSize: 22
+    }
+  },
+  minutes: {
+    fontSize: 14,
+    color: 'rgba(0, 0, 0, 0.63)',
+    display: 'block',
+    textAlign: 'left',
+    fontWeight: 400
+  },
+  default: {
+    '& .MuiStepIcon-text': {
+      fill: 'grey'
+    },
+    '& .MuiStepIcon-root': {
+      color: 'transparent',
+      border: '1px solid grey',
+      boxSizing: 'border-box',
+      borderRadius: '50%'
+    },
+    '& .MuiStepLabel-label': {
+      color: 'rgba(0, 0, 0, 0.38)',
+      fontWeight: 400
+    }
+
+  },
+  completeStep: {
+    color: '#005CCB',
+    '& .MuiStepIcon-root' : {
+      borderColor: '#005CCB',
+      borderWidth: '2px'
+    },
+    '& .MuiStepIcon-text': {
+      fill: '#005CCB',
+      fontWeight: 'bold'
+    },
+    '& .MuiStepLabel-label.MuiStepLabel-alternativeLabel' : {
+      color: '#005CCB'
+    },
+    '& .MuiStepLabel-label' : {
+      color: '#005CCB'
+    },
+    '& .MuiStepConnector-lineVertical' : {
+      borderColor: '#005CCB'
+    }
+  },
+  completeLine : {
+    '& .MuiStepConnector-line' : {
+      borderColor: '#005CCB',
+      borderTopWidth: '2px'
+    },
+    '& .MuiStepConnector-line.MuiStepConnector-lineVertical' : {
+      borderColor: '#005CCB'
+    }
+  },
+  activeLine : {
+    '& .MuiStepConnector-line' : {
+      borderColor: '#005CCB',
+      borderTopWidth: '2px'
+    }
+  }
 }));