@bytebrand/fe-ui-core 4.8.25 → 4.8.27

package/source/components/_common/BodyTypeIcons/index.ts

@@ -1,17 +1,17 @@
-export { default as SearchIcon } from './Search';
-export { default as SelectorCategoryCombi } from './SelectorCategoryCombi';
-export { default as SelectorCategoryCompact } from './SelectorCategoryCompact';
-export { default as SelectorCategoryConvertible } from './SelectorCategoryConvertible';
-export { default as SelectorCategoryCoupe } from './SelectorCategoryCoupe';
-export { default as SelectorCategoryMinibus } from './SelectorCategoryMinibus';
-export { default as SelectorCategorySedan } from './SelectorCategorySedan';
-export { default as SelectorCategorySuv } from './SelectorCategorySuv';
-export { default as SelectorCategoryTransporter } from './SelectorCategoryTransporter';
-export { default as SelectorCategoryVan } from './SelectorCategoryVan';
-export { default as Bmw } from './Bmw';
-export { default as Audi } from './Audi';
-export { default as Ford } from './Ford';
-export { default as Mazda } from './Mazda';
-export { default as MercedesBenz } from './MercedesBenz';
-export { default as Opel } from './Opel';
-export { default as Volkswagen } from './Volkswagen';
+export { default as SearchIcon } from './Search';
+export { default as SelectorCategoryCombi } from './SelectorCategoryCombi';
+export { default as SelectorCategoryCompact } from './SelectorCategoryCompact';
+export { default as SelectorCategoryConvertible } from './SelectorCategoryConvertible';
+export { default as SelectorCategoryCoupe } from './SelectorCategoryCoupe';
+export { default as SelectorCategoryMinibus } from './SelectorCategoryMinibus';
+export { default as SelectorCategorySedan } from './SelectorCategorySedan';
+export { default as SelectorCategorySuv } from './SelectorCategorySuv';
+export { default as SelectorCategoryTransporter } from './SelectorCategoryTransporter';
+export { default as SelectorCategoryVan } from './SelectorCategoryVan';
+export { default as Bmw } from './Bmw';
+export { default as Audi } from './Audi';
+export { default as Ford } from './Ford';
+export { default as Mazda } from './Mazda';
+export { default as MercedesBenz } from './MercedesBenz';
+export { default as Opel } from './Opel';
+export { default as Volkswagen } from './Volkswagen';

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

@@ -1,52 +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>
-));
+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/Bubble/Bubble.styl

@@ -1,53 +1,53 @@
-@import '../../../theme/mixins.styl'
-
-.bubble
-  box-sizing: border-box
-  display: inline-flex
-  justify-content: center
-  align-content: center
-  flex-wrap: wrap
-  font-family: $font-style-arial
-  border-radius: 100px
-  color: white
-  padding: 20px
-
-.large
-  width: 150px
-  height: 150px
-
-  +media-tablet-landscape-down()
-    width: 100px
-    height: 100px
-
-.medium
-  width: 100px
-  height: 100px
-
-  +media-tablet-landscape-down()
-    width: 75px
-    height: 75px
-
-.small
-  width: 50px
-  height: 50px
-
-  +media-tablet-landscape-down()
-    width: 35px
-    height: 35px
-
-.tiny
-  width: 20px
-  height: 20px
-
-  +media-tablet-landscape-down()
-    width: 15px
-    height: 15px
-
-.green
-  background-color: $lightGreen
-
-.orange
-  background-color: $darkOrange
-
-.yellow
-  background-color: $yellow-ff
+@import '../../../theme/mixins.styl'
+
+.bubble
+  box-sizing: border-box
+  display: inline-flex
+  justify-content: center
+  align-content: center
+  flex-wrap: wrap
+  font-family: $font-style-arial
+  border-radius: 100px
+  color: white
+  padding: 20px
+
+.large
+  width: 150px
+  height: 150px
+
+  +media-tablet-landscape-down()
+    width: 100px
+    height: 100px
+
+.medium
+  width: 100px
+  height: 100px
+
+  +media-tablet-landscape-down()
+    width: 75px
+    height: 75px
+
+.small
+  width: 50px
+  height: 50px
+
+  +media-tablet-landscape-down()
+    width: 35px
+    height: 35px
+
+.tiny
+  width: 20px
+  height: 20px
+
+  +media-tablet-landscape-down()
+    width: 15px
+    height: 15px
+
+.green
+  background-color: $lightGreen
+
+.orange
+  background-color: $darkOrange
+
+.yellow
+  background-color: $yellow-ff

package/source/components/_common/Bubble/Bubble.tsx

@@ -1,37 +1,37 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-import styles from './Bubble.styl';
-
-export interface IBubbleProps {
-  customColor?: string;
-  className?: string;
-  size?: 'large' | 'medium' | 'small' | 'tiny';
-  type?: 'orange' | 'green' | 'yellow';
-  children?: React.ReactNode;
-}
-
-class Bubble extends React.Component<IBubbleProps> {
-  static readonly defaultProps = {
-    size: 'medium',
-    type: 'orange'
-  };
-
-  render() {
-    const { customColor, className, size, type, children } = this.props;
-
-    const bubbleClassName: string = classNames(styles.bubble, styles[size], styles[type], className);
-
-    const bubbleStyle: object = !!customColor ? {
-      backgroundColor: customColor
-    } : null;
-
-    return (
-      <section className={bubbleClassName} style={bubbleStyle}>
-        {children}
-      </section>
-    );
-  }
-}
-
-export default Bubble;
+import * as React from 'react';
+import classNames from 'classnames';
+
+import styles from './Bubble.styl';
+
+export interface IBubbleProps {
+  customColor?: string;
+  className?: string;
+  size?: 'large' | 'medium' | 'small' | 'tiny';
+  type?: 'orange' | 'green' | 'yellow';
+  children?: React.ReactNode;
+}
+
+class Bubble extends React.Component<IBubbleProps> {
+  static readonly defaultProps = {
+    size: 'medium',
+    type: 'orange'
+  };
+
+  render() {
+    const { customColor, className, size, type, children } = this.props;
+
+    const bubbleClassName: string = classNames(styles.bubble, styles[size], styles[type], className);
+
+    const bubbleStyle: object = !!customColor ? {
+      backgroundColor: customColor
+    } : null;
+
+    return (
+      <section className={bubbleClassName} style={bubbleStyle}>
+        {children}
+      </section>
+    );
+  }
+}
+
+export default Bubble;

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

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

@@ -1,5 +1,5 @@
-.button
-  width: 280px
-  height: 50px
-  background-color: #BADA55
-  text-transform: uppercase
+.button
+  width: 280px
+  height: 50px
+  background-color: #BADA55
+  text-transform: uppercase

package/source/components/_common/Button/Button.styl

@@ -1,12 +1,12 @@
-@import '../../../theme/theme.styl';
-
-.loader
-  position: absolute
-  left: 50%
-  top: 50%
-
-  // because of size of the 'small' loader
-  // we need to setup such negative margins
-  margin-left: -12.5px
-  margin-top: -12.5px
-
+@import '../../../theme/theme.styl';
+
+.loader
+  position: absolute
+  left: 50%
+  top: 50%
+
+  // because of size of the 'small' loader
+  // we need to setup such negative margins
+  margin-left: -12.5px
+  margin-top: -12.5px
+

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

@@ -1,51 +1,51 @@
-export const useStyles = {
-  position: 'relative',
-  display: 'inline-block',
-  margin: 0,
-  minHeight: 28,
-  minWidth: 140,
-  lineHeight: '26px',
-  fontSize: 14,
-  padding: '0 10px',
-  cursor: 'pointer',
-  boxSizing: 'border-box',
-  transition: 'all 0.2s ease-in-out',
-  textDecoration: 'none',
-  textTransform: 'none',
-  borderRadius: 4,
-  outline: 'none',
-  userSelect: 'none',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  '&.MuiButton-containedPrimary:not(.Mui-disabled)': {
-    backgroundColor: '#005ccb',
-    borderRadius: '4px !important'
-  },
-  '&.MuiButton-containedSecondary:not(.Mui-disabled)': {
-    backgroundColor: 'red'
-  },
-  '&.MuiButton-outlinedPrimary:not(.Mui-disabled)': {
-    border: '1px solid #666CFF80',
-    background: 'transparent',
-    color: '#005ccb'
-  },
-  '&.MuiButton-textPrimary:not(.Mui-disabled)': {
-    background: 'transparent',
-    color: '#005ccb'
-  },
-  '&.MuiButton-textError:not(.Mui-disabled)': {
-    color: '#E60000'
-  },
-  '&.MuiButton-outlinedError:not(.Mui-disabled)': {
-    color: '#E60000',
-    borderColor: '#FF4D4980'
-  },
-  ['&.MuiButton-outlinedError:not(.Mui-disabled):hover, &.MuiButton-textError:not(.Mui-disabled):hover']: {
-    backgroundColor: 'rgba(255, 77, 73, 0.05)'
-  },
-  '&.Mui-disabled.MuiButton-containedPrimary': {
-    backgroundColor: 'transparent',
-    border: '1px solid #4C4E641F'
-  }
-};
+export const useStyles = {
+  position: 'relative',
+  display: 'inline-block',
+  margin: 0,
+  minHeight: 28,
+  minWidth: 140,
+  lineHeight: '26px',
+  fontSize: 14,
+  padding: '0 10px',
+  cursor: 'pointer',
+  boxSizing: 'border-box',
+  transition: 'all 0.2s ease-in-out',
+  textDecoration: 'none',
+  textTransform: 'none',
+  borderRadius: 4,
+  outline: 'none',
+  userSelect: 'none',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  '&.MuiButton-containedPrimary:not(.Mui-disabled)': {
+    backgroundColor: '#005ccb',
+    borderRadius: '4px !important'
+  },
+  '&.MuiButton-containedSecondary:not(.Mui-disabled)': {
+    backgroundColor: 'red'
+  },
+  '&.MuiButton-outlinedPrimary:not(.Mui-disabled)': {
+    border: '1px solid #666CFF80',
+    background: 'transparent',
+    color: '#005ccb'
+  },
+  '&.MuiButton-textPrimary:not(.Mui-disabled)': {
+    background: 'transparent',
+    color: '#005ccb'
+  },
+  '&.MuiButton-textError:not(.Mui-disabled)': {
+    color: '#E60000'
+  },
+  '&.MuiButton-outlinedError:not(.Mui-disabled)': {
+    color: '#E60000',
+    borderColor: '#FF4D4980'
+  },
+  ['&.MuiButton-outlinedError:not(.Mui-disabled):hover, &.MuiButton-textError:not(.Mui-disabled):hover']: {
+    backgroundColor: 'rgba(255, 77, 73, 0.05)'
+  },
+  '&.Mui-disabled.MuiButton-containedPrimary': {
+    backgroundColor: 'transparent',
+    border: '1px solid #4C4E641F'
+  }
+};