@bytebrand/fe-ui-core 4.8.46 → 4.8.47

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

@@ -1,126 +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 CheckboxMaterial from './CheckboxMaterial';
-
-import styles from './CheckboxMaterial.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);
-  const [checkedBox, setCheckedBox] = useState({
-    0: true,
-    1: false,
-    2: true,
-    3: false,
-    4: true,
-    5: false,
-    6: true
-  });
-
-  const customProps = {
-    checked: checkedBox[0],
-    onChange: (e, checked) => {
-      const updatedValue = !checkedBox[e.target.value]
-      // setCheckedBox({...checkedBox, [e.target.value]: updatedValue});
-      // checked = checkedBox[e.target.value];
-      if (e.target.value === '2') {
-        setCheckedBox({0: false, 1: false, 2: true});  
-      }
-      else {
-        setCheckedBox({...checkedBox, [e.target.value]: updatedValue, 2: false})
-      }
-    },
-    onFocus: action('checkbox focus'),
-    onBlur: action('checkbox blur')
-  }
-
-  // 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}>
-        <CheckboxMaterial {...baseProps} />
-      </div>
-      <div style={ROW_STYLES}>
-        <CheckboxMaterial {...reversedProps} />
-      </div>
-      <div style={ROW_STYLES}>
-        <CheckboxMaterial {...disabledChecked} />
-      </div>
-      <div style={ROW_STYLES}>
-        <CheckboxMaterial {...disabledUnChecked} />
-      </div>
-      <div style={ROW_STYLES}>
-        <CheckboxMaterial {...withoutLabel} />
-      </div>
-      <div style={ROW_STYLES}>
-        <CheckboxMaterial {...errorProps} />
-      </div>
-      <div style={ROW_STYLES}>
-        <CheckboxMaterial {...customLabel} />
-      </div>
-    </div>
-    <div>
-    <div style={ROW_STYLES}>
-      <CheckboxMaterial {...customProps} value={0} checked={checkedBox[0]} label='label'/>
-    </div>
-    <div style={ROW_STYLES}>
-      <CheckboxMaterial {...customProps} value={1} checked={checkedBox[1]} label='label'/> 
-    </div>
-    <div style={ROW_STYLES}>
-      <CheckboxMaterial {...customProps} value={2} checked={checkedBox[2]} label='label'/>
-    </div>
-    <div style={ROW_STYLES}>
-      <CheckboxMaterial {...customProps} value={3} checked={checkedBox[3]} label='label'/>
-    </div>
-    <div style={ROW_STYLES}>
-      <CheckboxMaterial {...customProps} value={4} checked={checkedBox[4]} label='label'/>
-    </div>
-    <div style={ROW_STYLES}>
-      <CheckboxMaterial {...customProps} value={5} checked={checkedBox[5]} label='label'/>
-    </div>
-    <div style={ROW_STYLES}>
-      <CheckboxMaterial {...customProps} value={6} checked={checkedBox[6]} label='label'/>
-    </div>
-  </div>
-    </>
-  )
-}
-
-storiesOf('_Common_UI', module)
-  .add('CheckboxMaterial', () => <CheckboxWrap />)
-

package/source/components/_common/CheckboxMaterial/CheckboxMaterial.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

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
-import { ChipExample } from '../../../framework/constants/Search';
-
-import Chip from './Chip';
-
-// Props related to the Chip stories
-const baseProps = {
-  chip: ChipExample,
-  onClick: action('chip click'),
-  onDelete: action('chip delete')
-};
-
-const longText = {
-  ...baseProps,
-  chip: { key: '111', value: 'Veeeeeeeeerrrrrrry looooooooong manufacturer name'}
-};
-
-const withoutContent = {
-  ...baseProps,
-  chip: { }
-};
-
-
-storiesOf('_Common_UI', module)
-  .add('Chip', () => (
-    <div style={{ ... CONTAINER_STYLES, background: '#BADA' }}>
-      <div style={COLUMN_STYLES}>
-        <div style={ROW_STYLES}>
-          <Chip {...baseProps} />
-        </div>
-        <div style={ROW_STYLES}>
-          <Chip {...longText} />
-        </div>
-        <div style={ROW_STYLES}>
-          <Chip {...withoutContent} />
-        </div>
-      </div>
-    </div>
-  ));

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
-import { ChipListExample } from '../../../framework/constants/Search';
-
-import ChipList from './ChipList';
-
-const chipListBase = {
-  chips: ChipListExample,
-  onChipClick: action('chip click'),
-  onChipDelete: action('chip delete'),
-  onChipsClear: action('chips clear all')
-};
-
-// Please note, that empty list message
-// visible only on mobile devices.
-const chipListEmpty = {
-  ...chipListBase,
-  chips: []
-};
-
-storiesOf('_Common_UI', module)
-  .add('ChipList', () => (
-    <div style={{ ...CONTAINER_STYLES, width: '400px', background: '#BADA' }}>
-      <div style={{...COLUMN_STYLES, width: '100%' }}>
-        <div style={ROW_STYLES}>
-          <ChipList {...chipListBase} />
-        </div>
-        <div style={ROW_STYLES}>
-          <ChipList {...chipListEmpty} />
-        </div>
-      </div>
-    </div>
-  ));

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

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import FormDropDown from './FormDropDown';
-import DropDown from './DropDown';
-
-//const container = {
-//  maxWidth: 200
-//};
-
-
-const selectorTextProps = {
-  //type: 'text',
-  //checked: true,
-  //name: 'color',
-  //
-  //content: 123,
-  //label: <span>wow so label. <b>much content</b></span>,
-  //
-  //tooltip: 'some text here',
-  //onChange: action('change')
-};
-
-const ddProps = {
-  field: { bind: () => { } },
-  errorPosition: 'BottomLeft'
-};
-
-storiesOf('_Common_UI', module)
-  .add('Dropdown', () => (
-      <DropDown {...selectorTextProps} />
-  ))
-  .add('FormDropdown', () => (
-    <FormDropDown {...ddProps} />
-  ));

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { FiltersFactory } from '../../SearchFilters/FiltersFactory';
-
-import ExpandablePanel from './ExpandablePanel';
-import { MMS_GROUPS } from '../../../framework/constants/filters';
-import { BODY_TYPES } from '../../../framework/constants/selectors';
-
-const Label = ({ opened }) => (
-  <div style={{ padding: 10 }}>Some label here.</div>
-);
-
-const Content = ({ opened }) => (
-  <div style={{ padding: 10 }}>
-    {FiltersFactory['MAKE_MODEL'](MakeModelProps)}
-  </div>
-);
-
-const props = {
-  //isOpened: true,
-  id: 'uniquePanelId',
-  onPanelFocus: action('onPanelFocus'),
-  label: <Label />,
-  onToggle: action('change state')
-};
-
-const MakeModelProps = {
-  MMS_GROUPS,
-  BODY_TYPE: {
-    options: BODY_TYPES,
-    values: []
-  }
-};
-
-storiesOf('_Common_UI', module)
-.add('ExpandablePanel', () => (
-  <ExpandablePanel {...props}>
-    <Content />
-  </ExpandablePanel>
-));

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import Slider from '@bytebrand/fe-histoslider';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { PRICE_HISTOGRAM } from '../../../framework/data';
-
-// Stateful container for testing interaction
-class HistosliderContainer extends React.Component {
-  state = {
-    selection: null
-  };
-  setSelection = selection => {
-    (() => action("setSelection"))();
-    this.setState({ selection });
-  };
-
-  render() {
-    const histogram = PRICE_HISTOGRAM.map((item) => ({
-      x0: item.from,
-      x: item.to,
-      y: item.count
-    }));
-    const props = {
-      handleLabelFormat: ',.2r',
-      data: histogram,
-      // How much to pad the slider and histogram by, defaults to 20
-      padding: 0,
-      // The extent of the selection, this doesn't have to be sorted (and you shouldn't sort it to store it)
-      selection: this.state.selection,
-      // A function to handle a change in the selection
-      onChange: this.setSelection
-    };
-
-    return (
-      <div>
-        <Slider {...props} />
-        <Slider {...props} disableHistogram />
-      </div>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-.add('Histogram', () => (
-  <div>
-    <HistosliderContainer />
-  </div>
-));
-
-

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import components from './IconSVGConfig';
-
-import { storiesOf } from '@storybook/react';
-
-import IconSVG from './IconSVG';
-import styles from './IconSVG.story.styl';
-
-const iconNames = Object.keys(components);
-
-storiesOf('_Common_UI', module)
-  .add('IconSVG', () => (
-    <div style={{display: 'flex', flexWrap: 'wrap'}}>
-      {iconNames.map((name) => (
-        <div style={{width: '250px', margin: '10px', padding: '10px', border: '1px solid black', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-          <IconSVG customDimensions name={name}/>
-          <div> - {name}</div>
-        </div>
-      ))}
-    </div>
-  ));

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

@@ -1,25 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.wrapper
-  margin-bottom: 10px
-  text-align: center
-
-.camera
-  fill: $grassGreen
-
-.sliderEye
-  fill: $primary
-  width: 3em
-  height: 3em
-
-.star
-  fill: $yellow
-  width: 40px
-  height: 30px
-  stroke: black
-  stroke-width: 1px
-
-.checkBlue
-  fill: $primary
-  width: 3em
-  height: 3em

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

@@ -1,142 +0,0 @@
-import React from 'react';
-import styles from './Image.story.styl'
-import { storiesOf } from '@storybook/react';
-
-import Image from './Image.tsx';
-import {COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES} from '../../../framework/constants';
-
-const SRC_HORIZONTAL = 'https://placekitten.com/150/100';
-const SRC_SQUARE = 'https://placekitten.com/150/150';
-const SRC_VERTICAL = 'https://placekitten.com/100/150';
-
-const SRC_SMALL = 'https://dummyimage.com/3000x2000/000000/fff.png&text=SMALL+IMAGE';
-const SRC_LARGE = 'https://dummyimage.com/3000x2000/eb00eb/ffffff.png&text=LARGE+IMAGE';
-
-storiesOf('_Common_UI', module)
-  .add('Image', () => (
-    <div style={CONTAINER_STYLES}>
-      <div style={COLUMN_STYLES}>
-
-        <div style={ROW_STYLES}>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <h2 className={styles.title}>{`<Image width='100%' ratioW={4} ratioH={3} />`}</h2>
-              <div className={styles.row}>
-                <div className={styles.col}>
-                  <Image srcSmall={SRC_SMALL} srcLarge={SRC_LARGE} width='500px' ratioW={4} ratioH={3} />
-                </div>
-              </div>
-            </div>
-            {/* <div className={styles.col}>
-              <h2 className={styles.title}>{`<Image width='100%' height={200} />`}</h2>
-              <div className={styles.row}>
-                <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-                  <Image src={SRC_VERTICAL} width='100%' height={200} />
-                </div>
-              </div>
-            </div> */}
-          </div>
-        </div>
-
-        {/* <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={200} ratioW={4} ratioH={3} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={200} ratioW={4} ratioH={3} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={200} ratioW={4} ratioH={3} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={200} ratioW={4} ratioH={3} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={200} ratioW={11} ratioH={5} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={200} ratioW={11} ratioH={5} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={200} ratioW={11} ratioH={5} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={200} ratioW={11} ratioH={5} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={250} height={200} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={250} height={200} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={250} height={200} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={250} height={200} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={200} height={250} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={200} height={250} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={200} height={250} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={200} height={250} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={200} height={200} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={200} height={200} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={200} height={200} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={200} height={200} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>Error</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src='http://wrong.src.url' width={100} height={100} />
-            </div>
-          </div>
-        </div>*/}
-
-      </div>
-    </div>
-  ));

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

@@ -1,18 +0,0 @@
-.title
-  text-align center
-  margin-top 20px
-  margin-bottom 10px
-  font-size 18px
-
-.row
-  display flex
-  justify-content: space-between
-  flex-wrap: nowrap
-  text-align center
-
-.col
-  margin 0 10px
-
-.label
-  font-size 12px
-  margin-top 10px

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { Resizable } from 're-resizable';
-import ImagesSet from './ImagesSet';
-import styles from './ImagesSet.story.styl';
-
-const PLACEHOLDER_IMAGE_URL = 'https://images.autode-stage.de//noimage/small';
-const IMAGE_URL = 'http://picsum.photos/400/300/?random';
-const images = [];
-for (let i = 0; i <= 7; i++) {
-  images.push({ url: `${IMAGE_URL}&tag=${Math.random()}`, description: '' });
-}
-
-const resizableProps = {
-  className: styles.resizable,
-  defaultSize: { width: 770, height: 390 }
-};
-
-const imagesSetProps = {
-  images,
-  imageSizes: [2, 1, 1, 2, 1, 1, 1, 2, 1],
-  columnsCount: 4,
-  rowsCount: 3,
-  onImageClick: action('click'),
-  placeholderUrl: PLACEHOLDER_IMAGE_URL
-};
-
-storiesOf('_Common_UI', module)
-  .add('ImagesSet', () => (
-    <Resizable {...resizableProps}>
-      <ImagesSet {...imagesSetProps} />
-    </Resizable>
-  ));

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

@@ -1,4 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.resizable
-  border: 1px solid $grey-e

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

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-
-import Loader from './Loader.tsx';
-import { CONTAINER_STYLES } from '../../../framework/constants';
-
-
-storiesOf('_Common_UI', module)
-.add('Loader', () => (
-  <div style={CONTAINER_STYLES}>
-    <Loader size='tiny' />
-    <Loader size='small' />
-    <Loader size='medium' />
-    <Loader size='large' />
-
-    <div style={{ width: 40, height: 40 }}>
-      <Loader fluid />
-    </div>
-  </div>
-));

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

@@ -1,49 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import MaterialAccordionGroup from './MaterialAccordionGroup';
-
-const MaterialAccordionGroupComponent = () => {
-  const [switchValue, setSwitchValue] = useState(false);
-  const handleSwitch = (value) => {
-    setSwitchValue(value);
-  };
-  const switchProps = {
-    value: switchValue,
-    onChange: handleSwitch
-  }
-  return (
-    <>
-      <MaterialAccordionGroup
-        title='Collaps item 1'
-        tooltipText='tooltipText'
-        withSwitch
-        switchProps={switchProps}
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
-        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
-        sit amet blandit leo lobortis eget.
-      </MaterialAccordionGroup>
-      <MaterialAccordionGroup
-        title='collaps item 1'
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
-        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
-        sit amet blandit leo lobortis eget.
-      </MaterialAccordionGroup>
-      <MaterialAccordionGroup
-        title='collaps item 1'
-        tooltipText='tooltipText 3'
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
-        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
-        sit amet blandit leo lobortis eget.
-      </MaterialAccordionGroup>
-    </>
-  )
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialAccordionGroup', () => <MaterialAccordionGroupComponent />)