@bytebrand/fe-ui-core 4.8.26 → 4.8.28

package/source/components/_common/IconSVG/SVG/vehicle/Wrench.tsx

@@ -1,17 +1,17 @@
-/* tslint:disable */
-import * as React from 'react';
-
-const SvgWrench = (props: any) => (
-  <svg
-    viewBox="0 0 25 25"
-    width="1em"
-    height="1em"
-    fill="none"
-    {...props}
-  >
-    <path d="M9.87417 14.2384C9.40162 14.3877 8.88305 14.4726 8.29005 14.4939C6.85196 14.5456 5.89132 14.0531 4.76053 13.1105C3.65313 12.1875 3.19045 11.3753 2.8193 9.99791C2.62655 9.28259 2.66923 8.33752 2.76082 7.56829C2.83338 6.95879 3.55404 6.74059 3.99245 7.17018L6.54788 9.67417C6.77147 9.87177 7.26503 10.0315 7.54876 10.1113C7.68679 10.1501 7.83269 10.1434 7.96909 10.0992L8.97132 9.7744C9.20887 9.69742 9.39598 9.51256 9.47583 9.27596L9.8009 8.31281C9.84876 8.17102 9.85602 8.01858 9.81304 7.87524C9.73058 7.60025 9.57149 7.14315 9.37779 6.95279L6.52159 4.37797C6.06168 3.96337 6.24219 3.22478 6.85285 3.12228C7.68554 2.98253 8.73347 2.88637 9.52538 3.08099C10.9355 3.42753 11.738 3.91667 12.702 4.9831C13.7881 6.18475 14.3436 7.44288 14.2902 8.78742C14.2279 10.357 13.6196 11.2709 12.5255 12.4188C11.6683 13.3182 10.8743 13.9224 9.87417 14.2384ZM9.87417 14.2384L17.5109 21.2887C17.5263 21.3029 17.5421 21.3164 17.559 21.3286C17.6059 21.3624 17.7106 21.4326 17.8048 21.4587C17.9309 21.4936 18.296 21.5836 18.5257 21.5838C19.3892 21.5846 19.9124 21.195 20.4669 20.5463C20.9849 19.9403 21.2446 19.4279 21.3493 18.6441C21.3911 18.3308 21.2792 17.8073 21.2319 17.6412C21.197 17.5185 21.1071 17.391 21.0624 17.3327C21.0455 17.3105 21.0263 17.2904 21.0061 17.2711L13.9187 10.5036" stroke="#616376"/>
-  </svg>
-);
-
-export default SvgWrench;
-/* tslint:enable */
+/* tslint:disable */
+import * as React from 'react';
+
+const SvgWrench = (props: any) => (
+  <svg
+    viewBox="0 0 25 25"
+    width="1em"
+    height="1em"
+    fill="none"
+    {...props}
+  >
+    <path d="M9.87417 14.2384C9.40162 14.3877 8.88305 14.4726 8.29005 14.4939C6.85196 14.5456 5.89132 14.0531 4.76053 13.1105C3.65313 12.1875 3.19045 11.3753 2.8193 9.99791C2.62655 9.28259 2.66923 8.33752 2.76082 7.56829C2.83338 6.95879 3.55404 6.74059 3.99245 7.17018L6.54788 9.67417C6.77147 9.87177 7.26503 10.0315 7.54876 10.1113C7.68679 10.1501 7.83269 10.1434 7.96909 10.0992L8.97132 9.7744C9.20887 9.69742 9.39598 9.51256 9.47583 9.27596L9.8009 8.31281C9.84876 8.17102 9.85602 8.01858 9.81304 7.87524C9.73058 7.60025 9.57149 7.14315 9.37779 6.95279L6.52159 4.37797C6.06168 3.96337 6.24219 3.22478 6.85285 3.12228C7.68554 2.98253 8.73347 2.88637 9.52538 3.08099C10.9355 3.42753 11.738 3.91667 12.702 4.9831C13.7881 6.18475 14.3436 7.44288 14.2902 8.78742C14.2279 10.357 13.6196 11.2709 12.5255 12.4188C11.6683 13.3182 10.8743 13.9224 9.87417 14.2384ZM9.87417 14.2384L17.5109 21.2887C17.5263 21.3029 17.5421 21.3164 17.559 21.3286C17.6059 21.3624 17.7106 21.4326 17.8048 21.4587C17.9309 21.4936 18.296 21.5836 18.5257 21.5838C19.3892 21.5846 19.9124 21.195 20.4669 20.5463C20.9849 19.9403 21.2446 19.4279 21.3493 18.6441C21.3911 18.3308 21.2792 17.8073 21.2319 17.6412C21.197 17.5185 21.1071 17.391 21.0624 17.3327C21.0455 17.3105 21.0263 17.2904 21.0061 17.2711L13.9187 10.5036" stroke="#616376"/>
+  </svg>
+);
+
+export default SvgWrench;
+/* tslint:enable */

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

@@ -1,142 +1,142 @@
-import React from 'react';
-import styles from './Image.story.styl'
-import { storiesOf } from '@storybook/react';
-
-import Image from './Image.tsx';
-import {COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES} from '../../../framework/constants';
-
-const SRC_HORIZONTAL = 'https://placekitten.com/150/100';
-const SRC_SQUARE = 'https://placekitten.com/150/150';
-const SRC_VERTICAL = 'https://placekitten.com/100/150';
-
-const SRC_SMALL = 'https://dummyimage.com/3000x2000/000000/fff.png&text=SMALL+IMAGE';
-const SRC_LARGE = 'https://dummyimage.com/3000x2000/eb00eb/ffffff.png&text=LARGE+IMAGE';
-
-storiesOf('_Common_UI', module)
-  .add('Image', () => (
-    <div style={CONTAINER_STYLES}>
-      <div style={COLUMN_STYLES}>
-
-        <div style={ROW_STYLES}>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <h2 className={styles.title}>{`<Image width='100%' ratioW={4} ratioH={3} />`}</h2>
-              <div className={styles.row}>
-                <div className={styles.col}>
-                  <Image srcSmall={SRC_SMALL} srcLarge={SRC_LARGE} width='500px' ratioW={4} ratioH={3} />
-                </div>
-              </div>
-            </div>
-            {/* <div className={styles.col}>
-              <h2 className={styles.title}>{`<Image width='100%' height={200} />`}</h2>
-              <div className={styles.row}>
-                <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
-                  <Image src={SRC_VERTICAL} width='100%' height={200} />
-                </div>
-              </div>
-            </div> */}
-          </div>
-        </div>
-
-        {/* <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={200} ratioW={4} ratioH={3} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={200} ratioW={4} ratioH={3} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={200} ratioW={4} ratioH={3} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={200} ratioW={4} ratioH={3} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={200} ratioW={11} ratioH={5} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={200} ratioW={11} ratioH={5} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={200} ratioW={11} ratioH={5} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={200} ratioW={11} ratioH={5} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={250} height={200} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={250} height={200} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={250} height={200} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={250} height={200} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={200} height={250} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={200} height={250} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={200} height={250} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={200} height={250} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>{`<Image width={200} height={200} />`}</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src={SRC_HORIZONTAL} width={200} height={200} />
-              <div className={styles.label}>(horizontal image 150x100)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_SQUARE} width={200} height={200} />
-              <div className={styles.label}>(square image 150x150)</div>
-            </div>
-            <div className={styles.col}>
-              <Image src={SRC_VERTICAL} width={200} height={200} />
-              <div className={styles.label}>(vertical image 100x150)</div>
-            </div>
-          </div>
-        </div>
-
-        <div style={ROW_STYLES}>
-          <h2 className={styles.title}>Error</h2>
-          <div className={styles.row}>
-            <div className={styles.col}>
-              <Image src='http://wrong.src.url' width={100} height={100} />
-            </div>
-          </div>
-        </div>*/}
-
-      </div>
-    </div>
-  ));
+import React from 'react';
+import styles from './Image.story.styl'
+import { storiesOf } from '@storybook/react';
+
+import Image from './Image.tsx';
+import {COLUMN_STYLES, CONTAINER_STYLES, ROW_STYLES} from '../../../framework/constants';
+
+const SRC_HORIZONTAL = 'https://placekitten.com/150/100';
+const SRC_SQUARE = 'https://placekitten.com/150/150';
+const SRC_VERTICAL = 'https://placekitten.com/100/150';
+
+const SRC_SMALL = 'https://dummyimage.com/3000x2000/000000/fff.png&text=SMALL+IMAGE';
+const SRC_LARGE = 'https://dummyimage.com/3000x2000/eb00eb/ffffff.png&text=LARGE+IMAGE';
+
+storiesOf('_Common_UI', module)
+  .add('Image', () => (
+    <div style={CONTAINER_STYLES}>
+      <div style={COLUMN_STYLES}>
+
+        <div style={ROW_STYLES}>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <h2 className={styles.title}>{`<Image width='100%' ratioW={4} ratioH={3} />`}</h2>
+              <div className={styles.row}>
+                <div className={styles.col}>
+                  <Image srcSmall={SRC_SMALL} srcLarge={SRC_LARGE} width='500px' ratioW={4} ratioH={3} />
+                </div>
+              </div>
+            </div>
+            {/* <div className={styles.col}>
+              <h2 className={styles.title}>{`<Image width='100%' height={200} />`}</h2>
+              <div className={styles.row}>
+                <div className={styles.col} style={{ width: '300px', maxWidth: '100%', margin: '0 auto' }}>
+                  <Image src={SRC_VERTICAL} width='100%' height={200} />
+                </div>
+              </div>
+            </div> */}
+          </div>
+        </div>
+
+        {/* <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={200} ratioW={4} ratioH={3} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={200} ratioW={4} ratioH={3} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={200} ratioW={4} ratioH={3} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={200} ratioW={4} ratioH={3} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={200} ratioW={11} ratioH={5} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={200} ratioW={11} ratioH={5} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={200} ratioW={11} ratioH={5} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={200} ratioW={11} ratioH={5} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={250} height={200} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={250} height={200} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={250} height={200} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={250} height={200} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={200} height={250} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={200} height={250} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={200} height={250} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={200} height={250} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>{`<Image width={200} height={200} />`}</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src={SRC_HORIZONTAL} width={200} height={200} />
+              <div className={styles.label}>(horizontal image 150x100)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_SQUARE} width={200} height={200} />
+              <div className={styles.label}>(square image 150x150)</div>
+            </div>
+            <div className={styles.col}>
+              <Image src={SRC_VERTICAL} width={200} height={200} />
+              <div className={styles.label}>(vertical image 100x150)</div>
+            </div>
+          </div>
+        </div>
+
+        <div style={ROW_STYLES}>
+          <h2 className={styles.title}>Error</h2>
+          <div className={styles.row}>
+            <div className={styles.col}>
+              <Image src='http://wrong.src.url' width={100} height={100} />
+            </div>
+          </div>
+        </div>*/}
+
+      </div>
+    </div>
+  ));

package/source/components/_common/Image/Image.story.styl

@@ -1,18 +1,18 @@
-.title
-  text-align center
-  margin-top 20px
-  margin-bottom 10px
-  font-size 18px
-
-.row
-  display flex
-  justify-content: space-between
-  flex-wrap: nowrap
-  text-align center
-
-.col
-  margin 0 10px
-
-.label
-  font-size 12px
-  margin-top 10px
+.title
+  text-align center
+  margin-top 20px
+  margin-bottom 10px
+  font-size 18px
+
+.row
+  display flex
+  justify-content: space-between
+  flex-wrap: nowrap
+  text-align center
+
+.col
+  margin 0 10px
+
+.label
+  font-size 12px
+  margin-top 10px

package/source/components/_common/Image/Image.styl

@@ -1,109 +1,109 @@
-.container
-  position: relative
-  width: auto
-  height: auto
-  background-color: #F5F5F5
-  box-shadow: 0 0 0 1px rgba(lightgray, 50%)
-  overflow: hidden
-  box-sizing: border-box
-
-  &.loaded
-    box-shadow: none
-
-.loader
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translateX(-50%)
-  color: #333
-
-.image
-  display: block
-  max-width 100%
-  max-height: 100%
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translate(-50%, -50%)
-
-  &.withAnimation
-    opacity: 0
-
-    &.image.wh,
-    &.image.ww
-      animation-name: auto_de_fadeIn
-      animation-duration: 0.2s
-      animation-fill-mode: forwards
-
-.imageSmall
-  opacity: 0
-
-.image.ww
-  width: 100%
-  height: auto
-
-.image.wh
-  width: auto
-  height: 100%
-
-.reload
-  position: absolute
-  top: 50%
-  left: 50%
-  padding-top: 35px
-  transform: translate(-50%, -50%)
-  cursor: pointer
-  display: block
-
-.reload::before
-  content: ''
-  position: absolute
-  display: block
-  width: 30px
-  height: 30px
-  top: 0
-  left: 50%
-  margin-left: -15px
-
-  background-image: url('../../../../media/images/refresh-button.svg')
-  background-repeat: no-repeat
-  background-position: center
-  background-size: contain
-  transition: all 0.2s ease-in-out
-  transform: rotate(0)
-
-.reload:hover::before
-  transform: rotate(360deg)
-
-.preloadImageWrapper
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translate(-50%, -50%)
-  filter: blur(3px)
-  width: 100%
-  height: 100%;
-  background-size: contain
-  background-repeat: no-repeat
-  background-position: 50% 50%
-
-
-.largeImage
-  animation-name: auto_de_fadeIn
-  animation-duration: 2s
-  animation-fill-mode: forwards
-  pointer-events: none
-
-  &.withAnimation
-    opacity: 0
-
-    &.image.wh,
-    &.image.ww
-      animation-name: auto_de_fadeIn
-      animation-duration: 0.2s
-      animation-fill-mode: forwards
-
-@keyframes auto_de_fadeIn {
-  from { opacity: 0 }
-  to   { opacity: 1 }
-}
+.container
+  position: relative
+  width: auto
+  height: auto
+  background-color: #F5F5F5
+  box-shadow: 0 0 0 1px rgba(lightgray, 50%)
+  overflow: hidden
+  box-sizing: border-box
+
+  &.loaded
+    box-shadow: none
+
+.loader
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translateX(-50%)
+  color: #333
+
+.image
+  display: block
+  max-width 100%
+  max-height: 100%
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+
+  &.withAnimation
+    opacity: 0
+
+    &.image.wh,
+    &.image.ww
+      animation-name: auto_de_fadeIn
+      animation-duration: 0.2s
+      animation-fill-mode: forwards
+
+.imageSmall
+  opacity: 0
+
+.image.ww
+  width: 100%
+  height: auto
+
+.image.wh
+  width: auto
+  height: 100%
+
+.reload
+  position: absolute
+  top: 50%
+  left: 50%
+  padding-top: 35px
+  transform: translate(-50%, -50%)
+  cursor: pointer
+  display: block
+
+.reload::before
+  content: ''
+  position: absolute
+  display: block
+  width: 30px
+  height: 30px
+  top: 0
+  left: 50%
+  margin-left: -15px
+
+  background-image: url('../../../../media/images/refresh-button.svg')
+  background-repeat: no-repeat
+  background-position: center
+  background-size: contain
+  transition: all 0.2s ease-in-out
+  transform: rotate(0)
+
+.reload:hover::before
+  transform: rotate(360deg)
+
+.preloadImageWrapper
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+  filter: blur(3px)
+  width: 100%
+  height: 100%;
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: 50% 50%
+
+
+.largeImage
+  animation-name: auto_de_fadeIn
+  animation-duration: 2s
+  animation-fill-mode: forwards
+  pointer-events: none
+
+  &.withAnimation
+    opacity: 0
+
+    &.image.wh,
+    &.image.ww
+      animation-name: auto_de_fadeIn
+      animation-duration: 0.2s
+      animation-fill-mode: forwards
+
+@keyframes auto_de_fadeIn {
+  from { opacity: 0 }
+  to   { opacity: 1 }
+}