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

package/compat/VehicleDetailedSlider/partials/MobileStast.tsx

@@ -1,61 +1,61 @@
-import * as React from 'react';
-
-import IconSVG from '../../../iconsvg/IconSVG';
-import styles from './MobileStats.styl';
-import { SliderType } from '../../../types/types';
-
-interface IProps {
-  activeSlide: number;
-  hasExteriorPhotos: boolean;
-  hasInteriorPhoto: boolean;
-  photosLength: number;
-  totalFavCount: number;
-  totalCarImpCount: number;
-  onOpenSliderModal: (sliderType: SliderType) => void;
-}
-
-const MobileStats: React.FunctionComponent<IProps> = (props) => {
-  const { activeSlide, hasExteriorPhotos, hasInteriorPhoto, photosLength, totalFavCount, totalCarImpCount, onOpenSliderModal } = props;
-  return (
-    <div className={styles.mobileStatsBlock}>
-      {!!photosLength && (
-        <div className={styles.mobileStatsItem}>
-          <div className={styles.mobileStatsEl}>
-            {activeSlide + 1} {`${photosLength > 0 ? `| ${photosLength}` : ''}`}
-          </div>
-          {(hasExteriorPhotos || hasInteriorPhoto) && (
-            <div className={styles.mobileStatsEl}>
-              <IconSVG
-                customDimensions
-                name='rotate360'
-                className={styles.icon360}
-                onClick={() => onOpenSliderModal(hasExteriorPhotos ? SliderType.EXTERIOR : SliderType.INTERIOR)}
-              />
-            </div>
-          )}
-          <div className={styles.mobileStatsEl} onClick={() => onOpenSliderModal(SliderType.DEFAULT)}>
-            <IconSVG name='fullscreenWindow' className={styles.icon} customDimensions/>
-          </div>
-        </div>
-      )}
-      {(totalCarImpCount || totalFavCount) && (
-        <div className={styles.mobileStatsEl}>
-          {totalCarImpCount > 0 && (
-            <>
-              <IconSVG name='sliderEye' customDimensions className={styles.eyeIcon}/>
-              <span className={styles.mobileStatsText}>{totalCarImpCount}</span>
-            </>
-          )}
-          {totalFavCount > 0 && (
-            <>
-              <IconSVG name='starNew' customDimensions className={styles.starIcon}/>
-              <span className={styles.mobileStatsText}>{totalFavCount}</span>
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MobileStats;
+import * as React from 'react';
+
+import IconSVG from '../../../iconsvg/IconSVG';
+import styles from './MobileStats.styl';
+import { SliderType } from '../../../types/types';
+
+interface IProps {
+  activeSlide: number;
+  hasExteriorPhotos: boolean;
+  hasInteriorPhoto: boolean;
+  photosLength: number;
+  totalFavCount: number;
+  totalCarImpCount: number;
+  onOpenSliderModal: (sliderType: SliderType) => void;
+}
+
+const MobileStats: React.FunctionComponent<IProps> = (props) => {
+  const { activeSlide, hasExteriorPhotos, hasInteriorPhoto, photosLength, totalFavCount, totalCarImpCount, onOpenSliderModal } = props;
+  return (
+    <div className={styles.mobileStatsBlock}>
+      {!!photosLength && (
+        <div className={styles.mobileStatsItem}>
+          <div className={styles.mobileStatsEl}>
+            {activeSlide + 1} {`${photosLength > 0 ? `| ${photosLength}` : ''}`}
+          </div>
+          {(hasExteriorPhotos || hasInteriorPhoto) && (
+            <div className={styles.mobileStatsEl}>
+              <IconSVG
+                customDimensions
+                name='rotate360'
+                className={styles.icon360}
+                onClick={() => onOpenSliderModal(hasExteriorPhotos ? SliderType.EXTERIOR : SliderType.INTERIOR)}
+              />
+            </div>
+          )}
+          <div className={styles.mobileStatsEl} onClick={() => onOpenSliderModal(SliderType.DEFAULT)}>
+            <IconSVG name='fullscreenWindow' className={styles.icon} customDimensions/>
+          </div>
+        </div>
+      )}
+      {(totalCarImpCount || totalFavCount) && (
+        <div className={styles.mobileStatsEl}>
+          {totalCarImpCount > 0 && (
+            <>
+              <IconSVG name='sliderEye' customDimensions className={styles.eyeIcon}/>
+              <span className={styles.mobileStatsText}>{totalCarImpCount}</span>
+            </>
+          )}
+          {totalFavCount > 0 && (
+            <>
+              <IconSVG name='starNew' customDimensions className={styles.starIcon}/>
+              <span className={styles.mobileStatsText}>{totalFavCount}</span>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MobileStats;

package/compat/VehicleDetailedSlider/partials/MobileStats.styl

@@ -1,71 +1,71 @@
-@import '../../legacy-theme/mixins.styl';
-
-.icon
-  fill: rgba($grey-3, 0.8)
-  stroke: #fff !important
-  width: 20px
-  height: 20px
-  padding-top: 2px;
-
-.icon360
-  composes icon
-  width: 37px
-  height: auto
- 
-
-.mobileStatsBlock
-  display: flex
-  justify-content: space-between
-  position: absolute
-  bottom: 0
-  padding: 10px 15px
-  box-sizing: border-box
-  width: 100%
-  font-size: 12px
-  align-items: center
-
-.mobileStatsItem
-  display: flex
-  align-items: center
-
-.mobileStatsEl
-  display: flex
-  justify-content: center
-  align-items: center
-  background-color: rgba(255, 255, 255, 0.75);
-  border-radius: 3px
-  padding: 0 4px;
-  height: 24px;
-  color: rgba($grey-3, .80);
-
-  & + &
-    margin-left: 7px
-
-.mobileStatsText
-  padding-left: 5px
-
-.starIcon
-  font-size: 21px;
-  margin-left: 10px
-  position: relative
-  bottom: 1px
-  fill: rgba(51, 51, 51, 0.8);
-
-.eyeIcon
-  font-size: 17px;
-
-.favorite
-  stroke: $skyBlue
-  fill: white
-  stroke-width: 4px
-  font-size: 20px
-  margin-left: 10px
-  margin-right: 10px
-  cursor: pointer
-
-  &:hover
-    stroke: $grey-1
-
-.favoriteActive
-  fill: $skyBlue
-  stroke: white
+@import '../../legacy-theme/mixins.styl';
+
+.icon
+  fill: rgba($grey-3, 0.8)
+  stroke: #fff !important
+  width: 20px
+  height: 20px
+  padding-top: 2px;
+
+.icon360
+  composes icon
+  width: 37px
+  height: auto
+ 
+
+.mobileStatsBlock
+  display: flex
+  justify-content: space-between
+  position: absolute
+  bottom: 0
+  padding: 10px 15px
+  box-sizing: border-box
+  width: 100%
+  font-size: 12px
+  align-items: center
+
+.mobileStatsItem
+  display: flex
+  align-items: center
+
+.mobileStatsEl
+  display: flex
+  justify-content: center
+  align-items: center
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 3px
+  padding: 0 4px;
+  height: 24px;
+  color: rgba($grey-3, .80);
+
+  & + &
+    margin-left: 7px
+
+.mobileStatsText
+  padding-left: 5px
+
+.starIcon
+  font-size: 21px;
+  margin-left: 10px
+  position: relative
+  bottom: 1px
+  fill: rgba(51, 51, 51, 0.8);
+
+.eyeIcon
+  font-size: 17px;
+
+.favorite
+  stroke: $skyBlue
+  fill: white
+  stroke-width: 4px
+  font-size: 20px
+  margin-left: 10px
+  margin-right: 10px
+  cursor: pointer
+
+  &:hover
+    stroke: $grey-1
+
+.favoriteActive
+  fill: $skyBlue
+  stroke: white

package/compat/VehicleDetailedSlider/partials/PriceData.styl

@@ -1,51 +1,51 @@
-@import '../../legacy-theme/mixins.styl';
-
-.topWrapper
-  position: absolute
-  left: 16px
-  right: 16px
-  top: 16px
-  user-select: none
-  z-index: 1
-  font-size: 20px
-  font-weight: bold
-  line-height: 50px
-
-  +media-phone-only()
-    left: 15px
-    right: 15px
-    top: 6px
-
-  +media-tablet-landscape-down()
-    font-size: 16px
-    line-height: 24px;
-
-.priceDifference
-  color: white
-  padding: 0 15px
-  float: left
-  border-radius: 33px
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 50px;
-  height: auto
-
-  +media-tablet-landscape-down()
-    padding: 0 10px
-    border-radius: 16px
-    line-height: 24px
-    font-size: 13px
-
-.priceDifferencePerCent
-  @extend .priceDifference
-  float: right
-  position: relative
-  z-index: 1
-
-.new
-  @extend .priceDifference
-  margin-right: 12px
-  
-.percentageOfFirstInstallment
-  @extend .priceDifference
+@import '../../legacy-theme/mixins.styl';
+
+.topWrapper
+  position: absolute
+  left: 16px
+  right: 16px
+  top: 16px
+  user-select: none
+  z-index: 1
+  font-size: 20px
+  font-weight: bold
+  line-height: 50px
+
+  +media-phone-only()
+    left: 15px
+    right: 15px
+    top: 6px
+
+  +media-tablet-landscape-down()
+    font-size: 16px
+    line-height: 24px;
+
+.priceDifference
+  color: white
+  padding: 0 15px
+  float: left
+  border-radius: 33px
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 50px;
+  height: auto
+
+  +media-tablet-landscape-down()
+    padding: 0 10px
+    border-radius: 16px
+    line-height: 24px
+    font-size: 13px
+
+.priceDifferencePerCent
+  @extend .priceDifference
+  float: right
+  position: relative
+  z-index: 1
+
+.new
+  @extend .priceDifference
+  margin-right: 12px
+  
+.percentageOfFirstInstallment
+  @extend .priceDifference
   margin-left: 12px

package/compat/VehicleDetailedSlider/partials/PriceData.tsx

@@ -1,67 +1,67 @@
-import * as React from 'react';
-import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-import Badge from '../../Badge/Badge';
-
-import styles from './PriceData.styl';
-
-interface IProps {
-  t: (phrase: string, config?: any) => string;
-  showNewLabel: boolean;
-  historyPriceDifference: number;
-  historyPriceDifferencePerCent: number;
-  activeTab?: number;
-  showDownPayment: boolean;
-  financingFirstInstallment?: number | null;
-  leasingFirstInstallment?: number | null;
-}
-
-const MIN_PERCENT = 5;
-const MIN_PRICE_DIFFERENCE = 500;
-const EUR = `\u20AC`;
-
-const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
-  const [lsFinancingFirst, setLsFinancingFirst] = React.useState<number | undefined>(undefined);
-  const [lsLeasingFirst, setLsLeasingFirst] = React.useState<number | undefined>(undefined);
-
-  React.useEffect(() => {
-    const readFromStorage = () => {
-      const raw = localStorage.getItem('financing_store');
-      const parsed = raw ? JSON.parse(raw) : null;
-      const fin = parsed?.userCommonConfig?.financing?.firstInstallment;
-      const lea = parsed?.userCommonConfig?.leasing?.firstInstallment;
-      setLsFinancingFirst(fin);
-      setLsLeasingFirst(lea);
-    };
-
-    readFromStorage();
-    window.addEventListener('storage', readFromStorage);
-    return () => window.removeEventListener('storage', readFromStorage);
-  }, []);
-
-  const rawFirstInstallment = activeTab === 0 ? financingFirstInstallment : activeTab === 1 ? leasingFirstInstallment : null;
-  const firstInstallment = rawFirstInstallment ?? 0;
-  const lsActiveValue = activeTab === 0 ? lsFinancingFirst : activeTab === 1 ? lsLeasingFirst : undefined;
-  const showByLocalStorage = lsActiveValue === 0;
-  const showByBackend = showDownPayment && (activeTab === 0 || activeTab === 1) && firstInstallment === 0 && (lsActiveValue === undefined || lsActiveValue === null);
-  const showZeroDownPayment = showByLocalStorage || showByBackend;
-  return (
-    <div className={styles.topWrapper}>
-      {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
-      {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
-        <Badge type='green' className={styles.priceDifference}>
-          <FormattedNumber value={historyPriceDifference} numbersAfterDot={0}/>
-          {` ${EUR} ${t('slider.save')}`}
-        </Badge>
-      )}
-      {showZeroDownPayment &&
-        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
-      {historyPriceDifferencePerCent >= MIN_PERCENT && (
-        <Badge type='red' className={styles.priceDifferencePerCent}>
-          -{historyPriceDifferencePerCent}%
-        </Badge>
-      )}
-    </div>
-  );
-};
-
-export default PriceData;
+import * as React from 'react';
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+import Badge from '../../Badge/Badge';
+
+import styles from './PriceData.styl';
+
+interface IProps {
+  t: (phrase: string, config?: any) => string;
+  showNewLabel: boolean;
+  historyPriceDifference: number;
+  historyPriceDifferencePerCent: number;
+  activeTab?: number;
+  showDownPayment: boolean;
+  financingFirstInstallment?: number | null;
+  leasingFirstInstallment?: number | null;
+}
+
+const MIN_PERCENT = 5;
+const MIN_PRICE_DIFFERENCE = 500;
+const EUR = `\u20AC`;
+
+const PriceData: React.FunctionComponent<IProps> = ({ t, showDownPayment, showNewLabel, historyPriceDifference, historyPriceDifferencePerCent, activeTab, financingFirstInstallment, leasingFirstInstallment }) => {
+  const [lsFinancingFirst, setLsFinancingFirst] = React.useState<number | undefined>(undefined);
+  const [lsLeasingFirst, setLsLeasingFirst] = React.useState<number | undefined>(undefined);
+
+  React.useEffect(() => {
+    const readFromStorage = () => {
+      const raw = localStorage.getItem('financing_store');
+      const parsed = raw ? JSON.parse(raw) : null;
+      const fin = parsed?.userCommonConfig?.financing?.firstInstallment;
+      const lea = parsed?.userCommonConfig?.leasing?.firstInstallment;
+      setLsFinancingFirst(fin);
+      setLsLeasingFirst(lea);
+    };
+
+    readFromStorage();
+    window.addEventListener('storage', readFromStorage);
+    return () => window.removeEventListener('storage', readFromStorage);
+  }, []);
+
+  const rawFirstInstallment = activeTab === 0 ? financingFirstInstallment : activeTab === 1 ? leasingFirstInstallment : null;
+  const firstInstallment = rawFirstInstallment ?? 0;
+  const lsActiveValue = activeTab === 0 ? lsFinancingFirst : activeTab === 1 ? lsLeasingFirst : undefined;
+  const showByLocalStorage = lsActiveValue === 0;
+  const showByBackend = showDownPayment && (activeTab === 0 || activeTab === 1) && firstInstallment === 0 && (lsActiveValue === undefined || lsActiveValue === null);
+  const showZeroDownPayment = showByLocalStorage || showByBackend;
+  return (
+    <div className={styles.topWrapper}>
+      {showNewLabel && <Badge type='blue' className={styles.new}>{t('slider.new')}</Badge>}
+      {!!historyPriceDifference && historyPriceDifference >= MIN_PRICE_DIFFERENCE && (
+        <Badge type='green' className={styles.priceDifference}>
+          <FormattedNumber value={historyPriceDifference} numbersAfterDot={0}/>
+          {` ${EUR} ${t('slider.save')}`}
+        </Badge>
+      )}
+      {showZeroDownPayment &&
+        <Badge type='lightBlue' className={styles.percentageOfFirstInstallment}>{`0${EUR} ${t('slider.firstInstallment')}`}</Badge>}
+      {historyPriceDifferencePerCent >= MIN_PERCENT && (
+        <Badge type='red' className={styles.priceDifferencePerCent}>
+          -{historyPriceDifferencePerCent}%
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+export default PriceData;

package/compat/VehicleDetailedSlider/partials/Stats.styl

@@ -1,80 +1,80 @@
-@import '../../legacy-theme/mixins.styl';
-
-.statsContainer
-  background-color: rgba(255, 255, 255, 0.75);
-  border-radius: 4px;
-  display: flex
-  padding: 0 16px;
-  margin-right: 16px;
-
-.statsBlock
-  font-size: 12px
-  display: flex
-  color: #646464;
-  box-sizing: border-box
-  justify-content: space-between
-  align-items: center;
-  
-  & + &
-    margin-left: 20px;
-
-  &:before
-    content: '';
-    width: 28px;
-    height: 25px;
-    flex-shrink: 0;
-    margin-right: 9px;
-    display inline-flex;
-    background-repeat no-repeat;
-
-.customersLookingTheCar
-  margin-left: -10px;
-  &:before
-    background-image: url('../../../media/svg/common/star.svg');
-
-.saveCarAsFavorites
-  &:before
-    height: 15px;
-    background-image: url('../../../media/svg/common/eye.svg');
-
-.controls
-  display flex;
-  align-items: center
-  color: $grey-75;
-  font-weight bold
-  box-sizing: border-box
-  font-size: 20px
-  margin-right: 10px
-
-.controlsEl
-  position: relative
-  margin-left: 16px;
-  background-color: rgba(255, 255, 255, 0.75);
-  border-radius: 4px
-  height: 40px;
-  width: 66px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-.icon
-  fill: $grey-75
-  cursor pointer;
-
-.icon360
-  composes icon
-  width: 45px
-  height: auto
-  padding-top: 3px;
-
-.infoBlock
-  position: absolute
-  bottom: 0
-  left: 0
-  right: 0
-  padding: 16px 0 16px
-  display: flex
-  flex-wrap: wrap
-  height: 40px;
-  box-sizing: content-box;
-  justify-content: space-between
+@import '../../legacy-theme/mixins.styl';
+
+.statsContainer
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 4px;
+  display: flex
+  padding: 0 16px;
+  margin-right: 16px;
+
+.statsBlock
+  font-size: 12px
+  display: flex
+  color: #646464;
+  box-sizing: border-box
+  justify-content: space-between
+  align-items: center;
+  
+  & + &
+    margin-left: 20px;
+
+  &:before
+    content: '';
+    width: 28px;
+    height: 25px;
+    flex-shrink: 0;
+    margin-right: 9px;
+    display inline-flex;
+    background-repeat no-repeat;
+
+.customersLookingTheCar
+  margin-left: -10px;
+  &:before
+    background-image: url('../../../media/svg/common/star.svg');
+
+.saveCarAsFavorites
+  &:before
+    height: 15px;
+    background-image: url('../../../media/svg/common/eye.svg');
+
+.controls
+  display flex;
+  align-items: center
+  color: $grey-75;
+  font-weight bold
+  box-sizing: border-box
+  font-size: 20px
+  margin-right: 10px
+
+.controlsEl
+  position: relative
+  margin-left: 16px;
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 4px
+  height: 40px;
+  width: 66px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+.icon
+  fill: $grey-75
+  cursor pointer;
+
+.icon360
+  composes icon
+  width: 45px
+  height: auto
+  padding-top: 3px;
+
+.infoBlock
+  position: absolute
+  bottom: 0
+  left: 0
+  right: 0
+  padding: 16px 0 16px
+  display: flex
+  flex-wrap: wrap
+  height: 40px;
+  box-sizing: content-box;
+  justify-content: space-between