@eturnity/eturnity_reusable_components 8.7.5-EPDM-12729.0 → 8.7.5-EPDM-9631.1

package/src/stories/page.css

@@ -1,69 +1,69 @@
-.storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
-}
-
-.storybook-page h2 {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  text-decoration: none;
-  color: #1ea7fd;
-}
-
-.storybook-page ul {
-  padding-left: 30px;
-  margin: 1em 0;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}
+.storybook-page {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+.storybook-page h2 {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+.storybook-page ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.storybook-page .tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/utils/index.js

@@ -1,12 +1,12 @@
-export function debounce(fn, wait) {
-  let timer
-  return function (...args) {
-    if (timer) {
-      clearTimeout(timer)
-    }
-    const context = this
-    timer = setTimeout(() => {
-      fn.apply(context, args)
-    }, wait)
-  }
-}
+export function debounce(fn, wait) {
+  let timer
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    const context = this
+    timer = setTimeout(() => {
+      fn.apply(context, args)
+    }, wait)
+  }
+}

package/src/assets/svgIcons/reorder_string.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 0.646484L13.3536 2.64648L13.7071 3.00004L13.3536 3.35359L11.3536 5.35359L10.6464 4.64648L11.7929 3.50004H9.50093L7.756 5.34373L7.02971 4.65635L8.92257 2.65635L9.0705 2.50004H9.28571H11.7929L10.6464 1.35359L11.3536 0.646484ZM0 3.50004H3.49625L8.91932 9.34026L9.06768 9.50004H9.28571H11.7929L10.6464 10.6465L11.3536 11.3536L13.3536 9.35359L13.7071 9.00004L13.3536 8.64648L11.3536 6.64648L10.6464 7.35359L11.7929 8.50004H9.50375L4.08068 2.65981L3.93232 2.50004H3.71429H0V3.50004ZM0 8.50004H3.49042L5.12703 6.66703L5.87297 7.33305L4.08725 9.33305L3.93815 9.50004H3.71429H0V8.50004Z" fill="#263238"/>
-</svg>

package/src/assets/svgIcons/switch_polarity.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.50008 1V3L5.50008 3V4L3.50008 4V6H2.50008V4L0.500075 4L0.500076 3L2.50008 3V1H3.50008Z" fill="#263238"/>
-<path d="M8.50008 3L13.5001 3V4L8.50008 4V3Z" fill="#263238"/>
-<path d="M3.70718 8.5L2.20718 10H11.793L10.293 8.5L11.0001 7.79289L13.7072 10.5L11.0001 13.2071L10.293 12.5L11.793 11H2.20718L3.70718 12.5L3.00008 13.2071L0.292969 10.5L3.00008 7.79289L3.70718 8.5Z" fill="#263238"/>
-</svg>

package/src/assets/svgIcons/transparent_warning.svg

@@ -1,4 +0,0 @@
-<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20" cy="20" fill="#FFFFFF" r="7"></circle>
-<path d="M20 27C18.6155 27 17.2622 26.5895 16.111 25.8203C14.9599 25.0511 14.0627 23.9579 13.5328 22.6788C13.003 21.3997 12.8644 19.9922 13.1345 18.6344C13.4046 17.2765 14.0713 16.0292 15.0503 15.0503C16.0292 14.0713 17.2765 13.4046 18.6344 13.1345C19.9922 12.8644 21.3997 13.003 22.6788 13.5328C23.9579 14.0627 25.0511 14.9599 25.8203 16.111C26.5895 17.2622 27 18.6155 27 20C27 21.8565 26.2625 23.637 24.9497 24.9497C23.637 26.2625 21.8565 27 20 27V27ZM21.3125 15.4442H18.6875V20.6942H21.3125V15.4442ZM20 21.9308C19.7404 21.9308 19.4867 22.0078 19.2708 22.152C19.055 22.2962 18.8868 22.5012 18.7874 22.7411C18.6881 22.9809 18.6621 23.2448 18.7127 23.4994C18.7634 23.754 18.8884 23.9879 19.0719 24.1714C19.2555 24.355 19.4893 24.48 19.7439 24.5306C19.9985 24.5813 20.2624 24.5553 20.5023 24.4559C20.7421 24.3566 20.9471 24.1884 21.0913 23.9725C21.2355 23.7567 21.3125 23.5029 21.3125 23.2433C21.312 22.8954 21.1736 22.5618 20.9276 22.3158C20.6815 22.0697 20.348 21.9313 20 21.9308V21.9308Z" fill="#FFFFFF"></path>
-</svg>

package/src/assets/svgIcons/warning_triangle.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.967 14H1.03186C0.274257 14 -0.208194 13.1903 0.152385 12.5241L6.11997 1.49695C6.49811 0.798217 7.50078 0.798216 7.87892 1.49695L13.8465 12.5241C14.2071 13.1903 13.7246 14 12.967 14ZM5.97999 3.4039H8.01887V8.44968H5.97999V3.4039ZM6.99965 12.4864C7.73158 12.4864 8.32493 11.899 8.32493 11.1745C8.32493 10.4499 7.73158 9.86256 6.99965 9.86256C6.26772 9.86256 5.67438 10.4499 5.67438 11.1745C5.67438 11.899 6.26772 12.4864 6.99965 12.4864Z" fill="#3C474C"/>
-</svg>

package/src/components/infoLabel/index.vue

@@ -1,63 +0,0 @@
-<template>
-  <PageContainer :info-type="infoType">
-    <LabelText>{{ getLabelText }}</LabelText>
-  </PageContainer>
-</template>
-
-<script>
-  // import InfoLabel from "@eturnity/eturnity_reusable_components/src/components/infoLabel"
-  import styled from 'vue3-styled-components'
-
-  const PageAttrs = {
-    infoType: 'String',
-  }
-  const PageContainer = styled('div', PageAttrs)`
-    background-color: ${(props) =>
-      props.infoType === 'warning'
-        ? props.theme.colors.yellow4
-        : props.infoType === 'error'
-        ? props.theme.colors.red4
-        : props.theme.colors.blue4};
-    padding: 4px 8px;
-    border-radius: 8px;
-    font-size: 12px;
-    font-weight: 400;
-    color: ${(props) => props.theme.colors.black};
-  `
-
-  const LabelText = styled.div``
-
-  export default {
-    name: 'InfoLabel',
-    components: {
-      PageContainer,
-      LabelText,
-    },
-    props: {
-      infoType: {
-        type: String,
-        default: 'hint', // hint, warning, error
-      },
-      labelText: {
-        type: String,
-        default: '',
-      },
-    },
-    computed: {
-      getLabelText() {
-        if (this.labelText) {
-          return this.labelText
-        }
-        const infoType = this.infoType.toLowerCase()
-        switch (infoType) {
-          case 'warning':
-            return this.$gettext('Warning')
-          case 'error':
-            return this.$gettext('error')
-          default:
-            return this.$gettext('info')
-        }
-      },
-    },
-  }
-</script>

package/src/components/panelRangeInfo/index.vue

@@ -1,196 +0,0 @@
-<template>
-  <Container :width="width">
-    <MainLine />
-    <MainLineHighlight :max-percent="maxPercent" :min-percent="minPercent" />
-    <TopValueContainer :position="valuePercent + '%'">
-      <TextWrapper :background-color="arrowColor">{{ value }}</TextWrapper>
-      <Arrow :background-color="arrowColor" />
-      <VerticalMarkerArrow :color="colorVerticalMarkerArrow" />
-    </TopValueContainer>
-    <BottomValueContainer :position="minPercent + '%'">
-      <TextWrapper>{{ minValue }}</TextWrapper>
-      <VerticalMarker side="bottom" />
-    </BottomValueContainer>
-    <BottomValueContainer :position="maxPercent + '%'">
-      <TextWrapper>{{ maxValue }}</TextWrapper>
-      <VerticalMarker side="bottom" />
-    </BottomValueContainer>
-  </Container>
-</template>
-
-<script>
-  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
-  //To Use:
-  // <progress-bar
-  //   fillColor="#000"
-  //   backgroundColor="#888"
-  //   minWidth="150px"
-  //   maxWidth="100%"
-  //   :fillProgress="50" //should be a number for percent
-  //   stepNumber="4"
-  //   :labelText="translate('step')"
-  // />
-  import styled from 'vue3-styled-components'
-  const Container = styled.div`
-    position: relative;
-    display: flex;
-    height: 47px;
-    width: ${(props) => props.width};
-  `
-  const TopValueContainer = styled('div', { position: String })`
-    font-size: 11px;
-    left: ${(props) => props.position};
-    position: absolute;
-    display: flex;
-    justify-content: center
-    width: 0px;
-    color:${(props) => props.theme.colors.black};
-    item-align: center;
-
-  `
-  const BottomValueContainer = styled('div', { position: String })`
-    font-size: 12px;
-    left: ${(props) => props.position};
-    width: 0px;
-    bottom: -2px;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    item-align: center;
-    border-radius: 4px;
-    color: white;
-  `
-  const TextWrapper = styled('div', { backgroundColor: String })`
-    padding: 2px 6px;
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor] || props.backgroundColor};
-    border-radius: 4px;
-  `
-  const Arrow = styled('div', { backgroundColor: String })`
-    position: absolute;
-    bottom: -10px;
-    left: calc(50% - 6px);
-    width: 0;
-    height: 0;
-    border: 6px solid transparent;
-    border-top-color: ${(props) =>
-      props.theme.colors[props.backgroundColor] || props.backgroundColor};
-    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
-  `
-  const MainLine = styled.div`
-    display: block;
-    position: absolute;
-    bottom: 16px;
-    height: 4px;
-    width: 100%;
-    border-radius: 4px;
-    background-color: ${(props) => props.theme.colors.grey4};
-  `
-  const MainLineHighlight = styled('div', {
-    minPercent: Number,
-    maxPercent: Number,
-  })`
-    display: block;
-    position: absolute;
-    left: ${(props) => props.minPercent + '%'};
-    right: ${(props) => 100 - props.maxPercent + '%'};
-    bottom: 16px;
-    height: 4px;
-    background-color: white;
-  `
-  const VerticalMarker = styled('div')`
-    position: absolute;
-    width: 1px;
-    height: 8px;
-    background-color: white;
-    display: inline-block;
-    top: -6px;
-    left: 0px;
-  `
-  const VerticalMarkerArrow = styled('div', { color: String })`
-    position: absolute;
-    width: 1px;
-    height: 4px;
-    background-color: ${(props) => props.color};
-    display: inline-block;
-    bottom: -14px;
-    left: 0px;
-  `
-  export default {
-    name: 'ProgressBar',
-    components: {
-      Container,
-      MainLineHighlight,
-      Arrow,
-      TopValueContainer,
-      BottomValueContainer,
-      MainLine,
-      VerticalMarker,
-      VerticalMarkerArrow,
-      TextWrapper,
-    },
-    props: {
-      minValue: {
-        required: true,
-        type: Number,
-      },
-      maxValue: {
-        required: true,
-        type: Number,
-      },
-      value: {
-        required: true,
-        type: Number,
-      },
-      arrowColor: {
-        required: false,
-        type: String,
-        default: 'white',
-      },
-      width: {
-        required: false,
-        type: String,
-        default: null,
-      },
-    },
-    data() {
-      return {}
-    },
-    computed: {
-      minPercent() {
-        if (this.maxValue === this.minValue) {
-          return 50
-        } else {
-          return 30
-        }
-      },
-      maxPercent() {
-        if (this.maxValue === this.minValue) {
-          return 50
-        } else {
-          return 70
-        }
-      },
-      valuePercent() {
-        let percent
-        if (this.maxValue === this.minValue) {
-          percent = this.minPercent + 10 * (this.value - this.minValue)
-        } else {
-          percent =
-            this.minPercent +
-            ((this.maxPercent - this.minPercent) /
-              (this.maxValue - this.minValue)) *
-              (this.value - this.minValue)
-        }
-        return Math.max(0, Math.min(100, percent))
-      },
-      colorVerticalMarkerArrow() {
-        if (this.value < this.maxValue && this.value > this.minValue) {
-          return 'black'
-        } else {
-          return 'white'
-        }
-      },
-    },
-  }
-</script>