@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/compat/AccordionWrapper/AccordionItem/AccordionItem.tsx

@@ -1,64 +1,64 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import IconSVG from '../../../iconsvg/IconSVG';
-import styles from './AccordionItem.styl';
-
-interface IAccordionItemProps {
-  children?: React.ReactNode;
-  caption: string;
-  isExpand?: boolean;
-  onClick?: any;
-  icon?: JSX.Element;
-  titleClassName?: string;
-  wrapperClassName?: string;
-  iconClassName?: string;
-  bodyClassName?: string;
-  bodyExpandClassName?: string;
-}
-
-class AccordionItem extends React.Component<IAccordionItemProps, {}> {
-  render(): JSX.Element {
-    const { caption, children, isExpand, onClick, icon } = this.props;
-
-    const iconClassName = classnames(
-      styles.icon,
-      { [styles.iconExpand]: isExpand },
-      this.props.iconClassName
-    );
-
-    const bodyClassName = classnames(
-      styles.body,
-      this.props.bodyClassName,
-      { [styles.bodyExpand]: isExpand },
-      { [this.props.bodyExpandClassName]: isExpand }
-    );
-
-    const titleClassName = classnames(
-      styles.title,
-      this.props.titleClassName
-    );
-
-    const wrapperClassName = classnames(
-      styles.accordionItem,
-      this.props.wrapperClassName
-    );
-
-    return (
-      <div className={wrapperClassName}>
-        <div className={titleClassName} onClick={onClick}>
-          <span className={styles.titleText}>{caption}</span>
-          {icon
-            ? icon
-            : <IconSVG className={iconClassName} name='arrowDownBlue' customDimensions />
-          }
-        </div>
-        <div className={bodyClassName}>
-          {children}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default AccordionItem;
+import * as React from 'react';
+import classnames from 'classnames';
+
+import IconSVG from '../../../iconsvg/IconSVG';
+import styles from './AccordionItem.styl';
+
+interface IAccordionItemProps {
+  children?: React.ReactNode;
+  caption: string;
+  isExpand?: boolean;
+  onClick?: any;
+  icon?: JSX.Element;
+  titleClassName?: string;
+  wrapperClassName?: string;
+  iconClassName?: string;
+  bodyClassName?: string;
+  bodyExpandClassName?: string;
+}
+
+class AccordionItem extends React.Component<IAccordionItemProps, {}> {
+  render(): JSX.Element {
+    const { caption, children, isExpand, onClick, icon } = this.props;
+
+    const iconClassName = classnames(
+      styles.icon,
+      { [styles.iconExpand]: isExpand },
+      this.props.iconClassName
+    );
+
+    const bodyClassName = classnames(
+      styles.body,
+      this.props.bodyClassName,
+      { [styles.bodyExpand]: isExpand },
+      { [this.props.bodyExpandClassName]: isExpand }
+    );
+
+    const titleClassName = classnames(
+      styles.title,
+      this.props.titleClassName
+    );
+
+    const wrapperClassName = classnames(
+      styles.accordionItem,
+      this.props.wrapperClassName
+    );
+
+    return (
+      <div className={wrapperClassName}>
+        <div className={titleClassName} onClick={onClick}>
+          <span className={styles.titleText}>{caption}</span>
+          {icon
+            ? icon
+            : <IconSVG className={iconClassName} name='arrowDownBlue' customDimensions />
+          }
+        </div>
+        <div className={bodyClassName}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AccordionItem;

package/compat/AccordionWrapper/AccordionWrapper.tsx

@@ -1,34 +1,34 @@
-import * as React from 'react';
-import AccordionItem from './AccordionItem/AccordionItem';
-
-export interface IAccordionProps {
-  children?: React.ReactNode;
-  className?: string;
-  activeIndex?: number | string;
-  onItemClick: (index: number) => void;
-}
-
-class Accordion extends React.Component<IAccordionProps, {}> {
-  onItemClick = (index: number) => () => {
-    const active = index === this.props.activeIndex ? -1 : index;
-    this.props.onItemClick(active);
-  };
-
-  render(): JSX.Element {
-    const { className, activeIndex } = this.props;
-
-    const childrenWithProps: React.ReactElement<AccordionItem>[] = React.Children.map(this.props.children, (child, i) => {
-      return React.cloneElement(
-        child as JSX.Element,
-        { isExpand: activeIndex === i, onClick: this.onItemClick(i), key: i });
-    });
-
-    return (
-      <div className={className}>
-        {childrenWithProps}
-      </div>
-    );
-  }
-}
-
-export default Accordion;
+import * as React from 'react';
+import AccordionItem from './AccordionItem/AccordionItem';
+
+export interface IAccordionProps {
+  children?: React.ReactNode;
+  className?: string;
+  activeIndex?: number | string;
+  onItemClick: (index: number) => void;
+}
+
+class Accordion extends React.Component<IAccordionProps, {}> {
+  onItemClick = (index: number) => () => {
+    const active = index === this.props.activeIndex ? -1 : index;
+    this.props.onItemClick(active);
+  };
+
+  render(): JSX.Element {
+    const { className, activeIndex } = this.props;
+
+    const childrenWithProps: React.ReactElement<AccordionItem>[] = React.Children.map(this.props.children, (child, i) => {
+      return React.cloneElement(
+        child as JSX.Element,
+        { isExpand: activeIndex === i, onClick: this.onItemClick(i), key: i });
+    });
+
+    return (
+      <div className={className}>
+        {childrenWithProps}
+      </div>
+    );
+  }
+}
+
+export default Accordion;

package/compat/AdvantageItem/AdvantageItem.styl

@@ -1,47 +1,47 @@
-@import '../legacy-theme/theme.styl';
-@import '../legacy-theme/mixins.styl';
-
-.advantage
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: center
-
-.imageContainer
-  position: relative
-  max-width: 74px
-  max-height: 96px
-
-  +media-tablet-down()
-    max-width: 100px
-    max-height: 100%
-
-.image
-  display: block
-  width: 100%
-  height: auto
-
-.image.small
-  width: 30px
-  height: 30px
-  margin-bottom: 8px
-
-  +media-tablet-down()
-    width: 35px
-    height: 35px
-    margin-bottom: 20px
-
-.title
-  text-transform: uppercase
-  color: white
-  font-family: $font-style-arial
-  font-weight: $font-weight-normal
-  font-size: $font-size-default
-
-  +media-phone-up()
-    font-size: $font-size-h5
-    font-weight: $font-weight-bold
-    color: $primary
-
-  +media-tablet-down()
-    color: $skyBlue
+@import '../legacy-theme/theme.styl';
+@import '../legacy-theme/mixins.styl';
+
+.advantage
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+
+.imageContainer
+  position: relative
+  max-width: 74px
+  max-height: 96px
+
+  +media-tablet-down()
+    max-width: 100px
+    max-height: 100%
+
+.image
+  display: block
+  width: 100%
+  height: auto
+
+.image.small
+  width: 30px
+  height: 30px
+  margin-bottom: 8px
+
+  +media-tablet-down()
+    width: 35px
+    height: 35px
+    margin-bottom: 20px
+
+.title
+  text-transform: uppercase
+  color: white
+  font-family: $font-style-arial
+  font-weight: $font-weight-normal
+  font-size: $font-size-default
+
+  +media-phone-up()
+    font-size: $font-size-h5
+    font-weight: $font-weight-bold
+    color: $primary
+
+  +media-tablet-down()
+    color: $skyBlue

package/compat/AdvantageItem/AdvantageItem.tsx

@@ -1,26 +1,26 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import styles from './AdvantageItem.styl';
-
-interface IAdvantageItemProps {
-  className?: string;
-
-  imageSrc?: string;
-  title?: string;
-}
-
-const AdvantageItem: React.FunctionComponent<IAdvantageItemProps> = ({ imageSrc, title, className }) => {
-  const withTitle = !!title;
-
-  return (
-    <div className={classnames(styles.advantage, className)}>
-      <div className={styles.imageContainer}>
-        {imageSrc ? <img src={imageSrc} alt='image' className={classnames(styles.image, { [styles.small]: withTitle })} /> : false}
-      </div>
-      {withTitle ? <span className={styles.title}>{title}</span> : false}
-    </div>
-  );
-};
-
-export default AdvantageItem;
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './AdvantageItem.styl';
+
+interface IAdvantageItemProps {
+  className?: string;
+
+  imageSrc?: string;
+  title?: string;
+}
+
+const AdvantageItem: React.FunctionComponent<IAdvantageItemProps> = ({ imageSrc, title, className }) => {
+  const withTitle = !!title;
+
+  return (
+    <div className={classnames(styles.advantage, className)}>
+      <div className={styles.imageContainer}>
+        {imageSrc ? <img src={imageSrc} alt='image' className={classnames(styles.image, { [styles.small]: withTitle })} /> : false}
+      </div>
+      {withTitle ? <span className={styles.title}>{title}</span> : false}
+    </div>
+  );
+};
+
+export default AdvantageItem;

package/compat/Alternative/DealerInfo.styl

@@ -1,116 +1,116 @@
-@import '../legacy-theme/mixins.styl'
-@import '../legacy-theme/theme.styl'
-
-.dealerInfoContainer
-    // border: 1px solid $grey-f5
-    font-family: sans-serif
-    background-color: $white
-    margin-top: 6px
-    borderRadius()
-
-.titleBlock
-    display: flex
-    justify-content: space-between
-    border-bottom: 1px solid $grey-f5
-    align-items: center
-    padding: 12px 16px 12px 20px
-
-.priceBlock
-    font-size: 12px
-
-.title
-    font-weight: 700
-    line-height: 16px
-    color: $black60
-
-.titleLink
-    font-size: 12px
-    color: $primary
-    display: flex
-    align-items: center
-
-.infoBlockItem
-    display: flex
-    justify-content: space-between
-    align-items: center
-    margin: 0 16px
-    border-bottom: 0.75px solid $grey-f5
-    padding: 10px 0 8px
-    font-size: 12px
-    color: $black80
-
-.valueWithIcon
-    display: flex
-    align-items: center
-    color: $black60
-    max-width: 50%;
-    text-align: right;
-
-.valueIcon
-    margin-left: 12px
-
-.titleIcon
-    margin-right: 6px
-    text-decoration: none
-
-.titlePrice
-    display: block
-    margin: 16px
-    font-weight: 700
-    font-size: 14px
-    line-height: 16px
-    color: $black60
-
-
-.priceItem
-    display: flex
-    justify-content: space-between
-    align-items: center
-    margin: 0 16px
-    padding: 12px 0
-    border-top: 0.75px solid $grey-f5
-    color: $black80
-
-.price
-    font-size: 16px !important
-
-.ourMargin
-    color: #333333D4 !important
-
-.unit
-    font-size: 16px !important
-    top: 7px !important
-
-.ourPriceInput
-    border: 0
-    text-align: right
-    font-weight: 700
-    font-size: 16px;
-    color: $black80;
-    width: 60px;
-
-.ourPriceInput:focus
-    outline: none
-
-.editIcon
-    width: 1.5rem;
-    height: auto;
-    fill: $skyBlue
-    margin-left: 5px
-
-.ourPriceBlock
-    display: flex;
-    align-items: center;
-    column-gap: 5px;
-
-.ourPrice
-    color: $skyBlue !important;
-    cursor: pointer;
-
-.editIconBlock
-    cursor: pointer;
-
-.editFieldWrapper
-    display: flex
-    align-items: center
-
+@import '../legacy-theme/mixins.styl'
+@import '../legacy-theme/theme.styl'
+
+.dealerInfoContainer
+    // border: 1px solid $grey-f5
+    font-family: sans-serif
+    background-color: $white
+    margin-top: 6px
+    borderRadius()
+
+.titleBlock
+    display: flex
+    justify-content: space-between
+    border-bottom: 1px solid $grey-f5
+    align-items: center
+    padding: 12px 16px 12px 20px
+
+.priceBlock
+    font-size: 12px
+
+.title
+    font-weight: 700
+    line-height: 16px
+    color: $black60
+
+.titleLink
+    font-size: 12px
+    color: $primary
+    display: flex
+    align-items: center
+
+.infoBlockItem
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin: 0 16px
+    border-bottom: 0.75px solid $grey-f5
+    padding: 10px 0 8px
+    font-size: 12px
+    color: $black80
+
+.valueWithIcon
+    display: flex
+    align-items: center
+    color: $black60
+    max-width: 50%;
+    text-align: right;
+
+.valueIcon
+    margin-left: 12px
+
+.titleIcon
+    margin-right: 6px
+    text-decoration: none
+
+.titlePrice
+    display: block
+    margin: 16px
+    font-weight: 700
+    font-size: 14px
+    line-height: 16px
+    color: $black60
+
+
+.priceItem
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin: 0 16px
+    padding: 12px 0
+    border-top: 0.75px solid $grey-f5
+    color: $black80
+
+.price
+    font-size: 16px !important
+
+.ourMargin
+    color: #333333D4 !important
+
+.unit
+    font-size: 16px !important
+    top: 7px !important
+
+.ourPriceInput
+    border: 0
+    text-align: right
+    font-weight: 700
+    font-size: 16px;
+    color: $black80;
+    width: 60px;
+
+.ourPriceInput:focus
+    outline: none
+
+.editIcon
+    width: 1.5rem;
+    height: auto;
+    fill: $skyBlue
+    margin-left: 5px
+
+.ourPriceBlock
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+
+.ourPrice
+    color: $skyBlue !important;
+    cursor: pointer;
+
+.editIconBlock
+    cursor: pointer;
+
+.editFieldWrapper
+    display: flex
+    align-items: center
+