@bytebrand/fe-ui-core 4.8.111 → 4.8.113

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -1,6 +1,7 @@
 import React, { memo, FunctionComponent, ReactNode, MouseEvent, createElement } from 'react';
 import classnames from 'classnames';
 import _get from 'lodash/get';
+import getCardDecoratedProps from '../../framework/vehiclesProps/decoratedLightProps';
 import LazyLoad from 'react-lazyload';
 import withLabel from '../_common/withLabel/withLabel';
 import withStats, { IStatsWrapperProps } from '../_common/withStats/withStats';
@@ -12,6 +13,7 @@ import VehicleTitle from './VehicleData/VehicleTitle/VehicleTitle';
 import SeoText from './SeoText/SeoText';
 import VehicleInfo from './VehicleData/VehicleInfo/VehicleInfo';
 import VehiclePrice from './VehicleData/VehiclePrice/VehiclePrice';
+import { PLACEHOLDER_IMAGE_SMALL_URL } from '../../framework/constants/common';
 import {
   IVehicleInfo,
   IPrice,
@@ -149,6 +151,32 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
 
   const combineRefAlternative = isAlternative || isReferenceSearch;
 
+  // ADV-88: on the narrow landing/main recommendation cards the long plug-in consumption line
+  // doesn't fit the slim `info` column — render it as its own full-width row below the price
+  // block (under "Zum Angebot") instead, and suppress it inside VehicleInfo to avoid duplication.
+  // ADV-88: ANY plug-in hybrid (new or used) carries the long weighted+discharged consumption/CO2
+  // line — externalise it to a full-width row so it doesn't overflow the narrow info column. 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 cardFuel = consumption ? (consumption as any).fuel : undefined;
+  const isPlugin = cardFuel === 'selector_fuel_hybridElectricalDiesel'
+    || cardFuel === 'selector_fuel_hybridElectricalPetrol';
+  const externalizeConsumption = isPlugin
+    && (vehicleComponentName === 'landing' || vehicleComponentName === 'main'
+      || vehicleComponentName === 'search' || vehicleComponentName === 'comparable'
+      || vehicleComponentName === 'favorite');
+  let pluginConsumptionNode: ReactNode = null;
+  if (externalizeConsumption) {
+    const decoCar = {
+      consumption,
+      environmentEmissions,
+      engineData,
+      mainData: { condition: _get(info, 'condition') }
+    };
+    const deco = getCardDecoratedProps(decoCar, t, language) as any;
+    pluginConsumptionNode = _get(deco, 'consumptionCombinedAlternateView.value', null);
+  }
+
   const label = {
     labelVisible: isTop,
     labelWrapperClassName: styles.labelWrapper
@@ -163,6 +191,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     { [styles.vehicleWrapMyVeicles]: vehicleComponentName === 'myVehicles' },
     { [styles.vehicleWrapFavorite]: vehicleComponentName === 'favorite' },
     { [styles.vehicleWrapRecently]: vehicleComponentName === 'recently' },
+    { [styles.vehicleWrapNewPlugin]: externalizeConsumption },
     { [styles.topVehicle]: isTop },
     { [styles.disableBorder]: minimizeData },
     { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 },
@@ -217,6 +246,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     target,
     rel,
     engineData,
+    suppressConsumption: externalizeConsumption,
     ...price,
     ...info
   };
@@ -243,6 +273,9 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     typeAlternative,
     isAlternative,
     showCompareCheckboxes,
+    // ADV-88: hide the "monatlich z.B." price-column header on exactly the cards that show
+    // the externalised consumption row (new plug-in hybrids) so the price column rises.
+    suppressMonthlyFrom: externalizeConsumption && !!pluginConsumptionNode,
     ...price,
     ...compareProps
   };
@@ -285,6 +318,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaTitle}`,
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
           onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
           href: url
         })}
@@ -338,11 +372,15 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
           target,
           rel,
           className: `${styles.redirectClassLink} ${styles.gridAreaImage}`,
+          // ADV-116: opening a CDP from a card defaults to the Financing tab.
           onClick: () => localStorage.setItem('activeTabCDP', t('vehicleProps:title.financing')),
           href: url
         })}
         <VehicleInfo {...vehicleInfoProps} />
         <VehiclePrice {...vehiclePriceProps} />
+        {externalizeConsumption && pluginConsumptionNode ? (
+          <div className={styles.gridAreaConsumption}>{pluginConsumptionNode}</div>
+        ) : null}
         {seoText ? (
           <a className={`${styles.redirectClassLink} ${styles.gridAreaSeoText}`} href={url}>
             <SeoText seoText={seoText} />
@@ -370,7 +408,7 @@ VehicleSmallCard.defaultProps = {
   baseUrl: '',
   typeAlternative: '',
   offerSource: '',
-  src: 'https://images.auto.de/noimage/small',
+  src: PLACEHOLDER_IMAGE_SMALL_URL,
   environmentEmissions: null,
   language: 'en',
   consumption: null,

package/source/components/VehicleSmallCardForDealerships/VehicleSmallCardForDealerships.story.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import i18next from 'i18next';
+import { Resizable } from 're-resizable';
+// import * as CheckboxTree from 'react-checkbox-tree';
+import { withNamespaces } from 'react-i18next';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import VehicleSmallCardForDealerships from './VehicleSmallCardForDealerships.tsx';
+import styles from './VehicleSmallCardForDealerships.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',
+    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 resizableProps = {
+  minWidth: 150,
+  defaultSize: { width: 360, height: 'auto' }
+};
+
+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 dealershipsProps = {
+    language: 'de',
+    vehicleComponentName: 'landing',
+    showSlider: true,
+    showNewLabel: true,
+    src: 'http://placehold.jp/400x300.png?text=mainImage',
+    stats: {
+      imagesCount: 100,
+      isFavoured: true,
+      statsData: {
+        totalCarImpCount: 10,
+        totalFavCount: 20,
+      },
+      statsSize: 'xs'
+    },
+    title: {
+      make: 'Audi',
+      model: 'A4',
+      subModel: 'Shooting Brake',
+    },
+    info: {
+      mileage: 10464,
+      regDate: 1535760000,
+      gearbox: 'selector_gearbox_automatic'
+    },
+    environmentEmissions: {
+      co2: 8.7
+    },
+    consumption: {
+      consumptionCombined: 9.6,
+      consumptionPowerCombined: null,
+      fuel: 'selector_fuel_hybridElectricalDiesel'
+    },
+    engineData: {
+      cubicCapacity: 1968,
+      cylinders: 0,
+      particulateFilterDiesel: true,
+      powerKW: 140,
+      powerPS: 190,
+      startStopSystem: true,
+    },
+    offer : {
+      availabilityFrom: null,
+      availabilityMode: "selector_availabilityMode_always",
+      deliveryPeriod: "selector_unknown"
+    },
+    price: {
+      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: {
+        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
+      },
+      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'),
+  };
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <Resizable {...resizableProps}>
+          <VehicleSmallCardForDealerships {...dealershipsProps} />
+        </Resizable>
+      </div>
+    </>
+  );
+
+});
+
+storiesOf('VehicleSmallCardForDealerships', module).add('VehicleSmallCardForDealerships', () => <VehicleSmallCardStory />);

package/source/components/VehicleSmallCardForDealerships/VehicleSmallCardForDealerships.story.styl

@@ -0,0 +1,40 @@
+@import '../../theme/theme.styl';
+
+.wrapper
+  // position: fixed
+  width: 100%
+  height: 100%
+  left: 0px
+  background-color: red;
+  top: 0px
+  display: flex
+  background-color #CBCBCB
+  font-family: $font-style-arial
+
+.resizable
+  margin-top: 0;
+  width: 375px;
+  padding: 100px;
+
+.propsContainer
+  overflow-y: auto
+
+.title
+  text-align: center
+  font-size: 22px
+  font-weight: bold
+
+.input
+  display: inline-block !important
+  margin-left: 10px
+  position: absolute
+  right: 0
+
+:global
+  .react-checkbox-tree
+    width: 550px
+    margin-right: 10px
+    padding-right: 10px
+  .rct-node
+    margin: 10px 0
+    position: relative

package/source/components/_common/Accordion/Accordion.story.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Accordion from './Accordion';
+
+const Label = ({ opened }) => (
+  <div style={{ padding: 10, borderBottom: '1px solid lightgray' }}>
+    {opened ? '-' : '+'} Some label here.
+  </div>
+);
+
+const Content = ({ opened }) => (
+  <div style={{ padding: 10 }}>
+    Wow some expandable content.
+  </div>
+);
+
+const item = {
+  content: <Content />,
+  title: <Label />
+};
+
+const props = {
+  // toggleMany: true,
+  defaultOpened: 0,
+  items: [item, item, item],
+  accordionName: 'storybookAccordion',
+  onPanelFocus: (panelKey) => action(`onPanelFocus ${panelKey}`),
+  onToggle: action('state changed')
+};
+
+storiesOf('_Common_UI', module)
+.add('Accordion', () => (
+  <Accordion {...props} />
+));

package/source/components/_common/Badge/Badge.story.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { ROW_STYLES } from '../../../framework/constants';
+import styles from './Badge.story.styl';
+import Badge from './Badge';
+
+storiesOf('_Common_UI', module)
+.add('Badge', () => (
+  <div>
+    <div style={ROW_STYLES}>
+      <Badge>Push me </Badge>
+    </div>
+    <div style={ROW_STYLES}>
+      <Badge type='blue'>And then just</Badge>
+    </div>
+    <div style={ROW_STYLES}>
+      <Badge type='grey'>Touch me</Badge>
+    </div>
+    <div style={ROW_STYLES}>
+      <Badge type='green'>Until i get my</Badge>
+    </div>
+    <div style={ROW_STYLES}>
+      <Badge type='green' className={styles.customClass}>Until i get my</Badge>
+    </div>
+  </div>
+));

package/source/components/_common/Badge/Badge.story.styl

@@ -0,0 +1,5 @@
+.customClass
+  width: 200px
+  height: 40px
+  font-size: 20px
+  line-height: 38px

package/source/components/_common/Bubble/Bubble.story.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Bubble from './Bubble';
+
+const stories = [
+  {
+    props: {
+      size: 'large',
+      type: 'orange',
+      children: <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <span style={{ fontSize: 40, fontWeight: 700 }}>30 %</span>
+        <span style={{ fontSize: 24, fontWeight: 700 }}>SPAREN</span>
+      </div>
+    }
+  },
+  {
+    props: {
+      size: 'medium',
+      type: 'green',
+      children: <div style={{ display: 'flex', flexDirection: 'column', textAlign: 'center' }}>
+        <span style={{ fontSize: 24, fontWeight: 700 }}>Jahre</span>
+        <span style={{ fontSize: 14 }}>GARANTIE</span>
+      </div>
+    }
+  },
+  {
+    props: {
+      size: 'small',
+      type: 'yellow',
+      children: <span>0</span>
+    }
+  },
+  {
+    props: {
+      size: 'tiny',
+      type: 'orange',
+      children: <span style={{ fontSize: 12 }}>0</span>
+    }
+  }
+]
+
+storiesOf('_Common_UI', module)
+.add('Bubble', () => (
+  <div style={{ display: 'flex', flexDirection: 'column' }}>
+    {stories.map(({ props }) => (
+      <div>
+        <Bubble {...props} />
+      </div>
+    ))}
+  </div>
+));

package/source/components/_common/Button/Button.story.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { ROW_STYLES } from '../../../framework/constants';
+
+import Button from './Button.tsx';
+import styles from './Button.story.styl';
+
+const btnDefault = {
+  loading: false,
+  disabled: false,
+
+  onClick: action('button click'),
+  onHover: action('button hover'),
+
+  onMouseEnter: action('button mouse enter'),
+  onMouseLeave: action('button mouse leave')
+};
+const btnSecondary = Object.assign({}, btnDefault, { color: 'primary' });
+const btnDanger = Object.assign({}, btnDefault, { color: 'secondary' });
+const btnGhost = Object.assign({}, btnDefault, { color: 'primary', variant: 'outlined' });
+const btnLoading = Object.assign({}, btnDefault, { loading: true });
+const btnDisabled = Object.assign({}, btnDefault, { disabled: true });
+const btnCustomSize = Object.assign({}, btnDefault, { className: styles.button });
+
+storiesOf('_Common_UI', module)
+  .add('Button', () => (
+    <div>
+      <div style={ROW_STYLES}>
+        <Button {...btnDefault }>Push me </Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnSecondary}>And then just</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnDanger} color='secondary'>Touch me</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnGhost} color='primary' variant='outlined'>Touch me</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnDisabled}>Until i get my</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnLoading}>Until i get my</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnCustomSize}>satisfaction, satisfaction, satisfaction</Button>
+      </div>
+    </div>
+  ));

package/source/components/_common/Button/Button.story.styl

@@ -0,0 +1,5 @@
+.button
+  width: 280px
+  height: 50px
+  background-color: #BADA55
+  text-transform: uppercase

package/source/components/_common/ButtonOld/Button.story.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { ROW_STYLES } from '../../../framework/constants';
+
+import Button from './Button.tsx';
+import styles from './Button.story.styl';
+
+const btnDefault = {
+  type: 'primary',
+
+  loading: false,
+  disabled: false,
+
+  onClick: action('button click'),
+  onHover: action('button hover'),
+
+  onMouseEnter: action('button mouse enter'),
+  onMouseLeave: action('button mouse leave')
+};
+const btnSecondary = Object.assign({}, btnDefault, { type: 'secondary' });
+const btnDanger = Object.assign({}, btnDefault, { type: 'danger' });
+const btnGhost = Object.assign({}, btnDefault, { type: 'ghost' });
+const btnLoading = Object.assign({}, btnDefault, { loading: true });
+const btnDisabled = Object.assign({}, btnDefault, { disabled: true });
+const btnCustomSize = Object.assign({}, btnDefault, { className: styles.button });
+
+storiesOf('_Common_UI', module)
+  .add('ButtonOld', () => (
+    <div>
+      <div style={ROW_STYLES}>
+        <Button {...btnDefault}>Push me </Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnSecondary}>And then just</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnDanger}>Touch me</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnGhost}>Touch me</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnDisabled}>Until i get my</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnLoading}>Until i get my</Button>
+      </div>
+      <div style={ROW_STYLES}>
+        <Button {...btnCustomSize}>satisfaction, satisfaction, satisfaction</Button>
+      </div>
+    </div>
+  ));

package/source/components/_common/ButtonOld/Button.story.styl

@@ -0,0 +1,5 @@
+.button
+  width: 280px
+  height: 50px
+  background-color: #BADA55
+  text-transform: uppercase

package/source/components/_common/Checkbox/Checkbox.story.js

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { ROW_STYLES } from '../../../framework/constants';
+import Checkbox from './Checkbox';
+import FormCheckbox from './FormCheckbox';
+
+import styles from './Checkbox.story.styl';
+
+// Props related to FormCheckbox stories
+const basePropsForm = {
+  field: { bind: () => { } },
+  label: 'Some label here'
+};
+
+const withErrorForm = {
+  field: { bind: () => { }, hasError: true, error: 'Something went wrong'},
+  label: 'Some label here',
+};
+
+const CheckboxWrap = () => {
+  const [checked, setChecked] = useState(false);
+
+  // Props related to the Checkbox stories
+  const baseProps = {
+    checked,
+    value: 'some bitchy value',
+    label: <span>wow, so label!</span>,
+    onChange: (e, checked) => {
+      setChecked(checked => !checked);
+    },
+    onFocus: action('checkbox focus'),
+    onBlur: action('checkbox blur')
+  };
+
+
+  const disabledChecked = Object.assign({}, baseProps, { disabled: true });
+  const reversedProps = Object.assign({}, baseProps, { reversed: true });
+  const disabledUnChecked = Object.assign({}, baseProps, { disabled: true, checked: true });
+  const withoutLabel = Object.assign({}, baseProps, { label: false, checked: !checked });
+  const errorProps = Object.assign({}, baseProps, { error: true });
+  const customLabel = Object.assign({}, baseProps, {
+    label: <div className={styles.label}><span className={styles.coupe} />Coupe</div>
+  });
+
+  return (
+    <div>
+      <div style={ROW_STYLES}>
+        <Checkbox {...baseProps} />
+      </div>
+      <div style={ROW_STYLES}>
+        <Checkbox {...reversedProps} />
+      </div>
+      <div style={ROW_STYLES}>
+        <Checkbox {...disabledChecked} />
+      </div>
+      <div style={ROW_STYLES}>
+        <Checkbox {...disabledUnChecked} />
+      </div>
+      <div style={ROW_STYLES}>
+        <Checkbox {...withoutLabel} />
+      </div>
+      <div style={ROW_STYLES}>
+        <Checkbox {...errorProps} />
+      </div>
+      <div style={ROW_STYLES}>
+        <Checkbox {...customLabel} />
+      </div>
+    </div>
+  )
+}
+
+storiesOf('_Common_UI', module)
+  .add('Checkbox', () => <CheckboxWrap />)
+  .add('FormCheckbox', () => (
+    <div>
+      <div style={ROW_STYLES}>
+        <FormCheckbox {...basePropsForm} />
+      </div>
+      <div style={ROW_STYLES}>
+        <FormCheckbox {...withErrorForm} />
+      </div>
+    </div>
+  ));