@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.story.js

@@ -1,243 +1,243 @@
-import React, {useState} from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-import styles from './OrderOverviewItem.story.styl';
-import {
-  Accordion, AccordionSummary, AccordionDetails, Divider
-} from '@mui/material';
-import { makeStyles } from '@mui/styles';
-
-// Components
-import OrderOverviewItem from './OrderOverviewItem';
-import IconSVG from '../../_common/IconSVG/IconSVG';
-import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
-import PaymentTypeCard from '../RadioCards/PaymentTypeCard/PaymentTypeCard';
-
-const resizableProps = {
-  defaultSize: { width: 360, height: 700 }
-};
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    minWidth: 275
-  },
-  bullet: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)'
-  },
-  title: {
-    fontSize: 14
-  },
-  pos: {
-    marginBottom: 12
-  },
-  accordionSummary: {
-    flexDirection: 'row-reverse'
-  },
-  iconPlus: {
-    '&.MuiIconButton-root': {
-      // paddingLeft: 0,
-      paddingLeft: '100px',
-      marginRight: '10px'
-    },
-    '&.MuiIconButton-edgeEnd': {
-      marginRight: 0,
-      paddingLeft: '100px'
-    }
-  },
-  iconMinus: {
-    '&.MuiIconButton-label': {
-      // paddingLeft: 0,
-      marginLeft: '10px'
-    }
-  },
-  heading: {
-    '&.MuiTypography-body1': {
-      marginLeft: '10px'
-    }
-  },
-  accordionWrapper: {
-    '&.MuiAccordionDetails-root': {
-      display: 'block',
-      padding: 0
-    }
-  },
-  accordion: {
-    '& .MuiAccordionSummary-root' : {
-      padding: 0
-    },
-    '& .MuiAccordionSummary-content.Mui-expanded' : {
-      margin: 0
-    },
-    '&.MuiAccordion-root.Mui-expanded' : {
-      margin: 0,
-      marginTop: '20px'
-    },
-    '& .MuiAccordionSummary-root.Mui-expanded' : {
-      minHeight: '52px'
-    },
-    '&.MuiAccordion-root' : {
-      boxShadow: 'none'
-    },
-    '&.MuiAccordion-root:before' : {
-      height: 0
-    },
-    '&.MuiAccordion-root.Mui-expanded:before' : {
-      opacity: 1,
-      height: '1px'
-    }
-  }
-}));
-const OrderOverviewItemWrapper = () => {
-const classes = useStyles();
-
-const fields = [
-    [
-      'Hannes Käther',
-      'Wittenberger Str. 81, 04129 Leipzig'
-    ],
-    [
-      'Wittenberger Str. 81, 04129 Leipzig'
-    ]
-  ];
-
-const titles = [
-  'Billing address',
-  'Vehicle delivery',
-  'Down payment'
-]
-
-const intoAccordionTitles = [
-  'Financing',
-  'Additional services'
-]
-
-const intoAccordionField = [
-  [
-    'Financing rate',
-    '2. Borrower'
-  ],
-  [
-    'Silver guarantee package',
-    'Admissions Service',
-    'Desired license plate',
-    'Vehicle delivery'
-  ]
-]
-
-const intoAccordionFieldRight = [
-  [
-    '194 € per month',
-    'Papa Käther'
-  ],
-  [
-    '10 € per month',
-    '2 € per month',
-    '0,5 € per month',
-    '7 € per month'
-  ]
-]
-
-const iconNames = [
-  'financingIcon',
-  'leasingIcon',
-  'aboIcon'
-]
-
-const fieldLine = '€ 1,000 (transfer)'
-
-const [open, setOpen] = useState(false);
-
-const handleAccordion = () => {
-    setOpen(!open);
-  };
-{/* delete */}
-  const [checkedBox, setCheckedBox] = useState({
-    0: true,
-    1: false,
-    2: true,
-    3: false,
-    4: true,
-    5: false,
-    6: true
-  });
-
-  const onChange = (e, checked) => {
-    const updatedValue = !checkedBox[e.target.value]
-    // setCheckedBox({...checkedBox, [e.target.value]: updatedValue});
-    // checked = checkedBox[e.target.value];
-    if (e.target.value === '2') {
-      setCheckedBox({0: false, 1: false, 2: true});  
-    }
-    else {
-      setCheckedBox({...checkedBox, [e.target.value]: updatedValue, 2: false})
-    }
-  }
-
-  const renderCheckout = (index) => {
-    const financing = ['Financing', 'Leasing', 'Buy', 'Abo'];
-
-    return (
-      <div className={styles.equipment}>
-        <div className={styles.column}>
-          <span className={styles.titleCheckout}>
-            {financing[index]}
-          </span>
-        </div>
-      </div>
-    );
-  };
-
-  const paymentTypeProps = {
-    labelClassName: styles.checkoutLabel,
-  }
-
-  const paymentinfoContent = [
-    '81% of our customers find the perfect financing through auto.de',
-    'Lease your car with ease',
-    'Subscribe to your dream car flexibly',
-    'Buy your car now'
-    ];
-{/* delete */}
-  return (
-    <Resizable {...resizableProps}>
-      <OrderOverviewItem title={titles[0]} fields={fields[0]}/>
-      <OrderOverviewItem title={titles[1]} fields={fields[1]}/>
-      <OrderOverviewItem title={titles[2]} fieldLine={fieldLine}/>
-      <Accordion className={`${classes.accordion} ${styles.accordion}`}>
-        <AccordionSummary
-          onClick={handleAccordion}
-          className={classes.accordionSummary}
-          // expandIcon={open ? <IconSVG className={classes.iconMinus} name='minusIcon' /> : <IconSVG className={classes.iconPlus} name='plusIcon' />}
-          aria-controls='panel1a-content'
-          id='panel1a-header'
-        >
-          <span className={styles.summaryWrapper}>
-            <span>Your overall rate</span>
-            <span className={styles.priceWrapper}>
-              <VehicleFormattedPrice monthly='monthly' className={styles.price} numbersAfterDot={0} toRound price={213} unit='€' size='medium' isNew={true}/>
-              <IconSVG name='arrowDownBlue' className={open ? styles.arrowUp : styles.arrowDown}/>
-              {/* <SvgIcon component={SvgArrowDownBlue} viewBox='-100 -100 400 400' /> */}
-            </span>
-          </span>
-        </AccordionSummary>
-        <Divider />
-        <AccordionDetails className={classes.accordionWrapper}>
-          {/* <Typography> */}
-          <OrderOverviewItem fieldRight={intoAccordionFieldRight[0]} fields={intoAccordionField[0]} title={intoAccordionTitles[0]}/>
-          <Divider/>
-          <OrderOverviewItem fieldRight={intoAccordionFieldRight[1]} fields={intoAccordionField[1]} title={intoAccordionTitles[1]}/>
-        </AccordionDetails>
-      </Accordion>
-      {/* delete */}
-      {iconNames.map((iconName, index) => (
-          <PaymentTypeCard squareRadioClassname={index < 2 && true} checked={checkedBox[index]} checkbox={true} onChange={onChange} monthly='week' price={2} key={index} label={renderCheckout(index)} infoContent={paymentinfoContent[index]} iconName={iconName} value={index} {...paymentTypeProps} />
-        ))}
-      {/* delete */}
-    </Resizable>
-  )
-}
-
-storiesOf('Checkout', module)
-  .add('OrderOverviewItem', () => <OrderOverviewItemWrapper />)
+import React, {useState} from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+import styles from './OrderOverviewItem.story.styl';
+import {
+  Accordion, AccordionSummary, AccordionDetails, Divider
+} from '@mui/material';
+import { makeStyles } from '@mui/styles';
+
+// Components
+import OrderOverviewItem from './OrderOverviewItem';
+import IconSVG from '../../_common/IconSVG/IconSVG';
+import VehicleFormattedPrice from '../../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
+import PaymentTypeCard from '../RadioCards/PaymentTypeCard/PaymentTypeCard';
+
+const resizableProps = {
+  defaultSize: { width: 360, height: 700 }
+};
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    minWidth: 275
+  },
+  bullet: {
+    display: 'inline-block',
+    margin: '0 2px',
+    transform: 'scale(0.8)'
+  },
+  title: {
+    fontSize: 14
+  },
+  pos: {
+    marginBottom: 12
+  },
+  accordionSummary: {
+    flexDirection: 'row-reverse'
+  },
+  iconPlus: {
+    '&.MuiIconButton-root': {
+      // paddingLeft: 0,
+      paddingLeft: '100px',
+      marginRight: '10px'
+    },
+    '&.MuiIconButton-edgeEnd': {
+      marginRight: 0,
+      paddingLeft: '100px'
+    }
+  },
+  iconMinus: {
+    '&.MuiIconButton-label': {
+      // paddingLeft: 0,
+      marginLeft: '10px'
+    }
+  },
+  heading: {
+    '&.MuiTypography-body1': {
+      marginLeft: '10px'
+    }
+  },
+  accordionWrapper: {
+    '&.MuiAccordionDetails-root': {
+      display: 'block',
+      padding: 0
+    }
+  },
+  accordion: {
+    '& .MuiAccordionSummary-root' : {
+      padding: 0
+    },
+    '& .MuiAccordionSummary-content.Mui-expanded' : {
+      margin: 0
+    },
+    '&.MuiAccordion-root.Mui-expanded' : {
+      margin: 0,
+      marginTop: '20px'
+    },
+    '& .MuiAccordionSummary-root.Mui-expanded' : {
+      minHeight: '52px'
+    },
+    '&.MuiAccordion-root' : {
+      boxShadow: 'none'
+    },
+    '&.MuiAccordion-root:before' : {
+      height: 0
+    },
+    '&.MuiAccordion-root.Mui-expanded:before' : {
+      opacity: 1,
+      height: '1px'
+    }
+  }
+}));
+const OrderOverviewItemWrapper = () => {
+const classes = useStyles();
+
+const fields = [
+    [
+      'Hannes Käther',
+      'Wittenberger Str. 81, 04129 Leipzig'
+    ],
+    [
+      'Wittenberger Str. 81, 04129 Leipzig'
+    ]
+  ];
+
+const titles = [
+  'Billing address',
+  'Vehicle delivery',
+  'Down payment'
+]
+
+const intoAccordionTitles = [
+  'Financing',
+  'Additional services'
+]
+
+const intoAccordionField = [
+  [
+    'Financing rate',
+    '2. Borrower'
+  ],
+  [
+    'Silver guarantee package',
+    'Admissions Service',
+    'Desired license plate',
+    'Vehicle delivery'
+  ]
+]
+
+const intoAccordionFieldRight = [
+  [
+    '194 € per month',
+    'Papa Käther'
+  ],
+  [
+    '10 € per month',
+    '2 € per month',
+    '0,5 € per month',
+    '7 € per month'
+  ]
+]
+
+const iconNames = [
+  'financingIcon',
+  'leasingIcon',
+  'aboIcon'
+]
+
+const fieldLine = '€ 1,000 (transfer)'
+
+const [open, setOpen] = useState(false);
+
+const handleAccordion = () => {
+    setOpen(!open);
+  };
+{/* delete */}
+  const [checkedBox, setCheckedBox] = useState({
+    0: true,
+    1: false,
+    2: true,
+    3: false,
+    4: true,
+    5: false,
+    6: true
+  });
+
+  const onChange = (e, checked) => {
+    const updatedValue = !checkedBox[e.target.value]
+    // setCheckedBox({...checkedBox, [e.target.value]: updatedValue});
+    // checked = checkedBox[e.target.value];
+    if (e.target.value === '2') {
+      setCheckedBox({0: false, 1: false, 2: true});  
+    }
+    else {
+      setCheckedBox({...checkedBox, [e.target.value]: updatedValue, 2: false})
+    }
+  }
+
+  const renderCheckout = (index) => {
+    const financing = ['Financing', 'Leasing', 'Buy', 'Abo'];
+
+    return (
+      <div className={styles.equipment}>
+        <div className={styles.column}>
+          <span className={styles.titleCheckout}>
+            {financing[index]}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  const paymentTypeProps = {
+    labelClassName: styles.checkoutLabel,
+  }
+
+  const paymentinfoContent = [
+    '81% of our customers find the perfect financing through auto.de',
+    'Lease your car with ease',
+    'Subscribe to your dream car flexibly',
+    'Buy your car now'
+    ];
+{/* delete */}
+  return (
+    <Resizable {...resizableProps}>
+      <OrderOverviewItem title={titles[0]} fields={fields[0]}/>
+      <OrderOverviewItem title={titles[1]} fields={fields[1]}/>
+      <OrderOverviewItem title={titles[2]} fieldLine={fieldLine}/>
+      <Accordion className={`${classes.accordion} ${styles.accordion}`}>
+        <AccordionSummary
+          onClick={handleAccordion}
+          className={classes.accordionSummary}
+          // expandIcon={open ? <IconSVG className={classes.iconMinus} name='minusIcon' /> : <IconSVG className={classes.iconPlus} name='plusIcon' />}
+          aria-controls='panel1a-content'
+          id='panel1a-header'
+        >
+          <span className={styles.summaryWrapper}>
+            <span>Your overall rate</span>
+            <span className={styles.priceWrapper}>
+              <VehicleFormattedPrice monthly='monthly' className={styles.price} numbersAfterDot={0} toRound price={213} unit='€' size='medium' isNew={true}/>
+              <IconSVG name='arrowDownBlue' className={open ? styles.arrowUp : styles.arrowDown}/>
+              {/* <SvgIcon component={SvgArrowDownBlue} viewBox='-100 -100 400 400' /> */}
+            </span>
+          </span>
+        </AccordionSummary>
+        <Divider />
+        <AccordionDetails className={classes.accordionWrapper}>
+          {/* <Typography> */}
+          <OrderOverviewItem fieldRight={intoAccordionFieldRight[0]} fields={intoAccordionField[0]} title={intoAccordionTitles[0]}/>
+          <Divider/>
+          <OrderOverviewItem fieldRight={intoAccordionFieldRight[1]} fields={intoAccordionField[1]} title={intoAccordionTitles[1]}/>
+        </AccordionDetails>
+      </Accordion>
+      {/* delete */}
+      {iconNames.map((iconName, index) => (
+          <PaymentTypeCard squareRadioClassname={index < 2 && true} checked={checkedBox[index]} checkbox={true} onChange={onChange} monthly='week' price={2} key={index} label={renderCheckout(index)} infoContent={paymentinfoContent[index]} iconName={iconName} value={index} {...paymentTypeProps} />
+        ))}
+      {/* delete */}
+    </Resizable>
+  )
+}
+
+storiesOf('Checkout', module)
+  .add('OrderOverviewItem', () => <OrderOverviewItemWrapper />)

package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.story.styl

@@ -1,21 +1,21 @@
-@import '../../../theme/theme.styl'
-
-.arrowUp
-  transform: rotate(180deg)
-  transition: .4s
-
-.arrowDown
-  transition: .4s
-
-.summaryWrapper
-  width: 100%
-  display: flex
-  justify-content: space-between
-
-.price
-  margin-right: 10px
-
-.accordion
-  display: block
-  margin-top: 20px
+@import '../../../theme/theme.styl'
+
+.arrowUp
+  transform: rotate(180deg)
+  transition: .4s
+
+.arrowDown
+  transition: .4s
+
+.summaryWrapper
+  width: 100%
+  display: flex
+  justify-content: space-between
+
+.price
+  margin-right: 10px
+
+.accordion
+  display: block
+  margin-top: 20px
   

package/source/components/Checkout/OrderOverviewItem/OrderOverviewItem.styl

@@ -1,36 +1,36 @@
-@import '../../../theme/theme.styl'
-
-.editableFieldWrapper
-  font-family: $font-style-arial
-  margin-top: 10px
-
-.header 
-  display: flex
-  justify-content: space-between
-  font-size: 16px
-
-.field
-  display: flex
-  justify-content: space-between
-  margin-top: 10px
-  color: $black60
-  font-size: 14px
-
-.fieldLine
-  color: $black60
-  font-family: $font-style-arial
-  font-size: 14px
-  margin-right: 10px
-
-.fieldLineWrapper
-  display: flex
-  align-items: center
-
-.editIcon
-  cursor: pointer
-  
-.additionalTitle
-  font-size: 10px
-  line-height: 24px
-  letter-spacing: 0.15px
-  color: $black30
+@import '../../../theme/theme.styl'
+
+.editableFieldWrapper
+  font-family: $font-style-arial
+  margin-top: 10px
+
+.header 
+  display: flex
+  justify-content: space-between
+  font-size: 16px
+
+.field
+  display: flex
+  justify-content: space-between
+  margin-top: 10px
+  color: $black60
+  font-size: 14px
+
+.fieldLine
+  color: $black60
+  font-family: $font-style-arial
+  font-size: 14px
+  margin-right: 10px
+
+.fieldLineWrapper
+  display: flex
+  align-items: center
+
+.editIcon
+  cursor: pointer
+  
+.additionalTitle
+  font-size: 10px
+  line-height: 24px
+  letter-spacing: 0.15px
+  color: $black30