@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.2 → 7.45.5-EPDM-10609.1

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

@@ -1,205 +1,205 @@
-<template>
-  <PageWrapper
-    :backdrop="backdrop"
-    :class="{ visible: isOpen, hidden: !isOpen }"
-    data-test-id="banner_wrapper"
-    :is-open="isOpen"
-    :position="position"
-  >
-    <ModalContainer
-      data-test-id="modal-container"
-      @click="onClickModalContainer"
-    >
-      <Spinner
-        v-if="isLoading"
-        data-test-id="banner_spinner"
-        :limited-to-modal="true"
-        size="50px"
-      />
-      <ContentContainer :visible="!isLoading">
-        <slot></slot>
-      </ContentContainer>
-      <CloseButton
-        v-if="!hideClose"
-        class="close"
-        data-test-id="banner_close_button"
-        @click="onCloseModal()"
-      />
-    </ModalContainer>
-  </PageWrapper>
-</template>
-
-<script>
-  // To use:
-  // import RCBanner from "@eturnity/eturnity_reusable_components/src/components/banner/banner"
-  // <RCBanner
-  //   backdrop="white" // white, dark
-  //   :hideClose="true"
-  //   :isLoading="true"
-  //   :isOpen="true"
-  //   position="fixed"
-  //   stopPropagation="false"
-  //   @on-close="handleClose"
-  // />
-
-  import styled from 'vue3-styled-components'
-  import CloseButton from '../../buttons/closeButton'
-  import Spinner from '../../spinner'
-
-  const contentAttrs = { visible: Boolean }
-  const ContentContainer = styled('div', contentAttrs)`
-    visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
-    color: red;
-  `
-
-  const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
-  const PageWrapper = styled('div', pageAttrs)`
-    position: ${(props) => props.position};
-    display: grid;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) =>
-      props.backdrop == 'dark'
-        ? 'rgba(0, 0, 0, 0.4)'
-        : 'rgba(255, 255, 255, 0.9)'};
-    z-index: 99999;
-    overflow: auto;
-
-    &.visible {
-      visibility: visible;
-      opacity: 1;
-      transition: visibility 0s linear 0s, opacity 300ms;
-    }
-
-    &.hidden {
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility 0s linear 300ms, opacity 300ms;
-    }
-
-    @media (max-width: 425px) {
-      background: white;
-    }
-  `
-
-  const ModalContainer = styled.div`
-    align-self: center;
-    justify-self: center;
-    position: relative;
-    box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    background: white;
-    margin: 0 auto;
-    overflow: auto;
-    max-width: 95%;
-    max-height: 95%;
-    min-width: 100px;
-    min-height: 100px;
-
-    ::-webkit-scrollbar {
-      width: 0.3em;
-      height: 100%;
-      background-color: ${(props) => props.theme.colors.grey5};
-    }
-
-    /* Make scrollbar visible when needed */
-    ::-webkit-scrollbar-thumb {
-      background-color: ${(props) => props.theme.colors.grey3};
-    }
-
-    /* Make scrollbar track visible when needed */
-    ::-webkit-scrollbar-track {
-      background-color: ${(props) => props.theme.colors.grey5};
-    }
-
-    .close {
-      position: absolute;
-      right: 20px;
-      top: 20px;
-
-      @media (max-width: 425px) {
-        right: 14px;
-        top: 12px;
-        background: white;
-        position: fixed;
-        z-index: 99;
-      }
-    }
-
-    @media (max-width: 425px) {
-      width: 100%;
-      height: 100%;
-      box-shadow: none;
-    }
-  `
-
-  export default {
-    name: 'Modal',
-    components: {
-      PageWrapper,
-      ModalContainer,
-      CloseButton,
-      Spinner,
-      ContentContainer,
-    },
-    props: {
-      isOpen: {
-        type: Boolean,
-        default: false,
-      },
-      isLoading: {
-        type: Boolean,
-        default: false,
-      },
-      hideClose: {
-        type: Boolean,
-        default: false,
-      },
-      backdrop: {
-        type: String,
-        default: 'white',
-      },
-      position: {
-        type: String,
-        default: 'fixed',
-      },
-      stopPropagation: {
-        type: Boolean,
-        default: true,
-      },
-    },
-    watch: {
-      isOpen: {
-        immediate: true,
-        handler(isOpen) {
-          document.body.style.overflow = isOpen ? 'hidden' : ''
-          if (isOpen) {
-            window.addEventListener('keydown', this.handleKeyDown)
-          } else {
-            window.removeEventListener('keydown', this.handleKeyDown)
-          }
-        },
-      },
-    },
-    beforeUnmount() {
-      window.removeEventListener('keydown', this.handleKeyDown)
-    },
-    methods: {
-      onCloseModal() {
-        this.$emit('on-close')
-      },
-      handleKeyDown({ key }) {
-        if (key === 'Escape') {
-          this.onCloseModal()
-        }
-      },
-      onClickModalContainer(event) {
-        if (this.stopPropagation) {
-          event.stopPropagation()
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <PageWrapper
+    :backdrop="backdrop"
+    :class="{ visible: isOpen, hidden: !isOpen }"
+    data-test-id="banner_wrapper"
+    :is-open="isOpen"
+    :position="position"
+  >
+    <ModalContainer
+      data-test-id="modal-container"
+      @click="onClickModalContainer"
+    >
+      <Spinner
+        v-if="isLoading"
+        data-test-id="banner_spinner"
+        :limited-to-modal="true"
+        size="50px"
+      />
+      <ContentContainer :visible="!isLoading">
+        <slot></slot>
+      </ContentContainer>
+      <CloseButton
+        v-if="!hideClose"
+        class="close"
+        data-test-id="banner_close_button"
+        @click="onCloseModal()"
+      />
+    </ModalContainer>
+  </PageWrapper>
+</template>
+
+<script>
+  // To use:
+  // import RCBanner from "@eturnity/eturnity_reusable_components/src/components/banner/banner"
+  // <RCBanner
+  //   backdrop="white" // white, dark
+  //   :hideClose="true"
+  //   :isLoading="true"
+  //   :isOpen="true"
+  //   position="fixed"
+  //   stopPropagation="false"
+  //   @on-close="handleClose"
+  // />
+
+  import styled from 'vue3-styled-components'
+  import CloseButton from '../../buttons/closeButton'
+  import Spinner from '../../spinner'
+
+  const contentAttrs = { visible: Boolean }
+  const ContentContainer = styled('div', contentAttrs)`
+    visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
+    color: red;
+  `
+
+  const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
+  const PageWrapper = styled('div', pageAttrs)`
+    position: ${(props) => props.position};
+    display: grid;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: ${(props) =>
+      props.backdrop == 'dark'
+        ? 'rgba(0, 0, 0, 0.4)'
+        : 'rgba(255, 255, 255, 0.9)'};
+    z-index: 99999;
+    overflow: auto;
+
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0s linear 0s, opacity 300ms;
+    }
+
+    &.hidden {
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility 0s linear 300ms, opacity 300ms;
+    }
+
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
+
+  const ModalContainer = styled.div`
+    align-self: center;
+    justify-self: center;
+    position: relative;
+    box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    background: white;
+    margin: 0 auto;
+    overflow: auto;
+    max-width: 95%;
+    max-height: 95%;
+    min-width: 100px;
+    min-height: 100px;
+
+    ::-webkit-scrollbar {
+      width: 0.3em;
+      height: 100%;
+      background-color: ${(props) => props.theme.colors.grey5};
+    }
+
+    /* Make scrollbar visible when needed */
+    ::-webkit-scrollbar-thumb {
+      background-color: ${(props) => props.theme.colors.grey3};
+    }
+
+    /* Make scrollbar track visible when needed */
+    ::-webkit-scrollbar-track {
+      background-color: ${(props) => props.theme.colors.grey5};
+    }
+
+    .close {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+
+      @media (max-width: 425px) {
+        right: 14px;
+        top: 12px;
+        background: white;
+        position: fixed;
+        z-index: 99;
+      }
+    }
+
+    @media (max-width: 425px) {
+      width: 100%;
+      height: 100%;
+      box-shadow: none;
+    }
+  `
+
+  export default {
+    name: 'Modal',
+    components: {
+      PageWrapper,
+      ModalContainer,
+      CloseButton,
+      Spinner,
+      ContentContainer,
+    },
+    props: {
+      isOpen: {
+        type: Boolean,
+        default: false,
+      },
+      isLoading: {
+        type: Boolean,
+        default: false,
+      },
+      hideClose: {
+        type: Boolean,
+        default: false,
+      },
+      backdrop: {
+        type: String,
+        default: 'white',
+      },
+      position: {
+        type: String,
+        default: 'fixed',
+      },
+      stopPropagation: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    watch: {
+      isOpen: {
+        immediate: true,
+        handler(isOpen) {
+          document.body.style.overflow = isOpen ? 'hidden' : ''
+          if (isOpen) {
+            window.addEventListener('keydown', this.handleKeyDown)
+          } else {
+            window.removeEventListener('keydown', this.handleKeyDown)
+          }
+        },
+      },
+    },
+    beforeUnmount() {
+      window.removeEventListener('keydown', this.handleKeyDown)
+    },
+    methods: {
+      onCloseModal() {
+        this.$emit('on-close')
+      },
+      handleKeyDown({ key }) {
+        if (key === 'Escape') {
+          this.onCloseModal()
+        }
+      },
+      onClickModalContainer(event) {
+        if (this.stopPropagation) {
+          event.stopPropagation()
+        }
+      },
+    },
+  }
+</script>

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

@@ -1,70 +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)
-  })
-})
+/* 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

@@ -1,42 +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>
-    `,
-  }),
-}
+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>
+    `,
+  }),
+}