@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.styl

@@ -0,0 +1,165 @@
+@import '../../../legacy-theme/mixins.styl'
+
+.vehiclePriceSection
+  display: flex
+  flex-direction: column;
+  text-align: left;
+  box-sizing: border-box
+  padding: 17px 10px 0 10px
+  width: 100%
+  grid-area: price;
+
+  +media-phone-up()
+    padding: 13px 12px 0 8px
+
+  &.vehiclePriceSectionSearch
+    padding: 0 10px;
+    +media-tablet-landscape-up()
+      flex-shrink: 0;
+      padding: 24px 5px 0 15px;
+      border-left: 1px solid rgba(76, 78, 100, 0.12)
+
+  &.vehiclePriceSectionFavorite
+    padding: 1px 10px 0 10px
+    +media-tablet-landscape-up()
+      margin-top: auto;
+      flex-shrink: 0;
+      padding: 0 5px 3px 15px;
+      border-left: 1px solid rgba(76, 78, 100, 0.12)
+      gap: 3px;
+
+  &.vehiclePriceSectionRecently
+    padding: 1px 10px 0 10px
+
+  &.vehiclePriceTitleMain
+    padding: 0 10px
+
+.vehiclePriceTitle
+  color: rgba(76, 78, 100, 0.87);
+  display flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: 11px;
+  height: 20px;
+
+  +media-tablet-landscape-up()
+    font-size 10px
+    height: 12px;
+
+  &.vehiclePriceTitleSearch
+    font-size: 12px;
+    height: 44px;
+
+  &.vehiclePriceTitleFavorite
+    font-size: 12px;
+    height: 42px;
+
+    +media-tablet-landscape-up()
+      font-size: 13px;
+      height: 46px;
+
+  &.vehiclePriceTitleRecently
+    font-size: 12px;
+    height: 42px;
+
+  &.vehiclePriceTitleLanding,
+  &.vehiclePriceTitleMain
+    font-size: 10px;
+    height: 38px;
+
+.addOfferButton
+  white-space: normal
+  margin: 5px 0 !important;
+  border-radius: 0 !important;
+
+.buttonDetails
+  width: 100%
+  height: 30px
+  font-size: 16px
+  margin-top: 8px !important;
+  font-weight bold !important;
+  border-radius: 4px !important;
+
+.isAlternativeButton
+  background-color: $alternative !important
+
+.wrapCheckbox
+  min-height: 42px !important;
+  justify-content: space-between !important;
+  margin-left: 0 !important;
+
+  & span
+    color: rgba(76, 78, 100, 0.87);
+    font-size: 12px;
+
+    +media-tablet-landscape-up()
+      font-size: 13px;
+
+.wrapHandleCompare
+  display: flex;
+  gap: 8px;
+  border-top: 1px solid rgba(76, 78, 100, 0.12);
+  padding-top: 15px;
+  justify-content: center;
+
+  +media-tablet-landscape-up()
+    margin-top: 12px;
+    padding-top: 0;
+    border: none;
+
+.btnCompareRemove
+  min-width: 50px !important;
+  height: 30px;
+  background-color: #fff !important;
+  display: flex !important;
+
+.btnCarToCompare
+  display: flex !important;
+  height: 30px;
+  font-size: 13px !important;
+  min-width: auto !important;
+  width: 100%;
+
+  +media-tablet-landscape-up()
+    width: 100%;
+
+.btnPlusIcon
+  font-size: 13px;
+  margin-right: 5px;
+
+  +media-tablet-landscape-up()
+    margin-right: 10px;
+
+
+.landingButton
+  position: relative;
+  padding: 0px 10px;
+  background-color: transparent; 
+  border-radius: 4px;
+  color: #005ccb; 
+  border: 1px solid #666CFF80; 
+  font-size: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  z-index: 0;
+
+.landingButton::before 
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 30%;
+  height: 100%;
+  background-color: #82b1ff91;
+  border-radius: 20%;
+  opacity: 0;
+  transition: width 0.7s ease-out, height 0.7s ease-out, opacity 0.7s ease-out;
+  z-index: -1;
+
+
+.landingButton:active::before 
+  width: 200%;
+  height: 200%;
+  opacity: 1;
+  transition: width 0.7s ease-out, height 0.7s ease-out, opacity 0.7s ease-out;

package/compat/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -0,0 +1,299 @@
+import * as React from 'react';
+import styles from './VehiclePrice.styl';
+import classnames from 'classnames';
+import VehiclePriceItem from '../VechiclePriceItem/VechiclePriceItem';
+import { IBuy, ILeasing, IFinancing, ICommonFinancing } from '../../../../types/types';
+import { isMobileOnly } from 'react-device-detect';
+import Button from '../../../Button/Button';
+import CheckboxMaterial from '../../../MdCheckbox/MdCheckbox';
+import IconSVG from '../../../../iconsvg/IconSVG';
+
+export interface IVehiclePriceSectionProps {
+  t?: (key: string, options?: object) => string;
+  className?: string;
+  id?: string;
+  title?: String;
+  isTotal?: boolean;
+  vatDeductible?: boolean;
+  isDealerSuperAdmin?: boolean;
+  routeObj?: any;
+  linkTag?: string;
+  classButton?: string;
+  showAboIcon?: boolean;
+  isNewPriceCategory?: boolean;
+  vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
+  monthlyInstallment?: number;
+  oldMonthlyInstallment?: number;
+  positionY?: string;
+  url?: string;
+  target?: string;
+  rel?: string;
+  iconName?: string;
+  priceSubMtl?: string | null;
+  mainImageId?: string;
+  showCompareCheckboxes?: boolean;
+  toRound?: boolean;
+  showOfferBtn?: boolean;
+  margin?: number;
+  leasing?: ILeasing;
+  financing?: IFinancing;
+  buy?: IBuy;
+  common: ICommonFinancing;
+  vatRate?: number;
+  onDetailsClick(id: string): void;
+  toggleCarToCompare?(carId?: React.ChangeEvent<HTMLInputElement>): void;
+  onRemoveClick?(carId: string): void;
+  toCompare?: boolean;
+  onAddOfferToMainSlideClick?: (id: string, mainImageId: string, price: number, financingConfig: any) => void;
+  combineRefAlternative?: boolean;
+  typeAlternative?: string;
+  // ADV-88: hide the "monatlich z.B."/"monthly e.g." column header for the task's cars
+  // (new plug-in hybrids that get the externalised consumption row) so the price column
+  // moves up. Passed true from VehicleSmallCard only when the consumption row is shown.
+  suppressMonthlyFrom?: boolean;
+}
+
+// interface IPriceData {
+//   tooltipDescription?: string;
+//   perMonthOld?: any;
+//   isAlternativeText?: string;
+//   perMonthCurrent?: any;
+//   showAboIcon?: boolean;
+//   isPriceDisable?: boolean;
+//   isTotal?: boolean;
+//   isNewPriceCategory?: boolean;
+//   positionY?: any;
+//   priceSub?: string | null;
+//   prefixOldPrice?: string | null;
+//   postfix?: any;
+//   title?: string;
+//   margin?: number;
+//   totalCurrent: number;
+// }
+
+const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceSectionProps) => {
+
+  const onAddOfferClick = (event: any) => {
+    const { id, mainImageId, buy: { currentSalesPriceExtra } } = props;
+    event.stopPropagation();
+    event.preventDefault();
+    props.onAddOfferToMainSlideClick(id, mainImageId, currentSalesPriceExtra, props);
+  };
+
+  const onDetailsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const { id, onDetailsClick } = props;
+    event.preventDefault();
+    event.stopPropagation();
+    onDetailsClick(id);
+  };
+
+  const {
+    t,
+    combineRefAlternative,
+    url,
+    target,
+    rel,
+    isDealerSuperAdmin,
+    linkTag,
+    showOfferBtn,
+    routeObj,
+    toggleCarToCompare,
+    toCompare,
+    classButton,
+    onRemoveClick,
+    showCompareCheckboxes,
+    vatRate,
+    iconName,
+    vehicleComponentName,
+    financing: { monthlyInstallment, oldMonthlyInstallment },
+    leasing: {
+      monthlyInstallment: lMonthlyInstallment,
+      oldMonthlyInstallment: lOldMonthlyInstallment,
+      isActive: isLeasingActive
+    },
+    buy: {
+      currentSalesPriceExtra = 0,
+      highestPriceExtra = 0
+    } = {},
+    common: { isStrikeShown },
+    typeAlternative,
+    suppressMonthlyFrom,
+    margin
+  } = props;
+
+  const vehiclePriceSectionClassName = classnames(
+    styles.vehiclePriceSection,
+    { [styles.vehiclePriceSectionSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.vehiclePriceSectionFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehiclePriceSectionRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' },
+    { [styles.vehiclePriceTitleMain]: vehicleComponentName === 'main' }
+  );
+
+  const vehiclePriceTitleClassName = classnames(
+    styles.vehiclePriceTitle,
+    { [styles.vehiclePriceTitleFavorite]: vehicleComponentName === 'favorite' },
+    { [styles.vehiclePriceTitleRecently]: vehicleComponentName === 'recently' },
+    { [styles.vehiclePriceTitleLanding]: vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
+    { [styles.vehiclePriceTitleSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+  );
+
+  const buttonClassNames = classnames(
+    classButton,
+    styles.buttonDetails,
+    { [styles.landingButton]: vehicleComponentName === 'landing' },
+    { [styles.isAlternativeButton]: typeAlternative }
+  );
+
+  const offerBtnVariantCondition = vehicleComponentName === 'recently' ||
+                                   vehicleComponentName === 'landing' ||
+                                   vehicleComponentName === 'main' ? 'outlined' : 'contained';
+
+  // ADV-70 (design): the monthly label ("mtl."/"mth.") is shown BEFORE every monthly rate on
+  // all card surfaces (SRL desktop+mobile, comparable, home, landing) — derive it from the
+  // localized priceSub key instead of the consumer-passed priceSubMtl (which is null on mobile),
+  // so it renders consistently everywhere. VehiclePriceItem strips the leading "/".
+  const monthlyPrefix = (t && t('vehicleProps:value.priceSub')) || '';
+
+  const priceItemsGlobal = [
+    {
+      perMonthOld: oldMonthlyInstallment,
+      perMonthCurrent: monthlyInstallment,
+      title: t('vehicleProps:title.financing'),
+      // ADV-88 (design): drop the "z.B."/"e.g." prefix on the SRL card — the monthly label carries the meaning.
+      prefixOldPrice: false,
+      postfix: '3',
+      priceSub: monthlyPrefix,
+      tooltipDescription: !combineRefAlternative && t('vehicleProps:title.financingDescription')
+    },
+    {
+      perMonthOld: lOldMonthlyInstallment,
+      perMonthCurrent: lMonthlyInstallment,
+      prefixOldPrice: false,
+      postfix: '1,3',
+      isPriceDisable: !isLeasingActive,
+      title: t('vehicleProps:title.leasing'),
+      priceSub: monthlyPrefix,
+      tooltipDescription: !combineRefAlternative && t('vehicleProps:title.leasingDescription')
+    }
+  ];
+
+  // const showAboCondition = vehicleComponentName !== 'favorite' &&
+  //                          vehicleComponentName !== 'recently' &&
+  //                          vehicleComponentName !== 'search';
+  const showAboCondition = false;
+
+  const Abo = showAboCondition ? [
+    {
+      perMonthOld: oldMonthlyInstallment,
+      perMonthCurrent: monthlyInstallment,
+      isNewPriceCategory: true,
+      showAboIcon: true,
+      isPriceDisable: true,
+      positionY: 'top',
+      title: t('vehicleProps:title.abo'),
+      tooltipDescription: t('vehicleProps:title.aboDescription')
+    }
+  ] : '';
+
+  const priceData:any = combineRefAlternative ? [
+    ...priceItemsGlobal,
+    {
+      isTotal: true,
+      totalCurrent: currentSalesPriceExtra,
+      postfix: !!vatRate ? '1' : '',
+      title: t('vehicleProps:title.buy'),
+      isAlternativeText: t('vehicleProps:title.margeInkl')
+    },
+    {
+      isTotal: true,
+      totalCurrent: margin ? margin : currentSalesPriceExtra,
+      title: t('vehicleProps:title.marge'),
+      isMarge: true
+    }
+  ] : [
+    ...priceItemsGlobal,
+    ...Abo,
+    {
+      isTotal: true,
+      totalCurrent: currentSalesPriceExtra,
+
+      postfix: !!vatRate ? '1' : '',
+      title: t('vehicleProps:title.buy'),
+      tooltipDescription: t('vehicleProps:title.buyDescription')
+    }
+  ];
+
+  return (
+    <section className={vehiclePriceSectionClassName}>
+      {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
+        <CheckboxMaterial
+          checked={toCompare}
+          onChange={toggleCarToCompare}
+          labelPlacement='start'
+          label={t('FavoritesPage:toCompare')}
+          formControlClassName={styles.wrapCheckbox}
+        />
+      )}
+      {!suppressMonthlyFrom && vehicleComponentName !== 'favorite' && vehicleComponentName !== 'search' && !isMobileOnly && (
+        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+      )}
+      {!suppressMonthlyFrom && isMobileOnly && !showCompareCheckboxes && (
+        <span className={vehiclePriceTitleClassName}>{t('vehicleProps:title.monthlyFrom')}</span>
+      )}
+      {priceData.map((props: any) => (
+        <VehiclePriceItem
+          tooltipDescription={props.tooltipDescription}
+          key={props.title}
+          priceTitle={props.title}
+          isPriceDisable={props.isPriceDisable}
+          perMonthOld={props.perMonthOld}
+          perMonthCurrent={props.perMonthCurrent}
+          isNewPriceCategory={props.isNewPriceCategory}
+          isAlternativeText={props.isAlternativeText}
+          showAboIcon={props.showAboIcon}
+          totalOld={highestPriceExtra}
+          isTotal={props.isTotal}
+          priceSub={props.priceSub}
+          positionY={props.positionY}
+          url={url}
+          target={target}
+          rel={rel}
+          isStrikeShown={isStrikeShown}
+          iconName={iconName}
+          prefixOldPrice={props.prefixOldPrice}
+          totalCurrent={props.totalCurrent}
+          postfix={props.postfix}
+          linkTag={linkTag}
+          routeObj={routeObj}
+          vehicleComponentName={vehicleComponentName}
+          combineRefAlternative={combineRefAlternative}
+          isMarge={props.isMarge}
+        />
+      ))}
+      {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
+        <div className={styles.wrapHandleCompare}>
+          <Button variant='outlined' onClick={onRemoveClick} className={styles.btnCompareRemove} color='error'>
+            <IconSVG className={styles.removeIcon} name='trashRed' customDimensions />
+          </Button>
+          <Button className={styles.btnCarToCompare} variant='outlined' onClick={toggleCarToCompare}>
+            <span className={styles.btnPlusIcon}>{!toCompare ? '+' : '-'}</span>
+            {t('FavoritesPage:compare')}
+          </Button>
+        </div>
+      )}
+      {isDealerSuperAdmin && !typeAlternative ? (
+        <Button className={styles.addOfferButton} onClick={onAddOfferClick}>
+          {t('vehicleProps:title.addOfferToMainSlide')}
+        </Button>
+      ) : null}
+      {showOfferBtn ? (
+        vehicleComponentName === 'landing' ? (
+          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+        ) :
+          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+      ) : ''}
+    </section>
+  );
+};
+
+export default VehiclePrice;

package/compat/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.styl

@@ -0,0 +1,33 @@
+@import '../../../legacy-theme/mixins.styl';
+
+.carProp
+  display: flex
+  box-sizing: border-box;
+  font-size: 12px
+  line-height: 1;
+  color: rgba(76, 78, 100, 0.87);
+  align-items: center;
+  border-bottom: 1px solid rgba(76, 78, 100, 0.12);
+
+.smallProp
+  span
+    font-size: 9px !important
+
+.pluginVal
+  span
+    font-size: 9px !important
+
+.carIcon
+  width: 28px;
+  height: 30px;
+  margin-right: 5px
+  flex-shrink: 0
+
+  +media-tablet-landscape-up()
+    margin-right: 10px
+
+.noIcon
+  padding-left: 5px
+
+[class*='smallText']
+  font-size:10px;

package/compat/VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import IconSVG from '../../../../iconsvg/IconSVG';
+import styles from './VehicleProperty.styl';
+
+export interface IVehicleProperty {
+  className?: string;
+  classNameIcon?: string;
+  smalltext?: boolean;
+  icon: string;
+  description: React.ReactNode;
+  hybridPlugin?: boolean;
+}
+
+class VehicleProperty extends React.Component<IVehicleProperty, {}> {
+  static readonly defaultProps: IVehicleProperty = {
+    icon: '',
+    description: 'no description'
+  };
+
+  render(): React.ReactNode {
+    const { className, classNameIcon, icon, description, smalltext, hybridPlugin } = this.props;
+    const noIcon: boolean = !icon;
+    const propertyClass: string = `${styles.carProp} ${className ? className : ''} ${smalltext ? styles.smallProp : ''} ${hybridPlugin ? styles.pluginVal : ''} ${noIcon ? styles.noIcon : ''}`;
+    const propertyClassIcon: string = `${styles.carIcon} ${classNameIcon ? classNameIcon : ''}`;
+
+    return (
+      <div className={propertyClass}>
+        {!noIcon && <IconSVG className={propertyClassIcon} name={icon} customDimensions />}
+        <span>{description}</span>
+      </div>
+    );
+  }
+}
+
+export default VehicleProperty;

package/compat/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.styl

@@ -0,0 +1,136 @@
+@import '../../../legacy-theme/mixins.styl'
+
+.infoSection
+  position: relative
+  align-items: center;
+  box-sizing: border-box
+  display: block
+  padding: 10px 30px 10px 16px
+  +media-tablet-landscape-up()
+    padding: 6px;
+    display: flex
+  &.infoSectionSearch
+    +media-tablet-landscape-up()
+      padding 0;
+  &.infoSectionMyVehicles
+    +media-phone-only()
+      display: flex
+  &.infoSectionRecently
+    +media-tablet-landscape-down()
+      padding: 12px 30px 12px 16px
+
+.wrapTitles
+  display flex;
+  truncate();
+  +media-phone-only()
+    display block
+  &.wrapTitlesSearch
+    display block
+    +media-tablet-landscape-up()
+      display flex
+  &.wrapTitlesAlternative
+    +media-tablet-landscape-up()
+      flex-wrap: wrap
+  &.wrapTitlesFavorite
+    display: flex;
+    +media-tablet-landscape-up()
+      display: flex;
+  &.wrapTitlesRecently
+    display: flex;
+
+.manufacturerModel
+  font-size: 16px
+  font-weight: bold
+  white-space: nowrap
+  color: $grey-3
+  margin: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+  text-overflow: ellipsis;
+  max-width: 221px;
+
+.subModel
+  margin: 0 0 -1px 3px
+  white-space: nowrap
+  color: $grey-3
+  overflow: hidden
+  text-overflow: ellipsis
+  margin 0
+  max-width: 88vw
+
+  +media-tablet-landscape-up()
+    margin: 0 0 -1px 3px
+    overflow: hidden
+
+.optionTitle
+  display: flex
+  flex-direction: row
+  align-items: center
+  flex-wrap: nowrap
+  font-size: 11px
+  truncate();
+
+  &.optionTitleSearch
+    font-size: 12px;
+    margin-top: 3px;
+    +media-tablet-landscape-up()
+      margin-left: 8px;
+      width: 100%
+      margin-top: 0;
+  &.optionTitleFavorite
+    font-size: 12px;
+    margin-left: 8px;
+    +media-tablet-landscape-up()
+      margin-left: 8px;
+  &.optionTitleRecently
+    font-size: 12px;
+    margin-left: 8px;
+  &.optionTitleIsAlternative
+    overflow: hidden;
+    .subModel
+      margin: 5px 0 0 0
+      +media-tablet-landscape-up()
+        max-width: 260px;
+    +media-tablet-landscape-up()
+      margin-left: 0
+
+.sponsored
+  font-weight: 700
+  font-style: normal
+  font-size: 10px
+  border 1px solid $grey-c
+  padding: 2px 5px
+  box-sizing: border-box
+  border-radius 3px
+  line-height: 12px
+  margin-left: 5px;
+  text-transform: uppercase
+
+.starButton
+  margin-left: auto
+
+  +media-phone-only()
+    position: absolute
+    top: 5px
+    right: 5px
+    z-index: 2
+
+.userButton
+  display: inline-block
+  width: 25px
+  height: 25px
+  cursor: pointer
+  background-size: cover
+  +media-phone-up()
+    width: 18px
+    height: 18px
+
+.userButton.favorite
+  fill: white
+  stroke: $skyBlue
+  stroke-width: 5px
+  &.active
+    fill: $skyBlue
+
+.userButton.favorite:hover
+  fill: $skyBlue