@bytebrand/fe-ui-core 4.8.52 → 4.8.54

package/source/components/InfoBlocks/InfoBlockWrapper.story.styl

@@ -1,46 +0,0 @@
-@import '../../theme/mixins.styl'
-
-.serviceBlockItemWrapper
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 50px;
-  +media-phone-only()
-    grid-template-columns: repeat(1, 1fr);
-    grid-gap: 0;
-
-.linkContainer
-  width: 100%
-  box-sizing border-box
-  background-color white
-  display block
-
-.itext
-  font-size: 14px
-  color:  $grey-54
-  line-height: 30px;
-  list-style: none;
-  margin 0;
-  padding: 0
-
-  +media-phone-only()
-    font-size: 12px
-    color: rgba(0, 0, 0, 0.63);
-    line-height: 14px;
-    text-align: justify;
-
-  & > li
-    position relative;
-    padding-left: 40px;
-
-    +media-phone-only()
-      margin-top: 10px
-
-    &::before
-      content: ''
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 24px;
-      height: 24px;
-      background-image: url('../../../media/svg/common/insurance.svg');

package/source/components/OfferPanel/AboAccordion/AboFaq/AboFaq.story.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-// import { aboFaq } from '../../../../framework/constants';
-import AboFaq from './AboFaq';
-
-
-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('Abo FAQ', module)
-  .add('default', () => (
-    <div>
-      <AboFaq />
-      {/* {aboFaq.map((item, index) =>
-        <span
-          className={styles.faqItem}
-          onClick={() => onShowFinancingDetailsClick('faqDetails', index)}
-          key={item}
-          >
-          {item}
-        </span>
-      )} */}
-    </div>
-  ));
-

package/source/components/OfferPanel/OfferPanel.story.js

@@ -1,139 +0,0 @@
-import React, { useReducer, useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-// Components
-import OfferPanel from './OfferPanel';
-
-const resizableProps = {
-  minWidth: 250,
-  defaultSize: { width: 320, height: 400 }
-};
-
-const slidersConfig = {
-  financing_purchasePrice: {
-    caption: 'Anzahlung und PKW-Ankauf',
-    min: 0, max: 1500, step: 100, unit: '€'
-  },
-  financing_firstInstallment: {
-    caption: 'Laufleistung / Jahr',
-    min: 0, max: 10000, step: 100, unit: 'km'
-  },
-  financing_annualMileage: {
-    caption: 'Laufleistung / Jahr',
-    min: 10000, max: 50000, step: 5000, unit: 'km'
-  },
-  financingPaybackPeriod: {
-    caption: 'duration',
-    min: 30, max: 60, step: 6, unit: 'months'
-  },
-  leasing_firstInstallment: {
-    caption: 'Laufleistung / Jahr',
-    min: 0, max: 10000, step: 100, unit: 'km'
-  },
-  leasing_annualMileage: {
-    caption: 'Laufleistung / Jahr',
-    min: 10000, max: 50000, step: 5000, unit: 'km'
-  },
-  leasingPaybackPeriod: {
-    caption: 'duration',
-    min: 30, max: 60, step: 6, unit: 'months'
-  },
-  abo_firstInstallment: {
-    caption: 'Laufleistung / Jahr',
-    min: 0, max: 10000, step: 100, unit: 'km'
-  },
-  abo_annualMileage: {
-    caption: 'Laufleistung / Jahr',
-    min: 10000, max: 50000, step: 5000, unit: 'km'
-  },
-  aboPaybackPeriod: {
-    caption: 'duration',
-    min: 30, max: 60, step: 6, unit: 'months'
-  }
-};
-
-const initialSlidersState = {
-  transportationCost: '499',
-  hasFinalInstallment: true,
-  purchasePrice: 1000,
-  firstInstallment: 2000,
-  paybackPeriod: 24,
-  finalAdvice: false,
-  transferInstallments: true,
-  additionalService: false,
-  finTransportation: '20.79',
-  finAddServices: '499',
-  // financingProps: {
-  priceTabIndex: 0,
-  // firstInstallment,
-  // annualMileage,
-  // paybackPeriod,
-  // priceTabIndex,
-  // finAddServices,
-  // finTransportation,
-  // finWithAddServices,
-  // finWithTransportation,
-  // withFinalInstallment,
-  // transportationCost: 499,
-  addServicesCost: 799,
-  buy: {
-    transportationCost: 499,
-    addServicesCost: 799
-  },
-  leasing: {
-    annualMileage: 25000,
-    firstInstallment: 3000,
-    paybackPeriod: 60,
-    transportationCost: 499,
-    addServicesCost: 799,
-    transferInstallments: false,
-    additionalService: true,
-  },
-  abo: {
-    annualMileage: 25000,
-    firstInstallment: 3000,
-    paybackPeriod: 9,
-    transportationCost: 499,
-    addServicesCost: 799,
-    transferInstallments: false,
-    additionalService: true,
-  }
-  // }
-};
-
-const reducer = (state, action) => ({ ...state, [action.type]: action.payload });
-
-const t = phrase => ({
-  'modals:financing.financingModel': 'Financing model',
-  'modals:financing.withFinalRate': 'with final rate',
-  'modals:financing.withoutFinalRate': 'without final rate',
-  'modals:financing.runningTime': 'Laufzeit',
-  'modals:financing.runningTimeSub': '(Monate)',
-  'modals:financing.finalAdvice': 'Mit Schlussrate',
-  'modals:financing.transferInstallments': 'Überführungskosten in Rate einberechnen',
-  'modals:financing.transferInstallmentsTooltip': 'Die Kosten für die Überführung Ihres Fahrzeugs wird in die zu zahlenden Raten mit einberechnet.',
-  'modals:financing.additionalServiceRate': 'Lieferung nach Hause',
-  'modals:financing.additionalServiceTooltip': 'The recurring costs for the transfer of your car will be calculated in the monthly rate.'
-}[phrase]);
-
-const OfferPanelWrapper = () => {
-  const [state, dispatch] = useReducer(reducer, initialSlidersState);
-  
-  
-  const props = {
-    t,
-    slidersConfig,
-    financingProps: state,
-    priceTabIndex: 3,
-    onChange: (value, name) => dispatch({ type: name, payload: value })
-  };
-  
-  return (
-    <Resizable {...resizableProps}>
-      <OfferPanel {...props} />
-    </Resizable>
-  );
-}
-
-storiesOf('OfferPanel', module)
-  .add('OfferPanel', () => <OfferPanelWrapper />);

package/source/components/OfferPanel/RangeGroup/RangeGroup.story.js

@@ -1,35 +0,0 @@
-import React, { useState } from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import RangeGroup from './RangeGroup';
-
-import styles from './RangeGroup.story.styl';
-
-const RangeGroupWrapper = () => {
-  const [value, setValue] = useState(300);
-
-  const onChange = (value) => {    
-    
-    setValue(value);
-    action('onChange');
-  };
-
-  const props = {
-    value,
-    onChange,
-    min: 0,
-    max: 10000,
-    step: 100,
-    onAfterChange: action('onAfterChange')
-  };
-
-  return (
-    <div className={styles.container}>
-      <RangeGroup {...props} />
-    </div>
-  );
-};
-
-storiesOf('_Common_UI', module)
-  .add('RangeGroup', () => <RangeGroupWrapper />);

package/source/components/OfferPanel/RangeGroup/RangeGroup.story.styl

@@ -1,3 +0,0 @@
-.container
-  width: 300px
-  height: 100px

package/source/components/PriceRating/PriceRating.story.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import PriceRating from './PriceRating';
-
-import styles from './PriceRating.story.styl';
-
-const t = (phrase) => {
-  const dict = {
-    noRating: 'No rating',
-    highPrice: 'High price',
-    increasedPrice: 'Increased price',
-    fairPrice: 'Fair price',
-    goodPrice: 'Good price',
-    topPrice: 'Top price'
-  };
-
-  return dict[phrase];
-}
-
-const props = {
-  t,
-  className: styles.item,
-  onClick: action('click')
-};
-
-storiesOf('Price review', module)
-  .add('PriceRating', () => (
-    <div>
-      <PriceRating className={styles.item} t={t} />
-      <PriceRating { ...props } darkBackground={true} />
-      <PriceRating { ...props } rating={1} />
-      <PriceRating { ...props } rating={2} />
-      <PriceRating { ...props } rating={3} />
-      <PriceRating { ...props } rating={4} />
-      <PriceRating { ...props } rating={5} />
-    </div>
-  ));

package/source/components/PriceRating/PriceRating.story.styl

@@ -1,2 +0,0 @@
-.item
-  margin-bottom: 10px

package/source/components/PriceRatingDetailed/PriceRatingDetailed.story.js

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-
-import PriceRatingDetailed from './PriceRatingDetailed';
-import { getPriceRatingConfig, getPriceRating } from '../../framework/utils/CommonUtils';
-
-import styles from './PriceRatingDetailed.story.styl';
-
-const resizableProps = {
-  minWidth: 150,
-  defaultSize: { width: 550, height: 500 }
-};
-
-const t = (phrase) => {
-  const dict = {
-    noRating: 'No rating',
-    highPrice: 'High',
-    increasedPrice: 'Increased price',
-    fairPrice: 'Fair price',
-    goodPrice: 'Good price',
-    topPrice: 'Top price',
-
-    noRatingCompact: 'No rating',
-    highPriceCompact: 'High',
-    increasedPriceCompact: 'Increased',
-    fairPriceCompact: 'Fair',
-    goodPriceCompact: 'Good',
-    topPriceCompact: 'Top',
-
-    priceTo: 'to'
-  };
-
-  return dict[phrase];
-}
-
-const Wrapper = () => {
-  const [currentSalesPrice, changeCurrentSalesPrice] = useState(9000);
-  const [predictablePrice, changePredictablePrice] = useState(12000);
-
-  const priceProps = {
-    t,
-    className: styles.item,
-    price: +currentSalesPrice,
-    ratingConfig: getPriceRatingConfig(+currentSalesPrice, +predictablePrice),
-    rating: getPriceRating(+currentSalesPrice, +predictablePrice)
-  };
-
-  return (
-    <div>
-      <div className={styles.dropdownSection}>
-        <label>
-          <h3>Current Sails Price:</h3>
-          <input
-            type="number"
-            value={currentSalesPrice}
-            onChange={(event) => changeCurrentSalesPrice(event.target.value)}
-          />
-        </label>
-        <label>
-          <h3>Predictable Price:</h3>
-          <input
-            type="number"
-            value={predictablePrice}
-            onChange={(event) => changePredictablePrice(event.target.value)}
-          />
-        </label>
-      </div>
-      <Resizable {...resizableProps}>
-        <PriceRatingDetailed {...priceProps} mode={'general'} />
-        <PriceRatingDetailed {...priceProps} mode={'compact'} />
-      </Resizable>
-    </div>
-  );
-};
-
-storiesOf('Price review', module)
-  .add('PriceRatingDetailed', () => <Wrapper />);

package/source/components/PriceRatingDetailed/PriceRatingDetailed.story.styl

@@ -1,11 +0,0 @@
-.item
-  margin-bottom: 70px
-
-.dropdownSection
-  display: flex
-  margin-bottom: 50px
-  &>label
-    flex: 1
-    padding: 0 5px
-    &>input
-      width: 100%

package/source/components/RateSearchValue/RateSearchValue.story.js

@@ -1,78 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import RateSearchValue from './RateSearchValue';
-
-import styles from './RateSearchValue.story.styl';
-
-const t = (phrase, options = {}) => {
-  const { value } = options;
-  const dictionary = {
-    monthlyInstallmentLabel: 'Monatsrate:',
-    monthlyInstallmentFromValue: `ab ${value} €`,
-    monthlyInstallmentToValue: `bis ${value} €`,
-    paybackPeriodValue: `${value} Monate`,
-    firstInstallmentValue: `${value} € Anzahlung`,
-    defaultValue: 'beliebig, 60 Monate'
-  };
-
-  return dictionary[phrase];
-};
-
-const RateSearchWidgetWrapper = () => {
-
-  const propsWithLabel = {
-    t,
-    className: styles.item,
-    monthlyInstallmentFrom: 1000,
-    monthlyInstallmentTo: 1500,
-    firstInstallment: 3000,
-    paybackPeriod: 60,
-    onClick: action('click'),
-  };
-
-  const propsWithoutLabel = {
-    t,
-    className: styles.item,
-    showLabel: false,
-    monthlyInstallmentFrom: 1000,
-    monthlyInstallmentTo: 1500,
-    firstInstallment: 3000,
-    paybackPeriod: 60,
-    onClick: action('click'),
-  };
-
-
-  const props_1 = {
-    t,
-    className: styles.item,
-    monthlyInstallmentFrom: null,
-    monthlyInstallmentTo: 'any',
-    firstInstallment: null,
-    paybackPeriod: null,
-    onClick: action('click')
-  };
-
-  const props_2 = {
-    t,
-    className: styles.item,
-    monthlyInstallmentFrom: 1000,
-    firstInstallment: '0',
-    paybackPeriod: 60,
-    onClick: action('click')
-  };
-
-  return (
-    <div>
-      <RateSearchValue {...propsWithLabel} />
-      <RateSearchValue {...propsWithoutLabel} />
-      <RateSearchValue {...props_1} />
-      <RateSearchValue {...props_2} />
-    </div>
-  );
-};
-
-storiesOf('RateSearchValue', module)
-  .add('RateSearchValue', () => <RateSearchWidgetWrapper />);

package/source/components/RateSearchValue/RateSearchValue.story.styl

@@ -1,2 +0,0 @@
-.item
-  margin: 10px

package/source/components/RateSearchWidget/RateSearchWidget.story.js

@@ -1,57 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import RateSearchWidget from './RateSearchWidget';
-
-import styles from './RateSearchWidget.story.styl';
-
-const t = (phrase) => {
-  const dictionary = {
-    title: 'Adjust rate details',
-    months: 'Months',
-    monthlyInstallment: 'Monthly rate (€)',
-    monthlyInstallmentFrom: 'Monthly rate from (€)',
-    monthlyInstallmentTo: 'Monthly rate up to (€)',
-    firstInstallment: 'Deposit',
-    paybackPeriod: 'Running time',
-    any: 'any',
-
-    firstInstallmentPlaceholder: 'Deposit',
-    monthlyInstallmentFromPlaceholder: 'Rate from',
-    monthlyInstallmentToPlaceholder: 'Rate to',
-    paybackPeriodPlaceholder: 'Period',
-
-    apply: 'Apply',
-    abort: 'abort'
-  };
-
-  return dictionary[phrase];
-};
-
-const RateSearchWidgetWrapper = () => {
-
-  const props = {
-    t,
-    className: styles.item,
-
-    monthlyInstallmentFrom: 'any',
-    monthlyInstallmentTo: 'any',
-    firstInstallment: 0,
-    paybackPeriod: 60,
-
-    onAbort: action('abort'),
-    onApply: action('apply')
-  };
-
-  return (
-    <div className={styles.wrapper}>
-      <RateSearchWidget {...props} simpleMode={true} className={styles.accentClassName} />
-      <RateSearchWidget {...props} simpleMode={false} />
-    </div>
-  );
-};
-
-storiesOf('RateSearchWidget', module)
-  .add('RateSearchWidget', () => <RateSearchWidgetWrapper />);

package/source/components/RateSearchWidget/RateSearchWidget.story.styl

@@ -1,12 +0,0 @@
-@import '../../theme/theme.styl';
-
-.wrapper
-  display: flex
-  align-items: flex-start
-
-.item
-  max-width: 280px
-  margin: 10px
-
-.accentClassName
-  background-color: $grey-f2