@bytebrand/fe-ui-core 4.8.46 → 4.8.48

package/__tests__/utils/CommonUtils/sliceLessThan.test.ts

@@ -1,23 +0,0 @@
-import { sliceLessThan } from '../../../source/framework/utils/CommonUtils';
-
-describe('sliceLessThan', () => {
-  it('returns empty array if returned value of `to` is not valid', () => {
-    const expected: number[] = [];
-
-    expect(sliceLessThan([], null)).toEqual(expected);
-    expect(sliceLessThan([], undefined)).toEqual(expected);
-    expect(sliceLessThan([], {} as any)).toEqual(expected);
-    expect(sliceLessThan([], [] as any)).toEqual(expected);
-    expect(sliceLessThan([], '')).toEqual(expected);
-    expect(sliceLessThan([], 'string')).toEqual(expected);
-    expect(sliceLessThan([], NaN)).toEqual(expected);
-    expect(sliceLessThan([], Infinity)).toEqual(expected);
-    expect(sliceLessThan([], -Infinity)).toEqual(expected);
-  });
-  
-  it('returns slice of original array containing only numbers less than `to`', () => {
-    const arr: number[] = [5,6,7,8];
-    const expected: number[] = [5,6];
-    expect(sliceLessThan(arr, 6)).toEqual(expected);
-  });
-});

package/__tests__/utils/CommonUtils/sliceMoreThan.test.ts

@@ -1,23 +0,0 @@
-import { sliceMoreThan } from '../../../source/framework/utils/CommonUtils';
-
-describe('sliceMoreThan', () => {
-  const myArray = [1, 2, 3, 4, 5];
-
-  it('returns empty array if returned value of `from` is not valid', () => {
-    const expected: number[] = [];
-
-    expect(sliceMoreThan([], null)).toEqual(expected);
-    expect(sliceMoreThan([], undefined)).toEqual(expected);
-    expect(sliceMoreThan([], {} as any)).toEqual(expected);
-    expect(sliceMoreThan([], [] as any)).toEqual(expected);
-    expect(sliceMoreThan([], '')).toEqual(expected);
-    expect(sliceMoreThan([], 'string')).toEqual(expected);
-    expect(sliceMoreThan([], NaN)).toEqual(expected);
-    expect(sliceMoreThan([], Infinity)).toEqual(expected);
-    expect(sliceMoreThan([], -Infinity)).toEqual(expected);
-  });
-
-  it('should return [4, 5] when filtering with 4', () => {
-    expect(sliceMoreThan(myArray, 4)).toEqual([4, 5]);
-  });
-});

package/source/components/AdvantageItem/AdvantageItem.story.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-const bestExchange = require('../../../media/images/advantages/cert-best-car-exchange.jpg');
-const highestConf  = require('../../../media/images/advantages/cert-highest-confidence.jpg');
-const advantage_shop = require('../../../media/images/advantages/advantage_cart.svg');
-const advantage_checked = require('../../../media/images/advantages/advantage_check.svg');
-const advantage_easy = require('../../../media/images/advantages/advantage_like.svg');
-const advantage_safe = require('../../../media/images/advantages/advantage_secure.svg');
-
-import AdvantageItem from './AdvantageItem';
-
-storiesOf('AdvantageItem', module)
-  .add('default', () => (
-    <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around', width: 600, backgroundColor: 'lightgray' }}>
-      <AdvantageItem imageSrc={bestExchange} />
-      <AdvantageItem title='GEPRÜFT' imageSrc={advantage_checked} />
-      <AdvantageItem title='EINFACH' imageSrc={advantage_easy} />
-      <AdvantageItem title='sicher' imageSrc={advantage_safe} />
-      <AdvantageItem title='kaufen' imageSrc={advantage_shop} />
-      <AdvantageItem imageSrc={highestConf} />
-    </div>
-  ));

package/source/components/Alternative/Dealer.story.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import DealerInfo from './DealerInfo';
-
-import styles from './Dealer.story.styl';
-
-const infoSections = [
-    {
-        title: 'Adresse',
-        value: 'Roteweg, 21 Stuttgart 70437'
-    },
-    {
-        title: 'Name',
-        value: 'Mahmood Saeedi'
-    },
-    {
-        title: 'Telefon',
-        value: '01779335555',
-        icon: 'telephone'
-    },
-    {
-        title: 'E-Mail',
-        value: 'mahmood.saeedi@auto.de'
-    }
-]
-
-storiesOf('Alternative', module)
-.add('DealerInfo', () => (
-    <div className={styles.dealerInfoContainer}>
-        <DealerInfo infoSections={infoSections} t={phrase => phrase} dealerPrice={10000} unsereMarge={1000} link='www.google.com' linkName='link'/>
-    </div>
-))

package/source/components/Alternative/Dealer.story.styl

@@ -1,3 +0,0 @@
-.dealerInfoContainer
-    width: 360px
-    margin: 0 auto

package/source/components/Breadcrumbs/Breadcrumbs.story.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
-
-  const infoBlockData = [
-    {
-      title: 'Top Qualität',
-      contentMobile: 'Ganz egal ob Gebraucht- oder Neuwagen: Bei uns finden Sie nur fachkundig geprüfte und evaluierte Fahrzeuge'
-    },
-    {
-      title: '1 Jahr auto.de-Garantie',
-      contentMobile: 'Unsere 1 Jahr auto.de Garantie schützt Sie vor unerwarteten Reparaturkosten und unnötigem Papierkram'
-    },
-    {
-      title: 'Günstige Finanzierung',
-      contentMobile: 'Unsere Finanzierungsexperten finden mit Ihnen gemeinsam die beste Finanzierungs- und Versicherungsmöglichkeit'
-    },
-    {
-      title: '14 Tage Probefahrt',
-      contentMobile: 'Bei uns können Sie Ihr Fahrzeug binnen 14 Tagen zurückgeben, sollten Sie mit diesem nicht zufrieden sein'
-    }
-  ];
-
-const BreadcrumbsContainer = () => {
-    return (
-        <div>
-          <Breadcrumbs page='VEHICLE_DETAILS' infoBlockData={infoBlockData}/>
-        </div>
-    )
-}
-
-storiesOf('Breadcrumbs', module)
-  .add('Breadcrumbs', () => (
-    <div>
-      <div>
-        <BreadcrumbsContainer />
-      </div>
-    </div>
-  ));
-export default BreadcrumbsContainer;

package/source/components/Breadcrumbs/FirstInfoBlock/FirstInfoBlock.story.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import FirstInfoBlock from './FirstInfoBlock';
-
-const infoBlockData = [
-    {
-      title: 'price',
-      contentMobile: 'priceTextMobile'
-    },
-    {
-      title: 'autoDeCheck',
-      contentMobile: 'autoDeCheckTextMobile'
-    },
-    {
-      title: 'guarantee',
-      contentMobile: 'guaranteeTextMobile'
-    },
-    {
-      title: 'warranty',
-      contentMobile: 'warrantyTextMobile'
-    }
-  ];
-
-const infoBlockProps = {
-    infoBlockData
-}
-
-const FirstInfoBlockContainer = () => {
-    return (
-        <div>
-            <FirstInfoBlock {...infoBlockProps}/> 
-        </div>
-    )
-}
-
-storiesOf('Breadcrumbs', module)
-  .add('FirstInfoBlock', () => (
-    <div>
-      <div>
-        <FirstInfoBlockContainer/>
-      </div>
-    </div>
-  ));
-
-export default FirstInfoBlockContainer;

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

@@ -1,243 +0,0 @@
-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 +0,0 @@
-@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/RadioCards/RadioGroupCheckout.story.js

@@ -1,105 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import PaymentTypeCard from './PaymentTypeCard/PaymentTypeCard';
-import ServiceCardWrapper from './AdditionalServiceCard/ServiceCardWrapper';
-import RadioGroup from '../../_common/Radio/RadioGroup';
-
-import styles from './RadioGroupCheckout.story.styl';
-export class RadioGroupCheckoutVertical extends React.Component {
-  state = {
-    value: 0
-  };
-
-  action = action('change');
-  onChange = (event, value) => {
-    this.action(event, value);
-    this.setState(() => ({ value }));
-  };
-
-  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>
-    );
-  };
-
-  render() {
-    const radioProps = {
-      labelClassName: styles.checkoutLabel
-    }
-
-    const paymentTypeProps = {
-      labelClassName: styles.checkoutLabel,
-    }
-
-    const infoContent = [
-    'Zulassung bei Ihrer Zulassungsstelle vor Ort',
-    'Zulassung vor Ort inkl. Wunschkennzeichen',
-    'Sie organisieren die Zulassung selbst'
-    ];
-
-    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'
-    ];
-
-    const iconNames = [
-      'financingIcon',
-      'leasingIcon',
-      'buyIcon',
-      'aboIcon',
-    ]
-
-    const values = [0, 1, 2]
-
-    const vehicleDeliveryProps = {
-      additionalOptions: infoContent,
-      price: 0,
-      labelClassName: styles.checkoutLabel,
-      monthly: 'week'
-    }
-
-    const onCheckoutModalClick = (modalContent) => {
-      alert('modalWindow');
-    }
-
-    return (
-      <>
-      <RadioGroup name='sub_model' containerClassName={styles.vertical} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
-        {iconNames.map((iconName, index) => (
-          <PaymentTypeCard onCheckoutModalClick={onCheckoutModalClick} tooltip={true} monthly='week' key={index} disabled={index === 1 && true} label={this.renderCheckout(index)} infoContent={paymentinfoContent[index]} value={index} {...paymentTypeProps} />
-        ))}
-      </RadioGroup>
-      <RadioGroup name='name' containerClassName={styles.vertical} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
-        {values.map((value, index) => (
-        <ServiceCardWrapper onCheckoutModalClick={onCheckoutModalClick} warrantyCard={true} key={index} additionalOptions={infoContent} index={index} price={2} label={this.renderCheckout(0)} infoContent={infoContent[value]} value={value} {...radioProps} additional={true} footerText='Komplette Leistungsübersicht'/>
-        ))}
-      </RadioGroup>
-      <RadioGroup name='name' containerClassName={styles.vertical} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
-        <ServiceCardWrapper tooltip={true} deliveryCard={true} deliveryIcon='delivery' label={this.renderCheckout(0)} infoContent={infoContent[1]} value={0} {...vehicleDeliveryProps} delivery={true}>
-          <input type='text'></input>
-        </ServiceCardWrapper>
-        <ServiceCardWrapper content='delivery content' tooltip={true} deliveryCard={true} deliveryIcon='pickYourself' label={this.renderCheckout(1)} value={1} distance={500} {...vehicleDeliveryProps} />
-      </RadioGroup>
-      </>
-    );
-  }
-}
-
-storiesOf('checkout', module)
-.add('RadioGroupCheckout', () => (
-  <div>
-    <RadioGroupCheckoutVertical />
-  </div>
-));

package/source/components/Checkout/RadioCards/RadioGroupCheckout.story.styl

@@ -1,37 +0,0 @@
-.default
-  padding: 10px
-  border-radius: 5px
-  margin-bottom: 20px
-  display: flex
-  flex-direction: row
-  align-items: center
-  justify-content: space-between
-
-.vertical
-  composes: default
-  display: flex
-  flex-direction: column
-  align-items: center
-  padding: 10px
-  max-width: 500px
-
-.verticalChild:not(:last-of-type)
-  margin-bottom: 10px
-
-.equipment
-  display: flex
-  flex-direction: row
-  align-items: center
-  justify-content: space-between
-
-.column
-  display: flex
-  flex-direction: column
-  align-items: stretch
-
-.title
-  font-size: 10px
-
-.value
-  font-size: 14px
-

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import Switcher from './Switcher';
-
-import styles from './Switcher.story.styl';
-export class SwitcherGroup extends React.Component {
-  state = {
-    value: 0
-  };
-
-  action = action('change');
-  onChange = (event, value) => {
-    this.action(event, value);
-    this.setState(() => ({ value }));
-  };
-
-  onChange = (e, value, name) => {
-    this.setState({ value: value });
-  }
-
-  render() {
-    const warrantyPeriodOptions = ['1 Jahr', '2 Jahre'];
-    return (
-      <Switcher
-        options={warrantyPeriodOptions}
-        value={this.state.value}
-        onChange={this.onChange}
-        name={'warrantyPeriod'}
-      />
-    );
-  }
-}
-
-storiesOf('checkout', module)
-.add('switcherGroup', () => (
-  <div>
-    <SwitcherGroup />
-  </div>
-));

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

@@ -1,2 +0,0 @@
-.containerClassName
-  display: flex