@bytebrand/fe-ui-core 4.8.26 → 4.8.27

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

@@ -1,139 +1,139 @@
-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 />);
+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/OfferPanel.styl

@@ -1,194 +1,194 @@
-@import '../../theme/mixins.styl'
-
-.OfferPanel
-  font-family: $font-style-arial
-  font-size: 14px
-  width: 100%;
-  background-color: #fff;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-column: span 2
-  grid-template-areas:
-    'financingCheckboxWrapper financingCheckboxWrapper financingCheckboxWrapper financingCheckboxWrapper'\
-    'rangeGroupWrapper rangeGroupWrapper rangeGroupWrapper rangeGroupWrapper'\
-    'offerPeriodWrapper offerPeriodWrapper offerPeriodWrapper offerPeriodWrapper'\
-    'aboAccordionWrapper aboAccordionWrapper aboAccordionWrapper aboAccordionWrapper'\
-    'offerCheckboxGroup offerCheckboxGroup offerCheckboxGroup offerCheckboxGroup'\
-
-
-
-.financingCheckboxWrapper
-  grid-area: financingCheckboxWrapper
-  margin-top:  20px
-  [class*='container']
-    width: 100%
-  [class*='MuiCheckbox-root']
-    padding: 0
-
-.rangeGroupWrapper
-  grid-area: rangeGroupWrapper
-
-.offerPeriodWrapper
-  grid-area: offerPeriodWrapper
-
-.aboAccordionWrapper
-  grid-area: aboAccordionWrapper
-
-.offerCheckboxGroup
-  grid-area: offerCheckboxGroup
-  margin-top: 20px
-
-.header
-  font-size: 14px
-  color: $grey-3;
-  font-weight normal;
-  margin: 0 0 15px 0;
-
-.sliderValues
-  .header
-    color: #000000d4
-
-.headerSub
-  font-size: 10px
-  font-weight: normal
-  margin-left: 5px
-
-.headerPeriod
-  @extends .header
-  margin-top: 20px;
-  margin-bottom: 12px;
-  color: #000000d4
-
-.radioButton
-  width: 10px
-  height: 10px
-  border: 1px solid $grey-d
-  border-radius: 50%
-  background-color: white
-  margin-right: 5px
-  position: relative
-  flex-shrink: 0
-  display: flex
-
-.sliderValues
-  display: flex
-  justify-content: space-between
-  font-size: 12px
-  color: $primary
-  margin-top: 8px;
-  font-weight: bold;
-  margin-top: 20px
-
-.sliderValue
-  font-size: 12px
-  color: $primary;
-  font-weight: bold;
-
-.duration
-  display: flex
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px $grey-f5
-
-  [class*='MuiToggleButtonGroup-root']
-    width: 100%
-
-  label
-    flex: 1
-    font-size: 14px
-    cursor: pointer
-    border-right: none
-    user-select: none
-    text-align: center
-    position: relative
-    min-height: 40px
-    & + label
-      box-shadow: inset 1px 0 0 0 $grey-f5
-    &:before
-      content: ""
-      display: block
-      padding-top: 72%
-    &.checked
-      color: white
-      background-color: $primary
-      font-weight: bold
-      box-shadow: inset 0 0 0 1px $primary
-    &.disabled
-      background-color: $grey-d
-      border-color: $grey-d
-      color: $grey-7
-      cursor: not-allowed
-    & span
-      position: absolute
-      left: 0
-      right: 0
-      top: 0
-      bottom: 0
-      display: flex
-      justify-content: center
-      align-items: center
-    &.alternativeChecked
-      background-color: $alternative
-      box-shadow: inset 0 0 0 1px $alternative
-
-.visuallyHidden
-  position: absolute
-  width: 1px
-  heigth: 1px
-  overflow: hidden
-  clip: rect(0 0 0 0)
-
-.range
-  margin: 0 10px
-
-.checkboxContainer
-  display: block;
-  &:focus
-    outline: 0;
-
-.labelText
-  color: $grey-3;
-
-.checkboxSquare
-  border-color: $primary;
-  border-radius: 2px;
-
-  +media-phone-up()
-    width: 20px;
-    height: 20px;
-    border-radius: 2px;
-    border-color: $primary;
-    svg
-      width: 19px !important;
-  
-.checkboxWrapped
-  [class*='container'] + [class*='container']
-    margin-top: 10px;
-  [class*='MuiFormControlLabel-root']
-    height: 20px
-    min-height: 0
-    margin-left:0
-  .labelText
-    font-size: 12px;
-    font-weight: normal;
-
-  [class*='labelContent']
-    font-size: 12px
-
-
-.checkBoxGroup
-  [class*='container']
-    width: 100%
-
-.periods
-  display: grid
-  grid-auto-columns: auto
-
-.financingCheckboxWrapper
-  [class*='MuiFormControlLabel-root']
-    margin: 0
-    justify-content: space-between
-    width: 100%
-
-[class*='MuiIconButton-root']
+@import '../../theme/mixins.styl'
+
+.OfferPanel
+  font-family: $font-style-arial
+  font-size: 14px
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column: span 2
+  grid-template-areas:
+    'financingCheckboxWrapper financingCheckboxWrapper financingCheckboxWrapper financingCheckboxWrapper'\
+    'rangeGroupWrapper rangeGroupWrapper rangeGroupWrapper rangeGroupWrapper'\
+    'offerPeriodWrapper offerPeriodWrapper offerPeriodWrapper offerPeriodWrapper'\
+    'aboAccordionWrapper aboAccordionWrapper aboAccordionWrapper aboAccordionWrapper'\
+    'offerCheckboxGroup offerCheckboxGroup offerCheckboxGroup offerCheckboxGroup'\
+
+
+
+.financingCheckboxWrapper
+  grid-area: financingCheckboxWrapper
+  margin-top:  20px
+  [class*='container']
+    width: 100%
+  [class*='MuiCheckbox-root']
+    padding: 0
+
+.rangeGroupWrapper
+  grid-area: rangeGroupWrapper
+
+.offerPeriodWrapper
+  grid-area: offerPeriodWrapper
+
+.aboAccordionWrapper
+  grid-area: aboAccordionWrapper
+
+.offerCheckboxGroup
+  grid-area: offerCheckboxGroup
+  margin-top: 20px
+
+.header
+  font-size: 14px
+  color: $grey-3;
+  font-weight normal;
+  margin: 0 0 15px 0;
+
+.sliderValues
+  .header
+    color: #000000d4
+
+.headerSub
+  font-size: 10px
+  font-weight: normal
+  margin-left: 5px
+
+.headerPeriod
+  @extends .header
+  margin-top: 20px;
+  margin-bottom: 12px;
+  color: #000000d4
+
+.radioButton
+  width: 10px
+  height: 10px
+  border: 1px solid $grey-d
+  border-radius: 50%
+  background-color: white
+  margin-right: 5px
+  position: relative
+  flex-shrink: 0
+  display: flex
+
+.sliderValues
+  display: flex
+  justify-content: space-between
+  font-size: 12px
+  color: $primary
+  margin-top: 8px;
+  font-weight: bold;
+  margin-top: 20px
+
+.sliderValue
+  font-size: 12px
+  color: $primary;
+  font-weight: bold;
+
+.duration
+  display: flex
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px $grey-f5
+
+  [class*='MuiToggleButtonGroup-root']
+    width: 100%
+
+  label
+    flex: 1
+    font-size: 14px
+    cursor: pointer
+    border-right: none
+    user-select: none
+    text-align: center
+    position: relative
+    min-height: 40px
+    & + label
+      box-shadow: inset 1px 0 0 0 $grey-f5
+    &:before
+      content: ""
+      display: block
+      padding-top: 72%
+    &.checked
+      color: white
+      background-color: $primary
+      font-weight: bold
+      box-shadow: inset 0 0 0 1px $primary
+    &.disabled
+      background-color: $grey-d
+      border-color: $grey-d
+      color: $grey-7
+      cursor: not-allowed
+    & span
+      position: absolute
+      left: 0
+      right: 0
+      top: 0
+      bottom: 0
+      display: flex
+      justify-content: center
+      align-items: center
+    &.alternativeChecked
+      background-color: $alternative
+      box-shadow: inset 0 0 0 1px $alternative
+
+.visuallyHidden
+  position: absolute
+  width: 1px
+  heigth: 1px
+  overflow: hidden
+  clip: rect(0 0 0 0)
+
+.range
+  margin: 0 10px
+
+.checkboxContainer
+  display: block;
+  &:focus
+    outline: 0;
+
+.labelText
+  color: $grey-3;
+
+.checkboxSquare
+  border-color: $primary;
+  border-radius: 2px;
+
+  +media-phone-up()
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    border-color: $primary;
+    svg
+      width: 19px !important;
+  
+.checkboxWrapped
+  [class*='container'] + [class*='container']
+    margin-top: 10px;
+  [class*='MuiFormControlLabel-root']
+    height: 20px
+    min-height: 0
+    margin-left:0
+  .labelText
+    font-size: 12px;
+    font-weight: normal;
+
+  [class*='labelContent']
+    font-size: 12px
+
+
+.checkBoxGroup
+  [class*='container']
+    width: 100%
+
+.periods
+  display: grid
+  grid-auto-columns: auto
+
+.financingCheckboxWrapper
+  [class*='MuiFormControlLabel-root']
+    margin: 0
+    justify-content: space-between
+    width: 100%
+
+[class*='MuiIconButton-root']
   padding:5px!important