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

package/compat/Alternative/DealerInfo.tsx

@@ -1,171 +1,171 @@
-import React, { useState, useRef } from 'react';
-import styles from './DealerInfo.styl';
-import IconSVG from '../../iconsvg/IconSVG';
-import VehicleFormattedPrice from '../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 '../../iconsvg/IconSVG';
+import VehicleFormattedPrice from '../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;

package/compat/Badge/Badge.styl

@@ -1,44 +1,44 @@
-@import '../legacy-theme/theme.styl'
-
-$badge-height = 24px
-$badge-width = 40px
-$badge-border-width = 1px
-
-.badge
-  display: inline-block
-  border-radius: 16px
-  padding: 0 10px
-  box-sizing: border-box
-  text-align: center
-  width: auto
-  min-width: $badge-width
-  height: $badge-height
-  border-width: $badge-border-width
-  border-style: solid
-  border-color: transparent
-  vertical-align: middle
-  font-weight: 400
-  font-size: 13px
-  display: flex;
-  align-items: center;
-  line-height: 1;
-  justify-content: center;
-
-.white
-  background-color: white
-  border-color: $grey-trans
-.grey
-  background-color: $grey-c
-.green
-  background-color: $lightGreen
-  color: white
-.blue
-  background-color: $primary
-  color: white
-.lightBlue
-  background-color: #26C6F9
-  color: white 
-
-.red
-  color: #fff;
-  background-color: #E60000;
+@import '../legacy-theme/theme.styl'
+
+$badge-height = 24px
+$badge-width = 40px
+$badge-border-width = 1px
+
+.badge
+  display: inline-block
+  border-radius: 16px
+  padding: 0 10px
+  box-sizing: border-box
+  text-align: center
+  width: auto
+  min-width: $badge-width
+  height: $badge-height
+  border-width: $badge-border-width
+  border-style: solid
+  border-color: transparent
+  vertical-align: middle
+  font-weight: 400
+  font-size: 13px
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  justify-content: center;
+
+.white
+  background-color: white
+  border-color: $grey-trans
+.grey
+  background-color: $grey-c
+.green
+  background-color: $lightGreen
+  color: white
+.blue
+  background-color: $primary
+  color: white
+.lightBlue
+  background-color: #26C6F9
+  color: white 
+
+.red
+  color: #fff;
+  background-color: #E60000;

package/compat/Badge/Badge.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import styles from './Badge.styl';
-
-export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red' | 'lightBlue';
-
-export interface IBadgeProps {
-  children: any;
-  type?: TBadgeType;
-  className?: string;
-}
-
-const Badge: React.FC<IBadgeProps> = ({ children, className, type }) => (
-  <div className={classnames(styles.badge, styles[type], className)}>
-    {children}
-  </div>
-);
-
-Badge.defaultProps = {
-  type: 'white',
-  className: ''
-};
-
-export default Badge;
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './Badge.styl';
+
+export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red' | 'lightBlue';
+
+export interface IBadgeProps {
+  children: any;
+  type?: TBadgeType;
+  className?: string;
+}
+
+const Badge: React.FC<IBadgeProps> = ({ children, className, type }) => (
+  <div className={classnames(styles.badge, styles[type], className)}>
+    {children}
+  </div>
+);
+
+Badge.defaultProps = {
+  type: 'white',
+  className: ''
+};
+
+export default Badge;

package/compat/BodyTypeIcons/Audi.tsx

@@ -1,9 +1,9 @@
-/* tslint:disable */
-import * as React from 'react';
-
-const SvgAudi = (props: any) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="258.666" height="258.666" viewBox="0 0 2688 2110" shapeRendering="geometricPrecision" textRendering="geometricPrecision" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd" {...props}><path d="M2136 593c-100 0-192 34-265 92-73-58-165-92-265-92s-192 34-265 92c-73-58-165-92-265-92s-192 34-265 92c-73-58-165-92-265-92-236 0-427 191-427 427s191 427 427 427c100 0 192-34 265-92 73 58 165 92 265 92s192-34 265-92c73 58 165 92 265 92s192-34 265-92c73 58 165 92 265 92 236 0 427-191 427-427s-191-427-427-427zM743 1285c-54 40-122 64-195 64-182 0-329-147-329-329s147-329 329-329c72 0 140 24 195 64-58 73-92 165-92 265s35 192 92 265zm70-70c-41-55-64-122-64-195s24-141 64-195c41 55 64 122 64 195s-24 141-64 195zm459 70c-55 40-122 64-195 64s-140-24-195-64c57-73 92-165 92-265s-34-192-92-265c55-40 122-64 195-64s140 24 195 64c-58 73-92 165-92 265s35 192 92 265zm70-70c-40-55-64-122-64-195s24-141 64-195c41 55 64 122 64 195s-24 141-64 195zm459 70c-55 40-122 64-195 64s-140-24-195-64c57-73 92-165 92-265s-34-192-92-265c55-40 122-64 195-64s140 24 195 64c-58 73-92 165-92 265s35 192 92 265zm70-70c-40-55-64-122-64-195s24-141 64-195c41 55 64 122 64 195s-24 141-64 195zm265 134c-72 0-140-24-195-64 57-73 92-165 92-265s-34-192-92-265c54-40 122-64 195-64 182 0 329 147 329 329s-147 329-329 329z" fill="#373435" id="Layer_x0020_1"/></svg>
-);
-
-export default SvgAudi;
-/* tslint:enable */
+/* tslint:disable */
+import * as React from 'react';
+
+const SvgAudi = (props: any) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="258.666" height="258.666" viewBox="0 0 2688 2110" shapeRendering="geometricPrecision" textRendering="geometricPrecision" imageRendering="optimizeQuality" fillRule="evenodd" clipRule="evenodd" {...props}><path d="M2136 593c-100 0-192 34-265 92-73-58-165-92-265-92s-192 34-265 92c-73-58-165-92-265-92s-192 34-265 92c-73-58-165-92-265-92-236 0-427 191-427 427s191 427 427 427c100 0 192-34 265-92 73 58 165 92 265 92s192-34 265-92c73 58 165 92 265 92s192-34 265-92c73 58 165 92 265 92 236 0 427-191 427-427s-191-427-427-427zM743 1285c-54 40-122 64-195 64-182 0-329-147-329-329s147-329 329-329c72 0 140 24 195 64-58 73-92 165-92 265s35 192 92 265zm70-70c-41-55-64-122-64-195s24-141 64-195c41 55 64 122 64 195s-24 141-64 195zm459 70c-55 40-122 64-195 64s-140-24-195-64c57-73 92-165 92-265s-34-192-92-265c55-40 122-64 195-64s140 24 195 64c-58 73-92 165-92 265s35 192 92 265zm70-70c-40-55-64-122-64-195s24-141 64-195c41 55 64 122 64 195s-24 141-64 195zm459 70c-55 40-122 64-195 64s-140-24-195-64c57-73 92-165 92-265s-34-192-92-265c55-40 122-64 195-64s140 24 195 64c-58 73-92 165-92 265s35 192 92 265zm70-70c-40-55-64-122-64-195s24-141 64-195c41 55 64 122 64 195s-24 141-64 195zm265 134c-72 0-140-24-195-64 57-73 92-165 92-265s-34-192-92-265c54-40 122-64 195-64 182 0 329 147 329 329s-147 329-329 329z" fill="#373435" id="Layer_x0020_1"/></svg>
+);
+
+export default SvgAudi;
+/* tslint:enable */