@eturnity/eturnity_reusable_components 8.22.23-EPDM-13618.1 → 8.22.23-EPDM-15710.0

package/src/components/banner/banner/Banner.stories.js

@@ -1,120 +1,120 @@
-import Banner from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'Banner',
-  component: Banner,
-  tags: ['autodocs'],
-  argTypes: {
-    isOpen: {
-      control: 'boolean',
-      description: 'Whether the banner is visible',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Whether to show a loading spinner',
-    },
-    hideClose: {
-      control: 'boolean',
-      description: 'Whether to hide the close button',
-    },
-    backdrop: {
-      control: 'select',
-      options: ['white', 'dark'],
-      description: 'Type of backdrop overlay',
-    },
-    position: {
-      control: 'select',
-      options: ['fixed', 'absolute', 'relative'],
-      description: 'Position of the banner',
-    },
-    stopPropagation: {
-      control: 'boolean',
-      description:
-        'Whether to stop event propagation when clicking the modal container',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { Banner },
-  setup() {
-    return { args }
-  },
-  template: `
-    <Banner v-bind="args" @on-close="onClose">
-      <div style="padding: 20px;">
-        <h2>Banner Content</h2>
-        <p>This is some example content inside the banner.</p>
-      </div>
-    </Banner>
-  `,
-  methods: {
-    onClose() {
-      console.log('Banner closed')
-    },
-  },
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  isOpen: false,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'white',
-  position: 'fixed',
-  stopPropagation: true,
-}
-
-export const OpenedBanner = Template.bind({})
-OpenedBanner.args = {
-  isOpen: true,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'white',
-  position: 'fixed',
-  stopPropagation: true,
-}
-
-export const LoadingBanner = Template.bind({})
-LoadingBanner.args = {
-  isOpen: true,
-  isLoading: true,
-  hideClose: false,
-  backdrop: 'white',
-  position: 'fixed',
-  stopPropagation: true,
-}
-
-export const HiddenCloseButton = Template.bind({})
-HiddenCloseButton.args = {
-  isOpen: true,
-  isLoading: false,
-  hideClose: true,
-  backdrop: 'white',
-  position: 'fixed',
-  stopPropagation: true,
-}
-
-export const DarkBackdrop = Template.bind({})
-DarkBackdrop.args = {
-  isOpen: true,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'dark',
-  position: 'fixed',
-  stopPropagation: true,
-}
-
-export const AbsolutePositionBanner = Template.bind({})
-AbsolutePositionBanner.args = {
-  isOpen: true,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'white',
-  position: 'absolute',
-  stopPropagation: true,
-}
+import Banner from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Banner',
+  component: Banner,
+  tags: ['autodocs'],
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the banner is visible',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether to show a loading spinner',
+    },
+    hideClose: {
+      control: 'boolean',
+      description: 'Whether to hide the close button',
+    },
+    backdrop: {
+      control: 'select',
+      options: ['white', 'dark'],
+      description: 'Type of backdrop overlay',
+    },
+    position: {
+      control: 'select',
+      options: ['fixed', 'absolute', 'relative'],
+      description: 'Position of the banner',
+    },
+    stopPropagation: {
+      control: 'boolean',
+      description:
+        'Whether to stop event propagation when clicking the modal container',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { Banner },
+  setup() {
+    return { args }
+  },
+  template: `
+    <Banner v-bind="args" @on-close="onClose">
+      <div style="padding: 20px;">
+        <h2>Banner Content</h2>
+        <p>This is some example content inside the banner.</p>
+      </div>
+    </Banner>
+  `,
+  methods: {
+    onClose() {
+      console.log('Banner closed')
+    },
+  },
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isOpen: false,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
+}
+
+export const OpenedBanner = Template.bind({})
+OpenedBanner.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
+}
+
+export const LoadingBanner = Template.bind({})
+LoadingBanner.args = {
+  isOpen: true,
+  isLoading: true,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
+}
+
+export const HiddenCloseButton = Template.bind({})
+HiddenCloseButton.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: true,
+  backdrop: 'white',
+  position: 'fixed',
+  stopPropagation: true,
+}
+
+export const DarkBackdrop = Template.bind({})
+DarkBackdrop.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'dark',
+  position: 'fixed',
+  stopPropagation: true,
+}
+
+export const AbsolutePositionBanner = Template.bind({})
+AbsolutePositionBanner.args = {
+  isOpen: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'white',
+  position: 'absolute',
+  stopPropagation: true,
+}

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

@@ -1,149 +1,149 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import Banner from '@/components/banner/banner'
-import theme from '@/assets/theme'
-
-describe('Banner Component', () => {
-  it('banner is shown when isOpen props is true', async () => {
-    // Start with isOpen as false
-    const wrapper = mount(Banner, {
-      props: {
-        isOpen: false,
-        isLoading: false,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
-    // check that the element exists with correct props
-    expect(bannerWrapper.exists()).toBe(true)
-    // Check if wrapper doesnt have the 'visible' class, and have 'hidden' class
-    expect(bannerWrapper.classes()).not.toContain('visible')
-    expect(bannerWrapper.classes()).toContain('hidden')
-    // Now, set isOpen to true
-    await wrapper.setProps({ isOpen: true })
-    // Check if the 'visible' class is applied and 'hidden' class is not applied
-    expect(bannerWrapper.classes()).toContain('visible')
-    expect(bannerWrapper.classes()).not.toContain('hidden')
-  })
-
-  it('banner spinner is shown when user set isLoading props is true', async () => {
-    // Start with isLoading is false
-    const wrapper = mount(Banner, {
-      props: {
-        isOpen: true,
-        isLoading: false,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
-    // Initial check, spinner should not exist
-    let spinnerElement = bannerWrapper.find('[data-test-id="banner_spinner"]')
-    expect(spinnerElement.exists()).toBe(false)
-    // Set isLoading to true
-    await wrapper.setProps({ isLoading: true })
-    await wrapper.vm.$nextTick()
-    // Find the spinner element again after updating the prop and check if it exsit
-    spinnerElement = bannerWrapper.find('[data-test-id="banner_spinner"]')
-    expect(spinnerElement.exists()).toBe(true)
-  })
-
-  it('banner close button is not shown when hideClose props is true', async () => {
-    // Set hideClose to false
-    const wrapper = mount(Banner, {
-      props: {
-        isOpen: true,
-        hideClose: false,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
-
-    // Initial check, closeButton should exist
-    let closeButton = bannerWrapper.find('[data-test-id="banner_close_button"]')
-    expect(closeButton.exists()).toBe(true)
-    // Set isLoading to true
-    await wrapper.setProps({ hideClose: true })
-    await wrapper.vm.$nextTick()
-    // Find the closeButton element again after updating the prop
-    closeButton = bannerWrapper.find('[data-test-id="banner_close_button"]')
-    // Check if closeButton does not exist now
-    expect(closeButton.exists()).toBe(false)
-  })
-
-  it('banner on-close event is emitted when close button is clicked', async () => {
-    const wrapper = mount(Banner, {
-      props: {
-        isOpen: true,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
-    // Find the close button element
-    const closeButton = bannerWrapper.find(
-      '[data-test-id="banner_close_button"]'
-    )
-    // Simulate a click and check if the component emmitted a on-close event
-    await closeButton.trigger('click')
-    expect(wrapper.emitted('on-close')).toBeTruthy()
-    const emittedEvent = wrapper.emitted('on-close')
-    expect(emittedEvent).toHaveLength(1)
-  })
-
-  it('event.stopPropagation is called when stopPropagation prop is true and banner wrapper is clicked', async () => {
-    const wrapper = mount(Banner, {
-      props: {
-        isOpen: true,
-        stopPropagation: true,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
-    let modalWrapper = bannerWrapper.find('[data-test-id="modal-container"]')
-    // Mock for event.stopPropagation
-    const stopPropagationMock = jest.fn()
-    // Simulate a click event with the mocked stopPropagation function
-    await modalWrapper.trigger('click', {
-      stopPropagation: stopPropagationMock,
-    })
-    // Check if stopPropagation was called
-    expect(stopPropagationMock).toHaveBeenCalled()
-
-    // Set stopPropagation props to false and wait for the DOM to update
-    await wrapper.setProps({ stopPropagation: false })
-    await wrapper.vm.$nextTick()
-
-    // Create new mock for event.stopPropagation that should not be called
-    const stopPropagationNotCalledMock = jest.fn()
-    // Simulate againma click event
-    await modalWrapper.trigger('click', {
-      stopPropagation: stopPropagationNotCalledMock,
-    })
-    // Check if stopPropagation was NOT called
-    expect(stopPropagationNotCalledMock).not.toHaveBeenCalled()
-  })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Banner from '@/components/banner/banner'
+import theme from '@/assets/theme'
+
+describe('Banner Component', () => {
+  it('banner is shown when isOpen props is true', async () => {
+    // Start with isOpen as false
+    const wrapper = mount(Banner, {
+      props: {
+        isOpen: false,
+        isLoading: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
+    // check that the element exists with correct props
+    expect(bannerWrapper.exists()).toBe(true)
+    // Check if wrapper doesnt have the 'visible' class, and have 'hidden' class
+    expect(bannerWrapper.classes()).not.toContain('visible')
+    expect(bannerWrapper.classes()).toContain('hidden')
+    // Now, set isOpen to true
+    await wrapper.setProps({ isOpen: true })
+    // Check if the 'visible' class is applied and 'hidden' class is not applied
+    expect(bannerWrapper.classes()).toContain('visible')
+    expect(bannerWrapper.classes()).not.toContain('hidden')
+  })
+
+  it('banner spinner is shown when user set isLoading props is true', async () => {
+    // Start with isLoading is false
+    const wrapper = mount(Banner, {
+      props: {
+        isOpen: true,
+        isLoading: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
+    // Initial check, spinner should not exist
+    let spinnerElement = bannerWrapper.find('[data-test-id="banner_spinner"]')
+    expect(spinnerElement.exists()).toBe(false)
+    // Set isLoading to true
+    await wrapper.setProps({ isLoading: true })
+    await wrapper.vm.$nextTick()
+    // Find the spinner element again after updating the prop and check if it exsit
+    spinnerElement = bannerWrapper.find('[data-test-id="banner_spinner"]')
+    expect(spinnerElement.exists()).toBe(true)
+  })
+
+  it('banner close button is not shown when hideClose props is true', async () => {
+    // Set hideClose to false
+    const wrapper = mount(Banner, {
+      props: {
+        isOpen: true,
+        hideClose: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
+
+    // Initial check, closeButton should exist
+    let closeButton = bannerWrapper.find('[data-test-id="banner_close_button"]')
+    expect(closeButton.exists()).toBe(true)
+    // Set isLoading to true
+    await wrapper.setProps({ hideClose: true })
+    await wrapper.vm.$nextTick()
+    // Find the closeButton element again after updating the prop
+    closeButton = bannerWrapper.find('[data-test-id="banner_close_button"]')
+    // Check if closeButton does not exist now
+    expect(closeButton.exists()).toBe(false)
+  })
+
+  it('banner on-close event is emitted when close button is clicked', async () => {
+    const wrapper = mount(Banner, {
+      props: {
+        isOpen: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
+    // Find the close button element
+    const closeButton = bannerWrapper.find(
+      '[data-test-id="banner_close_button"]'
+    )
+    // Simulate a click and check if the component emmitted a on-close event
+    await closeButton.trigger('click')
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-close')
+    expect(emittedEvent).toHaveLength(1)
+  })
+
+  it('event.stopPropagation is called when stopPropagation prop is true and banner wrapper is clicked', async () => {
+    const wrapper = mount(Banner, {
+      props: {
+        isOpen: true,
+        stopPropagation: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="banner_wrapper"]')
+    let modalWrapper = bannerWrapper.find('[data-test-id="modal-container"]')
+    // Mock for event.stopPropagation
+    const stopPropagationMock = jest.fn()
+    // Simulate a click event with the mocked stopPropagation function
+    await modalWrapper.trigger('click', {
+      stopPropagation: stopPropagationMock,
+    })
+    // Check if stopPropagation was called
+    expect(stopPropagationMock).toHaveBeenCalled()
+
+    // Set stopPropagation props to false and wait for the DOM to update
+    await wrapper.setProps({ stopPropagation: false })
+    await wrapper.vm.$nextTick()
+
+    // Create new mock for event.stopPropagation that should not be called
+    const stopPropagationNotCalledMock = jest.fn()
+    // Simulate againma click event
+    await modalWrapper.trigger('click', {
+      stopPropagation: stopPropagationNotCalledMock,
+    })
+    // Check if stopPropagation was NOT called
+    expect(stopPropagationNotCalledMock).not.toHaveBeenCalled()
+  })
+})