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

package/compat/VehicleDetailedSidebar/partials/Properties.styl

@@ -1,58 +1,58 @@
-@import '../../legacy-theme/mixins.styl';
-
-.property
-  flex-basis: 50%
-  width: 50%
-  box-sizing: border-box
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-  margin: 0
-  text-transform: none
-  padding: 7px 3px;
-  white-space: pre-line;
-  border-bottom: 0;
-
-  &:nth-child(1),
-  &:nth-child(2)
-    border-top-color: transparent;
-
-// ADV-70: full-width consumption/CO2 row in the sidebar Overview tab.
-.propertyFull
-  flex-basis: 100%
-  width: 100%
-
-.details
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  justify-content: space-between
-  font-size: 12px
-  width: 100%
-
-.detailsItemFirstLine
-  width: 47%
-  padding-top: 7px
-  padding-bottom: 20px
-  border-bottom: 1px solid $grey-e
-
-.detailsItemLastLine
-  width: 47%
-  padding-top: 20px
-
-.detailsTitle
-  font-weight: bold
-  font-size: 12px
-  margin-bottom: 5px;
-
-.detailsContent
-  display: block
-  line-height: 1.5em
-
-.tabContentPadding
-  padding: 10px 10px 10px 10px;
-  flex-direction: row
-  justify-content: space-between
-  display flex;
-  flex-wrap: wrap
-
-.tabContentOverviewPadding
-  padding: 10px 0px
+@import '../../legacy-theme/mixins.styl';
+
+.property
+  flex-basis: 50%
+  width: 50%
+  box-sizing: border-box
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  margin: 0
+  text-transform: none
+  padding: 7px 3px;
+  white-space: pre-line;
+  border-bottom: 0;
+
+  &:nth-child(1),
+  &:nth-child(2)
+    border-top-color: transparent;
+
+// ADV-70: full-width consumption/CO2 row in the sidebar Overview tab.
+.propertyFull
+  flex-basis: 100%
+  width: 100%
+
+.details
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-between
+  font-size: 12px
+  width: 100%
+
+.detailsItemFirstLine
+  width: 47%
+  padding-top: 7px
+  padding-bottom: 20px
+  border-bottom: 1px solid $grey-e
+
+.detailsItemLastLine
+  width: 47%
+  padding-top: 20px
+
+.detailsTitle
+  font-weight: bold
+  font-size: 12px
+  margin-bottom: 5px;
+
+.detailsContent
+  display: block
+  line-height: 1.5em
+
+.tabContentPadding
+  padding: 10px 10px 10px 10px;
+  flex-direction: row
+  justify-content: space-between
+  display flex;
+  flex-wrap: wrap
+
+.tabContentOverviewPadding
+  padding: 10px 0px

package/compat/VehicleDetailedSidebar/partials/Properties.tsx

@@ -1,155 +1,155 @@
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import _get from 'lodash/get';
-import { IPropertiesProps, ICarPropElement } from '../../../types/types';
-import { getActualHighlights } from '../../../constants/highlights';
-import TabsComponent from '../../MdTabs/MdTabs';
-import { addPrefixToKeys } from '../../../utils/CommonUtils';
-import { getOverviewDetails } from '../../../vehiclesProps/vehicleDetails';
-import VehicleProperty from '../../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
-import styles from './Properties.styl';
-
-const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decoratedProps, isAlternative }) => {
-  const [priceTabActiveIndex, setNewIndex] = useState(0);
-
-  const onTabPriceSelect = (_: React.ChangeEvent<{}>, priceTabActiveIndex: number) => {
-    setNewIndex(priceTabActiveIndex);
-  };
-
-  const renderPropsBlock = (data: ICarPropElement[]) => {
-    return (
-      data.map((prop, i) => {
-        return (
-          <VehicleProperty
-            key={i}
-            classNameIcon={styles.propertyIcon}
-            description={prop.description}
-            icon={prop.icon || 'no-image'}
-            className={styles.property}
-          />
-        );
-      })
-    );
-  };
-
-  const renderHighlights = () => {
-    const actualHighlights: ICarPropElement[] = getActualHighlights(car, t) || [];
-    const MAX_HIGHLIGHTS = 12;
-
-    return !!actualHighlights.length
-    ? renderPropsBlock(actualHighlights.slice(0, MAX_HIGHLIGHTS))
-    : <div className={styles.empty}>{t(`sidebar.empty`)}</div>;
-  };
-
-  // ADV-70: hide a spec line whose value is "N/A", a zero ("0 mm", "0 kWh", "0 g CO2/km", ...),
-  // null or empty — mirrors AccordionWidget.isHiddenSpecValue. de-DE thousands "." / decimal ","
-  // are normalised so only a true zero magnitude hides; codes like HSN "0588" stay visible.
-  const isHiddenSpecValue = (value: any): boolean => {
-    if (value === null || value === undefined) return true;
-    if (typeof value !== 'string') return false; // JSX / non-string content → always keep
-    const trimmed = value.trim();
-    if (trimmed === '' || trimmed === t('vehicleProps:value.na')) return true;
-    const numeric = parseFloat(trimmed.replace(/\./g, '').replace(',', '.'));
-    return numeric === 0;
-  };
-
-  const renderDetails = (): React.ReactNode => {
-    const equipmentsObj = {
-      ...addPrefixToKeys(car.lights, 'lights'),
-      ...addPrefixToKeys(car.multimedia, 'multimedia'),
-      ...addPrefixToKeys(car.seats, 'seats')
-    };
-
-    const equipmentsArr = Object.keys(equipmentsObj)
-      .filter(key => !!equipmentsObj[key])
-      .slice(0, 2)
-      .map(prop => t(`cbd:${prop}`));
-
-    // ADV-70: build each section's visible lines, dropping N/A/0 values. A section that loses
-    // all its lines (e.g. "Maße & Abmessungen" when length+width are both N/A) is removed and
-    // the next section flows up so there is no gap in the 2-column grid.
-    const sectionsConfig: Array<{ title: string; props?: string[]; lines?: string[] }> = [
-      { title: t(`sidebar.dataEngine`), props: ['cubicCapacity', 'torque'] },
-      { title: t(`sidebar.dimensions`), props: ['length', 'width'] },
-      { title: t(`sidebar.generalData`), props: ['doors', 'fuel'] },
-      { title: t(`sidebar.equipments`), lines: equipmentsArr.length ? [equipmentsArr.join(', ')] : [] }
-    ];
-
-    const visibleSections = sectionsConfig
-      .map(({ title, props, lines }) => ({
-        title,
-        lines: props
-          ? props
-              .filter(prop => decoratedProps[prop] && !isHiddenSpecValue(decoratedProps[prop].value))
-              .map(prop => `${decoratedProps[prop].title}: ${decoratedProps[prop].value}`)
-          : (lines || [])
-      }))
-      .filter(section => section.lines.length > 0);
-
-    if (!visibleSections.length) return null;
-
-    // Class by VISIBLE position, not original index: the first two sections form the top row
-    // (detailsItemFirstLine — padding-top 7px), the rest the bottom row (detailsItemLastLine —
-    // padding-top 20px). So a section promoted into the top row drops its 20px top padding,
-    // while a section that stays in the bottom row keeps it.
-    return (
-      <div className={styles.details}>
-        {visibleSections.map(({ title, lines }, i) => (
-          <div key={i} className={i > 1 ? styles.detailsItemLastLine : styles.detailsItemFirstLine}>
-            <h4 className={styles.detailsTitle}>{title}</h4>
-            {lines.map((line, j) => (
-              <span key={j} className={styles.detailsContent}>{line}</span>
-            ))}
-          </div>
-        ))}
-      </div>
-    );
-  };
-
-  const mainPropertiesList = getOverviewDetails(car.consumption.fuel);
-  // ADV-70: the consumption/CO2 line is long — let it span the full sidebar width on its own
-  // row (and drop the fuel icon) instead of being squeezed into one 50% column.
-  const mainProperties = mainPropertiesList.map((prop: string) => {
-    const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
-    return {
-      icon: isConsumptionAlternateView ? '' : decoratedProps[prop].icon,
-      description: decoratedProps[prop].value,
-      fullWidth: isConsumptionAlternateView
-    };
-  });
-
-  const tabsTitles = [
-    {
-      title: `${t(`sidebar.overview`)}`,
-      children: (
-        <div className={`${styles.tabContentPadding} ${styles.tabContentOverviewPadding}`}>
-          {mainProperties.map(({ fullWidth, ...property }: any, index: number) => (
-            <VehicleProperty {...property} className={classNames(styles.property, fullWidth ? styles.propertyFull : '')} key={index} />
-          ))}
-        </div>
-      )
-    },
-    {
-      title: 'highlights',
-      children: <div className={styles.tabContentPadding}>{renderHighlights()}</div>
-    },
-    {
-      title: 'details',
-      children: <div className={styles.tabContentPadding}>{renderDetails()}</div>
-    }
-  ];
-
-  const tabsProps = {
-    t,
-    isAlternative,
-    tabsTitles,
-    onTabPriceSelect,
-    priceTabActiveIndex
-  };
-
-  return (
-    <TabsComponent {...tabsProps} />
-  );
-};
-
-export default Properties;
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import _get from 'lodash/get';
+import { IPropertiesProps, ICarPropElement } from '../../../types/types';
+import { getActualHighlights } from '../../../constants/highlights';
+import TabsComponent from '../../MdTabs/MdTabs';
+import { addPrefixToKeys } from '../../../utils/CommonUtils';
+import { getOverviewDetails } from '../../../vehiclesProps/vehicleDetails';
+import VehicleProperty from '../../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
+import styles from './Properties.styl';
+
+const Properties: React.FunctionComponent<IPropertiesProps> = ({ t, car, decoratedProps, isAlternative }) => {
+  const [priceTabActiveIndex, setNewIndex] = useState(0);
+
+  const onTabPriceSelect = (_: React.ChangeEvent<{}>, priceTabActiveIndex: number) => {
+    setNewIndex(priceTabActiveIndex);
+  };
+
+  const renderPropsBlock = (data: ICarPropElement[]) => {
+    return (
+      data.map((prop, i) => {
+        return (
+          <VehicleProperty
+            key={i}
+            classNameIcon={styles.propertyIcon}
+            description={prop.description}
+            icon={prop.icon || 'no-image'}
+            className={styles.property}
+          />
+        );
+      })
+    );
+  };
+
+  const renderHighlights = () => {
+    const actualHighlights: ICarPropElement[] = getActualHighlights(car, t) || [];
+    const MAX_HIGHLIGHTS = 12;
+
+    return !!actualHighlights.length
+    ? renderPropsBlock(actualHighlights.slice(0, MAX_HIGHLIGHTS))
+    : <div className={styles.empty}>{t(`sidebar.empty`)}</div>;
+  };
+
+  // ADV-70: hide a spec line whose value is "N/A", a zero ("0 mm", "0 kWh", "0 g CO2/km", ...),
+  // null or empty — mirrors AccordionWidget.isHiddenSpecValue. de-DE thousands "." / decimal ","
+  // are normalised so only a true zero magnitude hides; codes like HSN "0588" stay visible.
+  const isHiddenSpecValue = (value: any): boolean => {
+    if (value === null || value === undefined) return true;
+    if (typeof value !== 'string') return false; // JSX / non-string content → always keep
+    const trimmed = value.trim();
+    if (trimmed === '' || trimmed === t('vehicleProps:value.na')) return true;
+    const numeric = parseFloat(trimmed.replace(/\./g, '').replace(',', '.'));
+    return numeric === 0;
+  };
+
+  const renderDetails = (): React.ReactNode => {
+    const equipmentsObj = {
+      ...addPrefixToKeys(car.lights, 'lights'),
+      ...addPrefixToKeys(car.multimedia, 'multimedia'),
+      ...addPrefixToKeys(car.seats, 'seats')
+    };
+
+    const equipmentsArr = Object.keys(equipmentsObj)
+      .filter(key => !!equipmentsObj[key])
+      .slice(0, 2)
+      .map(prop => t(`cbd:${prop}`));
+
+    // ADV-70: build each section's visible lines, dropping N/A/0 values. A section that loses
+    // all its lines (e.g. "Maße & Abmessungen" when length+width are both N/A) is removed and
+    // the next section flows up so there is no gap in the 2-column grid.
+    const sectionsConfig: Array<{ title: string; props?: string[]; lines?: string[] }> = [
+      { title: t(`sidebar.dataEngine`), props: ['cubicCapacity', 'torque'] },
+      { title: t(`sidebar.dimensions`), props: ['length', 'width'] },
+      { title: t(`sidebar.generalData`), props: ['doors', 'fuel'] },
+      { title: t(`sidebar.equipments`), lines: equipmentsArr.length ? [equipmentsArr.join(', ')] : [] }
+    ];
+
+    const visibleSections = sectionsConfig
+      .map(({ title, props, lines }) => ({
+        title,
+        lines: props
+          ? props
+              .filter(prop => decoratedProps[prop] && !isHiddenSpecValue(decoratedProps[prop].value))
+              .map(prop => `${decoratedProps[prop].title}: ${decoratedProps[prop].value}`)
+          : (lines || [])
+      }))
+      .filter(section => section.lines.length > 0);
+
+    if (!visibleSections.length) return null;
+
+    // Class by VISIBLE position, not original index: the first two sections form the top row
+    // (detailsItemFirstLine — padding-top 7px), the rest the bottom row (detailsItemLastLine —
+    // padding-top 20px). So a section promoted into the top row drops its 20px top padding,
+    // while a section that stays in the bottom row keeps it.
+    return (
+      <div className={styles.details}>
+        {visibleSections.map(({ title, lines }, i) => (
+          <div key={i} className={i > 1 ? styles.detailsItemLastLine : styles.detailsItemFirstLine}>
+            <h4 className={styles.detailsTitle}>{title}</h4>
+            {lines.map((line, j) => (
+              <span key={j} className={styles.detailsContent}>{line}</span>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const mainPropertiesList = getOverviewDetails(car.consumption.fuel);
+  // ADV-70: the consumption/CO2 line is long — let it span the full sidebar width on its own
+  // row (and drop the fuel icon) instead of being squeezed into one 50% column.
+  const mainProperties = mainPropertiesList.map((prop: string) => {
+    const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
+    return {
+      icon: isConsumptionAlternateView ? '' : decoratedProps[prop].icon,
+      description: decoratedProps[prop].value,
+      fullWidth: isConsumptionAlternateView
+    };
+  });
+
+  const tabsTitles = [
+    {
+      title: `${t(`sidebar.overview`)}`,
+      children: (
+        <div className={`${styles.tabContentPadding} ${styles.tabContentOverviewPadding}`}>
+          {mainProperties.map(({ fullWidth, ...property }: any, index: number) => (
+            <VehicleProperty {...property} className={classNames(styles.property, fullWidth ? styles.propertyFull : '')} key={index} />
+          ))}
+        </div>
+      )
+    },
+    {
+      title: 'highlights',
+      children: <div className={styles.tabContentPadding}>{renderHighlights()}</div>
+    },
+    {
+      title: 'details',
+      children: <div className={styles.tabContentPadding}>{renderDetails()}</div>
+    }
+  ];
+
+  const tabsProps = {
+    t,
+    isAlternative,
+    tabsTitles,
+    onTabPriceSelect,
+    priceTabActiveIndex
+  };
+
+  return (
+    <TabsComponent {...tabsProps} />
+  );
+};
+
+export default Properties;

package/compat/VehicleDetailedSidebar/partials/Title.styl

@@ -1,35 +1,35 @@
-@import '../../legacy-theme/mixins.styl';
-
-.titleSection
-  padding-bottom: 15px
-  overflow hidden
-  display flex
-  flex-wrap: wrap;
-  position relative;
-  width: 100%
-  border-bottom: 1px solid $grey-5f
-
-.title
-  font-size: 24px
-  font-weight: 700
-  text-transform: capitalize
-  margin-bottom: 3px;
-  color: rgba(#000, 83%)
-  padding-right: 30px;
-
-.titleDescription
-  font-size: 16px
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.63);
-  width: 100%;
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-
-.starButton
-  margin-left: auto;
-  position absolute;
-  top: 0;
-  right: 0;
-
+@import '../../legacy-theme/mixins.styl';
+
+.titleSection
+  padding-bottom: 15px
+  overflow hidden
+  display flex
+  flex-wrap: wrap;
+  position relative;
+  width: 100%
+  border-bottom: 1px solid $grey-5f
+
+.title
+  font-size: 24px
+  font-weight: 700
+  text-transform: capitalize
+  margin-bottom: 3px;
+  color: rgba(#000, 83%)
+  padding-right: 30px;
+
+.titleDescription
+  font-size: 16px
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.63);
+  width: 100%;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+.starButton
+  margin-left: auto;
+  position absolute;
+  top: 0;
+  right: 0;
+

package/compat/VehicleDetailedSidebar/partials/Title.tsx

@@ -1,33 +1,33 @@
-import * as React from 'react';
-import { Hidden } from 'react-grid-system';
-import { getPowerLabel } from '../../../vehiclesProps/decoratedProps';
-import StarButton from '../../StarButton/StarButton';
-import { IVehicleDetailedSidebarTitleProps } from '../../../types/types';
-import styles from './Title.styl';
-
-const Title: React.FunctionComponent<IVehicleDetailedSidebarTitleProps> = ({ make, model, subModel, powerKW, powerPS, isCarInFavorite, onCarFavorite, carId }) => {
-  const powerKWpowerPS = getPowerLabel(powerKW, powerPS);
-  const onCarFavoriteClick = (event: React.MouseEvent<HTMLElement>, id: string) => {
-    event.preventDefault();
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    onCarFavorite(event, id);
-  };
-
-  return (
-    <Hidden xs sm md>
-      <div className={styles.titleSection}>
-        <div className={styles.title}>{make} {model}</div>
-        <div className={styles.titleDescription}>{subModel}</div>
-        <div className={styles.titleDescription}>{powerKWpowerPS}</div>
-        <StarButton
-          onClick={e => onCarFavoriteClick(e, carId)}
-          isFavorite={isCarInFavorite}
-          className={styles.starButton}
-        />
-      </div>
-    </Hidden>
-  );
-};
-
-export default Title;
+import * as React from 'react';
+import { Hidden } from 'react-grid-system';
+import { getPowerLabel } from '../../../vehiclesProps/decoratedProps';
+import StarButton from '../../StarButton/StarButton';
+import { IVehicleDetailedSidebarTitleProps } from '../../../types/types';
+import styles from './Title.styl';
+
+const Title: React.FunctionComponent<IVehicleDetailedSidebarTitleProps> = ({ make, model, subModel, powerKW, powerPS, isCarInFavorite, onCarFavorite, carId }) => {
+  const powerKWpowerPS = getPowerLabel(powerKW, powerPS);
+  const onCarFavoriteClick = (event: React.MouseEvent<HTMLElement>, id: string) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onCarFavorite(event, id);
+  };
+
+  return (
+    <Hidden xs sm md>
+      <div className={styles.titleSection}>
+        <div className={styles.title}>{make} {model}</div>
+        <div className={styles.titleDescription}>{subModel}</div>
+        <div className={styles.titleDescription}>{powerKWpowerPS}</div>
+        <StarButton
+          onClick={e => onCarFavoriteClick(e, carId)}
+          isFavorite={isCarInFavorite}
+          className={styles.starButton}
+        />
+      </div>
+    </Hidden>
+  );
+};
+
+export default Title;