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

package/compat/RateSearchWidget/RateSearchWidget.tsx

@@ -1,163 +1,163 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import { FIRST_INSTALLMENT_FIX, MONTHLY_INSTALLMENT_FIX, PAYBACK_PERIOD_FIX } from '../../constants/RateSearchWidget';
-
-import MaterialAutocomplete from '../MdSelect/MdSelect';
-import Button from '../Button/Button';
-import { numberWithDot } from '../../utils/CommonUtils';
-import styles from './RateSearchWidget.styl';
-
-interface IRateSearchWidgetProps {
-  t?: (phrase: string, options?: any) => string;
-  i18nPrefix?: string;
-  className?: string;
-  simpleMode?: boolean;
-
-  monthlyInstallmentFrom?: string | number;
-  monthlyInstallmentTo?: string | number;
-  firstInstallment?: number;
-  paybackPeriod?: number;
-
-  onAbort: () => void;
-  onApply: (state: any) => void;
-}
-
-interface IRateSearchWidgetState {
-  monthlyInstallmentFrom?: string | number;
-  monthlyInstallmentTo?: string | number;
-  firstInstallment?: number;
-  paybackPeriod?: number;
-  [key: string]: any;
-}
-
-class RateSearchWidget extends React.Component<IRateSearchWidgetProps, IRateSearchWidgetState> {
-  static readonly defaultProps = {
-    t: (phrase: string) => phrase,
-    i18nPrefix: '',
-    simpleMode: true
-  };
-
-  constructor(props: IRateSearchWidgetProps) {
-    super(props);
-
-    const { firstInstallment, monthlyInstallmentFrom, monthlyInstallmentTo, paybackPeriod } = props;
-
-    this.state = {
-      firstInstallment,
-      paybackPeriod,
-      monthlyInstallmentFrom: !!monthlyInstallmentFrom ? monthlyInstallmentFrom : 'any',
-      monthlyInstallmentTo: !!monthlyInstallmentTo ? monthlyInstallmentTo : 'any'
-
-    };
-  }
-
-  getFormattedLabel = (option: number | string, units?: string): React.ReactNode => {
-    const { t, i18nPrefix } = this.props;
-    if (Number.isFinite(+option)) {
-      return `${numberWithDot(option)} ${units ? ` ${units}` : false}`;
-    }
-    return t(`${i18nPrefix}${option}`);
-  };
-
-  getValue = (value: any, units: string) => {
-    if (value === null || value === undefined) return null; // tslint:disable-line
-
-    return {
-      value: `${value}`,
-      label: this.getFormattedLabel(value, units)
-    };
-  };
-
-  onDropDownChange = (name: string, value: any) => {
-    this.setState({ [name]: value });
-  };
-
-  onApplyClick = () => {
-    const { onApply } = this.props;
-    onApply(this.state);
-  };
-
-  renderDropDowns = () => {
-    const { t, i18nPrefix, simpleMode } = this.props;
-    const dropdownConfig: any = {
-      monthlyInstallmentFrom: {
-        defaultValue: t(`${i18nPrefix}any`),
-        units: '€',
-        options: MONTHLY_INSTALLMENT_FIX,
-        disableClearable: true,
-        label: simpleMode ? '' : 'monthlyInstallment'
-      },
-      monthlyInstallmentTo: {
-        defaultValue: t(`${i18nPrefix}any`),
-        units: '€',
-        options: MONTHLY_INSTALLMENT_FIX,
-        disableClearable: true,
-        label: simpleMode ? 'monthlyInstallmentTo' : ''
-      },
-      firstInstallment: {
-        defaultValue: '0',
-        units: '€',
-        options: FIRST_INSTALLMENT_FIX,
-        disableClearable: true,
-        label: 'firstInstallment'
-      },
-      paybackPeriod: {
-        defaultValue: '60',
-        disableClearable: true,
-        units: t(`${i18nPrefix}months`),
-        options: PAYBACK_PERIOD_FIX,
-        label: 'paybackPeriod'
-      }
-    };
-
-    const dropdowns = simpleMode
-      ? ['monthlyInstallmentTo', 'firstInstallment', 'paybackPeriod']
-      : ['monthlyInstallmentFrom', 'monthlyInstallmentTo', 'firstInstallment', 'paybackPeriod'];
-
-    return dropdowns.map((name: string) => {
-      const { defaultValue, units, options, label, ...rest } = dropdownConfig[name];
-
-      const dropDownProps = {
-        size: 'custom',
-        value: this.state[name] === 'any' ? t(`${i18nPrefix}${this.state[name]}`) : numberWithDot(this.state[name]),
-        label: t(`${i18nPrefix}${name}Placeholder`),
-        items: options.map((value: any) => this.getValue(value, units)),
-        onChange: (value: any) => this.onDropDownChange(name, value),
-        ...rest
-      };
-
-      return (
-        <label key={name} className={styles.dropDownLabel}>
-          {/* <strong className={styles.caption}>{label ? t(`${i18nPrefix}${label}`) : ''}</strong> */}
-          <MaterialAutocomplete {...dropDownProps} />
-        </label>
-      );
-    });
-  };
-
-  render() {
-    const { t, i18nPrefix, simpleMode, className, onAbort } = this.props;
-    const wrapperClassName = classnames(styles.wrapper, className);
-
-    return (
-      <div className={wrapperClassName}>
-        <div className={styles.header}>
-          <h3 className={styles.title}>{t(`${i18nPrefix}title`)}</h3>
-          {/* <div onClick={onAbort}>
-            <IconSVG name='deleteCircle' customDimensions />
-          </div> */}
-        </div>
-        <div className={classnames(styles.dropdownsWrap, { [styles.twoColumnWrapper]: !simpleMode })}>
-          {this.renderDropDowns()}
-        </div>
-        <div className={styles.actionsWrapper}>
-          <span onClick={onAbort} className={styles.abortButton}>{t(`${i18nPrefix}abort`)}</span>
-          <Button color='primary' onClick={this.onApplyClick} className={styles.applyButton}>{t(`${i18nPrefix}apply`)}</Button>
-        </div>
-      </div >
-    );
-  }
-}
-
-export default RateSearchWidget;
+import * as React from 'react';
+import classnames from 'classnames';
+
+import { FIRST_INSTALLMENT_FIX, MONTHLY_INSTALLMENT_FIX, PAYBACK_PERIOD_FIX } from '../../constants/RateSearchWidget';
+
+import MaterialAutocomplete from '../MdSelect/MdSelect';
+import Button from '../Button/Button';
+import { numberWithDot } from '../../utils/CommonUtils';
+import styles from './RateSearchWidget.styl';
+
+interface IRateSearchWidgetProps {
+  t?: (phrase: string, options?: any) => string;
+  i18nPrefix?: string;
+  className?: string;
+  simpleMode?: boolean;
+
+  monthlyInstallmentFrom?: string | number;
+  monthlyInstallmentTo?: string | number;
+  firstInstallment?: number;
+  paybackPeriod?: number;
+
+  onAbort: () => void;
+  onApply: (state: any) => void;
+}
+
+interface IRateSearchWidgetState {
+  monthlyInstallmentFrom?: string | number;
+  monthlyInstallmentTo?: string | number;
+  firstInstallment?: number;
+  paybackPeriod?: number;
+  [key: string]: any;
+}
+
+class RateSearchWidget extends React.Component<IRateSearchWidgetProps, IRateSearchWidgetState> {
+  static readonly defaultProps = {
+    t: (phrase: string) => phrase,
+    i18nPrefix: '',
+    simpleMode: true
+  };
+
+  constructor(props: IRateSearchWidgetProps) {
+    super(props);
+
+    const { firstInstallment, monthlyInstallmentFrom, monthlyInstallmentTo, paybackPeriod } = props;
+
+    this.state = {
+      firstInstallment,
+      paybackPeriod,
+      monthlyInstallmentFrom: !!monthlyInstallmentFrom ? monthlyInstallmentFrom : 'any',
+      monthlyInstallmentTo: !!monthlyInstallmentTo ? monthlyInstallmentTo : 'any'
+
+    };
+  }
+
+  getFormattedLabel = (option: number | string, units?: string): React.ReactNode => {
+    const { t, i18nPrefix } = this.props;
+    if (Number.isFinite(+option)) {
+      return `${numberWithDot(option)} ${units ? ` ${units}` : false}`;
+    }
+    return t(`${i18nPrefix}${option}`);
+  };
+
+  getValue = (value: any, units: string) => {
+    if (value === null || value === undefined) return null; // tslint:disable-line
+
+    return {
+      value: `${value}`,
+      label: this.getFormattedLabel(value, units)
+    };
+  };
+
+  onDropDownChange = (name: string, value: any) => {
+    this.setState({ [name]: value });
+  };
+
+  onApplyClick = () => {
+    const { onApply } = this.props;
+    onApply(this.state);
+  };
+
+  renderDropDowns = () => {
+    const { t, i18nPrefix, simpleMode } = this.props;
+    const dropdownConfig: any = {
+      monthlyInstallmentFrom: {
+        defaultValue: t(`${i18nPrefix}any`),
+        units: '€',
+        options: MONTHLY_INSTALLMENT_FIX,
+        disableClearable: true,
+        label: simpleMode ? '' : 'monthlyInstallment'
+      },
+      monthlyInstallmentTo: {
+        defaultValue: t(`${i18nPrefix}any`),
+        units: '€',
+        options: MONTHLY_INSTALLMENT_FIX,
+        disableClearable: true,
+        label: simpleMode ? 'monthlyInstallmentTo' : ''
+      },
+      firstInstallment: {
+        defaultValue: '0',
+        units: '€',
+        options: FIRST_INSTALLMENT_FIX,
+        disableClearable: true,
+        label: 'firstInstallment'
+      },
+      paybackPeriod: {
+        defaultValue: '60',
+        disableClearable: true,
+        units: t(`${i18nPrefix}months`),
+        options: PAYBACK_PERIOD_FIX,
+        label: 'paybackPeriod'
+      }
+    };
+
+    const dropdowns = simpleMode
+      ? ['monthlyInstallmentTo', 'firstInstallment', 'paybackPeriod']
+      : ['monthlyInstallmentFrom', 'monthlyInstallmentTo', 'firstInstallment', 'paybackPeriod'];
+
+    return dropdowns.map((name: string) => {
+      const { defaultValue, units, options, label, ...rest } = dropdownConfig[name];
+
+      const dropDownProps = {
+        size: 'custom',
+        value: this.state[name] === 'any' ? t(`${i18nPrefix}${this.state[name]}`) : numberWithDot(this.state[name]),
+        label: t(`${i18nPrefix}${name}Placeholder`),
+        items: options.map((value: any) => this.getValue(value, units)),
+        onChange: (value: any) => this.onDropDownChange(name, value),
+        ...rest
+      };
+
+      return (
+        <label key={name} className={styles.dropDownLabel}>
+          {/* <strong className={styles.caption}>{label ? t(`${i18nPrefix}${label}`) : ''}</strong> */}
+          <MaterialAutocomplete {...dropDownProps} />
+        </label>
+      );
+    });
+  };
+
+  render() {
+    const { t, i18nPrefix, simpleMode, className, onAbort } = this.props;
+    const wrapperClassName = classnames(styles.wrapper, className);
+
+    return (
+      <div className={wrapperClassName}>
+        <div className={styles.header}>
+          <h3 className={styles.title}>{t(`${i18nPrefix}title`)}</h3>
+          {/* <div onClick={onAbort}>
+            <IconSVG name='deleteCircle' customDimensions />
+          </div> */}
+        </div>
+        <div className={classnames(styles.dropdownsWrap, { [styles.twoColumnWrapper]: !simpleMode })}>
+          {this.renderDropDowns()}
+        </div>
+        <div className={styles.actionsWrapper}>
+          <span onClick={onAbort} className={styles.abortButton}>{t(`${i18nPrefix}abort`)}</span>
+          <Button color='primary' onClick={this.onApplyClick} className={styles.applyButton}>{t(`${i18nPrefix}apply`)}</Button>
+        </div>
+      </div >
+    );
+  }
+}
+
+export default RateSearchWidget;

package/compat/ServiceBlockItem/ServiceBlockItem.styl

@@ -1,48 +1,48 @@
-@import '../legacy-theme/mixins.styl'
-
-.container
-  display flex
-  flex-direction: column;
-
-  +media-phone-only()
-    flex-direction: row;
-    padding: 17px 0
-    align-items: center;
-
-    & + &
-      border-top: 1px solid rgba(196, 196, 196, 0.3);
-
-.icon
-  margin 0 auto
-  width: 64px
-  height: 64px
-  flex-shrink: 0;
-
-  +media-phone-only()
-    width: 82px
-    height: 82px
-    order: 3;
-    margin-left: auto;
-    margin-left: 30px;
-
-.title
-  font-size: 16px
-  margin-top: 15px;
-  margin-bottom: 10px
-  text-align center
-  color: $grey-3a;
-  +media-phone-only()
-    margin-top: 0;
-    text-align: left
-
-.textContent
-  line-height: 20px
-  font-size: 12px;
-  text-align: justify;
-  box-sizing: border-box;
-  color: $grey-54;
-
-  +media-phone-only()
-    max-width: 246px;
-    margin 0
+@import '../legacy-theme/mixins.styl'
+
+.container
+  display flex
+  flex-direction: column;
+
+  +media-phone-only()
+    flex-direction: row;
+    padding: 17px 0
+    align-items: center;
+
+    & + &
+      border-top: 1px solid rgba(196, 196, 196, 0.3);
+
+.icon
+  margin 0 auto
+  width: 64px
+  height: 64px
+  flex-shrink: 0;
+
+  +media-phone-only()
+    width: 82px
+    height: 82px
+    order: 3;
+    margin-left: auto;
+    margin-left: 30px;
+
+.title
+  font-size: 16px
+  margin-top: 15px;
+  margin-bottom: 10px
+  text-align center
+  color: $grey-3a;
+  +media-phone-only()
+    margin-top: 0;
+    text-align: left
+
+.textContent
+  line-height: 20px
+  font-size: 12px;
+  text-align: justify;
+  box-sizing: border-box;
+  color: $grey-54;
+
+  +media-phone-only()
+    max-width: 246px;
+    margin 0
     line-height: 14px;

package/compat/ServiceBlockItem/ServiceBlockItem.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react';
-import styles from './ServiceBlockItem.styl';
-
-import IconSVG from '../../iconsvg/IconSVG';
-
-interface IInfoBlockItemProps {
-  iconSrc?: string;
-  title?: string;
-  content?: string;
-  iconBgColor?: boolean;
-}
-
-const ServiceBlockItem: React.FunctionComponent<IInfoBlockItemProps> = ({ iconSrc, title, content }) => {
-  return(
-    <div className={styles.container}>
-      <IconSVG name={iconSrc} className={styles.icon} customDimensions />
-      <div className={styles.content}>
-        <h3 className={styles.title}>{title}</h3>
-        <p className={styles.textContent}>{content}</p>
-      </div>
-    </div>
-  );
-};
-
-export default ServiceBlockItem;
+import * as React from 'react';
+import styles from './ServiceBlockItem.styl';
+
+import IconSVG from '../../iconsvg/IconSVG';
+
+interface IInfoBlockItemProps {
+  iconSrc?: string;
+  title?: string;
+  content?: string;
+  iconBgColor?: boolean;
+}
+
+const ServiceBlockItem: React.FunctionComponent<IInfoBlockItemProps> = ({ iconSrc, title, content }) => {
+  return(
+    <div className={styles.container}>
+      <IconSVG name={iconSrc} className={styles.icon} customDimensions />
+      <div className={styles.content}>
+        <h3 className={styles.title}>{title}</h3>
+        <p className={styles.textContent}>{content}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ServiceBlockItem;

package/compat/SkeletonItem/SkeletonItem.styl

@@ -1,81 +1,81 @@
-@import '../legacy-theme/theme.styl'
-
-[class*='MuiSkeleton-rectangular']
-  height: inherit !important
-
-.vehicle
-  background-color #fff
-  border-radius: 3px;
-  position: relative
-  &:before
-    content: ''
-    position: absolute
-    left: 0
-    right: 0
-    bottom: 0
-    top: 0
-    z-index: 222
-    border: 1px solid #e8e8e8
-
-.infoSection
-  display: flex
-  align-items: center
-  padding: 7px 6px
-
-.circle
-  margin-left: auto
-  width: 22px
-  height: 22px
-
-.circleMin
-  flex-shrink: 0
-  width: 16px
-  height: 16px
-  margin-right: 10px
-
-.figure
-  height: 193px
-  @media (max-width: 575.98px)
-    height: 65vw
-
-.vehicleData
-  display: flex
-
-.vehicleInfo
-  width: 112px
-  box-sizing: border-box
-  padding: 9px 7px 14px 11px
-  flex-shrink: 0
-
-  @media (max-width: 575.98px)
-    width: 50%
-
-.vehiclePriceSection
-  padding: 13px 12px 12px 8px
-  border-left: 1px solid #d7d7d7
-  width: 100%
-
-  @media (max-width: 575.98px)
-    width: 50%
-
-.carProp
-  height: 35px
-  display: flex
-  align-items: center
-  border-bottom: 1px solid #d7d7d7
-
-.carPropLast
-  border-bottom: 0
-
-.carPropLastItem
-  width: 90%
-  margin: 0 auto
-
-.priceItem
-  display: flex
-  height: 40px
-  justify-content: space-between
-  align-items: center
-
-.seoText
+@import '../legacy-theme/theme.styl'
+
+[class*='MuiSkeleton-rectangular']
+  height: inherit !important
+
+.vehicle
+  background-color #fff
+  border-radius: 3px;
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    left: 0
+    right: 0
+    bottom: 0
+    top: 0
+    z-index: 222
+    border: 1px solid #e8e8e8
+
+.infoSection
+  display: flex
+  align-items: center
+  padding: 7px 6px
+
+.circle
+  margin-left: auto
+  width: 22px
+  height: 22px
+
+.circleMin
+  flex-shrink: 0
+  width: 16px
+  height: 16px
+  margin-right: 10px
+
+.figure
+  height: 193px
+  @media (max-width: 575.98px)
+    height: 65vw
+
+.vehicleData
+  display: flex
+
+.vehicleInfo
+  width: 112px
+  box-sizing: border-box
+  padding: 9px 7px 14px 11px
+  flex-shrink: 0
+
+  @media (max-width: 575.98px)
+    width: 50%
+
+.vehiclePriceSection
+  padding: 13px 12px 12px 8px
+  border-left: 1px solid #d7d7d7
+  width: 100%
+
+  @media (max-width: 575.98px)
+    width: 50%
+
+.carProp
+  height: 35px
+  display: flex
+  align-items: center
+  border-bottom: 1px solid #d7d7d7
+
+.carPropLast
+  border-bottom: 0
+
+.carPropLastItem
+  width: 90%
+  margin: 0 auto
+
+.priceItem
+  display: flex
+  height: 40px
+  justify-content: space-between
+  align-items: center
+
+.seoText
   padding: 10px