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

package/compat/AccordionWidget/AccordionWidget.tsx

@@ -1,257 +1,257 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { Visible } from 'react-grid-system';
-import _get from 'lodash/get';
-
-import { getPowerLabel } from '../../vehiclesProps/decoratedProps';
-import { getVehicleDetails, getOverviewDetails, dimensionDetails, availAbilityDetails, colorAndMaterialDetails, getWltpValues, getCostModelValues } from '../../vehiclesProps/vehicleDetails';
-
-import {
-  IEquipmentProps,
-  ICarPropElement,
-  IAccardionSectionProps,
-  IDecoratedProps
-} from '../../types/types';
-
-import ExpansionPanel from '../ExpansionPanel/ExpansionPanel';
-import Accordion from '../AccordionWrapper/AccordionWrapper';
-import VehicleProperty from '../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
-import IconSVG from '../../iconsvg/IconSVG';
-import { getActualHighlights } from '../../constants/highlights';
-import styles from './AccordionWidget.styl';
-
-class AccordionWidget extends React.Component<IAccardionSectionProps> {
-
-  constructor(props: any) {
-    super(props);
-
-  }
-
-  renderPropsBlock = (data: ICarPropElement[]): React.ReactNode => {
-    return (
-      <div className={styles.propertyContainer}>
-        {data.map((prop, i) => {
-          // ADV-88: the consumption/CO2 line is long for (plug-in) hybrids — let it span the
-          // full grid width on its own row instead of being squeezed into one fixed-height cell.
-          const isFullWidth = (prop as any).fullWidth;
-          return (
-            <VehicleProperty
-              key={i}
-              description={prop.description}
-              classNameIcon={styles.propertyIcon}
-              icon={prop.icon === '' ? '' : (prop.icon || 'no-image')}
-              className={classnames(styles.accordionVehicleProp, isFullWidth ? styles.accordionVehiclePropFull : '')}
-            />
-          );
-        })}
-      </div>
-    );
-  };
-
-  // ADV-70: in the "Vehicle Details" section completely hide a spec row when its value is
-  // "N/A", a zero ("0 mm", "0 kWh", "0 g CO2/km", ...), null or empty. The Overview section
-  // keeps "N/A" and is rendered separately (renderOverview/renderPropsBlock), so it is unaffected.
-  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 === this.props.t('vehicleProps:value.na')) return true;
-    // Detect a zero numeric value regardless of unit/locale: de-DE uses "." as thousands
-    // separator and "," as decimal. Only a leading-zero magnitude normalises to exactly 0,
-    // so non-zero values (incl. codes like HSN "0588") are never hidden by mistake.
-    const numeric = parseFloat(trimmed.replace(/\./g, '').replace(',', '.'));
-    return numeric === 0;
-  };
-
-  renderTable = (decoratedProps: IDecoratedProps, propsList: string[] = [], header: string): React.ReactNode => {
-    const visibleProps = propsList.filter((prop) => {
-      const decoratedProp = decoratedProps[prop];
-      if (!decoratedProp) return false;
-      const { value, isVisible = true } = decoratedProp;
-      // ADV-70 exception: the CO2 emission fields must ALWAYS be shown — even when 0 — because
-      // 0 g CO2/km is a real, legally-relevant value, so they bypass the N/A/0 hide rule.
-      // NOTE: the environment table's prop key is 'c02' (with a ZERO, see vehicleDetails.ts), not 'co2'.
-      const alwaysShow = prop === 'co2' || prop === 'c02' || prop === 'wltpCo2';
-      return isVisible && (alwaysShow || !this.isHiddenSpecValue(value));
-    });
-
-    if (visibleProps.length === 0) return null;
-
-    return (
-      <>
-        <div className={styles.table}>
-          <h3 className={styles.tableName}>{header}</h3>
-          {visibleProps.map((prop, i) => {
-            const { title, subTitle, value, isLongTitle = false, valueDescription = '' } = decoratedProps[prop];
-            return (
-              <div key={i} className={title ? styles.tr : ''}>
-                {title && <div className={classnames(styles.th, isLongTitle ? styles.longTitle : '')}>
-                  <span className={styles.title}>{title}</span>
-                  {subTitle ? <p className={styles.subTitle}>{subTitle}</p> : null}
-                </div>}
-                <div className={styles.td}>{value} {valueDescription ? <span className={styles.valueDescription}>{valueDescription}</span> : ''}</div>
-              </div>
-            );
-          })}
-        </div>
-      </>
-    );
-  };
-
-  renderExtendTable = (data: IEquipmentProps[] = [], header: string): React.ReactNode => {
-    const { t } = this.props;
-    return (
-      <div className= {classnames(styles.table, styles.tableMaxWitdth)}>
-        <h3 className={styles.tableName}>{header}</h3>
-        {data.map(({ title, icon, value = {} }, i) => {
-          const filteredKeys = Object.keys(value).filter(key => key !== 'selector_unknown' && value[key]);
-          if (filteredKeys.length === 0) return null;
-          return (
-            <div key={i} className={classnames(styles.tr, styles.trGrid)}>
-              <div className={styles.th}>
-                <IconSVG name={icon} className={styles.cellIcon} customDimensions />
-                <span>{title}</span>
-              </div>
-              <div className={styles.tdContent}>
-                {filteredKeys.map((prop: string) => (
-                  <div className={styles.wrapChecked} key={prop}>
-                    <IconSVG name={'checkBlue'} className={styles.cellCheckIcon} customDimensions />
-                    <span className={styles.checkedItem}>{t(`cbd:${prop}`)}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  renderOverview = () => {
-    const { car } = this.props;
-    const autoDeId = car.metaData && car.metaData.vehicleId;
-    const { consumption } = car;
-    // ADV-88: ANY plug-in hybrid (new or used) gets the long weighted+discharged line and the
-    // full-width treatment. Gated on hybridPlugin only, no condition check.
-    // ADV-88: "is a hybrid car" is determined by fuel type (hybrid electric + diesel/petrol), not hybridPlugin.
-    const isPluginHybrid = consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
-      || consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
-    const mainPropertiesList = getOverviewDetails(consumption.fuel);
-    const mainProperties = mainPropertiesList.map((prop: string) => {
-      const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
-      return {
-        icon: isConsumptionAlternateView ? '' : this.props.decoratedProps[prop].icon,
-        description: this.props.decoratedProps[prop].value,
-        fullWidth: isConsumptionAlternateView && isPluginHybrid
-      };
-    });
-    return (
-      <div>
-        {this.renderPropsBlock(mainProperties)}
-        <Visible xs sm md>{autoDeId ? <span className={styles.autoDeId}>Auto.de-ID: {autoDeId}</span> : false}</Visible>
-      </div>
-    );
-  };
-
-  renderHighlights = (): React.ReactNode => {
-    const { car, t } = this.props;
-    const actualHighlights: ICarPropElement[] = getActualHighlights(car, t) || [];
-
-    return !!actualHighlights.length
-      ? this.renderPropsBlock(actualHighlights)
-      : <div className={styles.empty}>{t(`sidebar.empty`)}</div>;
-  };
-
-  renderDetails = (): React.ReactNode => {
-    const { t, car: { consumption, engineData }, decoratedProps, carEquipment } = this.props;
-    const engineProps = getVehicleDetails(consumption.fuel, 'engineData', engineData.hybridPlugin);
-    const environmentProps = getVehicleDetails(consumption.fuel, 'environment', engineData.hybridPlugin);
-    const wltpProps = getWltpValues(consumption.fuel, engineData.hybridPlugin);
-    const costModelProps = getCostModelValues();
-    const dimensionProps = dimensionDetails;
-    const availAbilityProps = availAbilityDetails;
-    const colorAndMaterialProps = colorAndMaterialDetails;
-
-    return (
-      <div className={styles.wrapGrid}>
-        {this.renderTable(decoratedProps, engineProps, t('accordion.tableEngine'))}
-        {this.renderTable(decoratedProps, dimensionProps, t('accordion.tableDimensions'))}
-        {this.renderTable(decoratedProps, wltpProps, t('accordion.tableEnvironmentWLTP'))}
-        {this.renderTable(decoratedProps, environmentProps, t('accordion.tableEnvironment'))}
-        {this.renderTable(decoratedProps, costModelProps, t('accordion.tableCostsPerYear'))}
-        {this.renderTable(decoratedProps, availAbilityProps, t('accordion.tableAvailability'))}
-        {this.renderTable(decoratedProps, colorAndMaterialProps, t('accordion.tableMaterial'))}
-        {this.renderExtendTable(carEquipment, t('accordion.tableEqipment'))}
-      </div>
-    );
-  };
-
-  render(): React.ReactNode {
-    const { car, activeIndex, onItemClick, t, expanded, handleChange } = this.props;
-
-    if (!car || !('_id' in car)) return null;
-    const {
-      mainData: { make, model, subModel }
-    } = car;
-
-    const accordionProps = {
-      activeIndex,
-      onItemClick
-    };
-
-    const sections = [
-      { name: 'overview', title: 'captionOverview', component: this.renderOverview(), expanded: true },
-      { name: 'highlights', title: 'captionHighlights', component: this.renderHighlights(), expanded: false },
-      { name: 'details', title: 'captionVehicleDetails', component: this.renderDetails(), expanded: false }
-    ];
-
-    const powerKW: any = _get(car, 'engineData.powerKW');
-    const powerPS: any = _get(car, 'engineData.powerPS');
-    const powerKWpowerPS = getPowerLabel(powerKW, powerPS);
-
-    return (
-      <div className={styles.accordion}>
-        <Visible lg xl>
-          <h2 className={styles.header}>
-            <span className={styles.vehicleName}>{`${make} ${model} ${subModel}`}</span>
-            <span className={styles.subHeader}>{powerKWpowerPS}</span>
-          </h2>
-        </Visible>
-
-        <Visible xs sm md>
-          {sections.map((section: any) => (
-            <ExpansionPanel
-              defaultExpanded={section.expanded}
-              key={section.name}
-              title={t(`accordion.${section.title}`)}
-              reactScrollName={section.name}
-              onChange={handleChange}
-              expanded={expanded}
-            >
-              {section.component}
-            </ExpansionPanel>
-          ))}
-        </Visible>
-
-        <Visible lg xl>
-          <Accordion {...accordionProps}>
-            {sections.map((section: any) => (
-              <ExpansionPanel
-                key={section.title}
-                title={t(`accordion.${section.title}`)}
-                reactScrollName={section.name}
-                onChange={handleChange}
-                expanded={expanded}
-                defaultExpanded={section.expanded}
-              >
-                {section.component}
-              </ExpansionPanel>
-            ))}
-          </Accordion>
-        </Visible>
-      </div>
-    );
-  }
-}
-
-export default AccordionWidget;
+import * as React from 'react';
+import classnames from 'classnames';
+import { Visible } from 'react-grid-system';
+import _get from 'lodash/get';
+
+import { getPowerLabel } from '../../vehiclesProps/decoratedProps';
+import { getVehicleDetails, getOverviewDetails, dimensionDetails, availAbilityDetails, colorAndMaterialDetails, getWltpValues, getCostModelValues } from '../../vehiclesProps/vehicleDetails';
+
+import {
+  IEquipmentProps,
+  ICarPropElement,
+  IAccardionSectionProps,
+  IDecoratedProps
+} from '../../types/types';
+
+import ExpansionPanel from '../ExpansionPanel/ExpansionPanel';
+import Accordion from '../AccordionWrapper/AccordionWrapper';
+import VehicleProperty from '../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
+import IconSVG from '../../iconsvg/IconSVG';
+import { getActualHighlights } from '../../constants/highlights';
+import styles from './AccordionWidget.styl';
+
+class AccordionWidget extends React.Component<IAccardionSectionProps> {
+
+  constructor(props: any) {
+    super(props);
+
+  }
+
+  renderPropsBlock = (data: ICarPropElement[]): React.ReactNode => {
+    return (
+      <div className={styles.propertyContainer}>
+        {data.map((prop, i) => {
+          // ADV-88: the consumption/CO2 line is long for (plug-in) hybrids — let it span the
+          // full grid width on its own row instead of being squeezed into one fixed-height cell.
+          const isFullWidth = (prop as any).fullWidth;
+          return (
+            <VehicleProperty
+              key={i}
+              description={prop.description}
+              classNameIcon={styles.propertyIcon}
+              icon={prop.icon === '' ? '' : (prop.icon || 'no-image')}
+              className={classnames(styles.accordionVehicleProp, isFullWidth ? styles.accordionVehiclePropFull : '')}
+            />
+          );
+        })}
+      </div>
+    );
+  };
+
+  // ADV-70: in the "Vehicle Details" section completely hide a spec row when its value is
+  // "N/A", a zero ("0 mm", "0 kWh", "0 g CO2/km", ...), null or empty. The Overview section
+  // keeps "N/A" and is rendered separately (renderOverview/renderPropsBlock), so it is unaffected.
+  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 === this.props.t('vehicleProps:value.na')) return true;
+    // Detect a zero numeric value regardless of unit/locale: de-DE uses "." as thousands
+    // separator and "," as decimal. Only a leading-zero magnitude normalises to exactly 0,
+    // so non-zero values (incl. codes like HSN "0588") are never hidden by mistake.
+    const numeric = parseFloat(trimmed.replace(/\./g, '').replace(',', '.'));
+    return numeric === 0;
+  };
+
+  renderTable = (decoratedProps: IDecoratedProps, propsList: string[] = [], header: string): React.ReactNode => {
+    const visibleProps = propsList.filter((prop) => {
+      const decoratedProp = decoratedProps[prop];
+      if (!decoratedProp) return false;
+      const { value, isVisible = true } = decoratedProp;
+      // ADV-70 exception: the CO2 emission fields must ALWAYS be shown — even when 0 — because
+      // 0 g CO2/km is a real, legally-relevant value, so they bypass the N/A/0 hide rule.
+      // NOTE: the environment table's prop key is 'c02' (with a ZERO, see vehicleDetails.ts), not 'co2'.
+      const alwaysShow = prop === 'co2' || prop === 'c02' || prop === 'wltpCo2';
+      return isVisible && (alwaysShow || !this.isHiddenSpecValue(value));
+    });
+
+    if (visibleProps.length === 0) return null;
+
+    return (
+      <>
+        <div className={styles.table}>
+          <h3 className={styles.tableName}>{header}</h3>
+          {visibleProps.map((prop, i) => {
+            const { title, subTitle, value, isLongTitle = false, valueDescription = '' } = decoratedProps[prop];
+            return (
+              <div key={i} className={title ? styles.tr : ''}>
+                {title && <div className={classnames(styles.th, isLongTitle ? styles.longTitle : '')}>
+                  <span className={styles.title}>{title}</span>
+                  {subTitle ? <p className={styles.subTitle}>{subTitle}</p> : null}
+                </div>}
+                <div className={styles.td}>{value} {valueDescription ? <span className={styles.valueDescription}>{valueDescription}</span> : ''}</div>
+              </div>
+            );
+          })}
+        </div>
+      </>
+    );
+  };
+
+  renderExtendTable = (data: IEquipmentProps[] = [], header: string): React.ReactNode => {
+    const { t } = this.props;
+    return (
+      <div className= {classnames(styles.table, styles.tableMaxWitdth)}>
+        <h3 className={styles.tableName}>{header}</h3>
+        {data.map(({ title, icon, value = {} }, i) => {
+          const filteredKeys = Object.keys(value).filter(key => key !== 'selector_unknown' && value[key]);
+          if (filteredKeys.length === 0) return null;
+          return (
+            <div key={i} className={classnames(styles.tr, styles.trGrid)}>
+              <div className={styles.th}>
+                <IconSVG name={icon} className={styles.cellIcon} customDimensions />
+                <span>{title}</span>
+              </div>
+              <div className={styles.tdContent}>
+                {filteredKeys.map((prop: string) => (
+                  <div className={styles.wrapChecked} key={prop}>
+                    <IconSVG name={'checkBlue'} className={styles.cellCheckIcon} customDimensions />
+                    <span className={styles.checkedItem}>{t(`cbd:${prop}`)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  renderOverview = () => {
+    const { car } = this.props;
+    const autoDeId = car.metaData && car.metaData.vehicleId;
+    const { consumption } = car;
+    // ADV-88: ANY plug-in hybrid (new or used) gets the long weighted+discharged line and the
+    // full-width treatment. Gated on hybridPlugin only, no condition check.
+    // ADV-88: "is a hybrid car" is determined by fuel type (hybrid electric + diesel/petrol), not hybridPlugin.
+    const isPluginHybrid = consumption.fuel === 'selector_fuel_hybridElectricalDiesel'
+      || consumption.fuel === 'selector_fuel_hybridElectricalPetrol';
+    const mainPropertiesList = getOverviewDetails(consumption.fuel);
+    const mainProperties = mainPropertiesList.map((prop: string) => {
+      const isConsumptionAlternateView = prop.startsWith('consumption') && prop.endsWith('AlternateView');
+      return {
+        icon: isConsumptionAlternateView ? '' : this.props.decoratedProps[prop].icon,
+        description: this.props.decoratedProps[prop].value,
+        fullWidth: isConsumptionAlternateView && isPluginHybrid
+      };
+    });
+    return (
+      <div>
+        {this.renderPropsBlock(mainProperties)}
+        <Visible xs sm md>{autoDeId ? <span className={styles.autoDeId}>Auto.de-ID: {autoDeId}</span> : false}</Visible>
+      </div>
+    );
+  };
+
+  renderHighlights = (): React.ReactNode => {
+    const { car, t } = this.props;
+    const actualHighlights: ICarPropElement[] = getActualHighlights(car, t) || [];
+
+    return !!actualHighlights.length
+      ? this.renderPropsBlock(actualHighlights)
+      : <div className={styles.empty}>{t(`sidebar.empty`)}</div>;
+  };
+
+  renderDetails = (): React.ReactNode => {
+    const { t, car: { consumption, engineData }, decoratedProps, carEquipment } = this.props;
+    const engineProps = getVehicleDetails(consumption.fuel, 'engineData', engineData.hybridPlugin);
+    const environmentProps = getVehicleDetails(consumption.fuel, 'environment', engineData.hybridPlugin);
+    const wltpProps = getWltpValues(consumption.fuel, engineData.hybridPlugin);
+    const costModelProps = getCostModelValues();
+    const dimensionProps = dimensionDetails;
+    const availAbilityProps = availAbilityDetails;
+    const colorAndMaterialProps = colorAndMaterialDetails;
+
+    return (
+      <div className={styles.wrapGrid}>
+        {this.renderTable(decoratedProps, engineProps, t('accordion.tableEngine'))}
+        {this.renderTable(decoratedProps, dimensionProps, t('accordion.tableDimensions'))}
+        {this.renderTable(decoratedProps, wltpProps, t('accordion.tableEnvironmentWLTP'))}
+        {this.renderTable(decoratedProps, environmentProps, t('accordion.tableEnvironment'))}
+        {this.renderTable(decoratedProps, costModelProps, t('accordion.tableCostsPerYear'))}
+        {this.renderTable(decoratedProps, availAbilityProps, t('accordion.tableAvailability'))}
+        {this.renderTable(decoratedProps, colorAndMaterialProps, t('accordion.tableMaterial'))}
+        {this.renderExtendTable(carEquipment, t('accordion.tableEqipment'))}
+      </div>
+    );
+  };
+
+  render(): React.ReactNode {
+    const { car, activeIndex, onItemClick, t, expanded, handleChange } = this.props;
+
+    if (!car || !('_id' in car)) return null;
+    const {
+      mainData: { make, model, subModel }
+    } = car;
+
+    const accordionProps = {
+      activeIndex,
+      onItemClick
+    };
+
+    const sections = [
+      { name: 'overview', title: 'captionOverview', component: this.renderOverview(), expanded: true },
+      { name: 'highlights', title: 'captionHighlights', component: this.renderHighlights(), expanded: false },
+      { name: 'details', title: 'captionVehicleDetails', component: this.renderDetails(), expanded: false }
+    ];
+
+    const powerKW: any = _get(car, 'engineData.powerKW');
+    const powerPS: any = _get(car, 'engineData.powerPS');
+    const powerKWpowerPS = getPowerLabel(powerKW, powerPS);
+
+    return (
+      <div className={styles.accordion}>
+        <Visible lg xl>
+          <h2 className={styles.header}>
+            <span className={styles.vehicleName}>{`${make} ${model} ${subModel}`}</span>
+            <span className={styles.subHeader}>{powerKWpowerPS}</span>
+          </h2>
+        </Visible>
+
+        <Visible xs sm md>
+          {sections.map((section: any) => (
+            <ExpansionPanel
+              defaultExpanded={section.expanded}
+              key={section.name}
+              title={t(`accordion.${section.title}`)}
+              reactScrollName={section.name}
+              onChange={handleChange}
+              expanded={expanded}
+            >
+              {section.component}
+            </ExpansionPanel>
+          ))}
+        </Visible>
+
+        <Visible lg xl>
+          <Accordion {...accordionProps}>
+            {sections.map((section: any) => (
+              <ExpansionPanel
+                key={section.title}
+                title={t(`accordion.${section.title}`)}
+                reactScrollName={section.name}
+                onChange={handleChange}
+                expanded={expanded}
+                defaultExpanded={section.expanded}
+              >
+                {section.component}
+              </ExpansionPanel>
+            ))}
+          </Accordion>
+        </Visible>
+      </div>
+    );
+  }
+}
+
+export default AccordionWidget;

package/compat/AccordionWrapper/AccordionItem/AccordionItem.styl

@@ -1,34 +1,34 @@
-@import '../../legacy-theme/theme.styl'
-
-.accordionItem
-  border-bottom: 1px solid $grey-d
-  &:last-child
-    border: none
-
-.title
-  display: flex
-  justify-content: space-between
-  align-items: center
-  height 60px
-  font-weight: 700;
-  font-size: 14px
-  text-transform: uppercase
-  cursor: pointer
-
-.body
-  max-height: 0
-  overflow: hidden
-  opacity: 0
-  transition: all 350ms ease-in
-
-.bodyExpand
-  max-height: 10000px
-  opacity: 1
-
-.icon
-  transform: rotateZ(0deg)
-  margin-right: 10px
-  transition: all 300ms ease-out
-
-.iconExpand
-  transform: rotateZ(180deg)
+@import '../../legacy-theme/theme.styl'
+
+.accordionItem
+  border-bottom: 1px solid $grey-d
+  &:last-child
+    border: none
+
+.title
+  display: flex
+  justify-content: space-between
+  align-items: center
+  height 60px
+  font-weight: 700;
+  font-size: 14px
+  text-transform: uppercase
+  cursor: pointer
+
+.body
+  max-height: 0
+  overflow: hidden
+  opacity: 0
+  transition: all 350ms ease-in
+
+.bodyExpand
+  max-height: 10000px
+  opacity: 1
+
+.icon
+  transform: rotateZ(0deg)
+  margin-right: 10px
+  transition: all 300ms ease-out
+
+.iconExpand
+  transform: rotateZ(180deg)