@bytebrand/fe-ui-core 4.8.109 → 4.8.111

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/package.json.bak

@@ -1,118 +0,0 @@
-{
-  "name": "@bytebrand/fe-ui-core",
-  "version": "4.8.109",
-  "description": "UI components for the auto.de project",
-  "main": "index.ts",
-  "module": "dist/common.js",
-  "dependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.8",
-    "@babel/plugin-transform-react-constant-elements": "^7.17.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-histoslider": "3.0.0",
-    "@bytebrand/i18n-dictionaries": "^0.7.5",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@mui/material": "^5.9.0",
-    "@mui/styles": "^5.9.0",
-    "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "classnames": "2.2.6",
-    "d3-format": "1.4.5",
-    "d3-scale": "^2.2.2",
-    "date-fns": "2.29.1",
-    "i18next": "^15.0.4",
-    "jest": "^26.0.0",
-    "js-cookie": "^2.2.0",
-    "moment": "^2.29.1",
-    "rc-slider": "^8.6.13",
-    "react": "^17.0.2",
-    "react-device-detect": "^2.1.2",
-    "react-dom": "^17.0.2",
-    "react-grid-system": "^5.0.2",
-    "react-i18next": "9.0.4",
-    "react-lazyload": "3.2.0",
-    "react-scroll": "^1.7.13",
-    "react-select": "^3.0.4",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1",
-    "uuid": "^8.3.2"
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "^5.1.11",
-    "@storybook/addon-backgrounds": "^5.1.11",
-    "@storybook/addon-centered": "^5.1.11",
-    "@storybook/addon-info": "^5.1.11",
-    "@storybook/addon-links": "^5.1.11",
-    "@storybook/addons": "^5.1.11",
-    "@storybook/react": "^5.3.21",
-    "@testing-library/dom": "^9.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.6",
-    "@types/classnames": "2.2.6",
-    "@types/d3-format": "^1.3.1",
-    "@types/i18next": "^12.1.0",
-    "@types/jest": "^29.4.0",
-    "@types/js-cookie": "^2.1.0",
-    "@types/lodash": "^4.14.134",
-    "@types/qs": "^6.9.7",
-    "@types/rc-slider": "^9.3.1",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-lazyload": "^2.5.0",
-    "@types/react-scroll": "^1.8.7",
-    "@types/react-select": "^3.0.2",
-    "@types/react-slick": "^0.23.4 ",
-    "@types/uuid": "^8.3.1",
-    "autoprefixer": "^9.6.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-minify-dead-code-elimination": "^0.5.0",
-    "babel-plugin-transform-imports": "^2.0.0",
-    "css-loader": "^3.2.0",
-    "jest-css-modules": "^2.1.0",
-    "jest-css-modules-transform": "^4.4.2",
-    "jest-dom": "^4.0.0",
-    "jest-environment-jsdom-sixteen": "^2.0.0",
-    "jest-junit": "^15.0.0",
-    "jest-stylus": "^0.1.2",
-    "jest-svg-transformer": "^1.0.0",
-    "jest-transform-stub": "^2.0.0",
-    "lodash": "^4.17.15",
-    "mobx": "4.6.0",
-    "mobx-react": "5.4.3",
-    "postcss-loader": "^3.0.0",
-    "qs": "6.5.1",
-    "re-resizable": "^6.0.0",
-    "react-checkbox-tree": "^1.5.1",
-    "react-circular-progressbar": "^2.0.4",
-    "storybook-addon-i18next": "^1.1.0",
-    "style-loader": "^1.0.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
-    "ts-jest": "^26.0.0",
-    "tslint": "^5.17.0",
-    "tslint-config-airbnb": "^5.11.1",
-    "tslint-loader": "^3.5.4",
-    "typescript": "^3.5.1",
-    "webpack-cli": "^3.3.6",
-    "husky": "^9.0.11"
-  },
-  "resolutions": {
-    "@types/react": "^16.8.3"
-  },
-  "scripts": {
-    "prepare": "husky",
-    "storybook": "start-storybook -p 6006",
-    "clean": "rm -rf ./dist/*.*",
-    "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",
-    "build:story": "build-storybook",
-    "test": "jest --watch",
-    "test:ci": "jest --config ./jest.config.js --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
-    "test:coverage": "yarn run test -- --coverage --watchAll=false || exit 0"
-  },
-  "author": "Maks Okhmatenko",
-  "license": "UNLICENSED"
-}

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>
-));