@bytebrand/fe-ui-core 4.1.125 → 4.1.127

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

@@ -1,75 +1,75 @@
-import React from 'react';
-import styles from '../Image/Image.story.styl'
-
-import { storiesOf } from '@storybook/react';
-
-import Image from '../Image/Image.tsx';
-import withStats from './withStats.tsx'
-import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
-
-const SRC_HORIZONTAL = 'https://placekitten.com/400/300';
-
-const ImageWithStats = withStats(Image);
-
-export class ImageWithStatsContainer extends React.Component {
-  state = {
-    isFavoured: false
-  };
-
-  onFavoriteClick = () => {
-    this.setState({ isFavoured: !this.state.isFavoured })
-  };
-
-  render() {
-    const basicProps = {
-      isFavoured: this.state.isFavoured,
-      imagesCount: 10,
-      statsData: {
-        totalCarImpCount: 15,
-        totalFavCount: 20
-      },
-      statsSize: 'xs',
-      showNewLabel: true,
-      price: {
-        historyPriceDifference: 500,
-        historyPriceDifferencePerCent: 25
-      },
-      onFavoriteClick: this.onFavoriteClick
-    };
-
-    const xsProps = { ...basicProps, ...{ statsSize: 'xs' } };
-    const mdProps = { ...basicProps, ...{ statsSize: 'md', price: { historyPriceDifference: 499, historyPriceDifferencePerCent: 25 } } };
-
-    return (
-      <div style={CONTAINER_STYLES}>
-        <div style={COLUMN_STYLES}>
-          <div style={ROW_STYLES}>
-            <div className={styles.row}>
-              <div className={styles.col}>
-                <h2 className={styles.title}>XS Size</h2>
-                <div className={styles.row}>
-                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-                    <ImageWithStats src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...xsProps} />
-                  </div>
-                </div>
-              </div>
-              <div className={styles.col}>
-                <h2 className={styles.title}>MD Size ({'price difference < 500'})</h2>
-                <div className={styles.row}>
-                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-                    <ImageWithStats src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...mdProps} />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-storiesOf('_Common_UI', module)
-  .add('withStats', () => (
-    <ImageWithStatsContainer />
-  ));
+import React from 'react';
+import styles from '../Image/Image.story.styl'
+
+import { storiesOf } from '@storybook/react';
+
+import Image from '../Image/Image.tsx';
+import withStats from './withStats.tsx'
+import { COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES } from '../../../framework/constants';
+
+const SRC_HORIZONTAL = 'https://placekitten.com/400/300';
+
+const ImageWithStats = withStats(Image);
+
+export class ImageWithStatsContainer extends React.Component {
+  state = {
+    isFavoured: false
+  };
+
+  onFavoriteClick = () => {
+    this.setState({ isFavoured: !this.state.isFavoured })
+  };
+
+  render() {
+    const basicProps = {
+      isFavoured: this.state.isFavoured,
+      imagesCount: 10,
+      statsData: {
+        totalCarImpCount: 15,
+        totalFavCount: 20
+      },
+      statsSize: 'xs',
+      showNewLabel: true,
+      price: {
+        historyPriceDifference: 500,
+        historyPriceDifferencePerCent: 25
+      },
+      onFavoriteClick: this.onFavoriteClick
+    };
+
+    const xsProps = { ...basicProps, ...{ statsSize: 'xs' } };
+    const mdProps = { ...basicProps, ...{ statsSize: 'md', price: { historyPriceDifference: 499, historyPriceDifferencePerCent: 25 } } };
+
+    return (
+      <div style={CONTAINER_STYLES}>
+        <div style={COLUMN_STYLES}>
+          <div style={ROW_STYLES}>
+            <div className={styles.row}>
+              <div className={styles.col}>
+                <h2 className={styles.title}>XS Size</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <ImageWithStats src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...xsProps} />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.col}>
+                <h2 className={styles.title}>MD Size ({'price difference < 500'})</h2>
+                <div className={styles.row}>
+                  <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                    <ImageWithStats src={SRC_HORIZONTAL} width='100%' ratioW={4} ratioH={3} {...mdProps} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+storiesOf('_Common_UI', module)
+  .add('withStats', () => (
+    <ImageWithStatsContainer />
+  ));

package/source/components/_common/withStats/withStats.styl

@@ -1,147 +1,147 @@
-@import '../../../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
-  width: 1.2em
-  height: 1.3em
-
-.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
-
-.priceDifferencePerCent
-  margin-left: auto;
-
-.new
-  text-transform: uppercase
+@import '../../../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
+  width: 1.2em
+  height: 1.3em
+
+.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
+
+.priceDifferencePerCent
+  margin-left: auto;
+
+.new
+  text-transform: uppercase