@eturnity/eturnity_reusable_components 7.45.0 → 7.45.1-EPDM-12459.1

package/package.json

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

package/src/components/banner/infoBanner/InfoBanner.spec.js

@@ -0,0 +1,70 @@
+/* eslint-disable */
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import InfoBanner from '@/components/banner/infoBanner'
+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('')),
+}))
+
+describe('Info Banner Component', () => {
+  const props = {
+    isOpen: false,
+    buttonLabel: 'Gotcha',
+  }
+
+  const global = {
+    provide: {
+      theme,
+    },
+  }
+
+  it('info banner is shown when isOpen props is true', async () => {
+    const wrapper = mount(InfoBanner, {
+      props,
+      global,
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="info_banner_wrapper"]')
+    expect(bannerWrapper.exists()).toBe(true)
+    expect(bannerWrapper.classes()).not.toContain('visible')
+    expect(bannerWrapper.classes()).toContain('hidden')
+    await wrapper.setProps({ isOpen: true })
+    expect(bannerWrapper.classes()).toContain('visible')
+    expect(bannerWrapper.classes()).not.toContain('hidden')
+  })
+
+  it('info banner slots is display when user passed slots content', async () => {
+    const titleText = 'Sample title'
+    const bodyText = 'Sample body text'
+
+    const wrapper = mount(InfoBanner, {
+      props,
+      slots: {
+        title: titleText,
+        body: bodyText,
+      },
+      global,
+    })
+
+    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
+    expect(modalTitleEl.text()).toBe(titleText)
+    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
+    expect(modalBodyEl.text()).toBe(bodyText)
+  })
+
+  it('info banner on-close event is emitted when modal close button is clicked', async () => {
+    const wrapper = mount(InfoBanner, {
+      props,
+      global,
+    })
+
+    const modalCloseButton = wrapper.find('.close')
+    await modalCloseButton.trigger('click')
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-close')
+    expect(emittedEvent).toHaveLength(1)
+  })
+})

package/src/components/banner/infoBanner/InfoBanner.stories.js

@@ -0,0 +1,42 @@
+import InfoBanner from './index.vue'
+import theme from '@/assets/theme'
+export default {
+  title: 'InfoBanner',
+  component: InfoBanner,
+  tags: ['autodocs'],
+}
+
+// <RCInfoBanner
+//   :isOpen="true"
+//   buttonLabel="Got it"
+//   @on-close="handleClose"
+// >
+//   <template #title>Sample title</template>
+//   <template #body>Sample body</template>
+// </RCInfoBanner>
+
+export const Default = {
+  args: {
+    isOpen: false,
+    buttonLabel: 'Got it',
+  },
+}
+
+export const OpenedInfoBanner = {
+  args: {
+    isOpen: true,
+    buttonLabel: 'Got it',
+  },
+  render: (args) => ({
+    components: { InfoBanner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoBanner v-bind="args">
+        <template #title>Sample title</template>
+        <template #body>Sample body</template>
+      </InfoBanner>
+    `,
+  }),
+}

package/src/components/banner/infoBanner/index.vue

@@ -1,45 +1,75 @@
 <template>
-  <ActionModal :is-open="isOpen" @on-close="closeModal">
+  <RCModal
+    data-test-id="info_banner_wrapper"
+    :is-open="isOpen"
+    @on-close="closeModal"
+  >
     <ModalContainer>
-      <template name="title">
+      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
         <slot name="title"></slot>
-      </template>
-      <template name="body">
+      </ModalTitle>
+      <TextContainer v-if="$slots.body" data-test-id="modal_body">
         <slot name="body"></slot>
-      </template>
-      <template name="buttons">
-        <ButtonContainer>
-          <Button
-            min-width="150px"
-            :text="$gettext('Got it')"
-            type="primary"
-            @click="closeModal"
-          />
-        </ButtonContainer>
-      </template>
+      </TextContainer>
+      <ButtonContainer>
+        <RCButton
+          data-test-id="modal_buttons"
+          min-width="150px"
+          :text="buttonText"
+          type="primary"
+          @click="closeModal"
+        />
+      </ButtonContainer>
     </ModalContainer>
-  </ActionModal>
+  </RCModal>
 </template>
 <script>
   import styled from 'vue3-styled-components'
-  import ActionModal from '../actionModal'
+  import RCModal from '@/components/modals/modal'
+  import RCButton from '@/components/buttons/mainButton'
 
   const ModalContainer = styled.div`
     width: 450px;
+    display: flex;
+    flex-direction: column;
     min-height: 205px;
     padding: 40px 40px 30px 40px;
   `
+
+  const ModalTitle = styled.div`
+    color: ${(props) => props.theme.colors.black};
+    font-family: inherit;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 120%;
+    text-transform: uppercase;
+  `
   const ButtonContainer = styled.div`
     display: inline-flex;
-    align-items: flex-start;
+    flex-grow: 1;
+    align-items: flex-end;
     gap: 20px;
   `
+  const TextContainer = styled.div`
+    color: ${(props) => props.theme.colors.black};
+    font-family: inherit;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 30px 0px;
+    white-space: pre-wrap;
+  `
   export default {
     name: 'InfoModal',
     components: {
       ModalContainer,
+      ModalTitle,
+      TextContainer,
       ButtonContainer,
-      ActionModal,
+      RCModal,
+      RCButton,
     },
     props: {
       isOpen: {
@@ -47,6 +77,16 @@
         default: false,
         type: Boolean,
       },
+      buttonLabel: {
+        default: null,
+        type: String,
+      },
+    },
+    computed: {
+      buttonText() {
+        //work around for storybook not finding the $gettext function
+        return this.buttonLabel || this.$gettext('Got it')
+      },
     },
     methods: {
       closeModal() {

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

@@ -120,6 +120,11 @@
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
+              :style="{
+                transform: `translate(${dropdownPosition?.left}px, ${
+                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
+                })`,
+              }"
               :bg-color="
                 dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
               "
@@ -344,9 +349,8 @@
     box-sizing: border-box;
     z-index: ${(props) => (props.isActive ? '2' : '99999')};
     position: absolute;
-    top: ${(props) =>
-      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
-    left: ${(props) => props.dropdownPosition?.left}px;
+    top: 0px;
+    left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -606,6 +610,10 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
+        isDisplayedAtBottom: true,
+        selectTopPosition: 0,
+        selectAndDropdownDistance: 0,
+        animationFrameId: null,
       }
     },
     computed: {
@@ -676,8 +684,13 @@
           }, 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)
@@ -690,11 +703,27 @@
           })
         }
       },
+      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
@@ -703,6 +732,10 @@
       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)
@@ -808,11 +841,11 @@
           return
         }
         await this.$nextTick()
-        const isDisplayedAtBottom = await this.generateDropdownPosition()
+        this.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 (isDisplayedAtBottom) this.generateDropdownPosition()
+        if (this.isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -905,6 +938,25 @@
           }
         }
       },
+      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>