@bytebrand/fe-ui-core 4.8.111 → 4.8.112

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

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

package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.styled.tsx

@@ -1,4 +1,7 @@
-import { styled, createTheme } from '@mui/material/styles';
+import { styled as muiStyled, createTheme } from '@mui/material/styles';
+
+// Cast to any to bypass MUI 5.9 styled() overload mismatch with strict TS in consumers (fe-landing).
+const styled: any = muiStyled;
 
 export const AccordionSummaryContent = styled('div')({
   display: 'flex',

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+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/MaterialTooltip/MaterialTooltip.tsx

@@ -7,12 +7,13 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { debounce } from 'lodash';
 
 interface IMaterialTooltip {
-  text: string;
+  text: React.ReactNode;
   icon?: string;
   className?: string;
   placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
   disabled?: Boolean;
   zindex?: number;
+  disablePortal?: boolean;
 }
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
@@ -32,7 +33,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   }
 }));
 
-const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMaterialTooltip) => {
+const MaterialTooltip = ({ text, placement, className, disabled, zindex, disablePortal = true }: IMaterialTooltip) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const onHandleMenuOpen = (event: any) => {
@@ -71,7 +72,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
             className={className}
             zindex={zindex}
             PopperProps={{
-              disablePortal: true
+              disablePortal
             }}
           >
             <IconButton>

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

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

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

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

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

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