@bytebrand/fe-ui-core 4.8.109 → 4.8.111

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

package/source/components/CompactSearchWidget/CompactSearchWidget.story.js

@@ -1,187 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-// Components
-import CompactSearchWidget from './CompactSearchWidget';
-
-// utils
-import { getRequestOptions } from '../../framework/utils/RequestUtils';
-import { buildBodyForRequest, buildQueryForSearch, changeLocation } from '../../framework/utils/CommonUtils';
-import { transformManufacturers, transformModelsGeneral } from '../../framework/DataTransformers';
-import { MANUFACTURER, MODEL, THROTTLE_DELAY, RATE_DEFAULT } from '../../framework/constants/SearchWidget';
-import { BODY_TYPES } from '../../framework/constants/selectors';
-
-const containerStyles = {
-  position: 'relative',
-  width: '600px',
-  height: '550px',
-  backgroundImage: 'url("https://dev.autode-static.de/wp-content/uploads/2019/02/startseite_br_tor_AXEL.png")'
-};
-
-const widget = {
-  position: 'absolute',
-  top: '5%',
-  left: '50%',
-  transform: 'translateX(-50%)',
-  padding: '15px'
-};
-
-const getCarsCounterUrl = 'https://www.autode-dev.de/service/car-search-endpoint/api/v1/count/car';
-const getManufacturersUrl = 'https://www.autode-dev.de/service/car-makemodel-mapping/api/v1/information/makers';
-const getModelsUrl = 'https://www.autode-dev.de/service/car-makemodel-mapping/api/v1/information/models?maker=';
-
-let timeout = null;
-
-class CompactWidgetContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      counter: 0,
-      counterLoading: false,
-      manufacturers: [],
-      models: [],
-      bodyTypes: [],
-      filters: {
-        MANUFACTURER: '',
-        MODEL: '',
-        BODY_TYPE: [],
-        FIRST_REGISTRATION: '',
-        MILEAGE: '',
-        PRICE: { from: '', to: '' },
-        RATE: RATE_DEFAULT
-      }
-    };
-  }
-
-  componentDidMount() {
-    this.getCarsCounter();
-    this.getManufacturers();
-  }
-
-  componentWillUnmount() {
-    timeout = null;
-  }
-
-  onFilterChange = (value, name) => {
-    if (!name) return false;
-    const newState = Object.assign({}, this.state);
-    newState.filters[name] = value;
-
-    if (name === MANUFACTURER) {
-      newState.filters[MODEL] = '';
-      this.getModels(value.value);
-    }
-
-    this.setState(() => (newState), () => {
-      clearTimeout(timeout);
-      timeout = setTimeout(this.getCarsCounter, THROTTLE_DELAY);
-    });
-  };
-
-  onSearchButtonClick = () => {
-    const { filters } = this.state;
-    const query = buildQueryForSearch(filters);
-    const resolvePrefix = query ? `search?${query}` : 'search';
-    this.onChangeLocation(resolvePrefix);
-  };
-
-  onChangeLocation = (path) =>
-    changeLocation(path);
-
-  onBrandPanelClick = () => {
-    console.log(this.state.filters[MANUFACTURER]);
-  };
-
-  getManufacturers = () =>
-    fetch(getManufacturersUrl, getRequestOptions('get'))
-      .then((res) => res.json())
-      .then((res) => {
-        const manufacturers = transformManufacturers(res.data);
-        this.updateManufacturersList(manufacturers);
-      })
-      .catch((error) => {
-        throw error;
-      });
-
-  getModels = (maker) =>
-    fetch(`${getModelsUrl}${maker}`, getRequestOptions('get'))
-      .then((res) => res.json())
-      .then((res) => {
-        const models = transformModelsGeneral(res.data);
-        this.setState(() => ({
-          models
-        }));
-      })
-      .catch((error) => {
-        throw error;
-      });
-
-  getCarsCounter = () => {
-    const { filters } = this.state;
-    const data = buildBodyForRequest(filters);
-    const obj = getRequestOptions('post', data);
-    this.setState(() => ({ counterLoading: true }));
-
-    fetch(getCarsCounterUrl, obj)
-      .then((res) => res.json())
-      .then((res) => {
-        this.updateCarCounter(res.count);
-        this.setState(() => ({ counterLoading: false }));
-      })
-      .catch((error) => {
-        this.setState(() => ({ counterLoading: false }));
-        throw error;
-      });
-  };
-
-  updateManufacturersList = (manufacturers) =>
-    this.setState(() => ({
-      manufacturers
-    }));
-
-  updateCarCounter = (counter) =>
-    this.setState(() => ({
-      counter,
-      counterLoading: false
-    }));
-
-  render() {
-    const { counter, counterLoading, manufacturers, models, filters } = this.state;
-    const query = buildQueryForSearch(filters);
-
-    const searchWidgetProps = {
-      counter,
-      counterLoading,
-      manufacturers,
-      models,
-      bodyTypes: BODY_TYPES,
-      filters,
-      contrastMode: true,
-      onFilterChange: this.onFilterChange,
-      rateWidgetModalSizes: ['xs', 'sm', 'md', 'lg'],
-      searchButtonLink: `search?${query}`,
-      detailedSearchLink: `search/detailed?${query}`,
-      onDetailedSearchClick: () => console.log('detailed'),
-      onBrandPanelClick: this.onBrandPanelClick
-    };
-
-    return (
-      <div>
-        <CompactSearchWidget {...searchWidgetProps} />
-      </div>
-    )
-  }
-}
-
-// For testing with api you need run storybook with custom port and host
-// to prevent CORS issues for carCounter and manufacturer list requests:
-// yarn storybook -p 8080 -h local.autode-dev.de
-storiesOf('CompactSearchWidget', module)
-  .add('default', () => (
-    <div style={containerStyles}>
-      <div style={widget}>
-        <CompactWidgetContainer />
-      </div>
-    </div>
-  ));

package/source/components/ContactForm/ContactForm.story.js

@@ -1,94 +0,0 @@
-import React, { useState } from 'react';
-import ContactForm from "./ContactForm";
-import { storiesOf } from "@storybook/react";
-import styles from './ContactForm.story.styl';
-
-const ContactFormContainer = () => {
-
-    const [contactFormValues, setContactFormValues] = useState({
-        firstName: {
-            value: 'firstname',
-            type: 'text',
-            hasError: 'true',
-            error: 'this field is required',
-            name: 'firstName'
-          },
-          lastName: {
-            value: 'lastName',
-            type: 'text',
-            hasError: 'true',
-            error: 'this field is required',
-            name: 'lastName'
-          },
-          email: {
-            value: 'email',
-            type: 'text',
-            hasError: 'true',
-            error: 'this field is required',
-            name: 'email'
-          },
-          countryCode: {
-            value: 'countryCode',
-            type: 'text',
-            hasError: 'true',
-            error: 'this field is required',
-            name: 'countryCode',
-            extra: [10, 20, 30]
-          },
-          areaCode: {
-            value: 'areaCode',
-            type: 'text',
-            hasError: 'true',
-            error: 'this field is required',
-            name: 'areaCode'
-          },
-          phoneNumber: {
-            value: 'phoneNumber',
-            type: 'text',
-            hasError: 'true',
-            error: 'this field is required',
-            name: 'phoneNumber'
-          },
-          message: {
-            value: 'message',
-            type: 'text',
-            hasError: 'true',
-            error: 'this field is required',
-            name: 'message',
-            placeHolder: 'placeHolder'
-          },
-          checkBox: {
-            error: null,
-            hasError: true,
-            name: 'terms',
-            placeHolder: '',
-            type: 'checkbox',
-            value: false,
-            bind: () => {}
-          },
-          formIsValid: true
-    })
-
-    const config = {
-        recaptchaSiteKey: '6LdunNEaAAAAAB1DazkKJFN2CbCT7YbMfUZ80R6C'
-    }
-  
-    const contactFormProps = {
-        t: () => {},
-        carStore: {
-            formStatus: 'done'
-        },
-        contactFormValues,
-        config
-    }
-    return (
-        <ContactForm { ...contactFormProps }/>
-    )
-}
-
-storiesOf('ContactForm', module)
-  .add('ContactForm', () => (
-    <>
-      <ContactFormContainer/>
-    </>
-  ));

package/source/components/ContactInfo/ContactInfo.story.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import { Container, Row, Col } from 'react-grid-system';
-
-import ContactInfo from './ContactInfo';
-
-const colStyle = {
-  outline: 'silver solid 1px'
-};
-
-const props = {
-  t: key => key,
-
-  title: 1,
-  gender: 2,
-  street: 'Musterstraße',
-  number: '14',
-  streetAddition: 'A',
-  city: 'Musterstadt',
-  zip: '01234',
-  countryName: 'Deutschland',
-  firstName: 'Peter',
-  lastName: 'Mustermann',
-  company: 'Company',
-  email: 'email@email.com',
-
-  phoneMain: '(+49) 123 456789',
-  phoneMobile: '(+49) 341 456789',
-
-  ustIdNr: '122134',
-
-  website: 'www.mustermann.ag',
-};
-
-storiesOf('ContactInfo', module)
-  .add('default', () => (
-    <div style={{ width: 992 }}>
-      <Container fluid>
-        <Row>
-          <Col sm={6} style={colStyle}>
-            <ContactInfo {...props}/>
-          </Col>
-          <Col sm={6} style={colStyle}>
-            <ContactInfo {...props} company={undefined} phoneMain={undefined}/>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={6} style={colStyle}>
-            <ContactInfo {...props} ustIdNr={undefined} website={undefined} company={undefined}/>
-          </Col>
-          <Col sm={6} style={colStyle}>
-            <ContactInfo {...props} phones={undefined} streetAddress={undefined}/>
-          </Col>
-        </Row>
-      </Container>
-    </div>
-  ));

package/source/components/CustomerQuote/CustomerQuote.story.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-// import { action } from '@storybook/addon-actions';
-
-import CustomerQuote from './CustomerQuote';
-
-const vertical = {
-  margin: '10px 0',
-  width: '220px',
-  backgroundColor: 'white'
-};
-
-const horizontal = {
-  width: '375px',
-  backgroundColor: 'white'
-};
-
-const verticalProps = {
-  image: 'http://placekitten.com/200/200',
-  name: 'First Last',
-  source: 'Kundenbewertung via Google',
-  review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem. Consequuntur distinctio facilis minus necessitatibus possimus quisquam!'
-};
-
-const horizontalProps = {
-  ...verticalProps,
-  isHorizontal: true
-};
-
-storiesOf('CustomerQuote', module)
-  .add('CustomerQuote', () => (
-    <div>
-      <div style={vertical}>
-        <CustomerQuote {...verticalProps} />
-      </div>
-
-      <div style={horizontal}>
-        <CustomerQuote {...horizontalProps} />
-      </div>
-    </div>
-  ));

package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import styles from './CustomerQuotesSlider.story.styl';
-import CustomerQuotesSlider from './CustomerQuotesSlider';
-
-const quotes = [
-  {
-    id: Date.now().toString(),
-    image: 'http://placekitten.com/200/200',
-    name: 'First Last',
-    source: 'Kundenbewertung via Google',
-    review: '“BRückfragen wurden innerhalb kurzer Zeit telefonisch oder per Mail'
-  },
-  {
-    id: Date.now().toString(),
-    image: 'http://placekitten.com/200/200',
-    name: 'Klaus Andres',
-    source: 'Google Kundenbevertung',
-    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
-  },
-  {
-    id: Date.now().toString(),
-    image: 'http://placekitten.com/200/200',
-    name: 'First Last',
-    source: 'Kundenbewertung via Google',
-    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
-  },
-  {
-    id: Date.now().toString(),
-    image: 'http://placekitten.com/200/200',
-    name: 'First Last',
-    source: 'Kundenbewertung via Google',
-    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
-  },
-  {
-    id: Date.now().toString(),
-    image: 'http://placekitten.com/200/200',
-    name: 'First Last',
-    source: 'Kundenbewertung via Google',
-    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
-  },
-  {
-    id: Date.now().toString(),
-    image: 'http://placekitten.com/200/200',
-    name: 'First Last',
-    source: 'Kundenbewertung via Google',
-    review: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, aperiam autem, culpa doloribus eum nesciunt nihil nulla officia quo ratione velit, vitae voluptatem.'
-  }
-];
-
-const props = {
-  quotes,
-  className: styles.multiContainer,
-};
-
-const singleQuote = {
-  quotes,
-  className: styles.singleContainer,
-  slidesToShow: 1
-};
-
-storiesOf('CustomerQuotesSlider', module)
-  .add('CustomerQuotesSlider', () => (
-    <>
-      <div style={{ width: '100%', maxWidth: '716px', backgroundColor: 'white' }}>
-        <CustomerQuotesSlider {...props} />
-      </div>
-
-      <div style={{ width: '100%', maxWidth: '380px', marginTop: '50px', backgroundColor: 'white' }}>
-        <CustomerQuotesSlider {...singleQuote} />
-      </div>
-    </>
-  ));

package/source/components/CustomerQuotesSlider/CustomerQuotesSlider.story.styl

@@ -1,5 +0,0 @@
-.singleContainer
-  padding: 12px 32px;
-
-.multiContainer
-  padding: 15px 25px;

package/source/components/FormattedNumber/FormattedNumber.story.js

@@ -1,114 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import FormattedNumber from './FormattedNumber';
-
-const container = {
-  textAlign: 'left'
-};
-
-const item = {
-  margin: '5px 0',
-  width: '500px',
-  display: 'flex',
-  justifyContent: 'space-between'
-};
-
-const numbers = {
-  display: 'inline-flex',
-  flexDirection: 'row'
-};
-
-const simpleStories = [
-  {
-    title: 'simple number, rounded',
-    props: {
-      value: 33.25
-    }
-  },
-  {
-    title: 'simple number, formatted, not rounded (small)',
-    props: {
-      value: 33.25,
-      toRound: false
-    }
-  },
-  {
-    title: 'simple number, formatted, not rounded (big)',
-    props: {
-      value: 55476.36,
-      toRound: false
-    }
-  },
-  {
-    title: 'simple number',
-    props: {
-      value: 123
-    }
-  },
-  {
-    title: 'fixed after two digits',
-    props: {
-      value: 325.54
-    }
-  },
-  {
-    title: 'big number, formatted',
-    props: {
-      value: 65800000
-    }
-  }
-];
-
-const specialCases = [
-  {
-    title: 'without props',
-    props: {}
-  },
-  {
-    title: 'return original but formatted',
-    props: {
-      value: 3.99,
-      numbersAfterDot: 2,
-      toRound: false
-    }
-  },
-  {
-    title: 'return original number',
-    props: {
-      value: 325.59,
-      disableFormatting: true
-    }
-  }
-];
-
-storiesOf('Formatted Number', module)
-  .add('default', () => (
-    <div style={container}>
-      <div>
-        <h4>Simple cases</h4>
-        {simpleStories.map(({ title, props }, index) => (
-          <div style={item} key={index}>
-            <span>{title}</span>
-            <div style={numbers}>
-              <i>{props.value}&nbsp;>>>&nbsp;</i>
-              <FormattedNumber { ...props } />
-            </div>
-          </div>
-        ))}
-      </div>
-      <div>
-        <h4>Special cases</h4>
-        {specialCases.map(({ title, props }, index) => (
-          <div style={item} key={index}>
-            <span>{title}</span>
-            <div style={numbers}>
-              <i>{props.value}&nbsp;>>>&nbsp;</i>
-              <FormattedNumber { ...props } />
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  ));
-