@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/AdvantageItem/AdvantageItem.styl

@@ -0,0 +1,47 @@
+@import '../legacy-theme/theme.styl';
+@import '../legacy-theme/mixins.styl';
+
+.advantage
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+
+.imageContainer
+  position: relative
+  max-width: 74px
+  max-height: 96px
+
+  +media-tablet-down()
+    max-width: 100px
+    max-height: 100%
+
+.image
+  display: block
+  width: 100%
+  height: auto
+
+.image.small
+  width: 30px
+  height: 30px
+  margin-bottom: 8px
+
+  +media-tablet-down()
+    width: 35px
+    height: 35px
+    margin-bottom: 20px
+
+.title
+  text-transform: uppercase
+  color: white
+  font-family: $font-style-arial
+  font-weight: $font-weight-normal
+  font-size: $font-size-default
+
+  +media-phone-up()
+    font-size: $font-size-h5
+    font-weight: $font-weight-bold
+    color: $primary
+
+  +media-tablet-down()
+    color: $skyBlue

package/compat/AdvantageItem/AdvantageItem.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './AdvantageItem.styl';
+
+interface IAdvantageItemProps {
+  className?: string;
+
+  imageSrc?: string;
+  title?: string;
+}
+
+const AdvantageItem: React.FunctionComponent<IAdvantageItemProps> = ({ imageSrc, title, className }) => {
+  const withTitle = !!title;
+
+  return (
+    <div className={classnames(styles.advantage, className)}>
+      <div className={styles.imageContainer}>
+        {imageSrc ? <img src={imageSrc} alt='image' className={classnames(styles.image, { [styles.small]: withTitle })} /> : false}
+      </div>
+      {withTitle ? <span className={styles.title}>{title}</span> : false}
+    </div>
+  );
+};
+
+export default AdvantageItem;

package/compat/Alternative/DealerInfo.styl

@@ -0,0 +1,116 @@
+@import '../legacy-theme/mixins.styl'
+@import '../legacy-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/compat/Alternative/DealerInfo.tsx

@@ -0,0 +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;

package/compat/Badge/Badge.styl

@@ -0,0 +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;

package/compat/Badge/Badge.tsx

@@ -0,0 +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;

package/compat/BodyTypeIcons/Audi.tsx

@@ -0,0 +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 */