@bytebrand/fe-ui-core 4.8.53 → 4.8.54

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

@@ -1,45 +0,0 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-// Components
-import MaterialDatePicker from './MaterialDatePicker';
-import styles from './MaterialDatePicker.story.styl';
-
-import {
-  _minDate,
-  handleMaxDate,
-} from '../../../framework/utils/DateUtils';
-
-const resizableProps = {
-  defaultSize: {
-    width: 360,
-    height: 700
-  }
-};
-
-const MaterialDatePickerWrapper = () => {
-  const [value, newValue] = useState('');
-
-  const onHandleChange = (value) => {
-    newValue(value);
-  };
-
-  return (
-    <Resizable {...resizableProps}>
-      <div className={styles.wrapper}>
-        <MaterialDatePicker
-          language='en'
-          maxDate={new Date(handleMaxDate())}
-          minDate={_minDate}
-          value={value}
-          error={true}
-          placeholder='Date of Birth DD/MM/YYYY*'
-          onChange={(value) => onHandleChange(value)}
-        />
-      </div>
-    </Resizable>
-  );
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialDatePicker', () => <MaterialDatePickerWrapper />)

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

@@ -1,6 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.wrapper
-  background-color: #fff;
-  box-sizing: border-box;
-  padding: 15px;

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

@@ -1,87 +0,0 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-import styles from './MaterialField.story.styl';
-// Components
-import MaterialField from './MaterialField';
-
-const resizableProps = {
-  defaultSize: { width: 360, height: 700 }
-};
-
-const MaterialFieldWrapper = () => {
-  const [newData, setNewData] = useState({
-    firstName: '',
-    lastName: '123123',
-    email: '',
-    countryCode: '+49',
-    areaCode: '',
-    phoneNumber: ''
-  });
-
-  const onHandleChange = (value, name) => {
-    setNewData({ ...newData, [name]: value });
-  };
-
-  return (
-    <Resizable {...resizableProps}>
-      <div className={styles.wrapper}>
-        <MaterialField
-          onChange={value => onHandleChange(value, 'firstName')}
-          label='Vorname'
-          value={newData.firstName}
-          className={styles.firstName}
-          error={newData.firstName === '' ? true : false}
-          helperText={newData.firstName === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
-          required
-        />
-        <MaterialField
-          onChange={value => onHandleChange(value, 'lastName')}
-          label='Nachname'
-          value={newData.lastName}
-          className={styles.lastName}
-          error={newData.lastName === '' ? true : false}
-          helperText={newData.lastName === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
-        />
-        <MaterialField
-          onChange={value => onHandleChange(value, 'email')}
-          label='E-Mail Adresse'
-          value={newData.email}
-          className={styles.email}
-          error={newData.email === '' ? true : false}
-          helperText={newData.email === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
-        />
-        <MaterialField
-          onChange={value => onHandleChange(value, 'countryCode')}
-          label='Land'
-          value={newData.countryCode}
-          className={styles.countryCode}
-          error={newData.countryCode === '' ? true : false}
-          helperText={newData.countryCode === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
-        />
-
-        <MaterialField
-          onChange={value => onHandleChange(value, 'areaCode')}
-          label='Vorwahl'
-          value={newData.areaCode}
-          className={styles.areaCode}
-          classNameInputLabel={styles.areaCodeInputLabel}
-          error={newData.areaCode === '' ? true : false}
-          helperText={newData.areaCode === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
-        />
-
-        <MaterialField
-          onChange={value => onHandleChange(value, 'phoneNumber')}
-          label='Telefonnummer'
-          value={newData.phoneNumber}
-          className={styles.phoneNumber}
-          error={newData.phoneNumber === '' ? true : false}
-          helperText={newData.phoneNumber === '' ? '* Bitte geben Sie eine gültige Straße an' : ''}
-        />
-      </div>
-    </Resizable>
-  );
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialField', () => <MaterialFieldWrapper />)

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

@@ -1,34 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.wrapper
-  background-color: #fff;
-  box-sizing: border-box;
-  padding: 16px
-  display: grid;
-  grid-gap: 24px 16px
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-areas:
-    'firstName firstName lastName lastName'\
-    'email email email email'\
-    'countryCode areaCode phoneNumber phoneNumber'
-
-.firstName
-  grid-area: firstName;
-
-.lastName
-  grid-area: lastName;
-
-.email
-  grid-area: email;
-
-.countryCode
-  grid-area: countryCode;
-
-.areaCode
-  grid-area: areaCode;
-
-.phoneNumber
-  grid-area: phoneNumber;
-
-.areaCodeInputLabel
-  font-size: 13px !important;

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

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-import { MenuItem } from '@mui/material';
-// Components
-import MaterialSelect from './MaterialSelect';
-import styles from './MaterialSelect.story.styl';
-
-const resizableProps = {
-  defaultSize: { width: 360, height: 700 }
-};
-
-// const inputFields = [{
-//   'Vorname',
-//   'Nachname'
-// }]
-
-const MaterialFieldWrapper = () => {
-  const [newData, setNewData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    countryCode: '+49',
-    areaCode: '',
-    phoneNumber: ''
-  });
-
-  const onHandleChange = (event, type) => {
-    setNewData({ ...newData, [type]: event.target.value });
-  };
-
-  return (
-    <Resizable {...resizableProps}>
-      <div className={styles.wrapper}>
-        <MaterialSelect
-          onHandleChange={e => onHandleChange(e, 'firstName')}
-          label='age'
-          value={newData.firstName}
-          error={true}
-          helperText={`We'll never share your email.`}
-        >
-          <MenuItem value={1}>Ten</MenuItem>
-          <MenuItem value={2}>Twenty</MenuItem>
-          <MenuItem value={3}>Thirty</MenuItem>
-        </MaterialSelect>
-      </div>
-    </Resizable>
-  );
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialSelect', () => <MaterialFieldWrapper />)

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

@@ -1,6 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.wrapper
-  background-color: #fff;
-  box-sizing: border-box;
-  padding: 16px

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

@@ -1,47 +0,0 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-// Components
-import MaterialStepButton from './MaterialStepButton';
-import styles from './MaterialStepButton.story.styl';
-
-import {
-  _minDate,
-  handleMaxDate,
-  checkingWhenLess18Age,
-  createDateAsUTC
-} from '../../../framework/utils/DateUtils';
-
-const resizableProps = {
-  defaultSize: {
-    width: 360,
-    height: 700
-  }
-};
-
-const MaterialStepButtonWrapper = () => {
-  const [value, newValue] = useState('');
-
-  const onHandleChange = (value) => {
-    newValue(value);
-  };
-
-  return (
-    <Resizable {...resizableProps}>
-      <div className={styles.wrapper}>
-        <MaterialStepButton
-          language='en'
-          maxDate={new Date(handleMaxDate())}
-          minDate={_minDate}
-          value={value}
-          error={true}
-          placeholder='Date of Birth DD/MM/YYYY*'
-          onChange={(value) => onHandleChange(createDateAsUTC(value))}
-        />
-      </div>
-    </Resizable>
-  );
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialStepButton', () => <MaterialStepButtonWrapper />)

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

@@ -1,6 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.wrapper
-  background-color: #fff;
-  box-sizing: border-box;
-  padding: 15px;

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

@@ -1,17 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import MaterialSwitch from './MaterialSwitch';
-
-const Switch = () => {
-  const [value, setValue] = useState(false);
-
-  const onChange = (checked) => {
-    setValue(checked);
-  };
-
-  return <MaterialSwitch value={value} onChange={onChange} label='switcher' />
-}
-
-
-storiesOf('_Common_UI', module)
-  .add('MaterialSwitch', () => <Switch />)

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

@@ -1,10 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import MaterialTooltip from './MaterialTooltip';
-
-const Tooltip = () => {
-  return <MaterialTooltip text='info text' icon='infoIcon' />
-}
-
-storiesOf('_Common_UI', module)
-  .add('MaterialTooltip', () => <Tooltip />)

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

@@ -1,37 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import useModal from '../../../framework/hooks/useModal';
-
-import Modal from './Modal';
-
-const ModalComponent = () => {
-  const { isVisible, toggleModal } = useModal();
-  const [modal, setModal] = useState('');
-
-  const onClearModalState = () => {
-    setModal('');
-  };
-
-  const onOpenCookieModal = () => {
-    setModal('PREVIEW_COOKIE_MODAL');
-    toggleModal();
-  };
-
-  const modalProps = {
-    onClearModalState,
-    setModal
-  }
-
-  return (
-    <>
-      <button onClick={onOpenCookieModal}>
-        open modal
-      </button>
-      <Modal isVisible={isVisible} toggleModal={toggleModal} name={modal} modalProps={modalProps} />
-    </>
-  )
-}
-
-
-storiesOf('_Common_UI', module)
-  .add('Modal', () => <ModalComponent />)

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-// Components
-import MuiGroupedSelect from './MuiGroupedSelect';
-
-const resizableProps = {
-  defaultSize: { width: 360, height: 700 }
-};
-
-const MuiFieldWrapper = () => {
-
-  return (
-    <Resizable {...resizableProps}>
-      <MuiGroupedSelect />
-    </Resizable>
-  );
-}
-
-storiesOf('_Common_UI', module)
-  .add('MuiGroupedSelect', () => <MuiFieldWrapper />)

package/source/components/_common/PropertySelector/PSGroup.story.js

@@ -1,93 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import PropertySelector from './PropertySelector';
-import PSGroup from './PSGroup';
-
-import styles from './PSGroup.story.styl';
-
-export class PSGroupDefault extends React.Component {
-  state = {
-    value: ['always']
-  };
-  action = action('change');
-
-  onChange = (event, value) => {
-    // value here have to be single string|number or array
-    this.action(event, value);
-    this.setState(() => ({ value }));
-  };
-
-  render() {
-    return (
-      <PSGroup name='availability' behavior='checkbox' value={this.state.value} containerClassName={styles.default} onChange={this.onChange}>
-        <PropertySelector value='1' content='cbd_selector_exterior_color_brown' label='Brown' type='color' />
-        <PropertySelector value='2' content='cbd_selector_exterior_color_blue' label='Blue' type='color' />
-        <PropertySelector value='3' content='cbd_selector_exterior_color_green' label='Green' type='color' disabled={true}  />
-      </PSGroup>
-    );
-  }
-}
-
-export class PSGroupHorizontal 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 (
-      <PSGroup name='sub_model' behavior='radio' containerClassName={styles.horizontal} childClassName={styles.horizontalChild} value={this.state.value} onChange={this.onChange}>
-        <PropertySelector label={this.renderSubModel(0)} value='M_Sport' />
-        <PropertySelector label={this.renderSubModel(1)} value='M_Sport_Coupe' />
-        <PropertySelector label={this.renderSubModel(2)} value='M_Sport_Diesel' />
-      </PSGroup>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-.add('PSGroup', () => (
-  <div>
-    <p className={styles.text}>Checkbox behavior</p>
-    <PSGroupDefault />
-    <p className={styles.text}>Radio button behavior</p>
-    <PSGroupHorizontal />
-  </div>
-));

package/source/components/_common/PropertySelector/PSGroup.story.styl

@@ -1,25 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.default
-  composes: default
-  display: flex
-  flex-direction: column
-
-.horizontal
-  border: 1px solid lightgray
-  padding: 10px
-  border-radius: 5px
-  margin-bottom: 20px
-  display: flex
-  flex-direction: row
-  align-items: center
-  justify-content: space-between
-
-.horizontalChild
-  margin-bottom: 0 !important
-  margin-right: 10px
-
-.text
-  font-family: $font-style-arial
-  font-size: $font-size-h3
-  font-weight: $font-weight-medium

package/source/components/_common/PropertySelector/ProperySelector.story.js

@@ -1,83 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import PropertySelector from './PropertySelector';
-import { CONTAINER_STYLES, ROW_STYLES, COLUMN_STYLES } from '../../../framework/constants';
-import { EXTERIOR_COLORS } from '../../../framework/constants/selectors';
-
-const renderColors = () => EXTERIOR_COLORS.map((color, index) => {
-  const props = {
-    type: 'color',
-    checked: index === 2 || index === 3,
-    name: color,
-    value: color,
-
-    content: color,
-    label: <span>wow so label. <b>much content</b></span>,
-
-    tooltip: 'some text here',
-    onChange: action('change')
-  };
-
-  return index < 5 ? (
-    <div key={index} style={ROW_STYLES}>
-      <PropertySelector {...props} />
-    </div>
-  ) : false;
-});
-
-const renderIcons = () => {
-  const props = {
-    type: 'icon',
-    name: 'icon',
-    checked: true,
-    label: <span>wow so label. <b>much content</b></span>,
-
-    content: <span></span>,
-    onChange: action('change')
-  };
-
-  return (
-    <div style={ROW_STYLES}>
-      <PropertySelector {...props} />
-    </div>
-  );
-};
-
-const renderText = () => [...Array(5)].map((item, index) => {
-  const props = {
-    type: 'text',
-    checked: index === 1,
-    name: index,
-
-    content: index === 0 ? 'All' : index,
-    label: <span>wow so label. <b>much content</b></span>,
-
-    tooltip: 'some text here',
-    onChange: action('change')
-  };
-
-  return (
-    <div key={index} style={ROW_STYLES}>
-      <PropertySelector {...props} />
-    </div>
-  );
-});
-
-
-storiesOf('_Common_UI', module)
-  .add('PropertySelector', () => (
-    <div style={CONTAINER_STYLES}>
-      <div style={COLUMN_STYLES}>
-        {renderColors()}
-      </div>
-      <div style={COLUMN_STYLES}>
-        {renderIcons()}
-      </div>
-      <div style={COLUMN_STYLES}>
-        {renderText()}
-      </div>
-    </div>
-  ));

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import Radio from './Radio';
-import FormRadioGroup from './FormRadioGroup';
-import styles from './FormRadioGroup.story.styl';
-
-const mockField = {
-  name: 'availability',
-  value: 'always',
-  error: 'Something went wrong',
-  hasError: true,
-  onChange: action('FormRadioGroup change'),
-  bind: () => {
-    const { bind, ...rest } = mockField;
-    return rest;
-  }
-};
-
-storiesOf('_Common_UI', module)
-.add('FormRadioGroup', () => (
-  <FormRadioGroup field={mockField} childClassName={styles.child}>
-    <Radio label='Available always' value='always'/>
-    <Radio label='Available from' value='fromDate'/>
-    <Radio label='Unknown' value='unknown' disabled={true}/>
-  </FormRadioGroup>
-));

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

@@ -1,2 +0,0 @@
-.child
-  margin-right: 20px

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { ROW_STYLES, COLUMN_STYLES } from '../../../framework/constants';
-import Radio from './Radio';
-import RadioGroup from './RadioGroup';
-//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',
-//};
-
-
-// Props related to the Checkbox stories
-const baseProps = {
-  name: 'bitch',
-  checked: false,
-  value: 'some bitchy value',
-  label: <span>wow, so label!</span>,
-
-  onChange: action('checkbox change'),
-  onFocus: action('checkbox focus'),
-  onBlur: action('checkbox blur')
-};
-
-storiesOf('_Common_UI', module)
-.add('Radio', () => (
-  <div>
-    <div style={ROW_STYLES}>
-      <div style={COLUMN_STYLES}>
-        <Radio {...baseProps} checked={true} />
-      </div>
-      <div style={COLUMN_STYLES}>
-        <Radio {...baseProps} disabled={true} />
-      </div>
-      <div style={COLUMN_STYLES}>
-        <Radio {...baseProps} error={true} />
-      </div>
-      <div style={COLUMN_STYLES}>
-        <Radio {...baseProps} checked={true} disabled={true} />
-      </div>
-    </div>
-  </div>
-));