@bytebrand/fe-ui-core 4.8.25 → 4.8.27

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

@@ -1,41 +1,41 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import Switcher from './Switcher';
-
-import styles from './Switcher.story.styl';
-export class SwitcherGroup extends React.Component {
-  state = {
-    value: 0
-  };
-
-  action = action('change');
-  onChange = (event, value) => {
-    this.action(event, value);
-    this.setState(() => ({ value }));
-  };
-
-  onChange = (e, value, name) => {
-    this.setState({ value: value });
-  }
-
-  render() {
-    const warrantyPeriodOptions = ['1 Jahr', '2 Jahre'];
-    return (
-      <Switcher
-        options={warrantyPeriodOptions}
-        value={this.state.value}
-        onChange={this.onChange}
-        name={'warrantyPeriod'}
-      />
-    );
-  }
-}
-
-storiesOf('checkout', module)
-.add('switcherGroup', () => (
-  <div>
-    <SwitcherGroup />
-  </div>
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Switcher from './Switcher';
+
+import styles from './Switcher.story.styl';
+export class SwitcherGroup extends React.Component {
+  state = {
+    value: 0
+  };
+
+  action = action('change');
+  onChange = (event, value) => {
+    this.action(event, value);
+    this.setState(() => ({ value }));
+  };
+
+  onChange = (e, value, name) => {
+    this.setState({ value: value });
+  }
+
+  render() {
+    const warrantyPeriodOptions = ['1 Jahr', '2 Jahre'];
+    return (
+      <Switcher
+        options={warrantyPeriodOptions}
+        value={this.state.value}
+        onChange={this.onChange}
+        name={'warrantyPeriod'}
+      />
+    );
+  }
+}
+
+storiesOf('checkout', module)
+.add('switcherGroup', () => (
+  <div>
+    <SwitcherGroup />
+  </div>
+));

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

@@ -1,2 +1,2 @@
-.containerClassName
+.containerClassName
   display: flex

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

@@ -1,53 +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'
-          }
-        }
-      }
-    }
-  }
-});
+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,48 +1,48 @@
-import * as React from 'react';
-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 = {
-  name?: string;
-  value: any;
-  options: any[];
-
-  onChange?: (e: React.SyntheticEvent, value: number, key: string) => void;
-
-  borderLeftRadius?: boolean;
-  borderRightRadius?: boolean;
-};
-
-const Switcher = ({
-  name,
-  onChange,
-  options,
-  value
-}: SwitcherProps) => {
-
-  const onChangeSwitch = (event: React.SyntheticEvent) => {
-    onChange(event, +(event.target as HTMLInputElement).value, name);
-  };
-
-  return (
-    <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>
-  );
-};
-
-export default Switcher;
+import * as React from 'react';
+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 = {
+  name?: string;
+  value: any;
+  options: any[];
+
+  onChange?: (e: React.SyntheticEvent, value: number, key: string) => void;
+
+  borderLeftRadius?: boolean;
+  borderRightRadius?: boolean;
+};
+
+const Switcher = ({
+  name,
+  onChange,
+  options,
+  value
+}: SwitcherProps) => {
+
+  const onChangeSwitch = (event: React.SyntheticEvent) => {
+    onChange(event, +(event.target as HTMLInputElement).value, name);
+  };
+
+  return (
+    <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>
+  );
+};
+
+export default Switcher;

package/source/components/CompactSearchWidget/CompactSearchFields/CompactSearchFields.styl

@@ -1,176 +1,176 @@
-@import "../../../theme/theme.styl";
-@import "../../../theme/mixins.styl";
-
-.gridAreaMake
-  grid-area: make;
-
-.gridAreaModel
-  grid-area: model;
-
-.gridAreaBodyType
-  grid-area: bodyType;
-  [class*='react-select__option'][class*='focused']:not(.react-select__option--is-disabled)
-    background-color: $primary8
-  [class*='react-select__option'][class*='selected']:not(.react-select__option--is-disabled)
-    background-color: white !important
-
-.gridAreaFirstRegistration
-  grid-area: firstRegistration;
-  
-.gridAreaMileage
-  grid-area: mileage;
-  :global
-    .react-select__placeholder
-      +media-tablet-up()
-        letter-spacing: -0.5px
-
-.gridAreaPrice
-  grid-area: price;
-
-.gridAreaRadioGroup
-  grid-area: radioGroup;
-
-.gridAreaRateSearchValue
-  grid-area: rateSearchValue;
-
-.gridAreaRateLink
-  grid-area: rateLink;
-  text-align right;
-
-.costTypeSection
-  display: flex
-  justify-content: space-between
-  align-items: center
-
-.contrastMode
-  color: white !important
-
-.icon 
-  display: flex
-  justify-content: space-between
-  align-items: center
-
-.icon__svg
-  width: 50px
-  height: 2em
-  margin-right: 12px
-
-.icon__desc
-  font-size: 12px
-  color: $grey-75
-
-.compactWidgetDropdown
-  :global
-    .react-select__control
-      height: auto !important
-      min-height: 46px !important
-      border-radius: 2px !important
-    
-    .react-select__option > div
-      width: 100%;
-      height: 32px
-      padding: 0
-      display: flex
-      flex-direction: column
-      justify-content: center
-
-    .react-select__menu
-      
-      .react-select__option.react-select__option--is-focused:not(.react-select__option--is-disabled):hover
-        box-shadow: none
-        cursor: pointer
-        color: $grey-3
-        
-    .react-select__value-container
-      padding: 0 5px
-
-      .react-select__placeholder
-        color: #757575;
-
-      .react-select__single-value,
-      .react-select__placeholder
-        left: 28px
-
-.horizontalFieldHeight
-  :global
-    .react-select__control
-      min-height: 52px !important
-
-.radioGroup
-  display: flex
-  align-items: center
-
-.radioGroupChild:nth-of-type(2n)
-  margin-left: 15px
-
-.changeRateLink
-  color: rgba($primary, .8);
-  font-size: 13px
-  text-decoration: underline
-  cursor: pointer
-
-.rateSearchValue
-  height: 46px
-  line-height: 46px
-  background-color: white
-  border-color: $grey-c
-  &:hover
-    border-color: $skyBlue
-
-.modalWrapper
-  position: fixed
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  display: flex
-  justify-content: center
-  align-items: center
-  background-color: rgba(0, 0, 0, .7)
-  z-index: $zIndex-modal-backdrop
-  overflow-x: hidden
-  overflow-y: auto
-
-.body
-  overflow: hidden
-
-.rateSearchWidget
-  z-index: $zIndex-modal
-
-  &.left
-    bottom: 0
-    position: absolute
-    width: 320px
-    right: calc(100% + 11px)
-    &:before
-      display: block
-      top: 180px
-      right: -8px
-      border-top: 1px solid $grey-e
-      border-right: 1px solid $grey-e
-
-  &.right
-    bottom: 0
-    position: absolute
-    width: 320px
-    left: calc(100% + 11px)
-    &:before
-      display: block
-      top: 180px
-      left: -8px
-      border-bottom: 1px solid $grey-e
-      border-left: 1px solid $grey-e
-
-  &.modal
-    width: 100%
-    max-width: 400px
-
-// @keyframes :global(slideDown) {
-//   from {
-//     max-height: 0
-//   }
-
-//   to {
-//     max-height: auto
-//   }
-// }
+@import "../../../theme/theme.styl";
+@import "../../../theme/mixins.styl";
+
+.gridAreaMake
+  grid-area: make;
+
+.gridAreaModel
+  grid-area: model;
+
+.gridAreaBodyType
+  grid-area: bodyType;
+  [class*='react-select__option'][class*='focused']:not(.react-select__option--is-disabled)
+    background-color: $primary8
+  [class*='react-select__option'][class*='selected']:not(.react-select__option--is-disabled)
+    background-color: white !important
+
+.gridAreaFirstRegistration
+  grid-area: firstRegistration;
+  
+.gridAreaMileage
+  grid-area: mileage;
+  :global
+    .react-select__placeholder
+      +media-tablet-up()
+        letter-spacing: -0.5px
+
+.gridAreaPrice
+  grid-area: price;
+
+.gridAreaRadioGroup
+  grid-area: radioGroup;
+
+.gridAreaRateSearchValue
+  grid-area: rateSearchValue;
+
+.gridAreaRateLink
+  grid-area: rateLink;
+  text-align right;
+
+.costTypeSection
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.contrastMode
+  color: white !important
+
+.icon 
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.icon__svg
+  width: 50px
+  height: 2em
+  margin-right: 12px
+
+.icon__desc
+  font-size: 12px
+  color: $grey-75
+
+.compactWidgetDropdown
+  :global
+    .react-select__control
+      height: auto !important
+      min-height: 46px !important
+      border-radius: 2px !important
+    
+    .react-select__option > div
+      width: 100%;
+      height: 32px
+      padding: 0
+      display: flex
+      flex-direction: column
+      justify-content: center
+
+    .react-select__menu
+      
+      .react-select__option.react-select__option--is-focused:not(.react-select__option--is-disabled):hover
+        box-shadow: none
+        cursor: pointer
+        color: $grey-3
+        
+    .react-select__value-container
+      padding: 0 5px
+
+      .react-select__placeholder
+        color: #757575;
+
+      .react-select__single-value,
+      .react-select__placeholder
+        left: 28px
+
+.horizontalFieldHeight
+  :global
+    .react-select__control
+      min-height: 52px !important
+
+.radioGroup
+  display: flex
+  align-items: center
+
+.radioGroupChild:nth-of-type(2n)
+  margin-left: 15px
+
+.changeRateLink
+  color: rgba($primary, .8);
+  font-size: 13px
+  text-decoration: underline
+  cursor: pointer
+
+.rateSearchValue
+  height: 46px
+  line-height: 46px
+  background-color: white
+  border-color: $grey-c
+  &:hover
+    border-color: $skyBlue
+
+.modalWrapper
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  display: flex
+  justify-content: center
+  align-items: center
+  background-color: rgba(0, 0, 0, .7)
+  z-index: $zIndex-modal-backdrop
+  overflow-x: hidden
+  overflow-y: auto
+
+.body
+  overflow: hidden
+
+.rateSearchWidget
+  z-index: $zIndex-modal
+
+  &.left
+    bottom: 0
+    position: absolute
+    width: 320px
+    right: calc(100% + 11px)
+    &:before
+      display: block
+      top: 180px
+      right: -8px
+      border-top: 1px solid $grey-e
+      border-right: 1px solid $grey-e
+
+  &.right
+    bottom: 0
+    position: absolute
+    width: 320px
+    left: calc(100% + 11px)
+    &:before
+      display: block
+      top: 180px
+      left: -8px
+      border-bottom: 1px solid $grey-e
+      border-left: 1px solid $grey-e
+
+  &.modal
+    width: 100%
+    max-width: 400px
+
+// @keyframes :global(slideDown) {
+//   from {
+//     max-height: 0
+//   }
+
+//   to {
+//     max-height: auto
+//   }
+// }