@bytebrand/fe-ui-core 4.2.71 → 4.2.73

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

@@ -1,41 +1,41 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { FiltersFactory } from '../../SearchFilters/FiltersFactory';
-
-import ExpandablePanel from './ExpandablePanel';
-import { MMS_GROUPS } from '../../../framework/constants/filters';
-import { BODY_TYPES } from '../../../framework/constants/selectors';
-
-const Label = ({ opened }) => (
-  <div style={{ padding: 10 }}>Some label here.</div>
-);
-
-const Content = ({ opened }) => (
-  <div style={{ padding: 10 }}>
-    {FiltersFactory['MAKE_MODEL'](MakeModelProps)}
-  </div>
-);
-
-const props = {
-  //isOpened: true,
-  id: 'uniquePanelId',
-  onPanelFocus: action('onPanelFocus'),
-  label: <Label />,
-  onToggle: action('change state')
-};
-
-const MakeModelProps = {
-  MMS_GROUPS,
-  BODY_TYPE: {
-    options: BODY_TYPES,
-    values: []
-  }
-};
-
-storiesOf('_Common_UI', module)
-.add('ExpandablePanel', () => (
-  <ExpandablePanel {...props}>
-    <Content />
-  </ExpandablePanel>
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { FiltersFactory } from '../../SearchFilters/FiltersFactory';
+
+import ExpandablePanel from './ExpandablePanel';
+import { MMS_GROUPS } from '../../../framework/constants/filters';
+import { BODY_TYPES } from '../../../framework/constants/selectors';
+
+const Label = ({ opened }) => (
+  <div style={{ padding: 10 }}>Some label here.</div>
+);
+
+const Content = ({ opened }) => (
+  <div style={{ padding: 10 }}>
+    {FiltersFactory['MAKE_MODEL'](MakeModelProps)}
+  </div>
+);
+
+const props = {
+  //isOpened: true,
+  id: 'uniquePanelId',
+  onPanelFocus: action('onPanelFocus'),
+  label: <Label />,
+  onToggle: action('change state')
+};
+
+const MakeModelProps = {
+  MMS_GROUPS,
+  BODY_TYPE: {
+    options: BODY_TYPES,
+    values: []
+  }
+};
+
+storiesOf('_Common_UI', module)
+.add('ExpandablePanel', () => (
+  <ExpandablePanel {...props}>
+    <Content />
+  </ExpandablePanel>
+));

package/source/components/_common/ExpandablePanel/ExpandablePanel.styl

@@ -1,19 +1,19 @@
-@import '../../../theme/theme.styl';
-
-.container
-  min-width: 300px
-  min-height: 30px
-  position: relative
-  background-color: white
-  font-family: $font-style-arial
-
-.title
-  cursor: pointer
-  font-size: 16px
-
-.content
-  font-size: 14px
-  height: 0
-
-.content.visible
-  height: auto
+@import '../../../theme/theme.styl';
+
+.container
+  min-width: 300px
+  min-height: 30px
+  position: relative
+  background-color: white
+  font-family: $font-style-arial
+
+.title
+  cursor: pointer
+  font-size: 16px
+
+.content
+  font-size: 14px
+  height: 0
+
+.content.visible
+  height: auto

package/source/components/_common/ExpandablePanel/ExpandablePanel.tsx

@@ -1,88 +1,88 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import styles from './ExpandablePanel.styl';
-
-export interface IExpandablePanelProps {
-  id?: string;
-  className?: string;
-
-  label: any;
-  children: any;
-
-  isOpened?: boolean | undefined;
-  onToggle?: (opened: boolean) => void;
-  onPanelFocus?: () => void;
-}
-
-export interface IExpandablePanelState {
-  isOpened: boolean;
-}
-
-class ExpandablePanel extends React.PureComponent<IExpandablePanelProps, IExpandablePanelState> {
-  constructor(props: IExpandablePanelProps) {
-    super(props);
-
-    const childCount = React.Children.count(props.children);
-
-    if (childCount > 1) {
-      throw new Error('There can be only one root element as a child component.');
-    }
-
-    this.state = {
-      isOpened: props.isOpened !== undefined ? props.isOpened : false
-    };
-  }
-
-  onToggle = (): void => {
-    const { isOpened: isOpenedState } = this.state;
-    const { isOpened: isOpenedProps } = this.props;
-    let newState = !isOpenedProps;
-
-    if (isOpenedProps === undefined) {
-      // If isOpenedProps undefined then we set new state
-      // otherwise, we just call onToggle callback.
-      newState = !isOpenedState;
-
-      this.setState(() => ({
-        isOpened: newState
-      }));
-    }
-
-    this.props.onToggle(newState);
-  };
-
-  render () {
-    const { label, children, id, className, isOpened: isOpenedProps  } = this.props;
-    const { isOpened: isOpenedState } = this.state;
-
-    const isOpened: boolean = isOpenedProps !== undefined ? isOpenedProps : isOpenedState;
-
-    const LabelComponent = label
-      ? React.cloneElement(label, { opened: isOpened.toString(), ...label.props })
-      : false;
-
-    const ContentComponent = children
-      ? React.cloneElement(children, { opened: isOpened.toString(), ...children.props })
-      : false;
-
-    const panelSectionProps = {
-      id,
-      className: classnames(styles.container, className),
-      onClick: this.props.onPanelFocus
-    };
-
-    return (
-      <section {...panelSectionProps}>
-        <div className={styles.title} onClick={this.onToggle}>
-          {LabelComponent}
-        </div>
-
-        <div className={classnames(styles.content, { [styles.visible]: isOpened })}>
-          {isOpened ? ContentComponent : false}
-        </div>
-      </section>
-    );
-  }
-}
-
-export default ExpandablePanel;
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './ExpandablePanel.styl';
+
+export interface IExpandablePanelProps {
+  id?: string;
+  className?: string;
+
+  label: any;
+  children: any;
+
+  isOpened?: boolean | undefined;
+  onToggle?: (opened: boolean) => void;
+  onPanelFocus?: () => void;
+}
+
+export interface IExpandablePanelState {
+  isOpened: boolean;
+}
+
+class ExpandablePanel extends React.PureComponent<IExpandablePanelProps, IExpandablePanelState> {
+  constructor(props: IExpandablePanelProps) {
+    super(props);
+
+    const childCount = React.Children.count(props.children);
+
+    if (childCount > 1) {
+      throw new Error('There can be only one root element as a child component.');
+    }
+
+    this.state = {
+      isOpened: props.isOpened !== undefined ? props.isOpened : false
+    };
+  }
+
+  onToggle = (): void => {
+    const { isOpened: isOpenedState } = this.state;
+    const { isOpened: isOpenedProps } = this.props;
+    let newState = !isOpenedProps;
+
+    if (isOpenedProps === undefined) {
+      // If isOpenedProps undefined then we set new state
+      // otherwise, we just call onToggle callback.
+      newState = !isOpenedState;
+
+      this.setState(() => ({
+        isOpened: newState
+      }));
+    }
+
+    this.props.onToggle(newState);
+  };
+
+  render () {
+    const { label, children, id, className, isOpened: isOpenedProps  } = this.props;
+    const { isOpened: isOpenedState } = this.state;
+
+    const isOpened: boolean = isOpenedProps !== undefined ? isOpenedProps : isOpenedState;
+
+    const LabelComponent = label
+      ? React.cloneElement(label, { opened: isOpened.toString(), ...label.props })
+      : false;
+
+    const ContentComponent = children
+      ? React.cloneElement(children, { opened: isOpened.toString(), ...children.props })
+      : false;
+
+    const panelSectionProps = {
+      id,
+      className: classnames(styles.container, className),
+      onClick: this.props.onPanelFocus
+    };
+
+    return (
+      <section {...panelSectionProps}>
+        <div className={styles.title} onClick={this.onToggle}>
+          {LabelComponent}
+        </div>
+
+        <div className={classnames(styles.content, { [styles.visible]: isOpened })}>
+          {isOpened ? ContentComponent : false}
+        </div>
+      </section>
+    );
+  }
+}
+
+export default ExpandablePanel;

package/source/components/_common/ExpansionPanel/ExpansionPanel.styl

@@ -1,36 +1,36 @@
-@import '../../../theme/theme.styl'
-
-.ExpansionPanel
-  border 1px solid $grey-e
-  border-radius 3px
-  background-color white
-
-.header
-  padding: 15px
-  text-align left
-  display flex
-  justify-content space-between
-  align-items flex-start
-  cursor pointer
-  font-weight 700
-  font-size 16px
-
-.subTitle
-  font-weight normal
-
-.icon
-  transform rotateZ(0deg)
-  fill $primary
-  transition all 300ms ease-out
-
-.iconExpanded
-  transform rotateZ(180deg)
-
-.body
-  max-height: 0
-  opacity: 0
-
-.bodyExpanded
-  max-height: 10000px
-  transition: max-height 350ms ease-in, opacity 350ms ease-in
-  opacity: 1
+@import '../../../theme/theme.styl'
+
+.ExpansionPanel
+  border 1px solid $grey-e
+  border-radius 3px
+  background-color white
+
+.header
+  padding: 15px
+  text-align left
+  display flex
+  justify-content space-between
+  align-items flex-start
+  cursor pointer
+  font-weight 700
+  font-size 16px
+
+.subTitle
+  font-weight normal
+
+.icon
+  transform rotateZ(0deg)
+  fill $primary
+  transition all 300ms ease-out
+
+.iconExpanded
+  transform rotateZ(180deg)
+
+.body
+  max-height: 0
+  opacity: 0
+
+.bodyExpanded
+  max-height: 10000px
+  transition: max-height 350ms ease-in, opacity 350ms ease-in
+  opacity: 1

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

@@ -1,28 +1,28 @@
-import { createTheme } from '@mui/material/styles';
-
-export const Theme = createTheme({
-  components: {
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          boxShadow: 'none',
-          borderRadius: '0 !important'
-        }
-      }
-    },
-    MuiAccordionSummary: {
-      styleOverrides: {
-        root: {
-          borderBottom: '1px solid #e8e8e8'
-        },
-        content: {
-          fontWeight: 'bold',
-          fontSize: 13,
-          margin: 0,
-          padding: '12px 0',
-          textTransform: 'uppercase'
-        }
-      }
-    }
-  }
-});
+import { createTheme } from '@mui/material/styles';
+
+export const Theme = createTheme({
+  components: {
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none',
+          borderRadius: '0 !important'
+        }
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          borderBottom: '1px solid #e8e8e8'
+        },
+        content: {
+          fontWeight: 'bold',
+          fontSize: 13,
+          margin: 0,
+          padding: '12px 0',
+          textTransform: 'uppercase'
+        }
+      }
+    }
+  }
+});

package/source/components/_common/ExpansionPanel/ExpansionPanel.tsx

@@ -1,99 +1,99 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { Element } from 'react-scroll';
-import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
-import IconSVG from '../IconSVG/IconSVG';
-import styles from './ExpansionPanel.styl';
-import { ThemeProvider } from '@mui/material/styles';
-import { Theme } from './ExpansionPanel.styled';
-
-export interface IExpansionPanelProps {
-  title?: string | JSX.Element;
-  subTitle?: string;
-  defaultExpanded?: boolean;
-  onChange?: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
-  className?: string;
-  children?: any;
-  reactScrollName?: string; // property "name" for "Element" component of "react-scroll" library
-  reactScrollClassName?: string; // property "className" for "Element" component of "react-scroll" library
-  headerClassName?: string;
-  bodyClassName?: string;
-  subTitleClassName?: string;
-  expandedClassName?: string;
-  arrowIconClassName?: string;
-  expanded?: string | boolean;
-  vehiclesComparedCount?: number;
-  widthCompareBlock?: number;
-  isCompare?: boolean;
-  accordionSummaryClassName?: string;
-  accordionClassName?: string;
-}
-
-interface IConditionalWrapperProps {
-  condition: boolean | string;
-  children: any;
-  wrap: (children: any) => JSX.Element;
-}
-
-const ConditionalWrapper = (props: IConditionalWrapperProps) => {
-  const { condition, wrap, children } = props;
-  return condition ? wrap(children) : children;
-};
-
-class ExpansionPanel extends React.Component<IExpansionPanelProps> {
-  render(): JSX.Element {
-    const {
-      title,
-      subTitle,
-      children,
-      reactScrollName,
-      reactScrollClassName,
-      defaultExpanded,
-      accordionSummaryClassName,
-      subTitleClassName,
-      onChange,
-      expanded,
-      accordionClassName,
-      vehiclesComparedCount,
-      widthCompareBlock,
-      isCompare = false
-    } = this.props;
-
-    const scrollElementClassName = classnames(reactScrollClassName);
-    const subtitleCombinedClassName = classnames(styles.subTitle, subTitleClassName);
-    const widthForTitle = `${vehiclesComparedCount * widthCompareBlock}px`;
-    return (
-      <ConditionalWrapper
-        condition={reactScrollName}
-        wrap={(children: any) => <Element name={reactScrollName} className={scrollElementClassName}>{children}</Element>}
-      >
-        <ThemeProvider theme={Theme}>
-          <Accordion
-            defaultExpanded={defaultExpanded}
-            onChange={isCompare ? onChange : onChange && onChange(reactScrollName)}
-            expanded={isCompare ? expanded : expanded && (expanded === reactScrollName)}
-            className={accordionClassName}
-          >
-            <AccordionSummary
-              expandIcon={<IconSVG name={'arrowSelect'} className={styles.icon} customDimensions />}
-              aria-controls={title}
-              className={accordionSummaryClassName}
-              id={title}
-              sx={isCompare ? { width: widthForTitle } : null}
-            >
-              <span>
-                {title}
-                {subTitle && <span className={subtitleCombinedClassName}>&nbsp;{subTitle}</span>}
-              </span>
-            </AccordionSummary>
-            <AccordionDetails>
-              {children}
-            </AccordionDetails>
-          </Accordion>
-        </ThemeProvider>
-      </ConditionalWrapper>
-    );
-  }
-}
-
-export default ExpansionPanel;
+import * as React from 'react';
+import classnames from 'classnames';
+import { Element } from 'react-scroll';
+import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import IconSVG from '../IconSVG/IconSVG';
+import styles from './ExpansionPanel.styl';
+import { ThemeProvider } from '@mui/material/styles';
+import { Theme } from './ExpansionPanel.styled';
+
+export interface IExpansionPanelProps {
+  title?: string | JSX.Element;
+  subTitle?: string;
+  defaultExpanded?: boolean;
+  onChange?: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
+  className?: string;
+  children?: any;
+  reactScrollName?: string; // property "name" for "Element" component of "react-scroll" library
+  reactScrollClassName?: string; // property "className" for "Element" component of "react-scroll" library
+  headerClassName?: string;
+  bodyClassName?: string;
+  subTitleClassName?: string;
+  expandedClassName?: string;
+  arrowIconClassName?: string;
+  expanded?: string | boolean;
+  vehiclesComparedCount?: number;
+  widthCompareBlock?: number;
+  isCompare?: boolean;
+  accordionSummaryClassName?: string;
+  accordionClassName?: string;
+}
+
+interface IConditionalWrapperProps {
+  condition: boolean | string;
+  children: any;
+  wrap: (children: any) => JSX.Element;
+}
+
+const ConditionalWrapper = (props: IConditionalWrapperProps) => {
+  const { condition, wrap, children } = props;
+  return condition ? wrap(children) : children;
+};
+
+class ExpansionPanel extends React.Component<IExpansionPanelProps> {
+  render(): JSX.Element {
+    const {
+      title,
+      subTitle,
+      children,
+      reactScrollName,
+      reactScrollClassName,
+      defaultExpanded,
+      accordionSummaryClassName,
+      subTitleClassName,
+      onChange,
+      expanded,
+      accordionClassName,
+      vehiclesComparedCount,
+      widthCompareBlock,
+      isCompare = false
+    } = this.props;
+
+    const scrollElementClassName = classnames(reactScrollClassName);
+    const subtitleCombinedClassName = classnames(styles.subTitle, subTitleClassName);
+    const widthForTitle = `${vehiclesComparedCount * widthCompareBlock}px`;
+    return (
+      <ConditionalWrapper
+        condition={reactScrollName}
+        wrap={(children: any) => <Element name={reactScrollName} className={scrollElementClassName}>{children}</Element>}
+      >
+        <ThemeProvider theme={Theme}>
+          <Accordion
+            defaultExpanded={defaultExpanded}
+            onChange={isCompare ? onChange : onChange && onChange(reactScrollName)}
+            expanded={isCompare ? expanded : expanded && (expanded === reactScrollName)}
+            className={accordionClassName}
+          >
+            <AccordionSummary
+              expandIcon={<IconSVG name={'arrowSelect'} className={styles.icon} customDimensions />}
+              aria-controls={title}
+              className={accordionSummaryClassName}
+              id={title}
+              sx={isCompare ? { width: widthForTitle } : null}
+            >
+              <span>
+                {title}
+                {subTitle && <span className={subtitleCombinedClassName}>&nbsp;{subTitle}</span>}
+              </span>
+            </AccordionSummary>
+            <AccordionDetails>
+              {children}
+            </AccordionDetails>
+          </Accordion>
+        </ThemeProvider>
+      </ConditionalWrapper>
+    );
+  }
+}
+
+export default ExpansionPanel;

package/source/components/_common/FilterLabel/FilterLabel.styl

@@ -1,26 +1,26 @@
-.label
-  display: flex
-  flex-direction: row
-  align-items: center
-  flex-wrap: wrap;
-
-.labelText
-  margin-right: 5px
-  overflow: hidden;
-  font-size: 14px;
-  text-overflow: ellipsis
-
-.labelAgg
-  font-size: 8px
-  vertical-align: middle
-  flex-shrink: 0
-  margin-left:5px
-
-.labelVertical
-  flex-direction: column;
-
-  .labelText
-    margin-right: 0
-
-  .labelAgg
+.label
+  display: flex
+  flex-direction: row
+  align-items: center
+  flex-wrap: wrap;
+
+.labelText
+  margin-right: 5px
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis
+
+.labelAgg
+  font-size: 8px
+  vertical-align: middle
+  flex-shrink: 0
+  margin-left:5px
+
+.labelVertical
+  flex-direction: column;
+
+  .labelText
+    margin-right: 0
+
+  .labelAgg
     margin-top: 3px;