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

package/compat/OfferPanel/AboAccordion/AboFaq/AboFaq.styl

@@ -1,21 +1,21 @@
-@import '../../../legacy-theme/theme.styl'
-
-.checkboxesWrapper
-  display: flex
-  justify-content: space-between
-  align-items: center
-  margin-bottom: 7px
-  margin-top: 16px
-
-.checkboxFlex 
-  display: flex
-  justify-content: space-between
-  align-items: center
-
-.multiColored
-  display: flex
-
-.faqItem 
-  display: block
-  margin-top: 15px
+@import '../../../legacy-theme/theme.styl'
+
+.checkboxesWrapper
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-bottom: 7px
+  margin-top: 16px
+
+.checkboxFlex 
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.multiColored
+  display: flex
+
+.faqItem 
+  display: block
+  margin-top: 15px
   color: $skyBlue

package/compat/OfferPanel/AboAccordion/AboFaq/AboFaq.tsx

@@ -1,25 +1,25 @@
-import React, { FC } from 'react';
-import { aboFaq } from '../../../../constants/core';
-import styles from './AboFaq.styl';
-
-interface IAboFaq {
-  onAboFaqClick?: (index: number) => void;
-}
-
-const AboFaq: FC<IAboFaq> = ({ onAboFaqClick }) => {
-  return (
-    <>
-      {aboFaq.map((item, index) =>
-        <span
-          className={styles.faqItem}
-          onClick={() => onAboFaqClick(index)}
-          key={item}
-        >
-          {item}
-        </span>
-      )}
-    </>
-  );
-};
-
-export default AboFaq;
+import React, { FC } from 'react';
+import { aboFaq } from '../../../../constants/core';
+import styles from './AboFaq.styl';
+
+interface IAboFaq {
+  onAboFaqClick?: (index: number) => void;
+}
+
+const AboFaq: FC<IAboFaq> = ({ onAboFaqClick }) => {
+  return (
+    <>
+      {aboFaq.map((item, index) =>
+        <span
+          className={styles.faqItem}
+          onClick={() => onAboFaqClick(index)}
+          key={item}
+        >
+          {item}
+        </span>
+      )}
+    </>
+  );
+};
+
+export default AboFaq;

package/compat/OfferPanel/AboAccordion/AboIncludedServices/AboIncludedServices.styl

@@ -1,14 +1,14 @@
-.optionsWrapper
-  display: block
-
-.optionItem
-  display: flex
-  justify-content: space-between
-  align-items: center
-  margin-top: 12px
-
-.optionItemCenter
-  justify-content: start
-
-.optionText
+.optionsWrapper
+  display: block
+
+.optionItem
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-top: 12px
+
+.optionItemCenter
+  justify-content: start
+
+.optionText
   margin-left: 10px

package/compat/OfferPanel/AboAccordion/AboIncludedServices/AboIncludedServices.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import { aboIncludedServices } from '../../../../constants/core';
-import IconSVG from '../../../../iconsvg/IconSVG';
-
-import styles from './AboIncludedServices.styl';
-
-const AboIncludedServices = ({ isOfferDetailsAbo = false }) => {
-
-  return (
-    <span className={styles.optionsWrapper}>
-      {aboIncludedServices.map((service, index) => (
-        <span key={index}>
-          {/* {isMobileOnly ?
-            <span className={styles.optionItemMobile}>
-              <span><IconSVG name='doubleDone' /></span>
-              <span className={styles.optionItemTextMobile}>{service}</span>
-            </span>
-            : */}
-          {
-            isOfferDetailsAbo ?
-              <span className={`${styles.optionItemCenter} ${styles.optionItem}`}>
-                <span><IconSVG name='doubleDone' /></span>
-                <span className={styles.optionText}>{service}</span>
-              </span>
-              :
-              <span className={styles.optionItem}>
-                <span>{service}</span>
-                <span><IconSVG name='done' /></span>
-              </span>
-          }
-          {/* } */}
-        </span>
-      ))
-      }
-    </span>
-  );
-};
-
-export default AboIncludedServices;
+import React from 'react';
+import { aboIncludedServices } from '../../../../constants/core';
+import IconSVG from '../../../../iconsvg/IconSVG';
+
+import styles from './AboIncludedServices.styl';
+
+const AboIncludedServices = ({ isOfferDetailsAbo = false }) => {
+
+  return (
+    <span className={styles.optionsWrapper}>
+      {aboIncludedServices.map((service, index) => (
+        <span key={index}>
+          {/* {isMobileOnly ?
+            <span className={styles.optionItemMobile}>
+              <span><IconSVG name='doubleDone' /></span>
+              <span className={styles.optionItemTextMobile}>{service}</span>
+            </span>
+            : */}
+          {
+            isOfferDetailsAbo ?
+              <span className={`${styles.optionItemCenter} ${styles.optionItem}`}>
+                <span><IconSVG name='doubleDone' /></span>
+                <span className={styles.optionText}>{service}</span>
+              </span>
+              :
+              <span className={styles.optionItem}>
+                <span>{service}</span>
+                <span><IconSVG name='done' /></span>
+              </span>
+          }
+          {/* } */}
+        </span>
+      ))
+      }
+    </span>
+  );
+};
+
+export default AboIncludedServices;

package/compat/OfferPanel/MuiOfferPeriod/MuiOfferPeriod.tsx

@@ -1,42 +1,42 @@
-// md3 ADAPTER (not a verbatim legacy move): the MUI ToggleButtonGroup payback-
-// period selector is re-skinned on the md3 kit `Segmented` control. Same
-// contract ({paybackPeriod, periods, t, onChange('paybackPeriod', months)}),
-// same header, so OfferPanel and the checkout CheckoutOfferPanel only re-skin.
-
-import React, { FC } from 'react';
-import _get from 'lodash/get';
-
-import styles from '../OfferPanel.styl';
-import { modalsTranslate } from '../../../locales/legacy/data';
-import Segmented from '../../../ui/Segmented';
-
-export interface IOfferPeriod {
-  paybackPeriod: number;
-  periods: number[];
-  t: (phrase: string, config?: any) => string;
-  onChange: (key: string, value: number) => void;
-}
-
-const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange }) => {
-  return (
-    <>
-      <h3 className={styles.headerPeriod}>
-        {t('modals:financing.runningTime')}
-        <span className={styles.headerSub}>{t('modals:financing.runningTimeSub')}</span>
-      </h3>
-      <div className={styles.duration}>
-        <Segmented
-          options={periods.map((period) => [String(period), String(period)] as const)}
-          value={String(paybackPeriod)}
-          onChange={(value: string) => onChange('paybackPeriod', +value)}
-        />
-      </div>
-    </>
-  );
-};
-
-OfferPeriod.defaultProps = {
-  t: (phrase: string) => _get(modalsTranslate(), phrase.replace(':', '.'), phrase)
-};
-
-export default OfferPeriod;
+// md3 ADAPTER (not a verbatim legacy move): the MUI ToggleButtonGroup payback-
+// period selector is re-skinned on the md3 kit `Segmented` control. Same
+// contract ({paybackPeriod, periods, t, onChange('paybackPeriod', months)}),
+// same header, so OfferPanel and the checkout CheckoutOfferPanel only re-skin.
+
+import React, { FC } from 'react';
+import _get from 'lodash/get';
+
+import styles from '../OfferPanel.styl';
+import { modalsTranslate } from '../../../locales/legacy/data';
+import Segmented from '../../../ui/Segmented';
+
+export interface IOfferPeriod {
+  paybackPeriod: number;
+  periods: number[];
+  t: (phrase: string, config?: any) => string;
+  onChange: (key: string, value: number) => void;
+}
+
+const OfferPeriod: FC<IOfferPeriod> = ({ paybackPeriod, periods, t, onChange }) => {
+  return (
+    <>
+      <h3 className={styles.headerPeriod}>
+        {t('modals:financing.runningTime')}
+        <span className={styles.headerSub}>{t('modals:financing.runningTimeSub')}</span>
+      </h3>
+      <div className={styles.duration}>
+        <Segmented
+          options={periods.map((period) => [String(period), String(period)] as const)}
+          value={String(paybackPeriod)}
+          onChange={(value: string) => onChange('paybackPeriod', +value)}
+        />
+      </div>
+    </>
+  );
+};
+
+OfferPeriod.defaultProps = {
+  t: (phrase: string) => _get(modalsTranslate(), phrase.replace(':', '.'), phrase)
+};
+
+export default OfferPeriod;

package/compat/OfferPanel/OfferCheckboxGroup/CheckboxContainer.tsx

@@ -1,140 +1,140 @@
-import React from 'react';
-import styles from './OfferCheckboxGroup.styl';
-import classnames from 'classnames';
-import CheckboxMaterial from '../../MdCheckbox/MdCheckbox';
-import MaterialTooltip from '../../MdTooltip/MdTooltip';
-
-export interface ICheckboxProps {
-  // Native checkbox props
-  name?: string;
-  value?: any;
-  checked?: boolean;
-  disabled?: boolean;
-  reversed?: boolean;
-  isAboAccordionExpanded0?: boolean;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
-  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
-
-  // Custom checkbox props
-  containerClassName?: string;
-  checkboxClassName?: string;
-  labelClassName?: string;
-  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
-  tooltipDescription?: React.ReactNode;
-  checkboxPriceValue: any;
-  tooltipPosX?: string;
-  error?: boolean;
-  description?: string;
-  label?: JSX.Element | string | null;
-}
-
-class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
-  static defaultProps = {
-    name: '',
-    value: '',
-    checked: false,
-    disabled: false,
-    reversed: false,
-
-    onChange: () => { },
-    onBlur: () => { },
-    onFocus: () => { },
-
-    containerClassName: '',
-    checkboxClassName: '',
-    labelClassName: '',
-    tooltipDescription: '',
-    checkboxPriceValue: '',
-    tooltipPosX: '',
-
-    error: false,
-    label: false
-  };
-
-  input: HTMLInputElement = null;
-
-  setInputRef = (ref: HTMLInputElement) => {
-    this.input = ref;
-  };
-
-  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { disabled, value } = this.props;
-    const { checked } = event.target;
-
-    if (disabled) {
-      return false;
-    }
-    if (!!event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-    }
-
-    this.props.onChange(event, checked, value);
-  };
-
-  onKeyPress = (event: any) => {
-    const { disabled } = this.props;
-    const checked = !this.input.checked;
-    const value = this.input.value;
-
-    if (disabled) {
-      return false;
-    }
-
-    this.props.onChange(event, checked, value);
-  };
-
-  render() {
-    const {
-      containerClassName, labelClassName, reversed,
-      checked, disabled, error, label, tooltipDescription, labelPlacement,
-      description
-    } = this.props;
-
-    const containerClasses = classnames(
-      styles.container,
-      containerClassName,
-      { [styles.checked]: checked },
-      { [styles.error]: error },
-      { [styles.disabled]: disabled }
-    );
-
-    const labelClasses = classnames(
-      styles.label,
-      labelClassName
-    );
-
-    const wrapInputClasses = classnames(
-      styles.wrapInput,
-      { [styles.reversed]: reversed }
-    );
-    const checkboxProps = {
-      label,
-      checked,
-      labelPlacement,
-      disabled,
-      onChange: this.onChange
-    };
-    return (
-      <div className={containerClasses} tabIndex={1} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
-        <label className={labelClasses}>
-          <div className={wrapInputClasses}>
-            {/* Visual representation of the checkbox */}
-            {/* HidePlus class for OrderOverview component */}
-            <CheckboxMaterial {...checkboxProps} />
-
-          </div>
-          {description ? (
-            <span className={styles.labelContent}>
-              {description}
-              {tooltipDescription && <MaterialTooltip zindex={10000} disablePortal={false} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
-            </span>
-          ) : false}
-        </label>
-      </div>
-    );
-  }
-}
-
-export default CheckboxContainer;
+import React from 'react';
+import styles from './OfferCheckboxGroup.styl';
+import classnames from 'classnames';
+import CheckboxMaterial from '../../MdCheckbox/MdCheckbox';
+import MaterialTooltip from '../../MdTooltip/MdTooltip';
+
+export interface ICheckboxProps {
+  // Native checkbox props
+  name?: string;
+  value?: any;
+  checked?: boolean;
+  disabled?: boolean;
+  reversed?: boolean;
+  isAboAccordionExpanded0?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+
+  // Custom checkbox props
+  containerClassName?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  tooltipDescription?: React.ReactNode;
+  checkboxPriceValue: any;
+  tooltipPosX?: string;
+  error?: boolean;
+  description?: string;
+  label?: JSX.Element | string | null;
+}
+
+class CheckboxContainer extends React.Component<ICheckboxProps, {}> {
+  static defaultProps = {
+    name: '',
+    value: '',
+    checked: false,
+    disabled: false,
+    reversed: false,
+
+    onChange: () => { },
+    onBlur: () => { },
+    onFocus: () => { },
+
+    containerClassName: '',
+    checkboxClassName: '',
+    labelClassName: '',
+    tooltipDescription: '',
+    checkboxPriceValue: '',
+    tooltipPosX: '',
+
+    error: false,
+    label: false
+  };
+
+  input: HTMLInputElement = null;
+
+  setInputRef = (ref: HTMLInputElement) => {
+    this.input = ref;
+  };
+
+  onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { disabled, value } = this.props;
+    const { checked } = event.target;
+
+    if (disabled) {
+      return false;
+    }
+    if (!!event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  onKeyPress = (event: any) => {
+    const { disabled } = this.props;
+    const checked = !this.input.checked;
+    const value = this.input.value;
+
+    if (disabled) {
+      return false;
+    }
+
+    this.props.onChange(event, checked, value);
+  };
+
+  render() {
+    const {
+      containerClassName, labelClassName, reversed,
+      checked, disabled, error, label, tooltipDescription, labelPlacement,
+      description
+    } = this.props;
+
+    const containerClasses = classnames(
+      styles.container,
+      containerClassName,
+      { [styles.checked]: checked },
+      { [styles.error]: error },
+      { [styles.disabled]: disabled }
+    );
+
+    const labelClasses = classnames(
+      styles.label,
+      labelClassName
+    );
+
+    const wrapInputClasses = classnames(
+      styles.wrapInput,
+      { [styles.reversed]: reversed }
+    );
+    const checkboxProps = {
+      label,
+      checked,
+      labelPlacement,
+      disabled,
+      onChange: this.onChange
+    };
+    return (
+      <div className={containerClasses} tabIndex={1} onFocus={this.props.onFocus} onBlur={this.props.onBlur} onKeyPress={this.onKeyPress}>
+        <label className={labelClasses}>
+          <div className={wrapInputClasses}>
+            {/* Visual representation of the checkbox */}
+            {/* HidePlus class for OrderOverview component */}
+            <CheckboxMaterial {...checkboxProps} />
+
+          </div>
+          {description ? (
+            <span className={styles.labelContent}>
+              {description}
+              {tooltipDescription && <MaterialTooltip zindex={10000} disablePortal={false} text={tooltipDescription} className={styles.tooltipCheckbox} icon='InfoTransparent' />}
+            </span>
+          ) : false}
+        </label>
+      </div>
+    );
+  }
+}
+
+export default CheckboxContainer;