@eturnity/eturnity_reusable_components 7.51.16-EPDM-13568.0 → 7.51.16-EPDM-13568.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.16-EPDM-13568.0",
+  "version": "7.51.16-EPDM-13568.1",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/bell_alt.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 12.75C5.5 13.4404 6.17157 14 7 14C7.82843 14 8.5 13.4404 8.5 12.75H5.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.25C8 0.559644 7.55228 -3.91405e-08 7 -8.74228e-08C6.44772 -1.35705e-07 6 0.559644 6 1.25L8 1.25Z" fill="white"/>
+<path d="M7 1C4.79086 1 3 2.64162 3 4.66667V6.55904C3 8.11545 2.54599 9.63806 1.69361 10.9403L1 12H13L12.3064 10.9403C11.454 9.63806 11 8.11545 11 6.55904V4.66667C11 2.64162 9.20914 1 7 1Z" fill="white"/>
+</svg>

package/src/components/addNewButton/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageContainer :should-position="shouldPosition">
-    <ButtonContainer :data-id="dataId">
+    <ButtonContainer :data-id="dataId" :data-qa-id="dataQaId">
       <PlusButtonSvg />
     </ButtonContainer>
   </PageContainer>
@@ -57,6 +57,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
   }
 </script>

package/src/components/buttons/mainButton/index.vue

@@ -4,6 +4,7 @@
       :id="id"
       :custom-color="customColor"
       :data-id="dataId"
+      :data-qa-id="dataQaId"
       :font-color="fontColor"
       :height="height"
       :is-disabled="isDisabled"
@@ -164,6 +165,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
   }
 </script>

package/src/components/icon/index.vue

@@ -19,6 +19,9 @@
       :color="color"
       data-test-id="icon_striked_line"
     />
+    <CountWrapper v-if="count > 0" data-test-id="icon_count">
+      {{ counter }}
+    </CountWrapper>
   </Wrapper>
 </template>
 
@@ -34,7 +37,7 @@
   //   isStriked = "true"
   // />
 
-  import { onMounted, reactive, watch } from 'vue'
+  import { computed, onMounted, reactive, watch } from 'vue'
   import styled from 'vue3-styled-components'
   import { fetchIcon } from './iconCache.mjs'
 
@@ -69,6 +72,10 @@
       required: false,
       default: null,
     },
+    count: {
+      required: false,
+      default: 0,
+    },
     animation: {
       required: false,
       default: 'none',
@@ -92,6 +99,21 @@
     line-height: 0;
   `
 
+  const CountWrapper = styled('div')`
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    background-color: ${({ theme }) => theme.colors.red};
+    color: ${({ theme }) => theme.colors.white};
+    border-radius: 4px;
+    width: 15px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  `
+
   const StrikedLine = styled('div', { color: String })`
     display: flex;
     position: absolute;
@@ -145,6 +167,10 @@
     icon.html = await fetchIcon(props.name.toLowerCase())
   }
 
+  const counter = computed(() =>
+    props.count > 9 ? '9+' : props.count.toString()
+  )
+
   onMounted(() => loadSvg())
 
   watch(() => props.name, loadSvg)

package/src/components/iconWrapper/index.vue

@@ -4,6 +4,7 @@
     :border-radius="borderRadius"
     :color="iconColor"
     :data-id="dataId"
+    :data-qa-id="dataQaId"
     :disabled="disabled"
     :has-border="hasBorder"
     :hovered-background-color="hoveredBackgroundColor"
@@ -154,6 +155,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       isHovered: {
         required: false,
         default: false,

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

@@ -13,6 +13,7 @@
       <InputCheckbox
         :checked="isChecked"
         :data-id="dataId"
+        :data-qa-id="dataQaId"
         type="checkbox"
         @change="onChangeHandler(!isChecked)"
       />
@@ -214,6 +215,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       cursorType: {
         type: String,
         default: 'pointer',

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

@@ -15,6 +15,7 @@
     <LabelWrapper v-if="labelText">
       <LabelText
         :data-id="labelDataId"
+        :data-test-id="labelDataTestId"
         :label-font-color="labelFontColor"
         :label-font-weight="labelFontWeight"
       >
@@ -40,6 +41,7 @@
         "
         :color-mode="colorMode"
         :data-id="inputDataId"
+        :data-qa-id="dataQaId"
         :disabled="disabled"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
@@ -647,6 +649,10 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+      },
       showSelect: {
         type: Boolean,
         default: false,

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

@@ -34,6 +34,7 @@
             :background-color="backgroundColor"
             :border-color="borderColor"
             :data-id="inputDataId"
+            :data-qa-id="dataQaId"
             data-test-id="input"
             :default-padding="defaultPadding"
             :disabled="disabled"
@@ -378,6 +379,11 @@
         default: '',
         type: String,
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
       iconName: {
         required: false,
         default: null,

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

@@ -17,6 +17,7 @@
         <Radio
           :checked="selectedOption === item.value"
           :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :data-qa-id="dataQaId"
           :data-test-id="'radioInput_' + item.value"
           :disabled="item.disabled"
           :name="'radioButtons_' + radioName"
@@ -296,6 +297,11 @@
         required: false,
         type: String,
       },
+      dataQaId: {
+        type: String,
+        default: '',
+        required: false,
+      },
       colorMode: {
         default: '',
         required: false,

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

@@ -5,6 +5,7 @@
       <InputContainer
         ref="inputElement"
         :data-id="dataId"
+        :data-qa-id="dataQaId"
         :disabled="disabled"
         :has-focus="hasFocus"
         :input-width="inputWidth"
@@ -128,6 +129,11 @@
         default: '',
         type: [String, Number],
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
       iconPosition: {
         type: String,
         default: 'right',

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

@@ -13,6 +13,7 @@
       <LabelWrapper
         v-if="label"
         :data-id="labelDataId"
+        :data-qa-id="dataQaId + '_label'"
         :info-text-message="!!infoTextMessage || !!$slots.infoText"
       >
         <InputLabel
@@ -51,6 +52,7 @@
           class="select-button"
           :color-mode="colorMode"
           :data-id="dataId"
+          :data-qa-id="dataQaId"
           :disabled="disabled"
           :font-color="
             buttonFontColor || colorMode == 'dark' || colorMode == 'transparent'
@@ -605,6 +607,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       hasSelectButtonPadding: {
         required: false,
         type: Boolean,

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

@@ -18,6 +18,7 @@
       >
         <textarea
           :data-id="inputDataId"
+          :data-qa-id="dataQaId"
           :disabled="isDisabled"
           :placeholder="placeholder"
           :resize="resize"
@@ -185,6 +186,11 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     methods: {
       onChangeHandler($event) {

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

@@ -2,6 +2,7 @@
   <Container>
     <FlexWrapper
       :data-id="dataId"
+      :data-qa-id="dataQaId"
       data-test-id="page_wrapper"
       :disabled="disabled"
       :size="size"
@@ -304,6 +305,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
     methods: {
       onToggleChange() {

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

@@ -2,10 +2,9 @@
   <PageWrapper
     :backdrop="backdrop"
     :class="{ visible: isOpen, hidden: !isOpen }"
-    :is-open="isOpen"
     :position="position"
   >
-    <ModalContainer :overflow="overflowRule" @click="onClickModalContainer">
+    <ModalContainer v-if="isOpen" :overflow="overflowRule" @click="onClickModalContainer">
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer :visible="!isLoading">
         <slot></slot>
@@ -35,7 +34,7 @@
     visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
   `
 
-  const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
+  const pageAttrs = { backdrop: String, position: String }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;

package/src/components/rangeSlider/Slider.vue

@@ -2,6 +2,7 @@
   <div
     :class="className"
     :data-id="dataId"
+    :data-qa-id="dataQaId"
     :style="style"
     @mousedown="elementMouseDown"
     @touchstart="elementTouchDown"
@@ -64,6 +65,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       className: {
         type: String,
         default: 'vdr',