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

package/src/components/infoText/index.vue

@@ -1,25 +1,48 @@
 <template>
-  <PageContainer ref="container" :type="type">
-    <div
-      ref="icon"
-      data-test-id="infoText_trigger"
-      @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
-      @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
-      @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
-    >
-      <Dot
-        v-if="type === 'dot'"
-        :color="dotColor"
-        data-test-id="infoText_dot"
-      />
-      <IconComponent
-        v-else
-        :color="iconColor || computedIconColor"
-        :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-        :disabled="isDisabled"
-        :name="iconName"
-        :size="size"
-      />
+  <PageContainer
+    ref="container"
+    :type="type"
+    @click=";(isMobile || openTrigger === 'onClick') && toggleInfo()"
+    @mouseenter="!isMobile && openTrigger === 'onHover' && showInfo()"
+    @mouseleave="!isMobile && openTrigger === 'onHover' && hideInfo()"
+  >
+    <div ref="icon" data-test-id="infoText_trigger">
+      <IconWrapper
+        :background-color="backgroundColor"
+        :border-radius="borderRadius"
+        :hovered-icon="hoveredIcon"
+        :is-active="isActive"
+        :is-disabled="isDisabled"
+        :padding="padding"
+      >
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'left'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
+        <Dot
+          v-if="type === 'dot'"
+          :color="dotColor"
+          data-test-id="infoText_dot"
+        />
+        <IconComponent
+          v-else-if="!noIcon"
+          :color="iconColor || computedIconColor"
+          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+          :disabled="isDisabled"
+          :name="iconName"
+          :size="size"
+        />
+        <LabelWrapper
+          v-if="labelText && labelAlign === 'right'"
+          :color="iconColor || computedIconColor"
+          :size="labelSize"
+        >
+          {{ labelText }}
+        </LabelWrapper>
+      </IconWrapper>
     </div>
     <Teleport v-if="isVisible" to="body">
       <TextWrapper :style="wrapperStyle">
@@ -36,13 +59,13 @@
             :src="image"
             @load="onImageLoad"
           />
-          <span ref="textContent" :style="textStyle">
+          <span v-if="!hideInfoText" ref="textContent" :style="textStyle">
             <slot>
               <span v-html="text"></span>
             </slot>
           </span>
         </TextOverlay>
-        <Arrow :image="image" :style="arrowStyle" />
+        <!-- <Arrow :image="image" :style="arrowStyle" /> -->
       </TextWrapper>
     </Teleport>
   </PageContainer>
@@ -63,7 +86,12 @@
   import styled from 'vue3-styled-components'
   import theme from '../../assets/theme.js'
 
-  const TextOverlay = styled('div')`
+  const TextOverlayAttrs = {
+    appTheme: String,
+    image: Boolean,
+    width: Number,
+  }
+  const TextOverlay = styled('div', TextOverlayAttrs)`
     background-color: ${(props) =>
       props.image ? props.theme.colors.white : props.theme.colors.black};
     color: ${(props) =>
@@ -88,16 +116,16 @@
     }
   `
 
-  const Arrow = styled('div')`
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
-    border-top-color: ${(props) =>
-      props.image ? props.theme.colors.white : props.theme.colors.black};
-    filter: ${(props) =>
-      props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
-  `
+  // const Arrow = styled('div')`
+  //   position: absolute;
+  //   width: 0;
+  //   height: 0;
+  //   border: 8px solid transparent;
+  //   border-top-color: ${(props) =>
+  //     props.image ? props.theme.colors.white : props.theme.colors.black};
+  //   filter: ${(props) =>
+  //     props.image ? 'drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))' : 'none'};
+  // `
 
   const PageContainer = styled('div')`
     display: ${(props) => (props.type === 'dot' ? 'unset' : 'inline-block')};
@@ -121,16 +149,57 @@
     border-radius: 50%;
   `
 
+  const IconWrapperAttrs = {
+    backgroundColor: String,
+    borderRadius: String,
+    padding: String,
+    hoveredIcon: Boolean,
+    isActive: Boolean,
+    isDisabled: Boolean,
+  }
+  const IconWrapper = styled('div', IconWrapperAttrs)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    white-space: nowrap;
+    background-color: ${(props) => props.backgroundColor};
+    border-radius: ${(props) =>
+      props.hoveredIcon ? '6px' : props.borderRadius};
+    padding: ${(props) => props.padding};
+    width: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    height: ${(props) => (props.hoveredIcon ? '32px' : '')};
+    cursor: pointer;
+    background-color: ${(props) =>
+      props.isActive ? props.theme.colors.transparentWhite2 : ''};
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    &:hover {
+      background-color: ${(props) =>
+        props.hoveredIcon ? props.theme.colors.transparentWhite2 : ''};
+    }
+  `
+
+  const LabelWrapperAttrs = {
+    size: String,
+    color: String,
+  }
+  const LabelWrapper = styled('div', LabelWrapperAttrs)`
+    font-size: ${(props) => props.size};
+    color: ${(props) => props.color};
+  `
+
   export default {
     name: 'InfoText',
     components: {
       IconComponent,
       TextOverlay,
-      Arrow,
+      // Arrow,
       Dot,
       PageContainer,
       TextWrapper,
       OverlayImage,
+      IconWrapper,
+      LabelWrapper,
     },
     props: {
       text: {
@@ -138,6 +207,16 @@
         default: '',
         type: String,
       },
+      isActive: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      labelText: {
+        required: false,
+        default: '',
+        type: String,
+      },
       size: {
         type: String,
         default: '14px',
@@ -189,6 +268,51 @@
         required: false,
         default: 'info', // info, dot
       },
+      appTheme: {
+        type: String,
+        default: 'light', // light or dark
+        required: false,
+      },
+      labelAlign: {
+        type: String,
+        default: 'right',
+        required: false,
+      },
+      backgroundColor: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      borderRadius: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      padding: {
+        type: String,
+        default: '',
+        required: false,
+      },
+      labelSize: {
+        type: String,
+        default: '12px',
+        required: false,
+      },
+      noIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      hoveredIcon: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
+      hideInfoText: {
+        type: Boolean,
+        default: false,
+        required: false,
+      },
     },
     setup(props) {
       const isVisible = ref(false)
@@ -206,7 +330,11 @@
 
       const textStyle = computed(() => ({
         fontSize: props.image ? '12px' : '13px',
-        color: props.image ? theme.colors.grey1 : theme.colors.white,
+        color: props.image
+          ? theme.colors.grey1
+          : props.appTheme === 'dark'
+          ? theme.colors.black
+          : theme.colors.white,
         textAlign: props.image ? 'right' : 'left',
       }))
 
@@ -336,7 +464,9 @@
           overflowY: 'auto',
           backgroundColor: props.image
             ? theme.colors.white
-            : theme.colors.black,
+            : props.appTheme === 'light'
+            ? theme.colors.black
+            : theme.colors.grey5,
         }
       }
 
@@ -408,7 +538,7 @@
 
         // Calculate new width
         const calculatedWidth = Math.min(
-          Math.max(contentWidth, 200),
+          Math.max(contentWidth, 230),
           parseInt(props.maxWidth, 10)
         )
 

package/src/components/infoText/infoText.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('InfoText Component', () => {

package/src/components/inputs/checkbox/index.vue

@@ -5,6 +5,7 @@
       :check-color="checkColor"
       :cursor-type="cursorType"
       :data-test-id="dataId"
+      :font-color="fontColor"
       :has-label="hasLabel"
       :is-checked="isChecked"
       :is-disabled="isDisabled"
@@ -63,6 +64,7 @@
     isChecked: Boolean,
     isDisabled: Boolean,
     cursorType: String,
+    fontColor: String,
   }
   const Container = styled('label', containerAttrs)`
     display: grid;
@@ -70,7 +72,10 @@
       props.hasLabel ? '16px auto' : '16px'};
     grid-gap: 16px;
     align-content: center;
-    color: ${(props) => props.theme.colors.black};
+    color: ${(props) =>
+      props.theme.colors[props.fontColor]
+        ? props.theme.colors[props.fontColor]
+        : props.fontColor};
     position: relative;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
     font-size: 16px;
@@ -176,7 +181,7 @@
     align-items: center;
     min-height: 18px;
     color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+      props.isDisabled ? props.theme.colors.grey2 : 'unset'};
   `
 
   export default {
@@ -193,6 +198,10 @@
         required: false,
         default: '',
       },
+      fontColor: {
+        required: false,
+        default: 'black',
+      },
       isChecked: {
         required: true,
         default: false,

package/src/components/inputs/inputText/index.vue

@@ -168,7 +168,9 @@
     position: relative;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
     color: ${(props) =>
-      props.isDisabled
+      props.isError
+        ? props.theme.colors.grey6
+        : props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'

package/src/components/modals/modal/index.vue

@@ -1,6 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
@@ -36,7 +37,11 @@
 
   const ContentContainer = styled.div``
 
-  const pageAttrs = { backdrop: String, position: String }
+  const pageAttrs = {
+    backdrop: String,
+    position: String,
+    addPaddingTop: Boolean,
+  }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;
@@ -50,6 +55,7 @@
       : 'rgba(255, 255, 255, 0.9)'};
   z-index: 99999;
   overflow: auto;
+  padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
   @media (max-width: 425px) {
     background: white;
@@ -147,6 +153,10 @@
         type: String,
         default: 'auto',
       },
+      addPaddingTop: {
+        type: Boolean,
+        default: false,
+      },
     },
     watch: {
       isOpen: {

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/tableDropdown/index.vue

@@ -74,13 +74,10 @@
               v-else
               class="inputField"
               :disabled="customInputDisabled"
-              :error-message="item.errorMessage"
               :font-color="showArchived ? theme.colors.red : 'black'"
-              :is-error="item.isError"
               :min-width="item.value.length + 'ch'"
               :no-border="true"
               :value="item.value"
-              @input-blur="onCustomInputChange($event.trim())"
               @input-change="onCustomInputChange($event)"
             />
           </InputContainer>
@@ -157,7 +154,7 @@
             </OptionsItem>
           </OptionsWrapper>
           <CustomContainer
-            v-if="getCustomName.length && allowFreeInputs"
+            v-if="inputText.length && allowFreeInputs"
             @click="onCustomNameClick()"
           >
             <CustomName>{{ getCustomName }}</CustomName>
@@ -220,6 +217,7 @@
   const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
   const ComponentItem = styled('td', ItemAttrs)`
     padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
+    overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 0 !important;
     color: ${(props) =>
@@ -553,7 +551,7 @@
     },
     computed: {
       getCustomName() {
-        return this.inputText.trim()
+        return this.inputText
       },
       theme() {
         return theme
@@ -647,7 +645,7 @@
       },
       onCustomNameClick() {
         this.wasClicked = true
-        this.$emit('on-custom-input-name', this.getCustomName)
+        this.$emit('on-custom-input-name', this.inputText)
         this.$emit('toggle-dropdown-open', { close: true })
         this.inputText = ''
       },