@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/OfferPanel/OfferPanel.styl

@@ -1,194 +1,194 @@
-@import '../legacy-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 '../legacy-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

package/compat/OfferPanel/OfferPanel.tsx

@@ -1,81 +1,81 @@
-import React, { FC } from 'react';
-import classNames from 'classnames';
-import styles from './OfferPanel.styl';
-import { THREE } from '../../constants/core';
-import RangeGroup, { IRangeGroup } from './RangeGroup/RangeGroup';
-import { IOfferPeriod } from './OfferPeriod/OfferPeriod';
-import MuiOfferPeriod from './MuiOfferPeriod/MuiOfferPeriod';
-import OfferCheckboxGroup from './OfferCheckboxGroup/OfferCheckboxGroup';
-import AboAccordion, { IAboAccordion } from './AboAccordion/AboAccordion';
-import CheckboxMaterial from '../MdCheckbox/MdCheckbox';
-interface IFinalAdvice {
-  checked: boolean;
-  label: string;
-  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
-  reversed?: boolean;
-  value: string;
-}
-
-interface IFinancingPanel {
-  priceTabIndex: number;
-  aboCenterPanel?: boolean;
-  isMobileOnly?: boolean;
-  isOfferDetailedTabs?: boolean;
-  isOfferDetailsAbo?: boolean;
-  isOpeningAboModal?: boolean;
-  className?: string;
-  t?: (phrase: string, config?: any) => string;
-  onChange: (key: string, value: boolean|number) => void;
-  onAboFaqClick?: (index: number) => void;
-  checkoutClassName?: string;
-  finalAdvice: IFinalAdvice;
-  additionalService: boolean;
-  transferInstallments: boolean;
-  aboAccordionProps: IAboAccordion;
-  rangeGroupProps: IRangeGroup;
-  offerPeriodProps: IOfferPeriod;
-}
-
-const OfferPanel: FC<IFinancingPanel> = ({
-  priceTabIndex,
-  isOfferDetailsAbo,
-  finalAdvice,
-  additionalService,
-  transferInstallments,
-  rangeGroupProps,
-  offerPeriodProps,
-  // aboAccordionProps,
-  className
-}) => {
-  return (
-    <form className={classNames(styles.OfferPanel, className)}>
-      {priceTabIndex === THREE && isOfferDetailsAbo
-        ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
-        : <>
-          {!priceTabIndex &&
-            <div className={styles.financingCheckboxWrapper}>
-              <CheckboxMaterial { ...finalAdvice } />
-            </div>
-          }
-          {priceTabIndex !== 2 &&
-            <div className={styles.rangeGroupWrapper}>
-              <RangeGroup {...rangeGroupProps} />
-            </div>
-          }
-
-          {priceTabIndex !== 2 &&
-            <div className={styles.offerPeriodWrapper}>
-              <MuiOfferPeriod {...offerPeriodProps} />
-            </div>
-          }
-
-          {priceTabIndex === THREE
-            ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
-            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService, priceTabIndex }} /></div>}
-        </>
-      }
-    </form>
-  );
-};
-
-export default OfferPanel;
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import styles from './OfferPanel.styl';
+import { THREE } from '../../constants/core';
+import RangeGroup, { IRangeGroup } from './RangeGroup/RangeGroup';
+import { IOfferPeriod } from './OfferPeriod/OfferPeriod';
+import MuiOfferPeriod from './MuiOfferPeriod/MuiOfferPeriod';
+import OfferCheckboxGroup from './OfferCheckboxGroup/OfferCheckboxGroup';
+import AboAccordion, { IAboAccordion } from './AboAccordion/AboAccordion';
+import CheckboxMaterial from '../MdCheckbox/MdCheckbox';
+interface IFinalAdvice {
+  checked: boolean;
+  label: string;
+  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string,  value?: any) => void;
+  reversed?: boolean;
+  value: string;
+}
+
+interface IFinancingPanel {
+  priceTabIndex: number;
+  aboCenterPanel?: boolean;
+  isMobileOnly?: boolean;
+  isOfferDetailedTabs?: boolean;
+  isOfferDetailsAbo?: boolean;
+  isOpeningAboModal?: boolean;
+  className?: string;
+  t?: (phrase: string, config?: any) => string;
+  onChange: (key: string, value: boolean|number) => void;
+  onAboFaqClick?: (index: number) => void;
+  checkoutClassName?: string;
+  finalAdvice: IFinalAdvice;
+  additionalService: boolean;
+  transferInstallments: boolean;
+  aboAccordionProps: IAboAccordion;
+  rangeGroupProps: IRangeGroup;
+  offerPeriodProps: IOfferPeriod;
+}
+
+const OfferPanel: FC<IFinancingPanel> = ({
+  priceTabIndex,
+  isOfferDetailsAbo,
+  finalAdvice,
+  additionalService,
+  transferInstallments,
+  rangeGroupProps,
+  offerPeriodProps,
+  // aboAccordionProps,
+  className
+}) => {
+  return (
+    <form className={classNames(styles.OfferPanel, className)}>
+      {priceTabIndex === THREE && isOfferDetailsAbo
+        ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
+        : <>
+          {!priceTabIndex &&
+            <div className={styles.financingCheckboxWrapper}>
+              <CheckboxMaterial { ...finalAdvice } />
+            </div>
+          }
+          {priceTabIndex !== 2 &&
+            <div className={styles.rangeGroupWrapper}>
+              <RangeGroup {...rangeGroupProps} />
+            </div>
+          }
+
+          {priceTabIndex !== 2 &&
+            <div className={styles.offerPeriodWrapper}>
+              <MuiOfferPeriod {...offerPeriodProps} />
+            </div>
+          }
+
+          {priceTabIndex === THREE
+            ? <div className={styles.aboAccordionWrapper}><AboAccordion /></div>
+            : <div className={styles.offerCheckboxGroup}><OfferCheckboxGroup {...{ transferInstallments, additionalService, priceTabIndex }} /></div>}
+        </>
+      }
+    </form>
+  );
+};
+
+export default OfferPanel;

package/compat/OfferPanel/OfferPeriod/OfferPeriod.styl

@@ -1,25 +1,25 @@
-.periods
-  display: grid
-  grid-template-columns: repeat( auto-fit, minmax(20px, 1fr) );
-  [class*='MuiFormControlLabel-root']
-    margin: 0
-    box-shadow: inset 0px 0px 0px 1px #f5f5f5;
-    min-height: 40px;
-  [class*='MuiCheckbox-root']
-    padding: 0
-    color: #333333;
-
-.period
-  width: 100%
-
-.header
-  font-size: 14px
-  color: $grey-3;
-  font-weight normal;
-  margin: 0 0 15px 0;
-
-.headerPeriod
-  @extends .header
-  margin-top: 20px;
-  margin-bottom: 12px;
+.periods
+  display: grid
+  grid-template-columns: repeat( auto-fit, minmax(20px, 1fr) );
+  [class*='MuiFormControlLabel-root']
+    margin: 0
+    box-shadow: inset 0px 0px 0px 1px #f5f5f5;
+    min-height: 40px;
+  [class*='MuiCheckbox-root']
+    padding: 0
+    color: #333333;
+
+.period
+  width: 100%
+
+.header
+  font-size: 14px
+  color: $grey-3;
+  font-weight normal;
+  margin: 0 0 15px 0;
+
+.headerPeriod
+  @extends .header
+  margin-top: 20px;
+  margin-bottom: 12px;
   color: #000000d4