@eturnity/eturnity_reusable_components 7.45.1-EPDM-12459.1 → 7.45.2--EPDM-12129.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.45.1-EPDM-12459.1",
+  "version": "7.45.2--EPDM-12129.3",
   "files": [
     "dist",
     "src"

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"
       :is-disabled="isDisabled"
       :min-width="minWidth"
@@ -145,6 +146,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
   }
 </script>

package/src/components/card/Card.stories.js

@@ -0,0 +1,79 @@
+import Card from './index.vue'
+
+export default {
+  title: 'Card',
+  component: Card,
+  tags: ['autodocs'],
+}
+
+// To use:
+// <RCCard
+//   :isLoading="true"
+//   minWidth="150px"
+//   popoverText="Sample popover text"
+//   :showPopover="true"
+//   title="Sample title"
+//   titleClass="sampleTitleClass"
+//   viewCardClass="sampleViewCardClass"
+//   width="200px"
+// />
+
+export const Default = {
+  args: {
+    title: 'Sample card title',
+  },
+  render: (args) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        Sample card content
+      </ActionBanner>
+    `,
+  }),
+}
+
+export const LoadingCard = {
+  args: {
+    isLoading: true,
+  },
+}
+
+export const CustomWidth = {
+  args: {
+    title: 'Sample card title',
+    width: '600px',
+  },
+  render: (args) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        Sample card content
+      </ActionBanner>
+    `,
+  }),
+}
+
+export const PopoverShown = {
+  args: {
+    title: 'Sample card title',
+    showPopover: true,
+    popoverText: 'Sample popover text',
+  },
+  render: (args) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        Sample card content
+      </ActionBanner>
+    `,
+  }),
+}

package/src/components/card/card.spec.js

@@ -0,0 +1,135 @@
+/* eslint-disable */
+import { mount, config } from '@vue/test-utils'
+import Card from '@/components/card'
+import theme from '@/assets/theme'
+
+config.global.components = {
+  EtPopover: {
+    template: '<div>{{ text }}</div>',
+    props: ['text'],
+  },
+}
+
+config.global.mocks = {
+  $gettext: (msg) => msg,
+}
+
+describe('Card Component', () => {
+  it('card title is shown when a title props is passed', () => {
+    const title = 'Test Card Title'
+    const wrapper = mount(Card, {
+      props: {
+        title,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain(title)
+  })
+
+  it('card spinner is shown when user set isLoading props to true', async () => {
+    // Start with isLoading is false
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        isLoading: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    let cardSpinner = wrapper.find('[data-test-id="card_spinner"]')
+    expect(cardSpinner.exists()).toBe(false)
+    await wrapper.setProps({ isLoading: true })
+    await wrapper.vm.$nextTick()
+    cardSpinner = wrapper.find('[data-test-id="card_spinner"]')
+    expect(cardSpinner.exists()).toBe(true)
+  })
+
+  it('card wrapper has custom class when viewCardClass props is passed', async () => {
+    const viewCardClass = 'sampleClass'
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        viewCardClass,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const cardMainWrapper = wrapper.find('[data-test-id="card_main_wrapper"]')
+    expect(cardMainWrapper.classes()).toContain(viewCardClass)
+  })
+
+  it('card title has custom class when titleClass props is passed', async () => {
+    const titleClass = 'sampleClass'
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        titleClass,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const cardTitle = wrapper.find('[data-test-id="card_title"]')
+    expect(cardTitle.classes()).toContain(titleClass)
+  })
+
+  it('card popover is shown when user set showPopover props to true', async () => {
+    // Start with showPopover is false
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        showPopover: false,
+        popoverText: 'Sample popover text',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    let cardPopover = wrapper.find('[data-test-id="card_popover"]')
+    expect(cardPopover.exists()).toBe(false)
+    await wrapper.setProps({ showPopover: true })
+    await wrapper.vm.$nextTick()
+    cardPopover = wrapper.find('[data-test-id="card_popover"]')
+    expect(cardPopover.exists()).toBe(true)
+    expect(cardPopover.text()).toContain('Sample popover text')
+  })
+
+  it('card popover text is set when user passed a popoverText props value', async () => {
+    const popoverText = 'Sample popover text'
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        showPopover: true,
+        popoverText,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    let cardPopover = wrapper.find('[data-test-id="card_popover"]')
+    expect(cardPopover.exists()).toBe(true)
+    expect(cardPopover.text()).toContain('Sample popover text')
+  })
+})

package/src/components/card/index.vue

@@ -2,15 +2,22 @@
   <Wrapper
     v-show="!isLoading"
     :class="viewCardClass"
+    data-test-id="card_main_wrapper"
     :min-width="minWidth"
     :width="width"
   >
-    <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
+    <Spinner
+      v-if="isLoading"
+      data-test-id="card_spinner"
+      :limited-to-modal="true"
+      size="50px"
+    />
     <CardWrapper v-else>
-      <CardTitle :class="titleClass">
+      <CardTitle :class="titleClass" data-test-id="card_title">
         {{ $gettext(title) }}
         <EtPopover
           v-if="showPopover && popoverText !== ''"
+          data-test-id="card_popover"
           :text="popoverText"
         />
       </CardTitle>
@@ -20,6 +27,19 @@
 </template>
 
 <script>
+  // To use:
+  // import RCCard from "@eturnity/eturnity_reusable_components/src/components/card"
+  // <RCCard
+  //   :isLoading="true"
+  //   minWidth="150px"
+  //   popoverText="Sample popover text"
+  //   :showPopover="true"
+  //   title="Sample title"
+  //   titleClass="sampleTitleClass"
+  //   viewCardClass="sampleViewCardClass"
+  //   width="200px"
+  // />
+
   import styled from 'vue3-styled-components'
   import Spinner from '../spinner'
 

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)"
       />
@@ -203,6 +204,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       cursorType: {
         type: String,
         default: 'pointer',

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

@@ -13,7 +13,11 @@
     </LabelSlotWrapper>
 
     <LabelWrapper v-if="labelText">
-      <LabelText :data-id="labelDataId" :label-font-color="labelFontColor">
+      <LabelText
+        :data-id="labelDataId"
+        :data-test-id="labelDataTestId"
+        :label-font-color="labelFontColor"
+      >
         {{ labelText }}
       </LabelText>
 
@@ -31,6 +35,7 @@
         :background-color="backgroundColor"
         :border-color="borderColor"
         :data-id="inputDataId"
+        :data-qa-id="dataQaId"
         :disabled="disabled"
         :font-color="fontColor"
         :font-size="fontSize"
@@ -496,6 +501,10 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+      },
       showSelect: {
         type: Boolean,
         default: false,

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

@@ -28,6 +28,7 @@
             ref="inputElement"
             :background-color="backgroundColor"
             :data-id="inputDataId"
+            :data-qa-id="dataQaId"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -324,6 +325,10 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+      },
     },
     data() {
       return {

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

@@ -15,6 +15,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"
@@ -280,6 +281,10 @@
         required: false,
         type: String,
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
     emits: ['on-radio-change'],
     data() {

package/src/components/inputs/radioButton/radioButton.spec.js

@@ -114,9 +114,7 @@ describe('RadioButton.vue', () => {
     const checkedWrapper = checkedWrapperArray[0]
     const checkedRadioInput = checkedWrapper.find('input[type="radio"]')
     const defaultValueFromProps = radioButtons.props('selectedOption')
-    expect(checkedRadioInput.attributes('value')).toBe(
-      defaultValueFromProps
-    )
+    expect(checkedRadioInput.attributes('value')).toBe(defaultValueFromProps)
 
     // Log attributes to see what is rendered (commented out just for reference)
     // console.log('checkedRadioInput attributes', checkedRadioInput.attributes())
@@ -238,7 +236,9 @@ describe('RadioButton.vue', () => {
       const valueOfTestedRadioWrapper = testedRadioWrapper
         .attributes('data-test-id')
         .replace('radioWrapper_', '')
-      const expectedText = defaultRadioButtonProps.options.find((el) => el.value === valueOfTestedRadioWrapper).infoText
+      const expectedText = defaultRadioButtonProps.options.find(
+        (el) => el.value === valueOfTestedRadioWrapper
+      ).infoText
       const iconForHover = testedRadioWrapper.find(
         '[data-test-id="infoText_trigger"]'
       )

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"
@@ -120,6 +121,11 @@
         required: false,
         default: '',
       },
+      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"
         :info-text-message="!!infoTextMessage || !!$slots.infoText"
       >
         <InputLabel
@@ -44,6 +45,7 @@
           "
           class="select-button"
           :data-id="dataId"
+          :data-qa-id="dataQaId"
           :disabled="disabled"
           :font-color="
             buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
@@ -120,11 +122,6 @@
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
-              :style="{
-                transform: `translate(${dropdownPosition?.left}px, ${
-                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
-                })`,
-              }"
               :bg-color="
                 dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
               "
@@ -349,8 +346,9 @@
     box-sizing: border-box;
     z-index: ${(props) => (props.isActive ? '2' : '99999')};
     position: absolute;
-    top: 0px;
-    left: 0px;
+    top: ${(props) =>
+      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
+    left: ${(props) => props.dropdownPosition?.left}px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -557,6 +555,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       hasSelectButtonPadding: {
         required: false,
         type: Boolean,
@@ -610,10 +612,6 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
-        isDisplayedAtBottom: true,
-        selectTopPosition: 0,
-        selectAndDropdownDistance: 0,
-        animationFrameId: null,
       }
     },
     computed: {
@@ -621,7 +619,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : !!this.$refs.dropdown.$el.children[0]
+            : this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }
@@ -684,13 +682,8 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
-          this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
-          if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId)
-            this.animationFrameId = null
-          }
           setTimeout(() => {
             this.isClickOutsideActive = false
           }, 10)
@@ -703,27 +696,11 @@
           })
         }
       },
-      isSelectDropdownShown(isShown) {
-        if (!isShown) return
-
-        // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
-        // before getting the distance between the select and the dropdown menu
-        setTimeout(() => {
-          this.getDistanceBetweenSelectAndDropdownMenu()
-        }, 100)
-      },
-      selectTopPosition() {
-        this.dropdownPosition.top =
-          this.selectTopPosition +
-          this.$refs.select.$el.clientHeight +
-          this.selectAndDropdownDistance
-      },
     },
     mounted() {
       this.observeDropdownHeight()
       this.observeSelectWidth()
       window.addEventListener('resize', this.handleSetDropdownOffet)
-      document.body.addEventListener('scroll', this.calculateSelectTopPosition)
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -732,10 +709,6 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
-      document.body.removeEventListener(
-        'scroll',
-        this.calculateSelectTopPosition
-      )
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)
@@ -841,11 +814,11 @@
           return
         }
         await this.$nextTick()
-        this.isDisplayedAtBottom = await this.generateDropdownPosition()
+        const isDisplayedAtBottom = await this.generateDropdownPosition()
         // If the dropdown menu is going to be displayed at the bottom,
         // we need reverify its position after a dom update (nextTick)
         await this.$nextTick()
-        if (this.isDisplayedAtBottom) this.generateDropdownPosition()
+        if (isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -938,25 +911,6 @@
           }
         }
       },
-      getDistanceBetweenSelectAndDropdownMenu() {
-        const wholeSelectTopPosition =
-          this.selectTopPosition + this.$refs.select.$el.clientHeight
-        this.selectAndDropdownDistance =
-          this.dropdownPosition.top - wholeSelectTopPosition
-      },
-      calculateSelectTopPosition() {
-        const selectRef = this.$refs.select
-        if (selectRef) {
-          const currentTopPosition =
-            selectRef.$el.getBoundingClientRect().top + window.scrollY
-          if (this.selectTopPosition !== currentTopPosition) {
-            this.selectTopPosition = currentTopPosition
-          }
-        }
-        this.animationFrameId = requestAnimationFrame(
-          this.calculateSelectTopPosition
-        )
-      },
     },
   }
 </script>

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/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',