@bytebrand/fe-ui-core 4.8.48 → 4.8.50

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>
+  ));

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

@@ -0,0 +1,14 @@
+.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/CheckboxMaterial/CheckboxMaterial.story.js

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

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

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

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

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

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