@bytebrand/fe-ui-core 4.8.52 → 4.8.54

package/source/components/VehiclePromoSlider/VehiclePromoSlide/VehiclePromoSlide.story.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import VehiclePromoSlide from './VehiclePromoSlide';
-
-// Stateful container for testing interaction
-class VehiclePromoSlideContainer extends React.Component {
-  render() {
-    const { t } = this.props;
-
-    const props = {
-      t: key => key,
-      _id: 'e18efa30-a4d2-48d7-b0d7-d1701731af2a',
-      title: 'BMW 114',
-      showNewLabel: true,
-      vehicleLink:
-        '',
-      src:
-        'https://images.auto.de/carimage/858c5bae-12d2-4180-ad01-6576c2160dc0/WF-8oH7LX-iw/medium-transparent',
-      environmentEmissions:
-        { energyEfficiencyClass: 'energyEff',
-          co2: 115,
-          emissionClass: 'emissionClass',
-          emissionSticker: 'emissionSticker' },
-      consumption:
-        { consumptionUnit: 'unit',
-          fuel: 'petrol',
-          consumptionCombined: 4.9 },
-      price:
-        { currency: 'EUR',
-          wasPrice: 14789,
-          currentSalesPrice: 100000,
-          vatRate: 19,
-          recomendedRetailPrice: 120000,
-          retailToCurrentPriceDifference: -20000,
-          historyPriceDifferencePerCent: 17,
-          historyPriceDifference: 20000,
-          mlCurrentSalesPricePredicted: 98000,
-          mlCurrentSalesPriceDiffPercent: 2.0408163265306145 },
-      monthlyInstallment: 714.69,
-      oldMonthlyInstallment: 1082.29,
-      bubblesColor: '#fd5a1c',
-      bubbleContent: 'Super Angebot!',
-      onButtonClick: action('offer button click'),
-      onFinancingDetailsClick: action('financing button click')
-    };
-
-    return (
-      <div style={{ marginTop: 100 }}>
-        <VehiclePromoSlide {...props} />
-      </div>
-    );
-  }
-}
-
-storiesOf('VehiclePromoSlide', module)
-  .add('Default', () => (
-    <div>
-      <VehiclePromoSlideContainer />
-    </div>
-  ));

package/source/components/VehiclePromoSlider/VehiclePromoSlider.story.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import cars from './cars'; // fake data from top api request
-
-import VehiclePromoSlider from './VehiclePromoSlider';
-
-const defaultSliderStateProps = {
-  t: key => key,
-  cars
-};
-
-const withHandlersSliderStateProps = {
-  t: key => key,
-  cars,
-  onButtonClick: action('offer button click'),
-  onFinancingDetailsClick: action('financing button click')
-};
-
-// Stateful container for testing interaction
-class VehiclePromoSliderContainer extends React.Component {
-  render() {
-    return (
-      <div style={{ marginTop: 100 }}>
-        <VehiclePromoSlider {...this.props} />
-      </div>
-    );
-  }
-}
-
-storiesOf('VehiclePromoSlider', module)
-  .add('Default', () => (
-    <div style={{ width: '90vw', height: '75vh' }}>
-      <VehiclePromoSliderContainer {...defaultSliderStateProps} />
-    </div>
-  ))
-  .add('With Handlers', () => (
-    <div style={{ width: '90vw', height: '75vh' }}>
-      <VehiclePromoSliderContainer {...withHandlersSliderStateProps} />
-    </div>
-  ));

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

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

package/source/components/VehicleSmallCard/VehicleSmallCard.story.styl

@@ -1,56 +0,0 @@
-@import '../../theme/theme.styl';
-
-.wrapper
-  // position: fixed
-  width: 100%
-  height: 100%
-  left: 0px
-  top: 0px
-  display: flex
-  flex-direction: column;
-  background-color #fff
-  font-family: $font-style-arial
-  padding 0 10px;
-  // &>:first-child
-  //   border-right: 1px solid $grey-e
-  //   margin-right: 10px
-
-.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
-
-.progressWrap
-  width: 30px;
-  height: 30px;
-  position: absolute;
-  top: 0;
-  z-index: 2;
-
-  & [class*='CircularProgressbar-text']
-    transform: translate(-18%, 10px);
-
-  &.progressWrapFull
-    & [class*='CircularProgressbar-text']
-      transform: translate(-27%, 10px);
-  &.progressWrapMin
-    & [class*='CircularProgressbar-text']
-      transform: translate(-10%, 10px);