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

package/compat/ImagesSet/ImagesSet.styl

@@ -1,28 +1,28 @@
-@import '../legacy-theme/theme.styl'
-
-.wrapper
-  display: flex
-  flex-wrap: wrap
-  flex-direction: column
-  width: 100%
-  height: 100%
-
-.outer
-  box-sizing: border-box
-  overflow: hidden
-  position: relative
-  border: 4px solid white
-
-.inner
-  height: 100%
-  width: 100%
-  background-color: white
-  background-size: cover
-  background-position: center center
-  transition: all 0.5s ease
-  background-repeat: no-repeat
-  &:hover
-    transform: scale(1.2)
-
-.clickable
+@import '../legacy-theme/theme.styl'
+
+.wrapper
+  display: flex
+  flex-wrap: wrap
+  flex-direction: column
+  width: 100%
+  height: 100%
+
+.outer
+  box-sizing: border-box
+  overflow: hidden
+  position: relative
+  border: 4px solid white
+
+.inner
+  height: 100%
+  width: 100%
+  background-color: white
+  background-size: cover
+  background-position: center center
+  transition: all 0.5s ease
+  background-repeat: no-repeat
+  &:hover
+    transform: scale(1.2)
+
+.clickable
   cursor: pointer

package/compat/ImagesSet/ImagesSet.tsx

@@ -1,76 +1,76 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import styles from './ImagesSet.styl';
-
-export interface IImage {
-  url: string;
-  [key: string]: any;
-}
-
-export interface IImagesSetProps {
-  images?: IImage[];
-  imageSizes: (1 | 2)[];
-  columnsCount: number;
-  rowsCount: number;
-
-  placeholderUrl?: string;
-  wrapperClassName?: string;
-  outerClassName?: string;
-  innerClassName?: string;
-
-  onImageClick?: (event: React.MouseEvent<HTMLDivElement>, imageObject: IImage) => void;
-}
-
-const ImagesSet: React.FC<IImagesSetProps> = (props) => {
-  const { images, imageSizes, columnsCount, rowsCount, placeholderUrl,
-    wrapperClassName, outerClassName, innerClassName, onImageClick
-  } = props;
-
-  const columnWidth = 100 / columnsCount; // tslint:disable-line
-  const rowHeight = 100 / rowsCount; // tslint:disable-line 
-
-  const wrapperClass = classnames(styles.wrapper, wrapperClassName);
-
-  const onOuterClick = (imageObject: IImage) => (event: React.MouseEvent<HTMLDivElement>) => {
-    onImageClick(event, imageObject);
-  };
-
-  return (
-    <div className={wrapperClass}>
-      {imageSizes.map((coefficient: number, key: number) => {
-        const image = images[key] ? images[key] : null;
-        const url = image ? image.url : placeholderUrl;
-
-        const outerProps = {
-          key,
-          className: classnames(styles.outer, outerClassName, { [styles.clickable]: !!onImageClick }),
-          style: {
-            width: `${columnWidth}%`,
-            height: `${rowHeight * coefficient}%`
-          },
-          onClick: onOuterClick(image)
-        };
-
-        const innerProps: any = {
-          className: classnames(styles.inner, innerClassName)
-        };
-
-        if (url) {
-          innerProps.style = { backgroundImage: `url(${url})` };
-        }
-
-        return (
-          <div {...outerProps}>
-            <div {...innerProps}></div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-ImagesSet.defaultProps = {
-  images: []
-};
-
-export default ImagesSet;
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './ImagesSet.styl';
+
+export interface IImage {
+  url: string;
+  [key: string]: any;
+}
+
+export interface IImagesSetProps {
+  images?: IImage[];
+  imageSizes: (1 | 2)[];
+  columnsCount: number;
+  rowsCount: number;
+
+  placeholderUrl?: string;
+  wrapperClassName?: string;
+  outerClassName?: string;
+  innerClassName?: string;
+
+  onImageClick?: (event: React.MouseEvent<HTMLDivElement>, imageObject: IImage) => void;
+}
+
+const ImagesSet: React.FC<IImagesSetProps> = (props) => {
+  const { images, imageSizes, columnsCount, rowsCount, placeholderUrl,
+    wrapperClassName, outerClassName, innerClassName, onImageClick
+  } = props;
+
+  const columnWidth = 100 / columnsCount; // tslint:disable-line
+  const rowHeight = 100 / rowsCount; // tslint:disable-line 
+
+  const wrapperClass = classnames(styles.wrapper, wrapperClassName);
+
+  const onOuterClick = (imageObject: IImage) => (event: React.MouseEvent<HTMLDivElement>) => {
+    onImageClick(event, imageObject);
+  };
+
+  return (
+    <div className={wrapperClass}>
+      {imageSizes.map((coefficient: number, key: number) => {
+        const image = images[key] ? images[key] : null;
+        const url = image ? image.url : placeholderUrl;
+
+        const outerProps = {
+          key,
+          className: classnames(styles.outer, outerClassName, { [styles.clickable]: !!onImageClick }),
+          style: {
+            width: `${columnWidth}%`,
+            height: `${rowHeight * coefficient}%`
+          },
+          onClick: onOuterClick(image)
+        };
+
+        const innerProps: any = {
+          className: classnames(styles.inner, innerClassName)
+        };
+
+        if (url) {
+          innerProps.style = { backgroundImage: `url(${url})` };
+        }
+
+        return (
+          <div {...outerProps}>
+            <div {...innerProps}></div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+ImagesSet.defaultProps = {
+  images: []
+};
+
+export default ImagesSet;

package/compat/InfoBlockWrapper/InfoBlockWrapper.styl

@@ -1,41 +1,41 @@
-@import '../legacy-theme/mixins.styl'
-
-.container
-  padding 0 0 20px;
-  width: 100%
-  box-sizing border-box
-  background-color white
-  borderRadius();
-
-.headerWrap
-  display flex
-  box-sizing: border-box;
-  justify-content: space-between;
-  margin-bottom: 10px
-  padding: 11px 16px 11px 16px;
-  border-bottom: 1px solid rgba(196, 196, 196, 0.5);
-
-.title
-  margin 0
-  font-size: 18px;
-  color: rgba(#000, 60%) !important;
-
-  +media-phone-only()
-    font-size: 18px
-    text-align: center;
-
-.compareNow
-  color: $skyBlue;
-  font-size: 12px;
-  cursor: pointer
-
-.contentNoWrap
-//   display: grid;
-//   grid-template-columns: repeat(4, 1fr);
-//   grid-gap: 50px;
-  padding 5px 16px 0 16px;
-
-  +media-phone-only()
-    // grid-template-columns: repeat(1, 1fr);
-    // grid-gap: 0;
-    padding 0 20px;
+@import '../legacy-theme/mixins.styl'
+
+.container
+  padding 0 0 20px;
+  width: 100%
+  box-sizing border-box
+  background-color white
+  borderRadius();
+
+.headerWrap
+  display flex
+  box-sizing: border-box;
+  justify-content: space-between;
+  margin-bottom: 10px
+  padding: 11px 16px 11px 16px;
+  border-bottom: 1px solid rgba(196, 196, 196, 0.5);
+
+.title
+  margin 0
+  font-size: 18px;
+  color: rgba(#000, 60%) !important;
+
+  +media-phone-only()
+    font-size: 18px
+    text-align: center;
+
+.compareNow
+  color: $skyBlue;
+  font-size: 12px;
+  cursor: pointer
+
+.contentNoWrap
+//   display: grid;
+//   grid-template-columns: repeat(4, 1fr);
+//   grid-gap: 50px;
+  padding 5px 16px 0 16px;
+
+  +media-phone-only()
+    // grid-template-columns: repeat(1, 1fr);
+    // grid-gap: 0;
+    padding 0 20px;

package/compat/InfoBlockWrapper/InfoBlockWrapper.tsx

@@ -1,46 +1,46 @@
-import React, { useMemo } from 'react';
-import styles from './InfoBlockWrapper.styl';
-import classnames from 'classnames';
-
-interface IInfoBlockWrapperProps {
-  containerClassName?: string;
-  childrenClassName?: string;
-  title: string;
-  titleDetails?: string;
-  onDetailsClick?: () => void;
-  children?: React.ReactNode;
-}
-
-const InfoBlockWrapper: React.FunctionComponent<IInfoBlockWrapperProps> = (props) => {
-  const { containerClassName, childrenClassName, title, titleDetails, children, onDetailsClick } = props;
-  const containerClasses = classnames(styles.container, containerClassName);
-  const childrenWrap = classnames(styles.contentNoWrap, childrenClassName);
-
-  const renderSliderItems = useMemo(
-    () => {
-      return (
-        <div className={containerClasses}>
-          <div className={styles.headerWrap}>
-            <h3 className={styles.title}>{title}</h3>
-            {titleDetails ? <span className={styles.compareNow} onClick={onDetailsClick}>{titleDetails}</span> : ''}
-          </div>
-          <div className={childrenWrap}>{children}</div>
-        </div>
-      );
-    },
-    [children]
-  );
-
-  return renderSliderItems;
-
-};
-
-InfoBlockWrapper.defaultProps = {
-  containerClassName: '',
-  childrenClassName: '',
-  title: '',
-  titleDetails: '',
-  onDetailsClick: () => { }
-};
-
-export default InfoBlockWrapper;
+import React, { useMemo } from 'react';
+import styles from './InfoBlockWrapper.styl';
+import classnames from 'classnames';
+
+interface IInfoBlockWrapperProps {
+  containerClassName?: string;
+  childrenClassName?: string;
+  title: string;
+  titleDetails?: string;
+  onDetailsClick?: () => void;
+  children?: React.ReactNode;
+}
+
+const InfoBlockWrapper: React.FunctionComponent<IInfoBlockWrapperProps> = (props) => {
+  const { containerClassName, childrenClassName, title, titleDetails, children, onDetailsClick } = props;
+  const containerClasses = classnames(styles.container, containerClassName);
+  const childrenWrap = classnames(styles.contentNoWrap, childrenClassName);
+
+  const renderSliderItems = useMemo(
+    () => {
+      return (
+        <div className={containerClasses}>
+          <div className={styles.headerWrap}>
+            <h3 className={styles.title}>{title}</h3>
+            {titleDetails ? <span className={styles.compareNow} onClick={onDetailsClick}>{titleDetails}</span> : ''}
+          </div>
+          <div className={childrenWrap}>{children}</div>
+        </div>
+      );
+    },
+    [children]
+  );
+
+  return renderSliderItems;
+
+};
+
+InfoBlockWrapper.defaultProps = {
+  containerClassName: '',
+  childrenClassName: '',
+  title: '',
+  titleDetails: '',
+  onDetailsClick: () => { }
+};
+
+export default InfoBlockWrapper;

package/compat/Loader/Loader.styl

@@ -1,39 +1,39 @@
-@import '../legacy-theme/theme.styl'
-
-@keyframes auto_de_loader {
-  0%   { transform: rotate(0deg)   }
-  100% { transform: rotate(360deg) }
-}
-
-.loader
-  border-style: solid
-  border-color: $primary #E6E6E6 #E6E6E6 #E6E6E6
-  border-radius: 50%
-  box-sizing: border-box
-  animation: auto_de_loader 1.5s linear infinite
-
-.loader.tiny
-  border-width: 2px
-  width: 15px
-  height: 15px
-
-.loader.small
-  border-width: 3px
-  width: 25px
-  height: 25px
-
-.loader.medium
-  border-width: 5px
-  height: 60px
-  width: 60px
-
-.loader.large
-  border-width: 10px
-  height: 110px
-  width: 110px
-
-.loader.fluid
-  border-width: 5px
-  width: 100%
-  height: 100%
-
+@import '../legacy-theme/theme.styl'
+
+@keyframes auto_de_loader {
+  0%   { transform: rotate(0deg)   }
+  100% { transform: rotate(360deg) }
+}
+
+.loader
+  border-style: solid
+  border-color: $primary #E6E6E6 #E6E6E6 #E6E6E6
+  border-radius: 50%
+  box-sizing: border-box
+  animation: auto_de_loader 1.5s linear infinite
+
+.loader.tiny
+  border-width: 2px
+  width: 15px
+  height: 15px
+
+.loader.small
+  border-width: 3px
+  width: 25px
+  height: 25px
+
+.loader.medium
+  border-width: 5px
+  height: 60px
+  width: 60px
+
+.loader.large
+  border-width: 10px
+  height: 110px
+  width: 110px
+
+.loader.fluid
+  border-width: 5px
+  width: 100%
+  height: 100%
+

package/compat/Loader/Loader.tsx

@@ -1,32 +1,32 @@
-import * as React from 'react';
-import styles from './Loader.styl';
-import classnames from 'classnames';
-
-export type LoaderSize = 'tiny' | 'small' | 'medium' | 'large';
-
-export interface ILoaderProps {
-  className?: string;
-  size?: LoaderSize;
-  fluid?: boolean;
-}
-
-const Loader: React.FC<ILoaderProps> = ({ className, size, fluid }) => {
-  const classNames = classnames(
-    styles.loader,
-    { [styles[size]]: !fluid },
-    { [styles.fluid]: fluid },
-    className
-  );
-
-  return (
-    <div className={classNames} />
-  );
-};
-
-Loader.defaultProps = {
-  className: '',
-  size: 'medium',
-  fluid: false
-};
-
-export default Loader;
+import * as React from 'react';
+import styles from './Loader.styl';
+import classnames from 'classnames';
+
+export type LoaderSize = 'tiny' | 'small' | 'medium' | 'large';
+
+export interface ILoaderProps {
+  className?: string;
+  size?: LoaderSize;
+  fluid?: boolean;
+}
+
+const Loader: React.FC<ILoaderProps> = ({ className, size, fluid }) => {
+  const classNames = classnames(
+    styles.loader,
+    { [styles[size]]: !fluid },
+    { [styles.fluid]: fluid },
+    className
+  );
+
+  return (
+    <div className={classNames} />
+  );
+};
+
+Loader.defaultProps = {
+  className: '',
+  size: 'medium',
+  fluid: false
+};
+
+export default Loader;

package/compat/MagnifyGlass/MagnifyGlass.styl

@@ -1,33 +1,33 @@
-@import "../legacy-theme/mixins.styl"
-
-.magnifier
-  position: relative
-
-  &.withZoom
-    cursor: none
-
-.mgGlass
-  position: absolute
-  z-index: 1
-  transition: opacity 0.3s
-  background: #e5e5e5 no-repeat
-  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25)
-  pointer-events: none
-  opacity: 0
-  visibility: hidden
-  border-radius: 50%
-  transition: 0.3s opacity linear, 0.3s visibility linear
-
-  &.visible
-    opacity: 1
-    visibility: visible
-
-.mgWrapper
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translate(-50%, -50%)
-  pointer-events: none
-
-  +media-tablet-down()
-    display none
+@import "../legacy-theme/mixins.styl"
+
+.magnifier
+  position: relative
+
+  &.withZoom
+    cursor: none
+
+.mgGlass
+  position: absolute
+  z-index: 1
+  transition: opacity 0.3s
+  background: #e5e5e5 no-repeat
+  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25)
+  pointer-events: none
+  opacity: 0
+  visibility: hidden
+  border-radius: 50%
+  transition: 0.3s opacity linear, 0.3s visibility linear
+
+  &.visible
+    opacity: 1
+    visibility: visible
+
+.mgWrapper
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  pointer-events: none
+
+  +media-tablet-down()
+    display none