@bytebrand/fe-ui-core 4.8.111 → 4.8.113

package/__tests__/utils/CommonUtils/sliceLessThan.test.ts

@@ -0,0 +1,23 @@
+import { sliceLessThan } from '../../../source/framework/utils/CommonUtils';
+
+describe('sliceLessThan', () => {
+  it('returns empty array if returned value of `to` is not valid', () => {
+    const expected: number[] = [];
+
+    expect(sliceLessThan([], null)).toEqual(expected);
+    expect(sliceLessThan([], undefined)).toEqual(expected);
+    expect(sliceLessThan([], {} as any)).toEqual(expected);
+    expect(sliceLessThan([], [] as any)).toEqual(expected);
+    expect(sliceLessThan([], '')).toEqual(expected);
+    expect(sliceLessThan([], 'string')).toEqual(expected);
+    expect(sliceLessThan([], NaN)).toEqual(expected);
+    expect(sliceLessThan([], Infinity)).toEqual(expected);
+    expect(sliceLessThan([], -Infinity)).toEqual(expected);
+  });
+  
+  it('returns slice of original array containing only numbers less than `to`', () => {
+    const arr: number[] = [5,6,7,8];
+    const expected: number[] = [5,6];
+    expect(sliceLessThan(arr, 6)).toEqual(expected);
+  });
+});

package/__tests__/utils/CommonUtils/sliceMoreThan.test.ts

@@ -0,0 +1,23 @@
+import { sliceMoreThan } from '../../../source/framework/utils/CommonUtils';
+
+describe('sliceMoreThan', () => {
+  const myArray = [1, 2, 3, 4, 5];
+
+  it('returns empty array if returned value of `from` is not valid', () => {
+    const expected: number[] = [];
+
+    expect(sliceMoreThan([], null)).toEqual(expected);
+    expect(sliceMoreThan([], undefined)).toEqual(expected);
+    expect(sliceMoreThan([], {} as any)).toEqual(expected);
+    expect(sliceMoreThan([], [] as any)).toEqual(expected);
+    expect(sliceMoreThan([], '')).toEqual(expected);
+    expect(sliceMoreThan([], 'string')).toEqual(expected);
+    expect(sliceMoreThan([], NaN)).toEqual(expected);
+    expect(sliceMoreThan([], Infinity)).toEqual(expected);
+    expect(sliceMoreThan([], -Infinity)).toEqual(expected);
+  });
+
+  it('should return [4, 5] when filtering with 4', () => {
+    expect(sliceMoreThan(myArray, 4)).toEqual([4, 5]);
+  });
+});

package/media/locales/de/promoSlider.json

@@ -1,6 +1,7 @@
 {
   "consumptionCombined": "{{consumptionCombined}}l/100km (komb)*",
   "co2": "{{co2}}g CO2/km (komb)*",
+  "co2Class": "CO2-Klasse {{class}} (komb)",
   "weDeliverMagdeburg": "Wir liefern Ihr Auto zu Ihnen nach Magdeburg!",
   "weDeliverToYou": "Wir liefern Ihr Auto zu Ihnen!",
   "withoutDeposit": "ohne Anzahlung",

package/media/locales/en/promoSlider.json

@@ -1,6 +1,7 @@
 {
   "consumptionCombined": "{{consumptionCombined}}/100km (comb)*",
   "co2": "{{co2}}g CO2/km (comb)*",
+  "co2Class": "CO2-class {{class}} (comb)",
   "weDeliverMagdeburg": "We will deliver your car to Magdeburg!",
   "weDeliverToYou": "We deliver your car to you!",
   "withoutDeposit": "Without Deposit",

package/package.json

@@ -1,120 +1,118 @@
-{
-  "name": "@bytebrand/fe-ui-core",
-  "version": "4.8.111",
-  "description": "UI components for the auto.de project",
-  "main": "index.ts",
-  "module": "dist/common.js",
-  "dependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.8",
-    "@babel/plugin-transform-react-constant-elements": "^7.17.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-histoslider": "3.0.0",
-    "@bytebrand/i18n-dictionaries": "^1.5.2",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@mui/material": "^5.9.0",
-    "@mui/styles": "^5.9.0",
-    "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "classnames": "2.2.6",
-    "d3-format": "1.4.5",
-    "d3-scale": "^2.2.2",
-    "date-fns": "2.29.1",
-    "i18next": "^15.0.4",
-    "jest": "^26.0.0",
-    "js-cookie": "^2.2.0",
-    "moment": "^2.29.1",
-    "rc-slider": "^8.6.13",
-    "react": "^17.0.2",
-    "react-device-detect": "^2.1.2",
-    "react-dom": "^17.0.2",
-    "react-grid-system": "^5.0.2",
-    "react-i18next": "9.0.4",
-    "react-lazyload": "3.2.0",
-    "react-scroll": "^1.7.13",
-    "react-select": "^3.0.4",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1",
-    "uuid": "^8.3.2"
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "^5.1.11",
-    "@storybook/addon-backgrounds": "^5.1.11",
-    "@storybook/addon-centered": "^5.1.11",
-    "@storybook/addon-info": "^5.1.11",
-    "@storybook/addon-links": "^5.1.11",
-    "@storybook/addons": "^5.1.11",
-    "@storybook/react": "^5.3.21",
-    "@testing-library/dom": "^9.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.6",
-    "@types/classnames": "2.2.6",
-    "@types/d3-format": "^1.3.1",
-    "@types/i18next": "^12.1.0",
-    "@types/jest": "^29.4.0",
-    "@types/js-cookie": "^2.1.0",
-    "@types/lodash": "^4.14.134",
-    "@types/qs": "^6.9.7",
-    "@types/rc-slider": "^9.3.1",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-lazyload": "^2.5.0",
-    "@types/react-scroll": "^1.8.7",
-    "@types/react-select": "^3.0.2",
-    "@types/react-slick": "^0.23.4 ",
-    "@types/uuid": "^8.3.1",
-    "autoprefixer": "^9.6.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-minify-dead-code-elimination": "^0.5.0",
-    "babel-plugin-transform-imports": "^2.0.0",
-    "css-loader": "^3.2.0",
-    "jest-css-modules": "^2.1.0",
-    "jest-css-modules-transform": "^4.4.2",
-    "jest-dom": "^4.0.0",
-    "jest-environment-jsdom-sixteen": "^2.0.0",
-    "jest-junit": "^15.0.0",
-    "jest-stylus": "^0.1.2",
-    "jest-svg-transformer": "^1.0.0",
-    "jest-transform-stub": "^2.0.0",
-    "lodash": "^4.17.15",
-    "mobx": "4.6.0",
-    "mobx-react": "5.4.3",
-    "postcss-loader": "^3.0.0",
-    "qs": "6.5.1",
-    "re-resizable": "^6.0.0",
-    "react-checkbox-tree": "^1.5.1",
-    "react-circular-progressbar": "^2.0.4",
-    "storybook-addon-i18next": "^1.1.0",
-    "style-loader": "^1.0.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
-    "ts-jest": "^26.0.0",
-    "tslint": "^5.17.0",
-    "tslint-config-airbnb": "^5.11.1",
-    "tslint-loader": "^3.5.4",
-    "typescript": "^3.5.1",
-    "webpack-cli": "^3.3.6",
-    "husky": "^9.0.11"
-  },
-  "resolutions": {
-    "@types/react": "^16.8.3"
-  },
-  "scripts": {
-    "build": "true",
-    "prepublishOnly": "npm run build",
-    "prepare": "npm run build",
-    "storybook": "start-storybook -p 6006",
-    "clean": "rm -rf ./dist/*.*",
-    "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",
-    "build:story": "build-storybook",
-    "test": "jest --watch",
-    "test:ci": "jest --config ./jest.config.js --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
-    "test:coverage": "yarn run test -- --coverage --watchAll=false || exit 0"
-  },
-  "author": "Maks Okhmatenko",
-  "license": "UNLICENSED"
-}
+{
+  "name": "@bytebrand/fe-ui-core",
+  "version": "4.8.113",
+  "description": "UI components for the auto.de project",
+  "main": "index.ts",
+  "module": "dist/common.js",
+  "dependencies": {
+    "@babel/core": "^7.17.8",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.17.8",
+    "@babel/plugin-transform-react-constant-elements": "^7.17.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-histoslider": "3.0.0",
+    "@bytebrand/i18n-dictionaries": "^1.5.2",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "^5.9.0",
+    "@mui/styles": "^5.9.0",
+    "@mui/x-date-pickers": "^5.0.0-beta.1",
+    "classnames": "2.2.6",
+    "d3-format": "1.4.5",
+    "d3-scale": "^2.2.2",
+    "date-fns": "2.29.1",
+    "i18next": "^15.0.4",
+    "jest": "^26.0.0",
+    "js-cookie": "^2.2.0",
+    "moment": "^2.29.1",
+    "rc-slider": "^8.6.13",
+    "react": "^17.0.2",
+    "react-device-detect": "^2.1.2",
+    "react-dom": "^17.0.2",
+    "react-grid-system": "^5.0.2",
+    "react-i18next": "9.0.4",
+    "react-lazyload": "3.2.0",
+    "react-scroll": "^1.7.13",
+    "react-select": "^3.0.4",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^5.1.11",
+    "@storybook/addon-backgrounds": "^5.1.11",
+    "@storybook/addon-centered": "^5.1.11",
+    "@storybook/addon-info": "^5.1.11",
+    "@storybook/addon-links": "^5.1.11",
+    "@storybook/addons": "^5.1.11",
+    "@storybook/react": "^5.3.21",
+    "@testing-library/dom": "^9.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^11.2.6",
+    "@types/classnames": "2.2.6",
+    "@types/d3-format": "^1.3.1",
+    "@types/i18next": "^12.1.0",
+    "@types/jest": "^29.4.0",
+    "@types/js-cookie": "^2.1.0",
+    "@types/lodash": "^4.14.134",
+    "@types/qs": "^6.9.7",
+    "@types/rc-slider": "^9.3.1",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-lazyload": "^2.5.0",
+    "@types/react-scroll": "^1.8.7",
+    "@types/react-select": "^3.0.2",
+    "@types/react-slick": "^0.23.4 ",
+    "@types/uuid": "^8.3.1",
+    "autoprefixer": "^9.6.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-minify-dead-code-elimination": "^0.5.0",
+    "babel-plugin-transform-imports": "^2.0.0",
+    "css-loader": "^3.2.0",
+    "jest-css-modules": "^2.1.0",
+    "jest-css-modules-transform": "^4.4.2",
+    "jest-dom": "^4.0.0",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
+    "jest-junit": "^15.0.0",
+    "jest-stylus": "^0.1.2",
+    "jest-svg-transformer": "^1.0.0",
+    "jest-transform-stub": "^2.0.0",
+    "lodash": "^4.17.15",
+    "mobx": "4.6.0",
+    "mobx-react": "5.4.3",
+    "postcss-loader": "^3.0.0",
+    "qs": "6.5.1",
+    "re-resizable": "^6.0.0",
+    "react-checkbox-tree": "^1.5.1",
+    "react-circular-progressbar": "^2.0.4",
+    "storybook-addon-i18next": "^1.1.0",
+    "style-loader": "^1.0.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "ts-jest": "^26.0.0",
+    "tslint": "^5.17.0",
+    "tslint-config-airbnb": "^5.11.1",
+    "tslint-loader": "^3.5.4",
+    "typescript": "^3.5.1",
+    "webpack-cli": "^3.3.6",
+    "husky": "^9.0.11"
+  },
+  "resolutions": {
+    "@types/react": "^16.8.3"
+  },
+  "scripts": {
+    "prepare": "node -e 0",
+    "storybook": "start-storybook -p 6006",
+    "clean": "rm -rf ./dist/*.*",
+    "build:lib": "yarn clean && webpack --config ./webpack.config.js --progress",
+    "build:story": "build-storybook",
+    "test": "jest --watch",
+    "test:ci": "jest --config ./jest.config.js --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
+    "test:coverage": "yarn run test -- --coverage --watchAll=false || exit 0"
+  },
+  "author": "Maks Okhmatenko",
+  "license": "UNLICENSED"
+}

package/source/components/AccordionWidget/AccordionWidget.styl

@@ -191,6 +191,7 @@
   height: 45px
   border-bottom 1px solid $grey-e
   text-transform: none
+  font-size: 11px
 
   +media-tablet-landscape-down()
     padding-top: 7px;
@@ -199,9 +200,20 @@
     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
 

package/source/components/AccordionWidget/AccordionWidget.tsx

@@ -31,13 +31,16 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
     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 || 'no-image'}
-              className={styles.accordionVehicleProp}
+              icon={prop.icon === '' ? '' : (prop.icon || 'no-image')}
+              className={classnames(styles.accordionVehicleProp, isFullWidth ? styles.accordionVehiclePropFull : '')}
             />
           );
         })}
@@ -45,14 +48,42 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
     );
   };
 
+  // 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>
-          {propsList.map((prop, i) => {
-            const { title, subTitle, value, isVisible = true, isLongTitle = false, valueDescription = '' } = decoratedProps[prop];
-            return isVisible && (
+          {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>
@@ -100,10 +131,20 @@ class AccordionWidget extends React.Component<IAccardionSectionProps> {
     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) => (
-      { icon: this.props.decoratedProps[prop].icon, description: this.props.decoratedProps[prop].value })
-    );
+    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)}

package/source/components/AdvantageItem/AdvantageItem.story.js

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

package/source/components/Alternative/Dealer.story.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import DealerInfo from './DealerInfo';
+
+import styles from './Dealer.story.styl';
+
+const infoSections = [
+    {
+        title: 'Adresse',
+        value: 'Roteweg, 21 Stuttgart 70437'
+    },
+    {
+        title: 'Name',
+        value: 'Mahmood Saeedi'
+    },
+    {
+        title: 'Telefon',
+        value: '01779335555',
+        icon: 'telephone'
+    },
+    {
+        title: 'E-Mail',
+        value: 'mahmood.saeedi@auto.de'
+    }
+]
+
+storiesOf('Alternative', module)
+.add('DealerInfo', () => (
+    <div className={styles.dealerInfoContainer}>
+        <DealerInfo infoSections={infoSections} t={phrase => phrase} dealerPrice={10000} unsereMarge={1000} link='www.google.com' linkName='link'/>
+    </div>
+))

package/source/components/Alternative/Dealer.story.styl

@@ -0,0 +1,3 @@
+.dealerInfoContainer
+    width: 360px
+    margin: 0 auto

package/source/components/Breadcrumbs/Breadcrumbs.story.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
+
+  const infoBlockData = [
+    {
+      title: 'Top Qualität',
+      contentMobile: 'Ganz egal ob Gebraucht- oder Neuwagen: Bei uns finden Sie nur fachkundig geprüfte und evaluierte Fahrzeuge'
+    },
+    {
+      title: '1 Jahr auto.de-Garantie',
+      contentMobile: 'Unsere 1 Jahr auto.de Garantie schützt Sie vor unerwarteten Reparaturkosten und unnötigem Papierkram'
+    },
+    {
+      title: 'Günstige Finanzierung',
+      contentMobile: 'Unsere Finanzierungsexperten finden mit Ihnen gemeinsam die beste Finanzierungs- und Versicherungsmöglichkeit'
+    },
+    {
+      title: '14 Tage Probefahrt',
+      contentMobile: 'Bei uns können Sie Ihr Fahrzeug binnen 14 Tagen zurückgeben, sollten Sie mit diesem nicht zufrieden sein'
+    }
+  ];
+
+const BreadcrumbsContainer = () => {
+    return (
+        <div>
+          <Breadcrumbs page='VEHICLE_DETAILS' infoBlockData={infoBlockData}/>
+        </div>
+    )
+}
+
+storiesOf('Breadcrumbs', module)
+  .add('Breadcrumbs', () => (
+    <div>
+      <div>
+        <BreadcrumbsContainer />
+      </div>
+    </div>
+  ));
+export default BreadcrumbsContainer;

package/source/components/Breadcrumbs/FirstInfoBlock/FirstInfoBlock.story.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import FirstInfoBlock from './FirstInfoBlock';
+
+const infoBlockData = [
+    {
+      title: 'price',
+      contentMobile: 'priceTextMobile'
+    },
+    {
+      title: 'autoDeCheck',
+      contentMobile: 'autoDeCheckTextMobile'
+    },
+    {
+      title: 'guarantee',
+      contentMobile: 'guaranteeTextMobile'
+    },
+    {
+      title: 'warranty',
+      contentMobile: 'warrantyTextMobile'
+    }
+  ];
+
+const infoBlockProps = {
+    infoBlockData
+}
+
+const FirstInfoBlockContainer = () => {
+    return (
+        <div>
+            <FirstInfoBlock {...infoBlockProps}/> 
+        </div>
+    )
+}
+
+storiesOf('Breadcrumbs', module)
+  .add('FirstInfoBlock', () => (
+    <div>
+      <div>
+        <FirstInfoBlockContainer/>
+      </div>
+    </div>
+  ));
+
+export default FirstInfoBlockContainer;