@bytebrand/fe-ui-core 4.1.218 → 4.1.220

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.218",
+  "version": "4.1.220",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/Checkout/Switcher/Switcher.story.js

@@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import Switcher from './Switcher';
-import RadioGroup from '../../_common/Radio/RadioGroup';
 
 import styles from './Switcher.story.styl';
 export class SwitcherGroup extends React.Component {
@@ -17,28 +16,19 @@ export class SwitcherGroup extends React.Component {
     this.setState(() => ({ value }));
   };
 
-  renderCheckout = (index) => {
-    const financing = ['1 Jahr', '2 Jahre'];
-
-    return (
-      <div className={styles.equipment}>
-        <div className={styles.column}>
-          <span className={styles.titleCheckout}>
-            {financing[index]}
-          </span>
-        </div>
-      </div>
-    );
-  };
+  onChange = (e, value, name) => {
+    this.setState({ value: value });
+  }
 
   render() {
+    const warrantyPeriodOptions = ['1 Jahr', '2 Jahre'];
     return (
-      <>
-      <RadioGroup name='months' containerClassName={styles.containerClassName} childClassName={styles.verticalChild} value={this.state.value} onChange={this.onChange}>
-          <Switcher  label={this.renderCheckout(0)}  value={0} borderLeftRadius={true}/>
-          <Switcher  label={this.renderCheckout(1)}  value={1} borderRightRadius={true}/>
-      </RadioGroup>
-      </>
+      <Switcher
+        options={warrantyPeriodOptions}
+        value={this.state.value}
+        onChange={this.onChange}
+        name={'warrantyPeriod'}
+      />
     );
   }
 }

package/source/components/Checkout/Switcher/Switcher.styled.tsx

@@ -0,0 +1,53 @@
+import { createTheme } from '@mui/material/styles';
+
+export const theme = createTheme({
+  components: {
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr'
+        }
+      }
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          fontSize: 12,
+          padding: 0,
+          color: 'rgba(0,0,0,0.6)',
+          background: '#fff',
+          minHeight: 40,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxSizing: 'border-box',
+          minWidth: 50,
+          border: '2px solid rgba(0,0,0,0.3)',
+          textTransform: 'none',
+          '&:hover': {
+            color: '#333333',
+            background: '#fff'
+          },
+          '&.Mui-selected': {
+            backgroundColor: '#005ccb',
+            color: '#fff',
+            border: 'none'
+          },
+          '&.Mui-selected:hover': {
+            backgroundColor: '#005ccb',
+            color: '#fff'
+          },
+          '&.MuiToggleButtonGroup-grouped:first-of-type': {
+            borderTopLeftRadius: '6px',
+            borderBottomLeftRadius: '6px'
+          },
+          '&.MuiToggleButtonGroup-grouped:last-of-type': {
+            borderTopRightRadius: '6px',
+            borderBottomRightRadius: '6px'
+          }
+        }
+      }
+    }
+  }
+});

package/source/components/Checkout/Switcher/Switcher.tsx

@@ -1,103 +1,47 @@
 import * as React from 'react';
-import styles from './Switcher.styl';
-import classnames from 'classnames';
+import _get from 'lodash/get';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { ThemeProvider } from '@mui/material/styles';
+import { theme } from './Switcher.styled';
 
 type SwitcherProps = {
-  // Native radio button props
   name?: string;
   value: any;
-  checked?: boolean;
+  options: any[];
 
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
-  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
-  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  onChange?: (e: React.SyntheticEvent, value: number, key: string) => void;
 
-  // Custom radio button props
-  labelClassName?: string;
-  error?: boolean;
-  label?: JSX.Element | string | null;
-  disabled?: boolean;
   borderLeftRadius?: boolean;
   borderRightRadius?: boolean;
 };
 
 const Switcher = ({
   name,
-  value,
-  checked,
-  labelClassName,
-  error,
-  label,
-  disabled,
-  borderLeftRadius,
-  borderRightRadius,
   onChange,
-  onBlur,
-  onFocus
+  options,
+  value
 }: SwitcherProps) => {
-  let input: HTMLInputElement = null;
-  const setInputRef = (ref: HTMLInputElement) => {
-    input = ref;
-  };
-  const onChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
-
-    if (disabled) {
-      return false;
-    }
-
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-
-    onChange(event, checked, value);
-  };
-  const onKeyPress = (event: any) => {
-    const checked = input.checked;
-    const value = input.value;
 
-    if (disabled) {
-      return false;
-    }
-
-    onChange(event, checked, value);
+  const onChangeSwitch = (event: React.SyntheticEvent) => {
+    onChange(event, +event.target.value, name);
   };
-  const containerClasses = classnames(
-    styles.container,
-    { [styles.disabled]: disabled },
-    { [styles.checked]: checked },
-    { [styles.error]: error },
-    { [styles.borderLeft]: borderLeftRadius },
-    { [styles.borderRight]: borderRightRadius }
-
-  );
-
-  const labelClasses = classnames(
-    styles.label,
-    labelClassName,
-    { [styles.checkedCheckout]: checked }
-  );
 
   return (
-    <div className={containerClasses} tabIndex={1} onFocus={onFocus} onBlur={onBlur} onKeyPress={onKeyPress}>
-      <label className={labelClasses}>
-        {/* Visual representation of the radio button */}
-        <div className={styles.radioLabelWrapper}>
-          <span className={styles.labelContent}>{label}</span>
-          {/* Hidden radio input for SEO and HTML semantics */}
-          <input
-            className={styles.input}
-            type='radio'
-            name={name}
-            checked={checked}
-            value={value}
-            disabled={disabled}
-            tabIndex={-1}
-            onChange={onChangeRadio}
-            ref={setInputRef}
-          />
-        </div>
-      </label>
-    </div>
+    <ThemeProvider theme={theme}>
+      <ToggleButtonGroup
+        color='primary'
+        value={value}
+        exclusive
+        onChange={onChangeSwitch}
+      >
+        {options && options.map((option, index) => {
+          return (
+            <ToggleButton key={option} value={index + 1}>{option}</ToggleButton>
+          );
+        })}
+      </ToggleButtonGroup>
+    </ThemeProvider>
   );
 };
 

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

@@ -1,7 +1,7 @@
 import { styled } from '@mui/system';
 import IconSVG from '../IconSVG/IconSVG';
 
-export const IconSvgWrapper = styled(IconSVG)((props) => ({
+export const IconSvgWrapper = styled(IconSVG)(props => ({
   fill: props.disabled ? '#4C4E6442' : '#4C4E648A',
   width: '12px',
   height: '12px'

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -44,7 +44,7 @@ const MaterialTooltip = ({ text, placement, className, disabled }: IMaterialTool
       title={text}
       className={className}
     >
-      <IconButton onTouchEnd={(e) => onHandleClick(e)}>
+      <IconButton onTouchEnd={e => onHandleClick(e)}>
         <IconSvgWrapper name={'infoIcon'} customDimensions disabled={disabled} />
       </IconButton>
     </LightTooltip>

package/source/components/Checkout/Switcher/Switcher.styl

@@ -1,93 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.container
-  border: 2px solid rgba(0, 0, 0, 0.3)
-  padding: 2px
-  color: $grey-3
-  background: $white
-  max-height: 40px
-  display: flex
-  align-items: center
-  justify-content: center
-  box-sizing: border-box
-  min-width: 50px
-
-.container.checked
-  border: 2px solid $skyBlue
-  box-sizing: border-box
-  outline: none
-  background: $skyBlue
-  .labelContent
-    color: $white
-
-.borderLeft
-  border-top-left-radius: 6px
-  border-bottom-left-radius: 6px
-
-.borderRight
-  border-top-right-radius: 6px
-  border-bottom-right-radius: 6px
-
-
-
-.labelContent
-  color: $black60
-  font-size: $font-size-default
-  line-height: 28px
-  flex: 1 
-
-.container.disabled
-  border: 2px solid rgba(0, 0, 0, 0.06)
-  color: $secondary15
-
-  .labelContent
-    color: $secondary15
-
-  .infoContent
-    color: $secondary15
-
-  .radio, .label
-    cursor: not-allowed
-
-  .payTypeIcon
-    color: $secondary15
-
-    circle
-      stroke: $secondary15
-    path
-      fill: $secondary15
-  .radio
-    border-color: $primary40
-  .label
-    color: $secondary15
-
-.label
-  position: relative
-  font-family: $font-style-arial
-  font-weight: $font-weight-medium
-  font-style: normal
-  font-size: $font-size-h6
-  cursor: pointer
-  padding: 0 !important
-
-
-/* styles for the hidden input */
-.input
-  position: absolute
-  left: 0
-  right: 0
-  display: inline-block
-  width: 0
-  height: 0
-  visibility: hidden
-  opacity: 0
-  margin: 0
-  padding: 0
-
-
-.radioLabelWrapper
-  display: flex
-  justify-content: space-between
-  align-items: center
-
-