@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -1,216 +1,216 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { Visible } from 'react-grid-system';
-import _get from 'lodash/get';
-
-import { getPowerLabel } from '../../framework/vehiclesProps/decoratedProps';
-import { getVehicleDetails, getOverviewDetails, dimensionDetails, availAbilityDetails, colorAndMaterialDetails, getWltpValues, getCostModelValues } from '../../framework/vehiclesProps/vehicleDetails';
-
-import {
-  IEquipmentProps,
-  ICarPropElement,
-  IAccardionSectionProps,
-  IDecoratedProps
-} from '../../framework/types/types';
-
-import ExpansionPanel from '../_common/ExpansionPanel/ExpansionPanel';
-import Accordion from '../_common/AccordionWrapper/AccordionWrapper';
-import VehicleProperty from '../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
-import IconSVG from '../_common/IconSVG/IconSVG';
-import { getActualHighlights } from '../../framework/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) => {
-          return (
-            <VehicleProperty
-              key={i}
-              description={prop.description}
-              classNameIcon={styles.propertyIcon}
-              icon={prop.icon || 'no-image'}
-              className={styles.accordionVehicleProp}
-            />
-          );
-        })}
-      </div>
-    );
-  };
-
-  renderTable = (decoratedProps: IDecoratedProps, propsList: string[] = [], header: string): React.ReactNode => {
-    return (
-      <>
-        <div className={styles.table}>
-          <h3 className={styles.tableName}>{header}</h3>
-          {propsList.map((prop, i) => {
-            const { title, subTitle, value, isVisible = true, isLongTitle = false, valueDescription = '' } = decoratedProps[prop];
-            return isVisible && (
-              <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;
-    const mainPropertiesList = getOverviewDetails(consumption.fuel);
-    const mainProperties = mainPropertiesList.map((prop: string) => (
-      { icon: this.props.decoratedProps[prop].icon, description: this.props.decoratedProps[prop].value })
-    );
-    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 '../../framework/vehiclesProps/decoratedProps';
+import { getVehicleDetails, getOverviewDetails, dimensionDetails, availAbilityDetails, colorAndMaterialDetails, getWltpValues, getCostModelValues } from '../../framework/vehiclesProps/vehicleDetails';
+
+import {
+  IEquipmentProps,
+  ICarPropElement,
+  IAccardionSectionProps,
+  IDecoratedProps
+} from '../../framework/types/types';
+
+import ExpansionPanel from '../_common/ExpansionPanel/ExpansionPanel';
+import Accordion from '../_common/AccordionWrapper/AccordionWrapper';
+import VehicleProperty from '../VehicleSmallCard/VehicleData/VehicleProperty/VehicleProperty';
+import IconSVG from '../_common/IconSVG/IconSVG';
+import { getActualHighlights } from '../../framework/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) => {
+          return (
+            <VehicleProperty
+              key={i}
+              description={prop.description}
+              classNameIcon={styles.propertyIcon}
+              icon={prop.icon || 'no-image'}
+              className={styles.accordionVehicleProp}
+            />
+          );
+        })}
+      </div>
+    );
+  };
+
+  renderTable = (decoratedProps: IDecoratedProps, propsList: string[] = [], header: string): React.ReactNode => {
+    return (
+      <>
+        <div className={styles.table}>
+          <h3 className={styles.tableName}>{header}</h3>
+          {propsList.map((prop, i) => {
+            const { title, subTitle, value, isVisible = true, isLongTitle = false, valueDescription = '' } = decoratedProps[prop];
+            return isVisible && (
+              <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;
+    const mainPropertiesList = getOverviewDetails(consumption.fuel);
+    const mainProperties = mainPropertiesList.map((prop: string) => (
+      { icon: this.props.decoratedProps[prop].icon, description: this.props.decoratedProps[prop].value })
+    );
+    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/source/components/AdvantageItem/AdvantageItem.story.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-const bestExchange = require('../../../media/images/advantages/cert-best-car-exchange.jpg');
-const highestConf  = require('../../../media/images/advantages/cert-highest-confidence.jpg');
-const advantage_shop = require('../../../media/images/advantages/advantage_cart.svg');
-const advantage_checked = require('../../../media/images/advantages/advantage_check.svg');
-const advantage_easy = require('../../../media/images/advantages/advantage_like.svg');
-const advantage_safe = require('../../../media/images/advantages/advantage_secure.svg');
-
-import AdvantageItem from './AdvantageItem';
-
-storiesOf('AdvantageItem', module)
-  .add('default', () => (
-    <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around', width: 600, backgroundColor: 'lightgray' }}>
-      <AdvantageItem imageSrc={bestExchange} />
-      <AdvantageItem title='GEPRÜFT' imageSrc={advantage_checked} />
-      <AdvantageItem title='EINFACH' imageSrc={advantage_easy} />
-      <AdvantageItem title='sicher' imageSrc={advantage_safe} />
-      <AdvantageItem title='kaufen' imageSrc={advantage_shop} />
-      <AdvantageItem imageSrc={highestConf} />
-    </div>
-  ));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+const bestExchange = require('../../../media/images/advantages/cert-best-car-exchange.jpg');
+const highestConf  = require('../../../media/images/advantages/cert-highest-confidence.jpg');
+const advantage_shop = require('../../../media/images/advantages/advantage_cart.svg');
+const advantage_checked = require('../../../media/images/advantages/advantage_check.svg');
+const advantage_easy = require('../../../media/images/advantages/advantage_like.svg');
+const advantage_safe = require('../../../media/images/advantages/advantage_secure.svg');
+
+import AdvantageItem from './AdvantageItem';
+
+storiesOf('AdvantageItem', module)
+  .add('default', () => (
+    <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around', width: 600, backgroundColor: 'lightgray' }}>
+      <AdvantageItem imageSrc={bestExchange} />
+      <AdvantageItem title='GEPRÜFT' imageSrc={advantage_checked} />
+      <AdvantageItem title='EINFACH' imageSrc={advantage_easy} />
+      <AdvantageItem title='sicher' imageSrc={advantage_safe} />
+      <AdvantageItem title='kaufen' imageSrc={advantage_shop} />
+      <AdvantageItem imageSrc={highestConf} />
+    </div>
+  ));

package/source/components/AdvantageItem/AdvantageItem.styl

@@ -1,47 +1,47 @@
-@import '../../theme/theme.styl';
-@import '../../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
+@import '../../theme/theme.styl';
+@import '../../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/source/components/AdvantageItem/AdvantageItem.tsx

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