@eturnity/eturnity_reusable_components 7.45.1-EPDM-12459.0 → 7.45.2

package/package.json

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

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

@@ -606,10 +606,6 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
-        isDisplayedAtBottom: true,
-        selectTopPosition: 0,
-        selectAndDropdownDistance: 0,
-        animationFrameId: null,
       }
     },
     computed: {
@@ -680,13 +676,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)
@@ -699,27 +690,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
@@ -728,34 +703,11 @@
       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)
     },
     methods: {
-      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
-        )
-      },
       focus() {
         this.isActive = true
       },
@@ -856,11 +808,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 =