@bytebrand/fe-ui-core-autobahn 1.0.0

package/compat/AccardionSection/AccardionSection.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import _get from 'lodash/get';
+import { Visible } from 'react-grid-system';
+import { scroller } from 'react-scroll';
+import AccordionWidget from '../AccordionWidget/AccordionWidget';
+import { IAccardionSectionProps } from '../../types/types';
+import styles from './AccardionSection.styl';
+import { vehicleProps } from '../../locales/legacy/data';
+
+const AccardionSection: React.FunctionComponent<IAccardionSectionProps> = (props) => {
+  const [expanded, setExpanded] = React.useState<string | boolean>('overview')
+
+  const handleChange =
+      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
+        setExpanded(isExpanded ? panel : false);
+      };
+  
+  const handleChangeByLink = (panel: string) => {
+    setExpanded(panel);
+
+    setTimeout(() => {
+      scroller.scrollTo(panel, {
+        duration: 400,
+        offset: -50,
+        smooth: true,
+        dynamic: true
+      });
+    }, 300);
+  }
+
+  const renderPropertyLinks = (): React.ReactNode => {
+    
+    const links = ['overview', 'highlights', 'details'];
+
+    return <div className={styles.propertyLinks}>
+      {links.map((to: string) => {
+        return <span onClick={() => handleChangeByLink(to)} className={styles.propertyLink}>{props.t(`sidebar.${to}`)}</span>;
+      })}
+    </div>;
+  };
+
+  return (
+    <div className={styles.accordionWrapper}>
+      <Visible xs sm md>
+        {renderPropertyLinks()}
+      </Visible>
+      <AccordionWidget {...props} expanded={expanded} handleChange={handleChange} />
+    </div>
+  );
+};
+
+AccardionSection.defaultProps = {
+  t: (phrase: string) => _get(vehicleProps(), phrase.replace(':', '.'), phrase)
+};
+
+export default AccardionSection;

package/compat/AccordionWidget/AccordionWidget.styl

@@ -0,0 +1,221 @@
+@import '../legacy-theme/mixins.styl';
+
+.accordion
+  width 100%
+  font-family: $font-style-arial
+  padding 25px 20px 0px 20px
+  background-color: white
+  box-sizing border-box
+
+  +media-tablet-landscape-down()
+    padding: 0 !important
+    background-color: unset
+    padding: 10px 5px 5px 5px
+
+    [name="details"]
+      border-bottom: 0;
+
+.header
+  font-weight 700;
+  font-size 18px;
+  margin 0
+  text-transform: capitalize
+  display: flex
+  flex-wrap: wrap
+
+  +media-tablet-landscape-down()
+    font-size: 14px
+
+.vehicleName
+  margin-right: 10px
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis;
+
+.subHeader
+  @extends .header
+  font-weight normal
+
+.wrapGrid
+  display block;
+  +media-tablet-landscape-up()
+    display: grid;
+    grid-gap: 20px 15px;
+    grid-template-columns: repeat(2, 1fr);
+
+.tableName
+  border-bottom 5px solid $grey-f2
+  font-weight 700
+  font-size 14px
+  padding 10px 0
+  margin-bottom: 5px;
+
+  +media-tablet-landscape-up()
+    font-size 15px
+
+.table
+  font-size 13px
+
+.tableMaxWitdth {
+  grid-column: 1 / span 2;
+}
+
+.tr
+  padding: 13.5px 7.5px;
+  box-sizing: border-box;
+  border-top: 1px solid $grey-e
+  display grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+
+  &:first-of-type
+    border-top none
+
+  +media-tablet-landscape-down()
+    font-size: 12px
+
+.trGrid
+  grid-template-columns: 1fr;
+  +media-tablet-landscape-up()
+    grid-template-columns: 170px 1fr;
+
+.th
+  font-weight: bold
+  display flex
+  align-items: center;
+  flex-wrap: wrap;
+
+.td
+  white-space: pre-line
+
+.thTop
+  font-weight: bold
+
+.tdContent
+  +media-tablet-landscape-down()
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 15px;
+
+  +media-tablet-down()
+    grid-gap: 10px;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+
+.wrapChecked {
+  display flex
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 13px 0;
+}
+
+.cellIcon
+  margin-right 7px
+  font-size: 26px
+  flex-shrink: 0
+
+.cellCheckIcon
+  font-size: 14px
+  margin-left 35px
+  margin-right 7px
+  flex-shrink: 0
+  path
+    fill: rgb(55, 90, 158);
+
+  +media-tablet-landscape-up()
+    margin-left: 0;
+
+  +media-tablet-down()
+   margin-left 10px
+
+.checkedItem
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+.checkedItem:first-letter
+  text-transform capitalize;
+  
+.subTitle
+  font-size 10px
+  font-weight normal
+  margin-bottom 0
+
+.mr30
+  margin-right 30px
+
+.accent
+  color $primary
+
+.expansionPanel
+  border: none
+
+.expansionScroll
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1)
+
+.expansionTitle
+  text-transform: uppercase
+  font-size: 14px
+
+  +media-tablet-landscape-down()
+    font-size: 13px !important
+    padding: 15px 10px !important
+
+.expansionBody
+  +media-tablet-landscape-down()
+    padding: 0 10px
+
+.autoDeId
+  font-size: 12px
+  height: 45px
+  line-height: 45px
+  padding-left: 7.5px
+
+.empty
+  font-size: 14px
+  margin-bottom: 10px
+
+.propertyContainer
+  position relative
+  top: 1px
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 15px;
+
+  +media-tablet-up()
+    grid-template-columns: repeat(3, 1fr);
+
+  +media-tablet-landscape-up()
+    grid-template-columns: repeat(4, 1fr);
+
+.accordionVehicleProp
+  width: 100%
+  height: 45px
+  border-bottom 1px solid $grey-e
+  text-transform: none
+  font-size: 11px
+
+  +media-tablet-landscape-down()
+    padding-top: 7px;
+    padding-bottom: 7px;
+    span
+    color: rgba(0,0,0,.63);
+    word-break: break-word;
+
+// ADV-88: consumption/CO2 line spans the full overview grid width on its own row.
+.accordionVehiclePropFull
+  grid-column: 1 / -1
+  height: auto
+  align-items: flex-start
+  line-height: 1.45
+  padding: 10px 7.5px
+  span
+    font-size: 10px
+    word-break: break-word
+
+.propertyIcon
+  flex-shrink: 0;
+
+.longTitle
+  max-width: 157px
+
+.valueDescription
+  font-size: 11px

package/compat/AccordionWidget/AccordionWidget.tsx

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

package/compat/AccordionWrapper/AccordionItem/AccordionItem.styl

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

package/compat/AccordionWrapper/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+import IconSVG from '../../../iconsvg/IconSVG';
+import styles from './AccordionItem.styl';
+
+interface IAccordionItemProps {
+  children?: React.ReactNode;
+  caption: string;
+  isExpand?: boolean;
+  onClick?: any;
+  icon?: JSX.Element;
+  titleClassName?: string;
+  wrapperClassName?: string;
+  iconClassName?: string;
+  bodyClassName?: string;
+  bodyExpandClassName?: string;
+}
+
+class AccordionItem extends React.Component<IAccordionItemProps, {}> {
+  render(): JSX.Element {
+    const { caption, children, isExpand, onClick, icon } = this.props;
+
+    const iconClassName = classnames(
+      styles.icon,
+      { [styles.iconExpand]: isExpand },
+      this.props.iconClassName
+    );
+
+    const bodyClassName = classnames(
+      styles.body,
+      this.props.bodyClassName,
+      { [styles.bodyExpand]: isExpand },
+      { [this.props.bodyExpandClassName]: isExpand }
+    );
+
+    const titleClassName = classnames(
+      styles.title,
+      this.props.titleClassName
+    );
+
+    const wrapperClassName = classnames(
+      styles.accordionItem,
+      this.props.wrapperClassName
+    );
+
+    return (
+      <div className={wrapperClassName}>
+        <div className={titleClassName} onClick={onClick}>
+          <span className={styles.titleText}>{caption}</span>
+          {icon
+            ? icon
+            : <IconSVG className={iconClassName} name='arrowDownBlue' customDimensions />
+          }
+        </div>
+        <div className={bodyClassName}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AccordionItem;

package/compat/AccordionWrapper/AccordionWrapper.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import AccordionItem from './AccordionItem/AccordionItem';
+
+export interface IAccordionProps {
+  children?: React.ReactNode;
+  className?: string;
+  activeIndex?: number | string;
+  onItemClick: (index: number) => void;
+}
+
+class Accordion extends React.Component<IAccordionProps, {}> {
+  onItemClick = (index: number) => () => {
+    const active = index === this.props.activeIndex ? -1 : index;
+    this.props.onItemClick(active);
+  };
+
+  render(): JSX.Element {
+    const { className, activeIndex } = this.props;
+
+    const childrenWithProps: React.ReactElement<AccordionItem>[] = React.Children.map(this.props.children, (child, i) => {
+      return React.cloneElement(
+        child as JSX.Element,
+        { isExpand: activeIndex === i, onClick: this.onItemClick(i), key: i });
+    });
+
+    return (
+      <div className={className}>
+        {childrenWithProps}
+      </div>
+    );
+  }
+}
+
+export default Accordion;