@eturnity/eturnity_reusable_components 8.16.2 → 8.16.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.2",
+  "version": "8.16.4",
   "files": [
     "dist",
     "src"

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

@@ -1,5 +1,4 @@
 /* eslint-disable */
-import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import InfoBanner from '@/components/banner/infoBanner'
 import theme from '@/assets/theme'
@@ -10,59 +9,47 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
 }))
 
 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,
+  let wrapper
+
+   beforeEach(() => {
+      wrapper = mount(InfoBanner, {
+        props: {
+          isOpen: true,
+          buttonLabel: 'Gotcha',
+        },
+        slots: {
+          title: 'Sample title',
+          body: 'Sample body text',
+        },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
     })
 
+    
+  it('info banner is shown when isOpen props is true', async () => {
+    
     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,
-    })
-
+  
+  it('info banner slots is display when user passed slots content', () => {
     const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
-    expect(modalTitleEl.text()).toBe(titleText)
+    expect(modalTitleEl.text()).toBe('Sample title')
     const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
-    expect(modalBodyEl.text()).toBe(bodyText)
+    expect(modalBodyEl.text()).toBe('Sample body text')
   })
 
   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')
+
+    modalCloseButton.trigger('click')
+    await wrapper.vm.$nextTick()
+
     expect(wrapper.emitted('on-close')).toBeTruthy()
     const emittedEvent = wrapper.emitted('on-close')
     expect(emittedEvent).toHaveLength(1)

package/src/components/errorMessage/errorMessage.spec.js

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import ErrorMessage from '@/components/errorMessage'
+import theme from '@/assets/theme'
+
+/* eslint-disable */
+
+describe('ErrorMessage Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(ErrorMessage, {
+      props: {},
+      slots: {
+        default: '<div data-test-id="fake-msg">testing</div>',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders ErrorMessage component with default props', () => {
+    expect(wrapper.findAll('[data-test-id="fake-msg"]').length).toBe(1)
+  })
+
+  test('applies the correct CSS class for styling', async () => {
+    wrapper.setProps({ marginTop: '20px' })
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.props().marginTop).toBe('20px')
+  })
+})

package/src/components/errorMessage/errorMessage.stories.js

@@ -0,0 +1,35 @@
+import ErrorMessage from './index.vue'
+
+export default {
+  title: 'ErrorMessage',
+  component: ErrorMessage,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
+//
+//To use:
+// <error-message>
+//     <span>
+//         testing error message
+//     </span>
+// </error-message>
+
+const Template = (args, { argTypes }) => ({
+  components: { ErrorMessage },
+  props: Object.keys(argTypes),
+  template: `
+  <ErrorMessage v-bind="$props">
+    <span>
+        testing error message
+    </span>
+  </ErrorMessage>`,
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  marginTop: '13px',
+}

package/src/components/infoText/index.vue

@@ -46,7 +46,7 @@
       </IconWrapper>
     </div>
     <Teleport v-if="isVisible" to="body">
-      <TextWrapper :style="wrapperStyle">
+      <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
           :app-theme="appTheme"

package/src/components/infoText/infoText.spec.js

@@ -29,6 +29,9 @@ describe('InfoText Component', () => {
         provide: {
           theme,
         },
+        stubs: {
+          teleport: true
+        }
       },
     })
   })
@@ -38,7 +41,6 @@ describe('InfoText Component', () => {
     expect(wrapper.vm.text).toContain('default text')
     expect(wrapper.vm.size).toContain('14px')
     expect(wrapper.vm.infoPosition).toContain('bottom')
-    expect(wrapper.vm.alignArrow).toContain('center')
   })
 
   test('openTrigger prop is set to onClick', async () => {
@@ -48,8 +50,11 @@ describe('InfoText Component', () => {
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
       false
     )
+
     //should see text upon click
     await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
+    expect(wrapper.vm.isVisible).toBe(true)
+
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
       true
     )

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

@@ -109,11 +109,7 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret
-            class="caret_dropdown"
-            :color-mode="colorMode"
-            @click.stop="toggleCaretDropdown"
-          >
+          <Caret class="caret_dropdown" :color-mode="colorMode">
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -142,12 +138,11 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
+                colorMode == 'dark' || colorMode == 'transparent'
                   ? 'black'
                   : 'white'
               "
+              class="rc-select-dropdown"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -167,10 +162,17 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
+              :is-fixed-dropdown-position="isFixedDropdownPosition"
+              :is-parent-modal="isParentModal"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
               :selected-value="selectedValue"
+              :style="{
+                transform: `translate(${dropdownPosition?.left}px, ${
+                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
+                })`,
+              }"
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
@@ -208,7 +210,7 @@
   //     </template>
   // </Select>
 
-  import { Teleport } from 'vue'
+  import { Teleport, inject } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import Icon from '../../icon'
@@ -392,14 +394,17 @@
     selectedValue: Number | String,
     noRelative: Boolean,
     minWidth: String,
+    isParentModal: Boolean,
+    isFixedDropdownPosition: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     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;
+    z-index: ${(props) =>
+      props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
+    position: ${(props) =>
+      props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
+    top: 0px;
+    left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -647,6 +652,11 @@
         type: String,
         required: false,
       },
+      isFixedDropdownPosition: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {
@@ -664,6 +674,17 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
+        isDisplayedAtBottom: true,
+        selectTopPosition: 0,
+        selectAndDropdownDistance: 0,
+        animationFrameId: null,
+      }
+    },
+    setup() {
+      const modalRef = inject('modalRef')
+
+      return {
+        modalRef,
       }
     },
     computed: {
@@ -721,6 +742,9 @@
           /windows phone/i.test(userAgent)
         )
       },
+      isParentModal() {
+        return !!this.modalRef
+      },
     },
     watch: {
       value(val) {
@@ -734,8 +758,13 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
+          if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
+          if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId)
+            this.animationFrameId = null
+          }
           setTimeout(() => {
             this.isClickOutsideActive = false
           }, 10)
@@ -748,11 +777,30 @@
           })
         }
       },
+      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)
+      if (!this.isFixedDropdownPosition)
+        document.body.addEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -761,6 +809,12 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
+      if (!this.isFixedDropdownPosition) {
+        document.body.removeEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
+      }
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)
@@ -866,11 +920,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 =
@@ -963,6 +1017,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>

package/src/components/modals/actionModal/actionModal.spec.js

@@ -0,0 +1,52 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import ActionModal from '@/components/modals/actionModal'
+import theme from '@/assets/theme'
+
+describe('ActionModal Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(ActionModal, {
+      props: {
+        isOpen: true,
+        buttonText: 'Close',
+      },
+      slots: {
+        title: 'Sample title',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt commodo mollis. Fusce urna felis, malesuada sed elementum et, fermentum ac massa. Integer in massa vel orci fermentum bibendum in ut ante. Donec risus risus, luctus quis ex a, pulvinar placerat lacus. Sed pharetra augue a elit volutpat, eu dignissim ex pretium. Aenean imperdiet, nulla in pharetra rutrum, mauris mauris tincidunt tellus, non tempus quam lorem laoreet lectus.',
+        buttons: '<button @click="closeAction">Close</button>',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders ActionModal component with default props', () => {
+    expect(wrapper.find('[data-test-id="actionModal"]').exists()).toBe(true)
+
+    expect(wrapper.vm.isOpen).toBe(true)
+  })
+
+  test('action modal slots is display when user passed slots content', () => {
+    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
+    expect(modalTitleEl.text()).toBe('Sample title')
+
+    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
+    expect(modalBodyEl.text()).toContain('Lorem ipsum dolor sit amet')
+
+    const modalActionButton = wrapper.find('[data-test-id="modal_buttons"]')
+    expect(modalActionButton.text()).toContain('Close')
+  })
+
+  test('action modal on-close event is emitted when modal close button is clicked', async () => {
+    const modalCloseButton = wrapper.find('.close')
+
+    modalCloseButton.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+  })
+})

package/src/components/modals/actionModal/actionModal.stories.js

@@ -0,0 +1,53 @@
+import ActionModal from './index.vue'
+
+export default {
+  title: 'Components/ActionModal',
+  component: ActionModal,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import ActionModal from "@eturnity/eturnity_reusable_components/src/components/modals/ActionModal"
+// This is a reusable modal component that can be used to display information to the user.
+// To use:
+// <ActionModal :isOpen="isOpen" @on-close="$emit('on-close-summary')" >
+//   <template #title>
+//     <h1>Header</h1>
+//   </template>
+//   <template #body>
+//     <p>Body</p>
+//   </template>
+//   <template #buttons>
+//     <button @click="closeModal">Close</button>
+//   </template>
+// </ActionModal>
+
+export const Default = {
+  args: {
+    isOpen: true,
+  },
+  render: (args) => ({
+    components: { ActionModal },
+    setup() {
+      return { args }
+    },
+    template: `
+      <ActionModal v-bind="args">
+        <template #title>Sample title</template>
+        <template #body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt commodo mollis. Fusce urna felis,
+          malesuada sed elementum et, fermentum ac massa. Integer in massa vel orci fermentum bibendum in ut ante.
+          Donec risus risus, luctus quis ex a, pulvinar placerat lacus. Sed pharetra augue a elit volutpat, eu dignissim
+          ex pretium. Aenean imperdiet, nulla in pharetra rutrum, mauris mauris tincidunt tellus, non tempus quam lorem
+          laoreet lectus.
+        </template>
+        <template #buttons>
+          <button @click="saveAction">Save</button>
+          <button @click="closeAction">Close</button>
+        </template>
+      </ActionModal>
+    `,
+  }),
+}

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

@@ -1,13 +1,13 @@
 <template>
-  <Modal :is-open="isOpen" @on-close="closeModal">
+  <Modal data-test-id="actionModal" :is-open="isOpen" @on-close="closeModal">
     <ModalContainer>
-      <ModalTitle v-if="$slots.title">
+      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
         <slot name="title"></slot>
       </ModalTitle>
-      <TextContainer v-if="$slots.body">
+      <TextContainer v-if="$slots.body" data-test-id="modal_body">
         <slot name="body"></slot>
       </TextContainer>
-      <ButtonContainer v-if="$slots.buttons">
+      <ButtonContainer v-if="$slots.buttons" data-test-id="modal_buttons">
         <slot name="buttons"></slot>
       </ButtonContainer>
     </ModalContainer>
@@ -23,7 +23,7 @@
   `
   const ModalTitle = styled.div`
     color: ${(props) => props.theme.colors.black};
-    font-family: ${(props) => props.theme.fonts.mainFont};
+    font-family: inherit;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
@@ -37,7 +37,7 @@
   `
   const TextContainer = styled.div`
     color: ${(props) => props.theme.colors.black};
-    font-family: ${(props) => props.theme.fonts.mainFont};
+    font-family: inherit;
     font-size: 13px;
     font-style: normal;
     font-weight: 400;

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

@@ -1,48 +1,78 @@
 <template>
-  <ActionModal :is-open="isOpen" @on-close="closeModal">
+  <RCModal data-test-id="infoModal" :is-open="isOpen" @on-close="closeModal">
     <ModalContainer>
-      <template #title>
+      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
         <slot name="title"></slot>
-      </template>
-      <template #body>
+      </ModalTitle>
+      <TextContainer v-if="$slots.body" data-test-id="modal_body">
         <slot name="body"></slot>
-      </template>
-      <template #buttons>
-        <ButtonContainer>
-          <RCMainButton
-            min-width="150px"
-            :text="$gettext('Got it')"
-            type="primary"
-            @click="closeModal"
-          />
-        </ButtonContainer>
-      </template>
+      </TextContainer>
+      <ButtonContainer>
+        <RCMainButton
+          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 '../modal'
   import RCMainButton from '../../buttons/mainButton'
+
   const ModalContainer = styled.div`
     width: 450px;
     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;
     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: {
+      RCModal,
       ModalContainer,
+      ModalTitle,
       ButtonContainer,
-      ActionModal,
+      TextContainer,
       RCMainButton,
     },
-    props: ['isOpen'],
+    props: {
+      isOpen: {
+        type: Boolean,
+        required: true,
+      },
+      buttonText: {
+        type: String,
+        default: 'Got it',
+      },
+    },
     methods: {
       closeModal() {
         this.$emit('on-close')

package/src/components/modals/infoModal/infoModal.spec.js

@@ -0,0 +1,55 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import InfoModal from '@/components/modals/infoModal'
+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('InfoModal Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(InfoModal, {
+      props: {
+        isOpen: true,
+        buttonText: 'Close',
+      },
+      slots: {
+        title: 'Sample title',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt commodo mollis. Fusce urna felis, malesuada sed elementum et, fermentum ac massa. Integer in massa vel orci fermentum bibendum in ut ante. Donec risus risus, luctus quis ex a, pulvinar placerat lacus. Sed pharetra augue a elit volutpat, eu dignissim ex pretium. Aenean imperdiet, nulla in pharetra rutrum, mauris mauris tincidunt tellus, non tempus quam lorem laoreet lectus.',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders InfoModal component with default props', () => {
+    expect(wrapper.find('[data-test-id="infoModal"]').exists()).toBe(true)
+
+    expect(wrapper.vm.isOpen).toBe(true)
+    expect(wrapper.vm.buttonText).toContain('Close')
+  })
+
+  test('info modal slots is display when user passed slots content', () => {
+    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
+    expect(modalTitleEl.text()).toBe('Sample title')
+
+    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
+    expect(modalBodyEl.text()).toContain('Lorem ipsum dolor sit amet')
+  })
+
+  test('info modal on-close event is emitted when modal close button is clicked', async () => {
+    const modalCloseButton = wrapper.find('.close')
+
+    modalCloseButton.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+  })
+})

package/src/components/modals/infoModal/infoModal.stories.js

@@ -0,0 +1,47 @@
+import InfoModal from './index.vue'
+
+export default {
+  title: 'Components/InfoModal',
+  component: InfoModal,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import InfoModal from "@eturnity/eturnity_reusable_components/src/components/modals/infoModal"
+// This is a reusable modal component that can be used to display information to the user.
+// To use:
+// <InfoModal :isOpen="isOpen" @on-close="$emit('on-close-summary')" >
+//   <template #title>
+//     <h1>Header</h1>
+//   </template>
+//   <template #body>
+//     <p>Body</p>
+//   </template>
+// </InfoModal>
+
+export const Default = {
+  args: {
+    isOpen: true,
+    buttonText: 'Close',
+  },
+  render: (args) => ({
+    components: { InfoModal },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoModal v-bind="args">
+        <template #title>Sample title</template>
+        <template #body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt commodo mollis. Fusce urna felis,
+          malesuada sed elementum et, fermentum ac massa. Integer in massa vel orci fermentum bibendum in ut ante.
+          Donec risus risus, luctus quis ex a, pulvinar placerat lacus. Sed pharetra augue a elit volutpat, eu dignissim
+          ex pretium. Aenean imperdiet, nulla in pharetra rutrum, mauris mauris tincidunt tellus, non tempus quam lorem
+          laoreet lectus.
+        </template>
+      </InfoModal>
+    `,
+  }),
+}

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

@@ -1,6 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    ref="modalRef"
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     :is-open="isOpen"
@@ -36,6 +37,7 @@
   //   <div>Data....</div>
   // </modal>
 
+  import { ref, provide } from 'vue'
   import styled from 'vue3-styled-components'
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
@@ -58,14 +60,14 @@
     props.backdrop == 'dark'
       ? 'rgba(0, 0, 0, 0.4)'
       : 'rgba(255, 255, 255, 0.9)'};
-  z-index: 99999;
+  z-index: 9999999;
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-  @media (max-width: 425px) {
-    background: white;
-  }
-`
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
 
   const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
@@ -163,6 +165,14 @@
         default: false,
       },
     },
+    setup() {
+      const modalRef = ref(null)
+      provide('modalRef', modalRef)
+
+      return {
+        modalRef,
+      }
+    },
     watch: {
       isOpen: {
         immediate: true,

package/src/components/pageSubtitle/PageSubtitle.stories.js

@@ -16,7 +16,6 @@ export default {
       description: 'Text for tooltip',
     },
   },
-  tags: ['autodocs'],
 }
 
 // To use: