@bytebrand/fe-ui-core 4.8.46 → 4.8.47

package/source/components/_common/Radio/RadioGroup.story.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import Radio from './Radio';
-import RadioGroup from './RadioGroup';
-
-import styles from './RadioGroup.story.styl';
-
-export class RadioGroupDefault extends React.Component {
-  state = {
-    value: 'always'
-  };
-  action = action('change');
-
-  onChange = (event, value) => {
-    this.action(event, value);
-    this.setState(() => ({ value }));
-  };
-
-  render() {
-    return (
-      <RadioGroup name='availability' containerClassName={styles.default} value={this.state.value} onChange={this.onChange}>
-        <Radio label='Available always' value='always' />
-        <Radio label='Available from' value='fromDate' />
-        <Radio label='Unknown' value='unknown' disabled={true} />
-      </RadioGroup>
-    );
-  }
-}
-
-export class RadioGroupVertical extends React.Component {
-  state = {
-    value: 'M_Sport'
-  };
-
-  action = action('change');
-  onChange = (event, value) => {
-    this.action(event, value);
-    this.setState(() => ({ value }));
-  };
-
-  renderSubModel = (index) => {
-    const models = ['320 | 2.0 | Automatic', '320 | 2.0 | Diesel', '320 | 2.0'];
-
-    return (
-      <div className={styles.equipment}>
-        <div className={styles.column}>
-          <span className={styles.value}>
-            {models[index]}
-          </span>
-        </div>
-        <div className={styles.column}>
-          <span className={styles.title}>
-            Power
-          </span>
-          <span className={styles.value}>
-            184 PS / 138 KW
-          </span>
-        </div>
-        <div className={styles.column}>
-          <span className={styles.title}>
-            Built by
-          </span>
-          <span className={styles.value}>
-            7/2015 – 12/2018
-          </span>
-        </div>
-      </div>
-    );
-  };
-
-  render() {
-    return (
-      <RadioGroup name='sub_model' containerClassName={styles.vertical} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
-        <Radio label={this.renderSubModel(0)} value='M_Sport' />
-        <Radio label={this.renderSubModel(1)} value='M_Sport_Coupe' />
-        <Radio label={this.renderSubModel(2)} value='M_Sport_Diesel' />
-      </RadioGroup>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-.add('RadioGroup', () => (
-  <div>
-    <RadioGroupDefault />
-    <RadioGroupVertical />
-  </div>
-));

package/source/components/_common/Radio/RadioGroup.story.styl

@@ -1,39 +0,0 @@
-.default
-  border: 1px solid lightgray
-  padding: 10px
-  border-radius: 5px
-  margin-bottom: 20px
-  display: flex
-  flex-direction: row
-  align-items: center
-  justify-content: space-between
-
-.vertical
-  composes: default
-  display: flex
-  flex-direction: column
-  align-items: center
-  padding: 10px
-
-.verticalChild:not(:last-of-type)
-  margin-bottom: 10px
-
-.equipment
-  display: flex
-  flex-direction: row
-  align-items: center
-  justify-content: space-between
-  min-width: 500px
-
-.column
-  display: flex
-  flex-direction: column
-  align-items: stretch
-  width: 150px
-
-.title
-  font-size: 10px
-
-.value
-  font-size: 14px
-

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

@@ -1,46 +0,0 @@
-import React, { useState } from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import Range from './Range';
-import { Tooltip } from '@mui/material';
-
-import styles from './Range.story.styl';
-
-const RangeWrapper = () => {
-  const [value, setValue] = useState(300);
-
-  const onChange = (value) => {
-    setValue(value);
-    action('onChange');
-  };
-
-  const ValueLabelComponent = (props) => {
-    const { children, value } = props;
-
-    return (
-      <Tooltip enterTouchDelay={0} placement='top' title={value}>
-        {children}
-      </Tooltip>
-    );
-  };
-
-  const props = {
-    value,
-    components: {
-      ValueLabel: ValueLabelComponent
-    },
-    onChange,
-    min: 0,
-    max: 10000,
-    step: 100
-  };
-  return (
-    <div className={styles.container}>
-      <Range {...props} />
-    </div>
-  );
-};
-
-storiesOf('_Common_UI', module)
-  .add('Range', () => <RangeWrapper />);

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

@@ -1,5 +0,0 @@
-.container
-  width: 300px
-  height: 100px
-  background-color #fff;
-  padding: 15px;

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

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import SliderArrow from './SliderArrow';
-
-
-const props = {
-  direction: 'left',
-  onClick: action('slider arrow clicked')
-};
-
-storiesOf('_Common_UI', module)
-  .add('SliderArrow', () => (
-    <div>
-      <SliderArrow {...props} />
-    </div>
-  ));

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

@@ -1,56 +0,0 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import TabsComponent from './Tabs.tsx';
-
-
-const wrapperProps = {
-  border: '1px solid rgba(0,0,0,0.1)',
-  borderRadius: '2px',
-  backgroundColor: '#fff'
-};
-
-const resizableProps = {
-  defaultSize: { width: 'auto', height: 'auto' }
-};
-
-const TabsStory = () => {
-  const [priceTabActiveIndex, setNewIndex] = useState(0);
-
-  const onTabPriceSelect = (event, priceTabActiveIndex) => {
-    setNewIndex(priceTabActiveIndex);
-  };
-
-  const tabsProps = {
-    priceTabActiveIndex,
-    onTabPriceSelect,
-    tabsTitles: [{
-      title: 'financing',
-      children: <span>financing</span>
-    }, {
-      title: 'leasing',
-      children: <span>leasing</span>
-    }, {
-      title: 'buy',
-      children: <span>buy</span>
-    }, {
-      title: 'abo',
-      isDisable: true,
-      children: <span>abo</span>
-    }],
-  };
-
-  return (
-    <>
-    <p>Tabs on CDP</p>
-    <div style={wrapperProps}>
-      <Resizable {...resizableProps}>
-        <TabsComponent {...tabsProps} />
-      </Resizable>
-    </div>
-    </>
-  );
-};
-
-storiesOf('_Common_UI', module).add('Tabs', () => <TabsStory />);

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

@@ -1,37 +0,0 @@
-import React, { useState } from 'react';
-
-import { storiesOf } from '@storybook/react';
-import TimePicker from './TimePicker';
-
-const TimePickerStory = () => {
-  const [time, setTime] = useState(0);
-  const [day, setDay] = useState(0);
-  const [timestamp, setTimestamp] = useState('');
-
-  const onHandleTimeChange = (value) => {
-    setTime(value)
-    };
-  const onHandleDayChange = (value) => {
-    setDay(value)
-    };
-  const onHandleTimestampChange = (value) => {
-    setTimestamp(new Date(value))
-    };
-  return (
-      <TimePicker
-        style={{ background: '#fff', display: 'flex', justifyContent: 'space-between', width: '800px' }}
-        time={time}
-        day={day}
-        onHandleTimeChange={onHandleTimeChange}
-        onHandleDayChange={onHandleDayChange}
-        onHandleTimestampChange={onHandleTimestampChange}
-        lang='de'
-        t={phrase => phrase}
-      />
-  )
-}
-
-storiesOf('_Common_UI', module)
-  .add('TimePicker', () => (
-    <div style={{ background: '#fff', width: '350px', height: '100%' }}><TimePickerStory /></div>
-  ));

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

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import Tooltip from './Tooltip';
-
-
-const description = {
-    financing: `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.`,
-    leasing: `Beim Leasing zahlen Sie lediglich die Zinsen des Darlehens und einen geringen Tilgungsanteil. Zum Vertragsende geben Sie das Auto einfach wieder zurück.`,
-    abo: `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.`,
-    kaufen: `Nach Kaufabschluss haben Sie die sofortigen Eigentumsrechte und keine Finanzierungskosten. Als Eigentümer können Sie Ihr Fahrzeug zueigenen Konditionen weiter verkaufen und Änderungen vornehmen.`,
-};
-
-storiesOf('_Common_UI', module).add('Tooltip', () => (
-    <div>
-      <Tooltip description={description.financing} />
-      <br />
-      <Tooltip description={description.leasing} positionX='left' />
-      <br />
-      <Tooltip description={description.abo} positionX='center' />
-      <br />
-      <Tooltip description={description.kaufen} positionY='top' positionX='right' />
-      <br />
-      <Tooltip description={description.kaufen} positionY='top' positionX='center' />
-      <br />
-      <Tooltip description={description.kaufen} positionY='top' positionX='left' />
-    </div>
-));

package/source/components/_common/UserMenu/MaterialMenu.story.js

@@ -1,73 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import MaterialMenu from './MaterialMenu';
-
-const superAdmin = false;
-
-const userMenuItems = [
-  {
-    icon: 'dashboardIcon',
-    label: 'Dashboard'
-  },
-  {
-    icon: 'userProfileIcon',
-    label: 'Profile'
-  },
-  {
-    icon: 'addressIcon',
-    label: 'Address'
-  },
-  {
-    icon: 'myVehiclesIcon',
-    label: 'My Vehicles'
-  },
-  {
-    icon: 'savedSearchsIcon',
-    label: 'Saved searchs'
-  },
-  {
-    icon: 'favoritesIcon',
-    label: 'Favorites',
-    amount: 0
-  },
-  !superAdmin && {
-    icon: 'dealersIcon',
-    label: 'Dealers',
-    amount: 1234,
-    divider: true,
-    nestedItems: [
-      {
-        icon: 'supportCallbackIcon',
-        label: 'Support & Call back',
-        divider: true,
-      },
-      {
-        icon: 'supportCallbackIcon',
-        label: 'Support & Call back',
-        divider: true,
-      },
-      {
-        icon: 'supportCallbackIcon',
-        label: 'Support & Call back',
-        divider: true,
-      }
-    ]
-  },
-  {
-    icon: 'imageSettingsIcon',
-    label: 'Image Settings'
-  },
-  !superAdmin && {
-    icon: 'supportCallbackIcon',
-    label: 'Support & Call back',
-    divider: true
-  },
-  {
-    icon: 'logoutIcon',
-    label: 'Logout'
-  },
-
-];
-
-storiesOf('_Common_UI', module).add('UserMenu', () => <MaterialMenu menuItems={userMenuItems} headerComponent='Firstname Lastname' />);

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

@@ -1,99 +0,0 @@
-import React from 'react';
-import styles from './VehicleSlider.story.styl'
-import { storiesOf } from '@storybook/react';
-
-import VehicleSlider from './VehicleSlider.tsx';
-import VehicleSliderForSRL from './VehicleSliderForSRL.tsx';
-
-import withStats from '../withStats/withStats.tsx';
-import withLabel from '../withLabel/withLabel.tsx';
-
-import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
-
-const IMAGE_URL = 'https://picsum.photos/400/300/?random';
-const images = [];
-const imagesForSRL = [];
-
-for (let i = 0; i <= 10; i++) {
-  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
-}
-
-for (let i = 0; i <= 10; i++) {
-  imagesForSRL.push({ imageUrlSmall: `${IMAGE_URL}&tag=${Math.random()}` });
-}
-
-const DecoratedSlider = withLabel(withStats(VehicleSlider));
-const DecoratedSliderForSRL = withLabel(withStats(VehicleSliderForSRL));
-
-export class ImageWithStatsContainer extends React.Component {
-  state = {
-    isFavoured: false
-  };
-
-  onFavoriteClick = () => {
-    this.setState({ isFavoured: !this.state.isFavoured })
-  };
-
-  render() {
-    const statsProps = {
-      isFavoured: this.state.isFavoured,
-      imagesCount: images.length,
-      statsData: {
-        totalCarImpCount: 15,
-        totalFavCount: 20
-      },
-      statsSize: 'xs',
-      onFavoriteClick: this.onFavoriteClick,
-    };
-
-    const sliderProps = {
-      images,
-      wrapperClassName: styles.slider
-    };
-
-    const sliderSRLProps = {
-      images: imagesForSRL,
-      wrapperClassName: styles.slider
-    };
-
-    return (
-      <div style={CONTAINER_STYLES}>
-        <div style={COLUMN_STYLES}>
-          <div style={ROW_STYLES}>
-            <div className={styles.row}>
-              <div className={styles.col}>
-                <h2 className={styles.title}>{'Slider props: { isLarge: true }'}</h2>
-                <div className={styles.row}>
-                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-                    <VehicleSlider images={images} wrapperClassName={styles.slider} size='lg' />
-                  </div>
-                </div>
-              </div>
-              <div className={styles.col}>
-                <h2 className={styles.title}>Slider with Stats</h2>
-                <div className={styles.row}>
-                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-                    <DecoratedSlider {...statsProps} {...sliderProps} />
-                  </div>
-                </div>
-              </div>
-              <div className={styles.col}>
-                <h2 className={styles.title}>Slider with Stats for SRL</h2>
-                <div className={styles.row}>
-                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-                    <DecoratedSliderForSRL {...statsProps} {...sliderSRLProps} />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-  .add('VehicleSlider', () => (
-    <ImageWithStatsContainer />
-  ));

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

@@ -1,62 +0,0 @@
-import React from 'react';
-import styles from '../Image/Image.story.styl'
-import { storiesOf } from '@storybook/react';
-
-import Image from '../Image/Image.tsx';
-import withLabel from './withLabel.tsx'
-import withStats from '../withStats/withStats.tsx'
-import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
-
-const SRC_HORIZONTAL = 'https://placekitten.com/400/300';
-
-const ImageWithLabel = withLabel(Image);
-const DecoratedImage = withLabel(withStats(Image));
-
-export class ImageWithLabelContainer extends React.Component {
-  state = {
-    isFavoured: false
-  };
-
-  onFavoriteClick = () => {
-    this.setState({ isFavoured: !this.state.isFavoured })
-  };
-
-  render() {
-    const statsProps = {
-      isFavoured: this.state.isFavoured,
-      imagesCount: 10,
-      statsData: {
-        totalCarImpCount: 15,
-        totalFavCount: 20
-      },
-      statsSize: 'xs',
-      onFavoriteClick: this.onFavoriteClick
-    };
-
-    return (
-      <div className={styles.row}>
-        <div className={styles.col}>
-          <h2 className={styles.title}>XS Size</h2>
-          <div className={styles.row}>
-            <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-              <ImageWithLabel labelVisible={true} src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} />
-            </div>
-          </div>
-        </div>
-        <div className={styles.col}>
-          <h2 className={styles.title}>MD Size</h2>
-          <div className={styles.row}>
-            <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-              <DecoratedImage src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...statsProps} />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-  .add('withLabel', () => (
-    <ImageWithLabelContainer />
-  ));

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { storiesOf } from '@storybook/react';
-import withPopover from './withPopover';
-import styles from './withPopover.story.styl'
-
-const Target = ({ isPopoverShown, text }) => {
-  const className = classnames(styles.target, { [styles.targetOpen]: isPopoverShown });
-  return <div className={className}>{text}</div>;
-};
-
-const Popover = ({ isPopoverShown, text }) => {
-  const className = classnames(styles.popover, { [styles.popoverOpen]: isPopoverShown });
-  return <div className={className}>{text}</div>;
-};
-
-const TargetWithPopover = withPopover(Target, Popover);
-
-export class WithPopoverContainer extends React.Component {
-  state = {
-    type: 'click'
-  };
-
-  onCheckboxChange = () => {
-    this.setState({ type: this.state.type === 'click' ? 'hover' : 'click' });
-  };
-
-  render() {
-    const targetWithPopoverProps = {
-      targetProps: { text: 'Target' },
-      popoverProps: { text: 'Popover' },
-      type: this.state.type
-    };
-
-    return (
-      <React.Fragment>
-        <label className={styles.label}>
-          <input type='checkbox' value={this.state.showOnHover} onChange={this.onCheckboxChange} />
-          <span>Open on hover</span>
-        </label>
-        <TargetWithPopover {...targetWithPopoverProps} />
-      </React.Fragment>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-  .add('withPopover', () => <WithPopoverContainer />);

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

@@ -1,54 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.label
-  display: block
-  font-family: $font-style-arial
-  margin-bottom: 20px
-
-.target
-  position: relative
-  font-family: $font-style-arial
-  width: 150px
-  height: 30px
-  line-height: 30px
-  text-align: center
-  border 1px solid $grey-b
-  border-radius: 3px
-  transition: all 0.2s ease-in-out
-  cursor: pointer
-  &:hover
-    background-color: $grey-f2
-
-.targetOpen
-  color: $primary
-  font-weight: bold
-  border-color: $primary
-  &:after
-    content: ''
-    position: absolute
-    display: block
-    width: 100%
-    height: 15px
-
-.popover
-  position: relative
-  box-sizing: border-box
-  color: white
-  font-size: 25px
-  font-weight: bold
-  border 3px solid $yellow-f1
-  position: absolute
-  top: 45px
-  width: 250px
-  height: 100px
-  line-height: 100px
-  text-align: center
-  border-radius: 3px
-  background-color: $grassGreen
-  visibility: hidden
-  opacity: 0
-  transition: all 0.2s ease-in-out
-
-.popoverOpen
-  visibility: visible
-  opacity: 1