@eturnity/eturnity_reusable_components 8.7.5-EPDM-6306.0 → 8.7.5-EPIC-8593

package/src/components/panelRangeInfo/index.vue

@@ -0,0 +1,196 @@
+<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>

package/src/components/selectedOptions/index.vue

@@ -5,12 +5,7 @@
         <TitleContainer>
           <BoxTitle> {{ numberSelected }} {{ selectedText }} </BoxTitle>
           <IconContainer @click="$emit('on-close')">
-            <Icon
-              color="white"
-              cursor="pointer"
-              name="close_for_modals,_tool_tips"
-              size="14px"
-            />
+            <Icon color="white" cursor="pointer" name="close" size="14px" />
           </IconContainer>
         </TitleContainer>
         <DividerContainer>
@@ -91,12 +86,7 @@
         </EmptyText>
         <CloseContainer>
           <IconContainer @click="$emit('on-close')">
-            <Icon
-              color="white"
-              cursor="pointer"
-              name="close_for_modals,_tool_tips"
-              size="14px"
-            />
+            <Icon color="white" cursor="pointer" name="close" size="14px" />
           </IconContainer>
         </CloseContainer>
       </BoxContainer>

package/src/components/selectedOptions/selectedOptions.spec.js

@@ -5,7 +5,7 @@ import theme from '@/assets/theme'
 
 jest.mock('@/components/icon/iconCache.mjs', () => ({
   // need to mock this due to how jest handles import.meta
-  fetchIcon: jest.fn(() => Promise.resolve('close_for_modals,_tool_tips.svg')),
+  fetchIcon: jest.fn(() => Promise.resolve('close.svg')),
 }))
 
 describe('RCSelectedOptions.vue', () => {

package/src/components/tabsHeader/index.vue

@@ -4,80 +4,94 @@
       <TabItem
         v-for="item in tabsData"
         :key="item.id"
+        :full-size="fullSize"
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
       >
-        {{ item.text }}
+        <div>{{ item.text }}</div>
+        <RCIcon v-if="item.hasError" name="warning" size="14px" />
       </TabItem>
     </TabsContainer>
   </PageContainer>
 </template>
 
 <script>
-// import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
-// To use:
-// <RCTabsHeader
-//   :activeTab="activeTabIndex" // should match the 'id'
-// :tabsData="[
-// {
-//   text: 'Tab 1',
-//   id: 0
-// },
-// {
-//   text: 'Tab 1',
-//   id: 1
-// }
-//  ]"
-// />
-import styled from 'vue3-styled-components'
+  // import RCTabsHeader from "@eturnity/eturnity_reusable_components/src/components/tabsHeader"
+  // To use:
+  // <RCTabsHeader
+  //   :activeTab="activeTabIndex" // should match the 'id'
+  // :tabsData="[
+  // {
+  //   text: 'Tab 1',
+  //   id: 0,
+  //   hasError: true // optional
+  // },
+  // {
+  //   text: 'Tab 1',
+  //   id: 1,
+  //   hasError: false // optional
+  // }
+  //  ]"
+  // />
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
 
-const PageContainer = styled.div``
+  const PageContainer = styled.div``
 
-const TabsContainer = styled.div`
-  display: flex;
-  cursor: pointer;
-  width: 100%;
-`
+  const TabsContainer = styled.div`
+    display: flex;
+    cursor: pointer;
+    width: 100%;
 
-const TabAttrs = { isActive: Boolean }
-const TabItem = styled('div', TabAttrs)`
-  padding: 10px 20px;
-  font-size: 14px;
-  font-weight: 700;
-  background-color: ${(props) =>
-    props.isActive ? props.theme.colors.grey5 : props.theme.colors.white};
-  border-top: 3px solid
-    ${(props) =>
-      props.isActive
-        ? props.theme.colors.brightBlue
-        : props.theme.colors.grey4};
-  flex-grow: 1;
-`
+    border-bottom: 1px solid ${(props) => props.theme.colors.purple7};
+  `
 
-export default {
-  name: 'RCTabsHeader',
-  components: {
-    PageContainer,
-    TabsContainer,
-    TabItem
-  },
-  props: {
-    tabsData: {
-      required: true,
-      type: Array
+  const TabAttrs = { isActive: Boolean, fullSize: Boolean }
+  const TabItem = styled('div', TabAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 10px 25px;
+    font-size: 14px;
+    font-weight: 400;
+    color: ${(props) =>
+      props.isActive ? props.theme.colors.purple6 : props.theme.colors.black};
+    border-bottom: ${(props) =>
+      props.isActive ? '1px solid' + props.theme.colors.purple6 : 'unset'};
+    flex-grow: ${(props) => (props.fullSize ? 1 : 0)};
+  `
+
+  export default {
+    name: 'RCTabsHeader',
+    components: {
+      PageContainer,
+      TabsContainer,
+      TabItem,
+      RCIcon,
+    },
+    props: {
+      tabsData: {
+        required: true,
+        type: Array,
+      },
+      activeTab: {
+        required: true,
+        type: Number,
+      },
+      fullSize: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    emits: ['on-tab-change'],
+    methods: {
+      onTabClick({ id }) {
+        if (id === this.activeTab) {
+          return
+        }
+        this.$emit('on-tab-change', id)
+      },
     },
-    activeTab: {
-      required: true,
-      type: Number
-    }
-  },
-  methods: {
-    onTabClick({ id }) {
-      if (id === this.activeTab) {
-        return
-      }
-      this.$emit('on-tab-change', id)
-    }
   }
-}
 </script>

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
+  value = parseFloat(value)
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits: