@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/VehicleSmallCard/VehicleSmallCard.story.js

@@ -1,412 +1,412 @@
-import React from 'react';
-import i18next from 'i18next';
-import { Resizable } from 're-resizable';
-import classnames from 'classnames';
-// import * as CheckboxTree from 'react-checkbox-tree';
-import { withNamespaces } from 'react-i18next';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-// import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
-import VehicleSmallCard from './VehicleSmallCard.tsx';
-import styles from './VehicleSmallCard.story.styl';
-
-
-i18next.addResourceBundle('de', 'vehicleProps', {
-  value: {
-    mileage: "{{mileage}} km",
-    consumption: "{{consumption}}l/100km",
-    consumptionPower: "{{consumption}}kWh/100km",
-    consumptionPowerCombined: "{{consumption}}kWh/100km (komb)*",
-    consumptionGas: "{{consumption}}kg/100km",
-    consumptionCombined: "{{consumption}}l/100km",
-    power: "{{powerKW}}\u00A0kW ({{powerPS}}\u00A0PS)",
-    powerPS: "{{powerPS}} PS",
-    deliveryPeriodMonths: "{{count}} Monat\nab Bestellung",
-    deliveryPeriodDays: "{{count}} Tag\nab Bestellung",
-    co2Combined: "{{co2}}g CO2/km (komb)*",
-    co2: "{{co2}} g/km ",
-    na: "N/A"
-  },
-  priceRating: {
-    noRating: 'KEINE BEWERTUNG',
-    highPrice: 'HOHER PREIS',
-    increasedPrice: 'ERHÖHTER PREIS',
-    fairPrice: 'FAIRER PREIS',
-    goodPrice: 'GUTER PREIS',
-    topPrice: 'TOP PREIS'
-  },
-  promoSlider: {
-    consumptionCombined: `{{consumptionCombined}} l/100km (komb)*`,
-    co2: `{{co2}} g CO2/km (komb)*`,
-    new: 'neu'
-  },
-  title: {
-    addOfferToMainSlide: 'Zum Schieberegler hinzufügen',
-    toOffer: 'zum Angebot',
-    monthlyFrom: 'monatlich ab',
-    financing: 'Finanzierung',
-    leasing: 'Leasing',
-    abo: 'Abo',
-    buy: 'Kaufen',
-    margeInkl: "inkl. Marge",
-    marge: "Unsere Marge",
-    financingDescription: `Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil.
-    Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.`,
-    leasingDescription: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen
-    Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
-    aboDescription: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil- und
-    Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen.
-    Sie zahlen also nur Ihre Rate und Kraftstoff.`,
-    buyDescription: `Nach Kaufabschluss haben Sie die sofortigen
-    Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zu
-    eigenen Konditionen weiter verkaufen und Änderungen vornehmen.`
-  }
-});
-
-const resizablePropsSlider = {
-  minWidth: 150,
-  defaultSize: { width: 360, height: 'auto' }
-};
-const resizableProps = {
-  className: styles.resizable,
-  minWidth: 150,
-  defaultSize: { width: 360, height: 'auto' }
-};
-
-const resizablePropsComparable = {
-  className: styles.resizable,
-  minWidth: 150,
-  defaultSize: { width: 230, height: 'auto' }
-};
-
-const resizablePropsSearch = {
-  className: styles.resizable,
-  defaultSize: { width: 803, height: 283 }
-};
-
-const resizablePropsAlternative = {
-  className: styles.resizable,
-  defaultSize: { width: 803 } // height: 265
-};
-
-const IMAGE_URL = 'https://picsum.photos/400/300/?random';
-const images = [];
-for (let i = 0; i <= 10; i++) {
-  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
-}
-
-
-
-
-const VehicleSmallCardStory = withNamespaces('vehicleProps')(({ t }) => {
-
-  const renderCircularProgressbar = (percentage) => {
-    const checkPercentage = percentage < 50 ?
-    '#EE0202' :
-    (percentage >= 50 && percentage < 80) ?
-    '#00B800' :
-    '#005CCB';
-    return (
-      <div className={
-        classnames(
-          styles.progressWrap,
-          { [styles.progressWrapFull]: percentage === 100 },
-          { [styles.progressWrapMin]: percentage < 10 }
-        )
-      }>
-        <CircularProgressbar
-          value={percentage}
-          text={`${percentage}`}
-          styles={buildStyles({
-            textSize: '32px',
-            pathColor: checkPercentage,
-            textColor: checkPercentage,
-            trailColor: '#D5D5D5'
-          })}
-        />
-      </div>
-    );
-  };
-
-  const cardPropsSlider = {
-    t,
-    language: 'de',
-    vehicleComponentName: 'landing',
-    isAlternative: false,
-    showSlider: true,
-    showNewLabel: true,
-    slider: {
-      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
-      images,
-      arrowsSize: 'md',
-      onFirstChange: action('first change')
-    },
-    stats: {
-      imagesCount: 100,
-      isFavoured: true,
-      statsData: {
-        totalCarImpCount: 10,
-        totalFavCount: 20,
-      },
-      statsSize: 'xs'
-    },
-    title: {
-      make: 'Audi',
-      model: 'A4',
-    },
-    info: {
-      mileage: 10464,
-      regDate: 1535760000,
-      gearbox: 'selector_gearbox_automatic'
-    },
-    environmentEmissions: {
-      co2: 8.7
-    },
-    consumption: {
-      consumptionCombined: 9.6,
-      consumptionPowerCombined: 3.6,
-      fuel: 'selector_fuel_electrical'
-    },
-    engineData: {
-      cubicCapacity: 1968,
-      cylinders: 0,
-      particulateFilterDiesel: true,
-      powerKW: 140,
-      powerPS: 190,
-      startStopSystem: true,
-    },
-    offer : {
-      availabilityFrom: null,
-      availabilityMode: "selector_availabilityMode_always",
-      deliveryPeriod: "selector_unknown"
-    },
-    financing: {
-      annualPercentageRate: "",
-      bank: "",
-      closingCosts: null,
-      conditions: null,
-      finalInstallment: null,
-      financingBank: "",
-      firstInstallment: 0,
-      grossLoanAmount: "",
-      monthlyInstallment: 108,
-      netLoanAmount: "",
-      nominalInterestRate: "",
-      paybackPeriod: "24",
-      paymentProtectionInsurance: "",
-      platformFinancingId: null,
-      transportationCosts: "",
-      typeOfNominalInterestRate: null
-    },
-    leasing: {
-      RWG: 10,
-      addServicesCost: 799,
-      annualMileage: null,
-      closingCosts: null,
-      financialInstitution: null,
-      firstInstallment: null,
-      leasingMode: "default",
-      maxAge: null,
-      maxMileage: null,
-      nominalInterestRate: null,
-      paybackPeriod: null,
-      paymentProtectionInsurance: null,
-      purchasePrice: null,
-      santanderPayBackMin: 250,
-      transportationCost: null
-    },
-    price: {
-      common: {
-        isStrikeShown: true
-      },
-      monthlyInstallment: 29,
-      oldMonthlyInstallment: 49,
-      isStrikeShown: true,
-      currency: "EUR",
-      currentSalesPrice: 16160,
-      historyPriceDifference: 5629.6,
-      historyPriceDifferencePerCent: 26,
-      mlCurrentSalesPriceCategory: null,
-      mlCurrentSalesPriceDiffPercent: null,
-      mlCurrentSalesPricePredicted: 100,
-      totalCurrent: 50,
-      originalSalesPrice: 13467,
-      priceDate: null,
-      priceId: null,
-      recomendedRetailPrice: null,
-      retailToCurrentPriceDifference: 0,
-      vatDeductible: null,
-      vatRate: 7,
-      wasPrice: 10000,
-      financing: {
-        monthlyInstallment: 49,
-        oldMonthlyInstallment: 69,
-        isActive: true
-      },
-      leasing: {
-        monthlyInstallment: 49,
-        oldMonthlyInstallment: 69,
-        isActive: true
-      },
-      buy: {
-        currentSalesPriceExtra: 16110,
-        highestPriceExtra: 19349
-      }
-    },
-    seoText: 'Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008,Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008',
-    onFinancingClick: action('financing click'),
-    onContainerClick: action('container click'),
-    onFavoriteClick: action('favorite click'),
-  };
-
-  const cardProps = {
-    ...cardPropsSlider,
-    vehicleComponentName: 'main',
-    seoText: '',
-    slider: {},
-    info: {
-      mileage: 10464,
-      regDate: 1535760000,
-      gearbox: 'selector_gearbox_automatic'
-    },
-    environmentEmissions: {
-      co2: 8.7
-    },
-    consumption: {
-      consumptionCombined: 9.6,
-      consumptionPowerCombined: 3.6,
-      fuel: 'selector_fuel_hybridElectricalPetrol'
-    },
-  };
-
-  const cardPropsComparable = {
-    ...cardPropsSlider,
-    slider: {},
-    vehicleComponentName: 'comparable',
-    seoText: ''
-  };
-
-  const cardPropsSearch = {
-    ...cardPropsSlider,
-    vehicleComponentName: 'search',
-    seoText: '',
-    showSlider: true,
-    title: {
-      ...cardPropsSlider.title,
-      option: '110 kW (150 PS)',
-      isSponsored: true
-    },
-    slider: {
-      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
-      images,
-      arrowsSize: 'md',
-      getCarImagesData: () => new Promise(resolve => resolve(images)),
-      onFirstChange: action('first change')
-    },
-    isDealerSuperAdmin: true
-  };
-
-  const cardPropsAlternative = {
-    ...cardPropsSlider,
-    vehicleComponentName: 'search',
-    seoText: '',
-    showSlider: true,
-    isAlternative: true,
-    title: {
-      ...cardPropsSlider.title,
-      option: '110 kW (150 PS)',
-      isSponsored: true
-    },
-    info: {
-      ...cardPropsSlider.info,
-      location: {
-        city: 'Lviv',
-        countryCode: 'UA',
-        street: 'Stepana Bandery',
-        zipCode: 64380
-      }
-    },
-    slider: {
-      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
-      images,
-      arrowsSize: 'md',
-      onFirstChange: action('first change')
-    },
-    isDealerSuperAdmin: true
-  };
-
-  const cardPropsReference = {
-    ...cardPropsSlider,
-    vehicleComponentName: 'search',
-    seoText: '',
-    showSlider: true,
-    isAlternative: true,
-    isReferenceSearch: true,
-    CircularProgressbar: () => renderCircularProgressbar(8),
-    title: {
-      ...cardPropsSlider.title,
-      option: '110 kW (150 PS)',
-      isSponsored: true
-    },
-    info: {
-      ...cardPropsSlider.info,
-      location: {
-        city: 'Lviv',
-        countryCode: 'UA',
-        street: 'Stepana Bandery',
-        zipCode: 64380
-      }
-    },
-    slider: {
-      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
-      images,
-      arrowsSize: 'md',
-      onFirstChange: action('first change')
-    },
-    isDealerSuperAdmin: false
-  };
-
-  return (
-    <>
-      <div className={styles.wrapper}>
-        <p>Landing with slider</p>
-        <Resizable {...resizablePropsSlider}>
-          <VehicleSmallCard {...cardPropsSlider} />
-        </Resizable>
-      </div>
-      <div className={styles.wrapper}>
-        <p>Main without slider</p>
-        <Resizable {...resizableProps}>
-          <VehicleSmallCard {...cardProps} />
-        </Resizable>
-      </div>
-      <div className={styles.wrapper}>
-        <Resizable {...resizablePropsComparable}>
-          <p>Comparable cars</p>
-          <VehicleSmallCard {...cardPropsComparable} />
-        </Resizable>
-      </div>
-      <div className={styles.wrapper}>
-        <p>Search cars</p>
-        <Resizable {...resizablePropsSearch}>
-          <VehicleSmallCard {...cardPropsSearch} />
-        </Resizable>
-      </div>
-      <div className={styles.wrapper}>
-        <p>Alternative cars</p>
-        <Resizable {...resizablePropsAlternative}>
-          <VehicleSmallCard {...cardPropsAlternative} />
-        </Resizable>
-      </div>
-      <div className={styles.wrapper}>
-        <p>Reference search cars</p>
-        <Resizable {...resizablePropsAlternative}>
-          <VehicleSmallCard {...cardPropsReference} />
-        </Resizable>
-      </div>
-    </>
-  );
-
-});
-
-storiesOf('VehicleSmallCard', module).add('VehicleSmallCard', () => <VehicleSmallCardStory />);
+import React from 'react';
+import i18next from 'i18next';
+import { Resizable } from 're-resizable';
+import classnames from 'classnames';
+// import * as CheckboxTree from 'react-checkbox-tree';
+import { withNamespaces } from 'react-i18next';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+// import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import VehicleSmallCard from './VehicleSmallCard.tsx';
+import styles from './VehicleSmallCard.story.styl';
+
+
+i18next.addResourceBundle('de', 'vehicleProps', {
+  value: {
+    mileage: "{{mileage}} km",
+    consumption: "{{consumption}}l/100km",
+    consumptionPower: "{{consumption}}kWh/100km",
+    consumptionPowerCombined: "{{consumption}}kWh/100km (komb)*",
+    consumptionGas: "{{consumption}}kg/100km",
+    consumptionCombined: "{{consumption}}l/100km",
+    power: "{{powerKW}}\u00A0kW ({{powerPS}}\u00A0PS)",
+    powerPS: "{{powerPS}} PS",
+    deliveryPeriodMonths: "{{count}} Monat\nab Bestellung",
+    deliveryPeriodDays: "{{count}} Tag\nab Bestellung",
+    co2Combined: "{{co2}}g CO2/km (komb)*",
+    co2: "{{co2}} g/km ",
+    na: "N/A"
+  },
+  priceRating: {
+    noRating: 'KEINE BEWERTUNG',
+    highPrice: 'HOHER PREIS',
+    increasedPrice: 'ERHÖHTER PREIS',
+    fairPrice: 'FAIRER PREIS',
+    goodPrice: 'GUTER PREIS',
+    topPrice: 'TOP PREIS'
+  },
+  promoSlider: {
+    consumptionCombined: `{{consumptionCombined}} l/100km (komb)*`,
+    co2: `{{co2}} g CO2/km (komb)*`,
+    new: 'neu'
+  },
+  title: {
+    addOfferToMainSlide: 'Zum Schieberegler hinzufügen',
+    toOffer: 'zum Angebot',
+    monthlyFrom: 'monatlich ab',
+    financing: 'Finanzierung',
+    leasing: 'Leasing',
+    abo: 'Abo',
+    buy: 'Kaufen',
+    margeInkl: "inkl. Marge",
+    marge: "Unsere Marge",
+    financingDescription: `Bei der Finanzierung zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil.
+    Zum Vertragsende können Sie entscheiden, ob Sie den Restbetrag ablösen oder weiter finanzieren wollen.`,
+    leasingDescription: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen
+    Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
+    aboDescription: `Bei diesem Auto-Abo ist bereits alles an Bord. Teil- und
+    Vollkasko sowie Haftpflicht sind inklusive, ebenso wie Wartungs- und Verschleißreparaturen.
+    Sie zahlen also nur Ihre Rate und Kraftstoff.`,
+    buyDescription: `Nach Kaufabschluss haben Sie die sofortigen
+    Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zu
+    eigenen Konditionen weiter verkaufen und Änderungen vornehmen.`
+  }
+});
+
+const resizablePropsSlider = {
+  minWidth: 150,
+  defaultSize: { width: 360, height: 'auto' }
+};
+const resizableProps = {
+  className: styles.resizable,
+  minWidth: 150,
+  defaultSize: { width: 360, height: 'auto' }
+};
+
+const resizablePropsComparable = {
+  className: styles.resizable,
+  minWidth: 150,
+  defaultSize: { width: 230, height: 'auto' }
+};
+
+const resizablePropsSearch = {
+  className: styles.resizable,
+  defaultSize: { width: 803, height: 283 }
+};
+
+const resizablePropsAlternative = {
+  className: styles.resizable,
+  defaultSize: { width: 803 } // height: 265
+};
+
+const IMAGE_URL = 'https://picsum.photos/400/300/?random';
+const images = [];
+for (let i = 0; i <= 10; i++) {
+  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
+}
+
+
+
+
+const VehicleSmallCardStory = withNamespaces('vehicleProps')(({ t }) => {
+
+  const renderCircularProgressbar = (percentage) => {
+    const checkPercentage = percentage < 50 ?
+    '#EE0202' :
+    (percentage >= 50 && percentage < 80) ?
+    '#00B800' :
+    '#005CCB';
+    return (
+      <div className={
+        classnames(
+          styles.progressWrap,
+          { [styles.progressWrapFull]: percentage === 100 },
+          { [styles.progressWrapMin]: percentage < 10 }
+        )
+      }>
+        <CircularProgressbar
+          value={percentage}
+          text={`${percentage}`}
+          styles={buildStyles({
+            textSize: '32px',
+            pathColor: checkPercentage,
+            textColor: checkPercentage,
+            trailColor: '#D5D5D5'
+          })}
+        />
+      </div>
+    );
+  };
+
+  const cardPropsSlider = {
+    t,
+    language: 'de',
+    vehicleComponentName: 'landing',
+    isAlternative: false,
+    showSlider: true,
+    showNewLabel: true,
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    stats: {
+      imagesCount: 100,
+      isFavoured: true,
+      statsData: {
+        totalCarImpCount: 10,
+        totalFavCount: 20,
+      },
+      statsSize: 'xs'
+    },
+    title: {
+      make: 'Audi',
+      model: 'A4',
+    },
+    info: {
+      mileage: 10464,
+      regDate: 1535760000,
+      gearbox: 'selector_gearbox_automatic'
+    },
+    environmentEmissions: {
+      co2: 8.7
+    },
+    consumption: {
+      consumptionCombined: 9.6,
+      consumptionPowerCombined: 3.6,
+      fuel: 'selector_fuel_electrical'
+    },
+    engineData: {
+      cubicCapacity: 1968,
+      cylinders: 0,
+      particulateFilterDiesel: true,
+      powerKW: 140,
+      powerPS: 190,
+      startStopSystem: true,
+    },
+    offer : {
+      availabilityFrom: null,
+      availabilityMode: "selector_availabilityMode_always",
+      deliveryPeriod: "selector_unknown"
+    },
+    financing: {
+      annualPercentageRate: "",
+      bank: "",
+      closingCosts: null,
+      conditions: null,
+      finalInstallment: null,
+      financingBank: "",
+      firstInstallment: 0,
+      grossLoanAmount: "",
+      monthlyInstallment: 108,
+      netLoanAmount: "",
+      nominalInterestRate: "",
+      paybackPeriod: "24",
+      paymentProtectionInsurance: "",
+      platformFinancingId: null,
+      transportationCosts: "",
+      typeOfNominalInterestRate: null
+    },
+    leasing: {
+      RWG: 10,
+      addServicesCost: 799,
+      annualMileage: null,
+      closingCosts: null,
+      financialInstitution: null,
+      firstInstallment: null,
+      leasingMode: "default",
+      maxAge: null,
+      maxMileage: null,
+      nominalInterestRate: null,
+      paybackPeriod: null,
+      paymentProtectionInsurance: null,
+      purchasePrice: null,
+      santanderPayBackMin: 250,
+      transportationCost: null
+    },
+    price: {
+      common: {
+        isStrikeShown: true
+      },
+      monthlyInstallment: 29,
+      oldMonthlyInstallment: 49,
+      isStrikeShown: true,
+      currency: "EUR",
+      currentSalesPrice: 16160,
+      historyPriceDifference: 5629.6,
+      historyPriceDifferencePerCent: 26,
+      mlCurrentSalesPriceCategory: null,
+      mlCurrentSalesPriceDiffPercent: null,
+      mlCurrentSalesPricePredicted: 100,
+      totalCurrent: 50,
+      originalSalesPrice: 13467,
+      priceDate: null,
+      priceId: null,
+      recomendedRetailPrice: null,
+      retailToCurrentPriceDifference: 0,
+      vatDeductible: null,
+      vatRate: 7,
+      wasPrice: 10000,
+      financing: {
+        monthlyInstallment: 49,
+        oldMonthlyInstallment: 69,
+        isActive: true
+      },
+      leasing: {
+        monthlyInstallment: 49,
+        oldMonthlyInstallment: 69,
+        isActive: true
+      },
+      buy: {
+        currentSalesPriceExtra: 16110,
+        highestPriceExtra: 19349
+      }
+    },
+    seoText: 'Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008,Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Small Car, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008, Diesel, Manual, Gear Box, HU 06/2008',
+    onFinancingClick: action('financing click'),
+    onContainerClick: action('container click'),
+    onFavoriteClick: action('favorite click'),
+  };
+
+  const cardProps = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'main',
+    seoText: '',
+    slider: {},
+    info: {
+      mileage: 10464,
+      regDate: 1535760000,
+      gearbox: 'selector_gearbox_automatic'
+    },
+    environmentEmissions: {
+      co2: 8.7
+    },
+    consumption: {
+      consumptionCombined: 9.6,
+      consumptionPowerCombined: 3.6,
+      fuel: 'selector_fuel_hybridElectricalPetrol'
+    },
+  };
+
+  const cardPropsComparable = {
+    ...cardPropsSlider,
+    slider: {},
+    vehicleComponentName: 'comparable',
+    seoText: ''
+  };
+
+  const cardPropsSearch = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      getCarImagesData: () => new Promise(resolve => resolve(images)),
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: true
+  };
+
+  const cardPropsAlternative = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    isAlternative: true,
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    info: {
+      ...cardPropsSlider.info,
+      location: {
+        city: 'Lviv',
+        countryCode: 'UA',
+        street: 'Stepana Bandery',
+        zipCode: 64380
+      }
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: true
+  };
+
+  const cardPropsReference = {
+    ...cardPropsSlider,
+    vehicleComponentName: 'search',
+    seoText: '',
+    showSlider: true,
+    isAlternative: true,
+    isReferenceSearch: true,
+    CircularProgressbar: () => renderCircularProgressbar(8),
+    title: {
+      ...cardPropsSlider.title,
+      option: '110 kW (150 PS)',
+      isSponsored: true
+    },
+    info: {
+      ...cardPropsSlider.info,
+      location: {
+        city: 'Lviv',
+        countryCode: 'UA',
+        street: 'Stepana Bandery',
+        zipCode: 64380
+      }
+    },
+    slider: {
+      mainImageUrl: 'http://placehold.jp/400x300.png?text=mainImage',
+      images,
+      arrowsSize: 'md',
+      onFirstChange: action('first change')
+    },
+    isDealerSuperAdmin: false
+  };
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <p>Landing with slider</p>
+        <Resizable {...resizablePropsSlider}>
+          <VehicleSmallCard {...cardPropsSlider} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Main without slider</p>
+        <Resizable {...resizableProps}>
+          <VehicleSmallCard {...cardProps} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <Resizable {...resizablePropsComparable}>
+          <p>Comparable cars</p>
+          <VehicleSmallCard {...cardPropsComparable} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Search cars</p>
+        <Resizable {...resizablePropsSearch}>
+          <VehicleSmallCard {...cardPropsSearch} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Alternative cars</p>
+        <Resizable {...resizablePropsAlternative}>
+          <VehicleSmallCard {...cardPropsAlternative} />
+        </Resizable>
+      </div>
+      <div className={styles.wrapper}>
+        <p>Reference search cars</p>
+        <Resizable {...resizablePropsAlternative}>
+          <VehicleSmallCard {...cardPropsReference} />
+        </Resizable>
+      </div>
+    </>
+  );
+
+});
+
+storiesOf('VehicleSmallCard', module).add('VehicleSmallCard', () => <VehicleSmallCardStory />);