@bytebrand/fe-ui-core 4.8.109 → 4.8.111

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-.label
-  display: inline-block
-  vertical-align: middle
-
-.coupe
-  display: inline-block
-  vertical-align: middle
-  width: 50px
-  height: 50px
-  background-image: url('../../../../media/images/body-type-coupe.svg')
-  background-size: contain
-  background-repeat: no-repeat
-  background-position: center
-  margin-right: 20px