@bytebrand/fe-ui-core 4.8.26 → 4.8.27

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

@@ -1,56 +1,56 @@
-import React, { useState } from 'react';
-import { Resizable } from 're-resizable';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import TabsComponent from './Tabs.tsx';
-
-
-const wrapperProps = {
-  border: '1px solid rgba(0,0,0,0.1)',
-  borderRadius: '2px',
-  backgroundColor: '#fff'
-};
-
-const resizableProps = {
-  defaultSize: { width: 'auto', height: 'auto' }
-};
-
-const TabsStory = () => {
-  const [priceTabActiveIndex, setNewIndex] = useState(0);
-
-  const onTabPriceSelect = (event, priceTabActiveIndex) => {
-    setNewIndex(priceTabActiveIndex);
-  };
-
-  const tabsProps = {
-    priceTabActiveIndex,
-    onTabPriceSelect,
-    tabsTitles: [{
-      title: 'financing',
-      children: <span>financing</span>
-    }, {
-      title: 'leasing',
-      children: <span>leasing</span>
-    }, {
-      title: 'buy',
-      children: <span>buy</span>
-    }, {
-      title: 'abo',
-      isDisable: true,
-      children: <span>abo</span>
-    }],
-  };
-
-  return (
-    <>
-    <p>Tabs on CDP</p>
-    <div style={wrapperProps}>
-      <Resizable {...resizableProps}>
-        <TabsComponent {...tabsProps} />
-      </Resizable>
-    </div>
-    </>
-  );
-};
-
+import React, { useState } from 'react';
+import { Resizable } from 're-resizable';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import TabsComponent from './Tabs.tsx';
+
+
+const wrapperProps = {
+  border: '1px solid rgba(0,0,0,0.1)',
+  borderRadius: '2px',
+  backgroundColor: '#fff'
+};
+
+const resizableProps = {
+  defaultSize: { width: 'auto', height: 'auto' }
+};
+
+const TabsStory = () => {
+  const [priceTabActiveIndex, setNewIndex] = useState(0);
+
+  const onTabPriceSelect = (event, priceTabActiveIndex) => {
+    setNewIndex(priceTabActiveIndex);
+  };
+
+  const tabsProps = {
+    priceTabActiveIndex,
+    onTabPriceSelect,
+    tabsTitles: [{
+      title: 'financing',
+      children: <span>financing</span>
+    }, {
+      title: 'leasing',
+      children: <span>leasing</span>
+    }, {
+      title: 'buy',
+      children: <span>buy</span>
+    }, {
+      title: 'abo',
+      isDisable: true,
+      children: <span>abo</span>
+    }],
+  };
+
+  return (
+    <>
+    <p>Tabs on CDP</p>
+    <div style={wrapperProps}>
+      <Resizable {...resizableProps}>
+        <TabsComponent {...tabsProps} />
+      </Resizable>
+    </div>
+    </>
+  );
+};
+
 storiesOf('_Common_UI', module).add('Tabs', () => <TabsStory />);

package/source/components/_common/Tabs/Tabs.styl

@@ -1,41 +1,41 @@
-.tabs
-  width: 100%
-  border-bottom: 1px solid #f5f5f5
-  min-height: auto !important
-
-  [class*='MuiTabs-flexContainer']
-    justify-content: space-between
-
-  [class*='MuiTabs-indicator']
-    border-radius: 3px 3px 0px 0px
-    background-color: #005CCB !important
-    height: 3px
-
-  [class*='MuiButtonBase-root']
-    font-size: 11px
-    color: rgba(0,0,0,0.87)
-    font-weight: bold
-
-  [class*='Mui-selected']
-    color: #005CCB !important
-
-.tabTitle[class*='MuiButtonBase-root']
-  position: relative
-  padding: 10px
-  text-align: center
-  min-width: auto
-  color: rgba(0,0,0,0.87)
-  font-size: 11px !important
-  opacity: 1
-  font-weight: bold
-
-.tabDisable[class*='MuiButtonBase-root']
-  color: #e9e9e9 !important
-  pointer-events: none !important
-
-.tabContent
-  position: relative
-  min-height: 146px
-  &:not([hidden])
-    display: flex
+.tabs
+  width: 100%
+  border-bottom: 1px solid #f5f5f5
+  min-height: auto !important
+
+  [class*='MuiTabs-flexContainer']
+    justify-content: space-between
+
+  [class*='MuiTabs-indicator']
+    border-radius: 3px 3px 0px 0px
+    background-color: #005CCB !important
+    height: 3px
+
+  [class*='MuiButtonBase-root']
+    font-size: 11px
+    color: rgba(0,0,0,0.87)
+    font-weight: bold
+
+  [class*='Mui-selected']
+    color: #005CCB !important
+
+.tabTitle[class*='MuiButtonBase-root']
+  position: relative
+  padding: 10px
+  text-align: center
+  min-width: auto
+  color: rgba(0,0,0,0.87)
+  font-size: 11px !important
+  opacity: 1
+  font-weight: bold
+
+.tabDisable[class*='MuiButtonBase-root']
+  color: #e9e9e9 !important
+  pointer-events: none !important
+
+.tabContent
+  position: relative
+  min-height: 146px
+  &:not([hidden])
+    display: flex
     flex-direction: column

package/source/components/_common/Tabs/Tabs.tsx

@@ -1,44 +1,44 @@
-import * as React from 'react';
-import { Tabs, Tab } from '@mui/material';
-import _get from 'lodash/get';
-import classnames from 'classnames';
-import TabPanel from './TabPanel';
-import { ITabsProps } from '../../../framework/types/types';
-import styles from './Tabs.styl';
-
-const TabsComponent: React.FunctionComponent<ITabsProps> = ({
-  priceTabActiveIndex,
-  onTabPriceSelect,
-  tabsTitles,
-  tabContentClassName
-}) => {
-  return (
-    <>
-      <Tabs indicatorColor='primary' className={styles.tabs} value={priceTabActiveIndex} onChange={(_, activeTab) => onTabPriceSelect(null, activeTab)}>
-        {tabsTitles.map(({ title, isDisable }, index: number) => (
-          <Tab
-            aria-controls={`simple-tabpanel-${index}`}
-            label={title}
-            className={`${styles.tabTitle} ${isDisable ? styles.tabDisable : ''}`}
-            id={title}
-            key={title}
-            disabled={isDisable}
-          />
-        ))}
-      </Tabs>
-      {tabsTitles.map(({ children, title }, index: number) => (
-        <TabPanel value={priceTabActiveIndex} index={index} className={classnames(styles.tabContent, tabContentClassName)} key={title}>
-          {children}
-        </TabPanel>
-      ))}
-    </>
-  );
-};
-
-TabsComponent.defaultProps = {
-  priceTabActiveIndex: 0,
-  tabContentClassName: '',
-  onTabPriceSelect: () => {}
-};
-
-export default TabsComponent;
+import * as React from 'react';
+import { Tabs, Tab } from '@mui/material';
+import _get from 'lodash/get';
+import classnames from 'classnames';
+import TabPanel from './TabPanel';
+import { ITabsProps } from '../../../framework/types/types';
+import styles from './Tabs.styl';
+
+const TabsComponent: React.FunctionComponent<ITabsProps> = ({
+  priceTabActiveIndex,
+  onTabPriceSelect,
+  tabsTitles,
+  tabContentClassName
+}) => {
+  return (
+    <>
+      <Tabs indicatorColor='primary' className={styles.tabs} value={priceTabActiveIndex} onChange={(_, activeTab) => onTabPriceSelect(null, activeTab)}>
+        {tabsTitles.map(({ title, isDisable }, index: number) => (
+          <Tab
+            aria-controls={`simple-tabpanel-${index}`}
+            label={title}
+            className={`${styles.tabTitle} ${isDisable ? styles.tabDisable : ''}`}
+            id={title}
+            key={title}
+            disabled={isDisable}
+          />
+        ))}
+      </Tabs>
+      {tabsTitles.map(({ children, title }, index: number) => (
+        <TabPanel value={priceTabActiveIndex} index={index} className={classnames(styles.tabContent, tabContentClassName)} key={title}>
+          {children}
+        </TabPanel>
+      ))}
+    </>
+  );
+};
+
+TabsComponent.defaultProps = {
+  priceTabActiveIndex: 0,
+  tabContentClassName: '',
+  onTabPriceSelect: () => {}
+};
+
+export default TabsComponent;

package/source/components/_common/TextAreaField/TextAreaField.styl

@@ -1,48 +1,48 @@
-@import '../../../theme/theme.styl'
-
-.textField
-  position: relative
-  width: 100%
-
-.input
-  min-width 100%
-  max-width: 100%
-  min-height: 120px
-  max-height 120px
-  width: 100%
-  padding: 5px
-  margin: 0
-  height: 30px
-  line-height: 20px
-  border: 1px solid $grey-d
-  border-radius: 3px
-  font-size: 14px
-  box-sizing: border-box
-  transition: border 0.2s ease-in-out
-
-  &.error
-  &:active.error
-  &:focus.error
-    padding-right: 26px
-    border-color: $darkRed !important
-
-.input:focus
-  border-width: 1px
-  border-style: solid
-  border-color: $primary
-  outline: none
-
-.placeholderAnimate
-  font-size: 12px;
-  position absolute;
-  top: 18px;
-  left: 13px;
-  pointer-events: none;
-  z-index: 2;
-  transition: .1s all linear; 
-  background-color #fff;
-  padding: 0 5px;
-  color: rgba(0, 0, 0, 0.38);
-
-.placeholderAnimateShow
+@import '../../../theme/theme.styl'
+
+.textField
+  position: relative
+  width: 100%
+
+.input
+  min-width 100%
+  max-width: 100%
+  min-height: 120px
+  max-height 120px
+  width: 100%
+  padding: 5px
+  margin: 0
+  height: 30px
+  line-height: 20px
+  border: 1px solid $grey-d
+  border-radius: 3px
+  font-size: 14px
+  box-sizing: border-box
+  transition: border 0.2s ease-in-out
+
+  &.error
+  &:active.error
+  &:focus.error
+    padding-right: 26px
+    border-color: $darkRed !important
+
+.input:focus
+  border-width: 1px
+  border-style: solid
+  border-color: $primary
+  outline: none
+
+.placeholderAnimate
+  font-size: 12px;
+  position absolute;
+  top: 18px;
+  left: 13px;
+  pointer-events: none;
+  z-index: 2;
+  transition: .1s all linear; 
+  background-color #fff;
+  padding: 0 5px;
+  color: rgba(0, 0, 0, 0.38);
+
+.placeholderAnimateShow
   top: -6px;

package/source/components/_common/TextAreaField/TextAreaField.tsx

@@ -1,74 +1,74 @@
-import * as React from 'react';
-import styles from './TextAreaField.styl';
-import classnames from 'classnames';
-
-export interface ITextFieldProps {
-  className?: string;
-  fieldClassName?: string;
-
-  value?: string;
-  placeholder?: string;
-  type?: string;
-  name: string;
-  disabled?: boolean;
-  showPlaceholder?: boolean;
-  hideLabelInner?: boolean;
-  label?: string;
-  field?: any;
-  maxLength?: number;
-  error?: boolean;
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  onChange(value: string, name: string, event: React.FormEvent<HTMLInputElement>): void;
-}
-
-interface ITextFieldState {
-  focused?: boolean;
-}
-class TextAreaField extends React.Component<ITextFieldProps, ITextFieldState> {
-  constructor(props: ITextFieldProps) {
-    super(props);
-    this.state = {
-      focused: false
-    };
-  }
-
-  onChange = (event: any) => {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    const { name } = this.props;
-    const value = event.nativeEvent.target.value;
-
-    this.props.onChange(value, name, event);
-  };
-
-  onFocus = () => {
-    this.setState({ focused: true });
-  };
-
-  onBlur = () => {
-    this.setState({ focused: false });
-  };
-
-  render() {
-    const { className, fieldClassName, showPlaceholder, label, value, placeholder, hideLabelInner, disabled, maxLength, error } = this.props;
-
-    const showLabel = (this.state.focused || value && showPlaceholder) ? `${styles.placeholderAnimate} ${styles.placeholderAnimateShow}` : `${styles.placeholderAnimate}`;
-    return (
-      <div className={`${styles.textField} ${className}`}>
-        {!hideLabelInner ? <span className={showLabel}>{label}</span> : ''}
-        <textarea
-          className={classnames(styles.input, fieldClassName, { [styles.error]: error })}
-          value={value}
-          placeholder={placeholder}
-          onChange={this.onChange}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          disabled={disabled}
-          maxLength={maxLength}
-        />
-      </div>
-    );
-  }
-}
-
-export default TextAreaField;
+import * as React from 'react';
+import styles from './TextAreaField.styl';
+import classnames from 'classnames';
+
+export interface ITextFieldProps {
+  className?: string;
+  fieldClassName?: string;
+
+  value?: string;
+  placeholder?: string;
+  type?: string;
+  name: string;
+  disabled?: boolean;
+  showPlaceholder?: boolean;
+  hideLabelInner?: boolean;
+  label?: string;
+  field?: any;
+  maxLength?: number;
+  error?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onChange(value: string, name: string, event: React.FormEvent<HTMLInputElement>): void;
+}
+
+interface ITextFieldState {
+  focused?: boolean;
+}
+class TextAreaField extends React.Component<ITextFieldProps, ITextFieldState> {
+  constructor(props: ITextFieldProps) {
+    super(props);
+    this.state = {
+      focused: false
+    };
+  }
+
+  onChange = (event: any) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    const { name } = this.props;
+    const value = event.nativeEvent.target.value;
+
+    this.props.onChange(value, name, event);
+  };
+
+  onFocus = () => {
+    this.setState({ focused: true });
+  };
+
+  onBlur = () => {
+    this.setState({ focused: false });
+  };
+
+  render() {
+    const { className, fieldClassName, showPlaceholder, label, value, placeholder, hideLabelInner, disabled, maxLength, error } = this.props;
+
+    const showLabel = (this.state.focused || value && showPlaceholder) ? `${styles.placeholderAnimate} ${styles.placeholderAnimateShow}` : `${styles.placeholderAnimate}`;
+    return (
+      <div className={`${styles.textField} ${className}`}>
+        {!hideLabelInner ? <span className={showLabel}>{label}</span> : ''}
+        <textarea
+          className={classnames(styles.input, fieldClassName, { [styles.error]: error })}
+          value={value}
+          placeholder={placeholder}
+          onChange={this.onChange}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
+          disabled={disabled}
+          maxLength={maxLength}
+        />
+      </div>
+    );
+  }
+}
+
+export default TextAreaField;

package/source/components/_common/TextField/TextField.styl

@@ -1,37 +1,37 @@
-@import '../../../theme/theme.styl'
-
-.textField
-  position: relative
-  width: 100%
-
-.textField.disabled
-  opacity: 0.6
-  .input
-    background-color: $grey-trans
-
-.input
-  width: 100%
-  padding: 0 5px
-  margin: 0
-  height: 30px
-  line-height: 30px
-  border-width: 1px
-  border-style: solid
-  border-color: $grey-d
-  border-radius: 3px
-  font-size: 14px
-  box-sizing: border-box
-  transition: border 0.2s ease-in-out
-
-  &.error
-  &:active.error
-  &:focus.error
-    padding-right: 26px
-    border-color: $darkRed !important
-
-.input:focus
-  border-color: $primary !important
-  outline: none !important
-
-.input:hover
-  border-color: darken($grey-d, 20%)
+@import '../../../theme/theme.styl'
+
+.textField
+  position: relative
+  width: 100%
+
+.textField.disabled
+  opacity: 0.6
+  .input
+    background-color: $grey-trans
+
+.input
+  width: 100%
+  padding: 0 5px
+  margin: 0
+  height: 30px
+  line-height: 30px
+  border-width: 1px
+  border-style: solid
+  border-color: $grey-d
+  border-radius: 3px
+  font-size: 14px
+  box-sizing: border-box
+  transition: border 0.2s ease-in-out
+
+  &.error
+  &:active.error
+  &:focus.error
+    padding-right: 26px
+    border-color: $darkRed !important
+
+.input:focus
+  border-color: $primary !important
+  outline: none !important
+
+.input:hover
+  border-color: darken($grey-d, 20%)