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

package/compat/withLabel/withLabel.styl

@@ -1,33 +1,33 @@
-@import '../legacy-theme/theme.styl'
-
-.wrapper
-  position: relative
-  border: 1px solid $mantisGreen
-  box-sizing: border-box
-  overflow: hidden
-.wrapper::after
-  content: ''
-
-.label
-  position: absolute
-  top: -32px
-  left: -32px
-  z-index: $zIndex-dropdown
-  display: flex
-  justify-content: center
-  align-items: flex-end
-  box-sizing: border-box
-  width: 65px
-  height: 65px
-  padding-bottom: 5px
-  transform: rotate(-45deg)
-  color: white
-  background-color: $mantisGreen
-  text-transform uppercase
-  font-family: $font-style-arial
-  font-weight: bold
-  font-size: 12px
-
-
-
-
+@import '../legacy-theme/theme.styl'
+
+.wrapper
+  position: relative
+  border: 1px solid $mantisGreen
+  box-sizing: border-box
+  overflow: hidden
+.wrapper::after
+  content: ''
+
+.label
+  position: absolute
+  top: -32px
+  left: -32px
+  z-index: $zIndex-dropdown
+  display: flex
+  justify-content: center
+  align-items: flex-end
+  box-sizing: border-box
+  width: 65px
+  height: 65px
+  padding-bottom: 5px
+  transform: rotate(-45deg)
+  color: white
+  background-color: $mantisGreen
+  text-transform uppercase
+  font-family: $font-style-arial
+  font-weight: bold
+  font-size: 12px
+
+
+
+

package/compat/withLabel/withLabel.tsx

@@ -1,44 +1,44 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-import styles from './withLabel.styl';
-
-export interface IWithLabelProps {
-  labelVisible?: boolean;
-  labelText?: string;
-
-  labelWrapperClassName?: string;
-  labelClassName?: string;
-  [key: string]: any;
-}
-
-// TODO: Correct types from WrappedComponent
-// TODO: Correct default props for WrappedComponent
-
-// This component adds TOP label(left-top corner) and green border.
-// But actual purpose of this components should be
-// adding the labels over the Image and ImageSlider with price quality texts,
-// with vehicle condition texts
-
-// TODO: Re-work component to fit requirements described above.
-export default function withLabel(WrappedComponent: any) {
-  const WithLabel: React.FunctionComponent<IWithLabelProps> = (props) => {
-    const { labelVisible, labelText, labelWrapperClassName, labelClassName, ...rest } = props;
-
-    if (!labelVisible) return <WrappedComponent {...rest} />;
-
-    return (
-      <div className={classnames(styles.wrapper, labelWrapperClassName)}>
-        <strong className={classnames(styles.label, labelClassName)}>{labelText}</strong>
-        <WrappedComponent {...rest} />
-      </div>
-    );
-  };
-
-  WithLabel.defaultProps = {
-    visible: true,
-    labelText: 'top'
-  };
-
-  return WithLabel;
-}
+import * as React from 'react';
+import classnames from 'classnames';
+
+import styles from './withLabel.styl';
+
+export interface IWithLabelProps {
+  labelVisible?: boolean;
+  labelText?: string;
+
+  labelWrapperClassName?: string;
+  labelClassName?: string;
+  [key: string]: any;
+}
+
+// TODO: Correct types from WrappedComponent
+// TODO: Correct default props for WrappedComponent
+
+// This component adds TOP label(left-top corner) and green border.
+// But actual purpose of this components should be
+// adding the labels over the Image and ImageSlider with price quality texts,
+// with vehicle condition texts
+
+// TODO: Re-work component to fit requirements described above.
+export default function withLabel(WrappedComponent: any) {
+  const WithLabel: React.FunctionComponent<IWithLabelProps> = (props) => {
+    const { labelVisible, labelText, labelWrapperClassName, labelClassName, ...rest } = props;
+
+    if (!labelVisible) return <WrappedComponent {...rest} />;
+
+    return (
+      <div className={classnames(styles.wrapper, labelWrapperClassName)}>
+        <strong className={classnames(styles.label, labelClassName)}>{labelText}</strong>
+        <WrappedComponent {...rest} />
+      </div>
+    );
+  };
+
+  WithLabel.defaultProps = {
+    visible: true,
+    labelText: 'top'
+  };
+
+  return WithLabel;
+}

package/compat/withStats/withStats.styl

@@ -1,174 +1,174 @@
-@import '../legacy-theme/mixins.styl'
-
-$xs-height = 24px
-$sm-height = 30px
-$md-height = 34px
-$indent = 10px
-
-.wrapper
-  position: relative
-
-.controls
-  position: absolute
-  right: 0
-  bottom: $indent;
-  width: 100%
-  display: flex
-  flex-wrap: wrap
-  justify-content: flex-start
-  font-size: $font-size-default
-  padding: 0 16px
-  box-sizing: border-box;
-  gap: 0.6em;
-  user-select: none;
-
-  +media-tablet-landscape-up()
-    padding: 0 6px
-
-  &::after
-    position: absolute;
-    width: calc(100% - 20px);
-    height: 1px;
-    left: 10px;
-    bottom: -10px;
-    background-color: rgba(76,78,100,0.12);
-
-.section
-  background-color: rgba(255, 255, 255, 0.75);
-  border-radius: 2px
-  display: flex
-  line-height: 1;
-  align-items: center
-  justify-content: space-around;
-  height: inherit;
-
-  &:last-of-type
-    margin-left: auto
-
-.starButton
-  cursor: pointer
-  fill: white
-  margin-right: .6em
-  flex-shrink: 0
-  margin-bottom: $indent
-  z-index: 1
-  path
-    stroke: $skyBlue
-  &.starButtonFavored
-    fill: $skyBlue
-    path
-      stroke: white
-
-.statsViewsCount
-.statsFavoritesCount
-  display: flex
-  align-items: center
-
-.statsFavoritesCount
-  padding-left: 0.8em
-
-.clickable
-  cursor: pointer
-
-.statsEyeIcon
-  margin-right: 5px
-  width: 1.5em
-  height: 1.5em
-
-.statsStarIcon
-  margin-right: 5px
-  margin-bottom: 3px
-  width: 20px
-  height: 20px
-  fill: rgb(100, 100, 100)
-  transform:scale(0.8)
-
-.accented
-  color: $primary
-  fill: $primary
-
-.xs
-  height: $xs-height
-  .section
-    padding: 0 5px
-    font-size: 12px
-    color: rgba(51, 51, 51, 0.8);
-
-  .starButton
-    width: 1.5em
-    height: 1.5em
-
-.sm
-  height: $sm-height
-  .section
-    padding: 0 6px
-    font-size: 16px
-
-  .cameraIcon
-    width: 24px
-    height: 18px
-    margin-right: 5px
-
-  .starButton
-    width: 2.4em
-    height: 2.3em
-
-.md
-  height: $md-height
-
-  .section
-    padding: 0 6px
-    font-size: 16px
-
-  .cameraIcon
-    width: 24px
-    height: 18px
-    margin-right: 5px
-
-  .starButton
-    width: 2.4em
-    height: 2.3em
-
-.topWrapper
-  position: absolute
-  left: 16px
-  right: 16px
-  top: 5px
-  user-select: none
-  z-index: 1
-  display: flex;
-  gap: 10px;
-
-  +media-tablet-landscape-up()
-    left: 6px
-    right: 6px
-
-  &.fourBadges
-    +media-tablet-landscape-up()
-      gap: 6px
-      .badgeItem
-        height: 18px
-        font-size: 10px
-        min-width: 30px
-      .badgeFull
-        display: none
-      .badgeShort
-        display: inline
-
-.badgeItem
-  // hook class for compact-mode overrides
-
-.badgeFull
-  display: inline
-
-.badgeShort
-  display: none
-
-.priceDifferencePerCent
-  margin-left: auto;
-
-.new
-  text-transform: uppercase
-
-.imagesCount
-  margin-left: 0 !important
+@import '../legacy-theme/mixins.styl'
+
+$xs-height = 24px
+$sm-height = 30px
+$md-height = 34px
+$indent = 10px
+
+.wrapper
+  position: relative
+
+.controls
+  position: absolute
+  right: 0
+  bottom: $indent;
+  width: 100%
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  font-size: $font-size-default
+  padding: 0 16px
+  box-sizing: border-box;
+  gap: 0.6em;
+  user-select: none;
+
+  +media-tablet-landscape-up()
+    padding: 0 6px
+
+  &::after
+    position: absolute;
+    width: calc(100% - 20px);
+    height: 1px;
+    left: 10px;
+    bottom: -10px;
+    background-color: rgba(76,78,100,0.12);
+
+.section
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 2px
+  display: flex
+  line-height: 1;
+  align-items: center
+  justify-content: space-around;
+  height: inherit;
+
+  &:last-of-type
+    margin-left: auto
+
+.starButton
+  cursor: pointer
+  fill: white
+  margin-right: .6em
+  flex-shrink: 0
+  margin-bottom: $indent
+  z-index: 1
+  path
+    stroke: $skyBlue
+  &.starButtonFavored
+    fill: $skyBlue
+    path
+      stroke: white
+
+.statsViewsCount
+.statsFavoritesCount
+  display: flex
+  align-items: center
+
+.statsFavoritesCount
+  padding-left: 0.8em
+
+.clickable
+  cursor: pointer
+
+.statsEyeIcon
+  margin-right: 5px
+  width: 1.5em
+  height: 1.5em
+
+.statsStarIcon
+  margin-right: 5px
+  margin-bottom: 3px
+  width: 20px
+  height: 20px
+  fill: rgb(100, 100, 100)
+  transform:scale(0.8)
+
+.accented
+  color: $primary
+  fill: $primary
+
+.xs
+  height: $xs-height
+  .section
+    padding: 0 5px
+    font-size: 12px
+    color: rgba(51, 51, 51, 0.8);
+
+  .starButton
+    width: 1.5em
+    height: 1.5em
+
+.sm
+  height: $sm-height
+  .section
+    padding: 0 6px
+    font-size: 16px
+
+  .cameraIcon
+    width: 24px
+    height: 18px
+    margin-right: 5px
+
+  .starButton
+    width: 2.4em
+    height: 2.3em
+
+.md
+  height: $md-height
+
+  .section
+    padding: 0 6px
+    font-size: 16px
+
+  .cameraIcon
+    width: 24px
+    height: 18px
+    margin-right: 5px
+
+  .starButton
+    width: 2.4em
+    height: 2.3em
+
+.topWrapper
+  position: absolute
+  left: 16px
+  right: 16px
+  top: 5px
+  user-select: none
+  z-index: 1
+  display: flex;
+  gap: 10px;
+
+  +media-tablet-landscape-up()
+    left: 6px
+    right: 6px
+
+  &.fourBadges
+    +media-tablet-landscape-up()
+      gap: 6px
+      .badgeItem
+        height: 18px
+        font-size: 10px
+        min-width: 30px
+      .badgeFull
+        display: none
+      .badgeShort
+        display: inline
+
+.badgeItem
+  // hook class for compact-mode overrides
+
+.badgeFull
+  display: inline
+
+.badgeShort
+  display: none
+
+.priceDifferencePerCent
+  margin-left: auto;
+
+.new
+  text-transform: uppercase
+
+.imagesCount
+  margin-left: 0 !important