@bytebrand/fe-ui-core 4.8.26 → 4.8.28

package/source/components/Alternative/Dealer.story.js

@@ -1,32 +1,32 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import DealerInfo from './DealerInfo';
-
-import styles from './Dealer.story.styl';
-
-const infoSections = [
-    {
-        title: 'Adresse',
-        value: 'Roteweg, 21 Stuttgart 70437'
-    },
-    {
-        title: 'Name',
-        value: 'Mahmood Saeedi'
-    },
-    {
-        title: 'Telefon',
-        value: '01779335555',
-        icon: 'telephone'
-    },
-    {
-        title: 'E-Mail',
-        value: 'mahmood.saeedi@auto.de'
-    }
-]
-
-storiesOf('Alternative', module)
-.add('DealerInfo', () => (
-    <div className={styles.dealerInfoContainer}>
-        <DealerInfo infoSections={infoSections} t={phrase => phrase} dealerPrice={10000} unsereMarge={1000} link='www.google.com' linkName='link'/>
-    </div>
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import DealerInfo from './DealerInfo';
+
+import styles from './Dealer.story.styl';
+
+const infoSections = [
+    {
+        title: 'Adresse',
+        value: 'Roteweg, 21 Stuttgart 70437'
+    },
+    {
+        title: 'Name',
+        value: 'Mahmood Saeedi'
+    },
+    {
+        title: 'Telefon',
+        value: '01779335555',
+        icon: 'telephone'
+    },
+    {
+        title: 'E-Mail',
+        value: 'mahmood.saeedi@auto.de'
+    }
+]
+
+storiesOf('Alternative', module)
+.add('DealerInfo', () => (
+    <div className={styles.dealerInfoContainer}>
+        <DealerInfo infoSections={infoSections} t={phrase => phrase} dealerPrice={10000} unsereMarge={1000} link='www.google.com' linkName='link'/>
+    </div>
 ))

package/source/components/Alternative/Dealer.story.styl

@@ -1,3 +1,3 @@
-.dealerInfoContainer
-    width: 360px
+.dealerInfoContainer
+    width: 360px
     margin: 0 auto

package/source/components/Alternative/DealerInfo.styl

@@ -1,116 +1,116 @@
-@import '../../theme/mixins.styl'
-@import '../../theme/theme.styl'
-
-.dealerInfoContainer
-    // border: 1px solid $grey-f5
-    font-family: sans-serif
-    background-color: $white
-    margin-top: 6px
-    borderRadius()
-
-.titleBlock
-    display: flex
-    justify-content: space-between
-    border-bottom: 1px solid $grey-f5
-    align-items: center
-    padding: 12px 16px 12px 20px
-
-.priceBlock
-    font-size: 12px
-
-.title
-    font-weight: 700
-    line-height: 16px
-    color: $black60
-
-.titleLink
-    font-size: 12px
-    color: $primary
-    display: flex
-    align-items: center
-
-.infoBlockItem
-    display: flex
-    justify-content: space-between
-    align-items: center
-    margin: 0 16px
-    border-bottom: 0.75px solid $grey-f5
-    padding: 10px 0 8px
-    font-size: 12px
-    color: $black80
-
-.valueWithIcon
-    display: flex
-    align-items: center
-    color: $black60
-    max-width: 50%;
-    text-align: right;
-
-.valueIcon
-    margin-left: 12px
-
-.titleIcon
-    margin-right: 6px
-    text-decoration: none
-
-.titlePrice
-    display: block
-    margin: 16px
-    font-weight: 700
-    font-size: 14px
-    line-height: 16px
-    color: $black60
-
-
-.priceItem
-    display: flex
-    justify-content: space-between
-    align-items: center
-    margin: 0 16px
-    padding: 12px 0
-    border-top: 0.75px solid $grey-f5
-    color: $black80
-
-.price
-    font-size: 16px !important
-
-.ourMargin
-    color: #333333D4 !important
-
-.unit
-    font-size: 16px !important
-    top: 7px !important
-
-.ourPriceInput
-    border: 0
-    text-align: right
-    font-weight: 700
-    font-size: 16px;
-    color: $black80;
-    width: 60px;
-
-.ourPriceInput:focus
-    outline: none
-
-.editIcon
-    width: 1.5rem;
-    height: auto;
-    fill: $skyBlue
-    margin-left: 5px
-
-.ourPriceBlock
-    display: flex;
-    align-items: center;
-    column-gap: 5px;
-
-.ourPrice
-    color: $skyBlue !important;
-    cursor: pointer;
-
-.editIconBlock
-    cursor: pointer;
-
-.editFieldWrapper
-    display: flex
-    align-items: center
-
+@import '../../theme/mixins.styl'
+@import '../../theme/theme.styl'
+
+.dealerInfoContainer
+    // border: 1px solid $grey-f5
+    font-family: sans-serif
+    background-color: $white
+    margin-top: 6px
+    borderRadius()
+
+.titleBlock
+    display: flex
+    justify-content: space-between
+    border-bottom: 1px solid $grey-f5
+    align-items: center
+    padding: 12px 16px 12px 20px
+
+.priceBlock
+    font-size: 12px
+
+.title
+    font-weight: 700
+    line-height: 16px
+    color: $black60
+
+.titleLink
+    font-size: 12px
+    color: $primary
+    display: flex
+    align-items: center
+
+.infoBlockItem
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin: 0 16px
+    border-bottom: 0.75px solid $grey-f5
+    padding: 10px 0 8px
+    font-size: 12px
+    color: $black80
+
+.valueWithIcon
+    display: flex
+    align-items: center
+    color: $black60
+    max-width: 50%;
+    text-align: right;
+
+.valueIcon
+    margin-left: 12px
+
+.titleIcon
+    margin-right: 6px
+    text-decoration: none
+
+.titlePrice
+    display: block
+    margin: 16px
+    font-weight: 700
+    font-size: 14px
+    line-height: 16px
+    color: $black60
+
+
+.priceItem
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin: 0 16px
+    padding: 12px 0
+    border-top: 0.75px solid $grey-f5
+    color: $black80
+
+.price
+    font-size: 16px !important
+
+.ourMargin
+    color: #333333D4 !important
+
+.unit
+    font-size: 16px !important
+    top: 7px !important
+
+.ourPriceInput
+    border: 0
+    text-align: right
+    font-weight: 700
+    font-size: 16px;
+    color: $black80;
+    width: 60px;
+
+.ourPriceInput:focus
+    outline: none
+
+.editIcon
+    width: 1.5rem;
+    height: auto;
+    fill: $skyBlue
+    margin-left: 5px
+
+.ourPriceBlock
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+
+.ourPrice
+    color: $skyBlue !important;
+    cursor: pointer;
+
+.editIconBlock
+    cursor: pointer;
+
+.editFieldWrapper
+    display: flex
+    align-items: center
+

package/source/components/Alternative/DealerInfo.tsx

@@ -1,171 +1,171 @@
-import React, { useState, useRef } from 'react';
-import styles from './DealerInfo.styl';
-import IconSVG from '../_common/IconSVG/IconSVG';
-import VehicleFormattedPrice from '../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
-import classnames from 'classnames';
-interface IDealerInfo {
-  infoSections: { title: string, value: string, icon?: string }[];
-  t: (key: string, options?: object) => string;
-  dealerPrice: number;
-  link?: string;
-  linkName?: string;
-  currentSalesPrice: number;
-  onCurrentSalesPriceChange: (price: number) => void;
-}
-
-const DealerInfo = ({ infoSections, t, dealerPrice, link, linkName, currentSalesPrice, onCurrentSalesPriceChange }: IDealerInfo) => {
-  if (!currentSalesPrice) return <></>;
-  const [isPriceUpdating, setPriceUpdating] = useState(false);
-  const [newPrice, setNewPrice] = useState(currentSalesPrice);
-  const inputRef = useRef(null);
-
-  const handleSubmit = () => {
-    setNewPrice(Math.max(currentSalesPrice, newPrice));
-    onCurrentSalesPriceChange(Math.max(currentSalesPrice, newPrice));
-  };
-
-  const handlePriceUpdating = () => {
-    if (isPriceUpdating) {
-      handleSubmit();
-      setPriceUpdating(false);
-    } else if (!isPriceUpdating) {
-      setPriceUpdating(true);
-      setTimeout(
-        () => {
-          inputRef.current.focus();
-        },
-        200
-      );
-    }
-  };
-
-  const onPriceChange = (e: any) => {
-    const newPrice = +e.target.value;
-    setNewPrice(Math.max(0, newPrice));
-  };
-
-  const onEnterSubmit = (e: any) => {
-    if (e.key === 'Enter') {
-      handleSubmit();
-      setPriceUpdating(false);
-    }
-  };
-
-  const ourMargin = newPrice - dealerPrice;
-
-  return (
-    <div className={styles.dealerInfoContainer}>
-      <div className={styles.titleBlock}>
-        <span className={styles.title}>
-          {t('vehicleProps:alternative.dealerContact')}
-        </span>
-        {!!link &&
-          <span className={styles.titleLink}>
-            <a className={styles.titleIcon} href={link} target='_blank' >{linkName}</a>
-            <IconSVG name='browse'></IconSVG>
-          </span>
-        }
-      </div>
-      <div className={styles.contactInfoBlock}>
-        {infoSections.map((item, index: number) => {
-          return (
-            <>
-              {!!item.value && <div className={styles.infoBlockItem} key={index}>
-                <span>{item.title}</span>
-                <span className={styles.valueWithIcon}>{item.value} {!!item.icon ? <IconSVG className={styles.valueIcon} name={item.icon}/> : ''}</span>
-              </div>}
-            </>
-          );
-        })}
-      </div>
-      <div className={styles.priceBlock}>
-        {/* <span className={styles.titlePrice}>
-          {t('vehicleProps:alternative.price')}
-        </span> */}
-        <span className={styles.priceItem}>
-          <span>
-            {t('vehicleProps:alternative.dealerPrice')}
-          </span>
-          <span>
-            <VehicleFormattedPrice
-              className={styles.price}
-              numbersAfterDot={0}
-              price={dealerPrice}
-              unit='€'
-              isNew={true}
-              numberContainerClassName={styles.numberContainer}
-              unitWrapperClassName={styles.unitWrapper}
-              unitClassName={styles.unit}
-              monthlyClassName={styles.monthly}
-            />
-          </span>
-        </span>
-        <span className={styles.priceItem}>
-          <span>
-            {t('vehicleProps:alternative.ourMargin')}
-          </span>
-          <span>
-            <VehicleFormattedPrice
-              className={classnames(styles.ourMargin, styles.price)}
-              numbersAfterDot={0}
-              price={ourMargin}
-              unit='€'
-              isNew={true}
-              numberContainerClassName={styles.numberContainer}
-              unitWrapperClassName={styles.unitWrapper}
-              unitClassName={styles.unit}
-            />
-          </span>
-        </span>
-        <span className={styles.priceItem}>
-          <span>
-            {t('vehicleProps:alternative.ourPrice')}
-          </span>
-          <div className={styles.editFieldWrapper}>
-            {isPriceUpdating
-              ? <div className={styles.ourPriceBlock}>
-                  <input
-                    className={styles.ourPriceInput}
-                    type='number'
-                    value={newPrice}
-                    onChange={e => onPriceChange(e)}
-                    ref={inputRef}
-                    onBlur={handleSubmit}
-                    onKeyPress={onEnterSubmit}
-                  />
-              </div>
-              : <span onClick={
-                  () => {
-                    setPriceUpdating(true);
-                    setTimeout(
-                      () => {
-                        inputRef.current.focus();
-                      },
-                      200
-                    );
-                  }}
-                >
-                <VehicleFormattedPrice
-                  className={classnames(styles.price, styles.ourPrice)}
-                  numbersAfterDot={0}
-                  price={newPrice}
-                  unit='€'
-                  isNew={true}
-                  numberContainerClassName={styles.numberContainer}
-                  unitWrapperClassName={styles.unitWrapper}
-                  unitClassName={styles.unit}
-                  monthlyClassName={styles.monthly}
-                />
-              </span>
-            }
-            <span className={styles.editIconBlock} onClick={handlePriceUpdating}>
-              <IconSVG className={styles.editIcon} customDimensions name='editPriceIcon'></IconSVG>
-            </span>
-          </div>
-        </span>
-      </div>
-    </div>
-  );
-};
-
-export default DealerInfo;
+import React, { useState, useRef } from 'react';
+import styles from './DealerInfo.styl';
+import IconSVG from '../_common/IconSVG/IconSVG';
+import VehicleFormattedPrice from '../Vehicle/VehicleFormattedPrice/VehicleFormattedPrice';
+import classnames from 'classnames';
+interface IDealerInfo {
+  infoSections: { title: string, value: string, icon?: string }[];
+  t: (key: string, options?: object) => string;
+  dealerPrice: number;
+  link?: string;
+  linkName?: string;
+  currentSalesPrice: number;
+  onCurrentSalesPriceChange: (price: number) => void;
+}
+
+const DealerInfo = ({ infoSections, t, dealerPrice, link, linkName, currentSalesPrice, onCurrentSalesPriceChange }: IDealerInfo) => {
+  if (!currentSalesPrice) return <></>;
+  const [isPriceUpdating, setPriceUpdating] = useState(false);
+  const [newPrice, setNewPrice] = useState(currentSalesPrice);
+  const inputRef = useRef(null);
+
+  const handleSubmit = () => {
+    setNewPrice(Math.max(currentSalesPrice, newPrice));
+    onCurrentSalesPriceChange(Math.max(currentSalesPrice, newPrice));
+  };
+
+  const handlePriceUpdating = () => {
+    if (isPriceUpdating) {
+      handleSubmit();
+      setPriceUpdating(false);
+    } else if (!isPriceUpdating) {
+      setPriceUpdating(true);
+      setTimeout(
+        () => {
+          inputRef.current.focus();
+        },
+        200
+      );
+    }
+  };
+
+  const onPriceChange = (e: any) => {
+    const newPrice = +e.target.value;
+    setNewPrice(Math.max(0, newPrice));
+  };
+
+  const onEnterSubmit = (e: any) => {
+    if (e.key === 'Enter') {
+      handleSubmit();
+      setPriceUpdating(false);
+    }
+  };
+
+  const ourMargin = newPrice - dealerPrice;
+
+  return (
+    <div className={styles.dealerInfoContainer}>
+      <div className={styles.titleBlock}>
+        <span className={styles.title}>
+          {t('vehicleProps:alternative.dealerContact')}
+        </span>
+        {!!link &&
+          <span className={styles.titleLink}>
+            <a className={styles.titleIcon} href={link} target='_blank' >{linkName}</a>
+            <IconSVG name='browse'></IconSVG>
+          </span>
+        }
+      </div>
+      <div className={styles.contactInfoBlock}>
+        {infoSections.map((item, index: number) => {
+          return (
+            <>
+              {!!item.value && <div className={styles.infoBlockItem} key={index}>
+                <span>{item.title}</span>
+                <span className={styles.valueWithIcon}>{item.value} {!!item.icon ? <IconSVG className={styles.valueIcon} name={item.icon}/> : ''}</span>
+              </div>}
+            </>
+          );
+        })}
+      </div>
+      <div className={styles.priceBlock}>
+        {/* <span className={styles.titlePrice}>
+          {t('vehicleProps:alternative.price')}
+        </span> */}
+        <span className={styles.priceItem}>
+          <span>
+            {t('vehicleProps:alternative.dealerPrice')}
+          </span>
+          <span>
+            <VehicleFormattedPrice
+              className={styles.price}
+              numbersAfterDot={0}
+              price={dealerPrice}
+              unit='€'
+              isNew={true}
+              numberContainerClassName={styles.numberContainer}
+              unitWrapperClassName={styles.unitWrapper}
+              unitClassName={styles.unit}
+              monthlyClassName={styles.monthly}
+            />
+          </span>
+        </span>
+        <span className={styles.priceItem}>
+          <span>
+            {t('vehicleProps:alternative.ourMargin')}
+          </span>
+          <span>
+            <VehicleFormattedPrice
+              className={classnames(styles.ourMargin, styles.price)}
+              numbersAfterDot={0}
+              price={ourMargin}
+              unit='€'
+              isNew={true}
+              numberContainerClassName={styles.numberContainer}
+              unitWrapperClassName={styles.unitWrapper}
+              unitClassName={styles.unit}
+            />
+          </span>
+        </span>
+        <span className={styles.priceItem}>
+          <span>
+            {t('vehicleProps:alternative.ourPrice')}
+          </span>
+          <div className={styles.editFieldWrapper}>
+            {isPriceUpdating
+              ? <div className={styles.ourPriceBlock}>
+                  <input
+                    className={styles.ourPriceInput}
+                    type='number'
+                    value={newPrice}
+                    onChange={e => onPriceChange(e)}
+                    ref={inputRef}
+                    onBlur={handleSubmit}
+                    onKeyPress={onEnterSubmit}
+                  />
+              </div>
+              : <span onClick={
+                  () => {
+                    setPriceUpdating(true);
+                    setTimeout(
+                      () => {
+                        inputRef.current.focus();
+                      },
+                      200
+                    );
+                  }}
+                >
+                <VehicleFormattedPrice
+                  className={classnames(styles.price, styles.ourPrice)}
+                  numbersAfterDot={0}
+                  price={newPrice}
+                  unit='€'
+                  isNew={true}
+                  numberContainerClassName={styles.numberContainer}
+                  unitWrapperClassName={styles.unitWrapper}
+                  unitClassName={styles.unit}
+                  monthlyClassName={styles.monthly}
+                />
+              </span>
+            }
+            <span className={styles.editIconBlock} onClick={handlePriceUpdating}>
+              <IconSVG className={styles.editIcon} customDimensions name='editPriceIcon'></IconSVG>
+            </span>
+          </div>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default DealerInfo;