@eturnity/eturnity_reusable_components 7.39.2 → 7.39.4-EPDM-11314.0

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

@@ -1,76 +1,76 @@
-/* eslint-disable */
-import { h } from 'vue'
-import { mount } from '@vue/test-utils'
-import ActionBanner from '@/components/banner/actionBanner'
-import theme from '@/assets/theme'
-
-describe('Action Banner Component', () => {
-  it('action banner is shown when isOpen props is true', async () => {
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: false,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const bannerWrapper = wrapper.find('[data-test-id="action_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('action banner slots is display when user passed slots content', async () => {
-    const titleText = 'Sample title'
-    const bodyText = 'Sample body text'
-    const buttonText = 'Sample button'
-
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: false,
-      },
-      slots: {
-        title: titleText,
-        body: bodyText,
-        buttons: h('button', {}, buttonText),
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    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)
-    const modalButtonsEl = wrapper.find('[data-test-id="modal_buttons"]')
-    expect(modalButtonsEl.text()).toBe(buttonText)
-  })
-
-  it('action banner on-close event is emitted when modal close button is clicked', async () => {
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: true,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    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 ActionBanner from '@/components/banner/actionBanner'
+import theme from '@/assets/theme'
+
+describe('Action Banner Component', () => {
+  it('action banner is shown when isOpen props is true', async () => {
+    const wrapper = mount(ActionBanner, {
+      props: {
+        isOpen: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="action_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('action banner slots is display when user passed slots content', async () => {
+    const titleText = 'Sample title'
+    const bodyText = 'Sample body text'
+    const buttonText = 'Sample button'
+
+    const wrapper = mount(ActionBanner, {
+      props: {
+        isOpen: false,
+      },
+      slots: {
+        title: titleText,
+        body: bodyText,
+        buttons: h('button', {}, buttonText),
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    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)
+    const modalButtonsEl = wrapper.find('[data-test-id="modal_buttons"]')
+    expect(modalButtonsEl.text()).toBe(buttonText)
+  })
+
+  it('action banner on-close event is emitted when modal close button is clicked', async () => {
+    const wrapper = mount(ActionBanner, {
+      props: {
+        isOpen: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    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/actionBanner/index.vue

@@ -1,86 +1,86 @@
-<template>
-  <Modal
-    :is-open="isOpen"
-    data-test-id="action_banner_wrapper"
-    @on-close="closeModal"
-  >
-    <ModalContainer>
-      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
-        <slot name="title"></slot>
-      </ModalTitle>
-      <TextContainer v-if="$slots.body" data-test-id="modal_body">
-        <slot name="body"></slot>
-      </TextContainer>
-      <ButtonContainer v-if="$slots.buttons" data-test-id="modal_buttons">
-        <slot name="buttons"></slot>
-      </ButtonContainer>
-    </ModalContainer>
-  </Modal>
-</template>
-<script>
-  // import RCBanner from "@eturnity/eturnity_reusable_components/src/components/banner/actionBanner"
-  // <RCActionBanner
-  //   :isOpen="true"
-  //   @on-close="handleClose"
-  // >
-  //   <template #title>Sample title</template>
-  //   <template #body>Sample body</template>
-  //   <template #buttons>
-  //     <button>Sample button </button>
-  //   </template>
-  // </RCActionBanner>
-
-  import styled from 'vue3-styled-components'
-  import Modal from '@/components/modals/modal'
-  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: 'ActionModal',
-    components: {
-      Modal,
-      ModalContainer,
-      ModalTitle,
-      ButtonContainer,
-      TextContainer,
-    },
-    props: {
-      isOpen: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    methods: {
-      closeModal() {
-        this.$emit('on-close')
-      },
-    },
-  }
-</script>
+<template>
+  <Modal
+    :is-open="isOpen"
+    data-test-id="action_banner_wrapper"
+    @on-close="closeModal"
+  >
+    <ModalContainer>
+      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
+        <slot name="title"></slot>
+      </ModalTitle>
+      <TextContainer v-if="$slots.body" data-test-id="modal_body">
+        <slot name="body"></slot>
+      </TextContainer>
+      <ButtonContainer v-if="$slots.buttons" data-test-id="modal_buttons">
+        <slot name="buttons"></slot>
+      </ButtonContainer>
+    </ModalContainer>
+  </Modal>
+</template>
+<script>
+  // import RCBanner from "@eturnity/eturnity_reusable_components/src/components/banner/actionBanner"
+  // <RCActionBanner
+  //   :isOpen="true"
+  //   @on-close="handleClose"
+  // >
+  //   <template #title>Sample title</template>
+  //   <template #body>Sample body</template>
+  //   <template #buttons>
+  //     <button>Sample button </button>
+  //   </template>
+  // </RCActionBanner>
+
+  import styled from 'vue3-styled-components'
+  import Modal from '@/components/modals/modal'
+  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: 'ActionModal',
+    components: {
+      Modal,
+      ModalContainer,
+      ModalTitle,
+      ButtonContainer,
+      TextContainer,
+    },
+    props: {
+      isOpen: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      closeModal() {
+        this.$emit('on-close')
+      },
+    },
+  }
+</script>

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

@@ -1,64 +1,64 @@
-import Banner from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'Banner',
-  component: Banner,
-  tags: ['autodocs'],
-}
-
-// To use:
-// <RCBanner
-//   backdrop="white" // white, dark
-//   :hideClose="true"
-//   :isLoading="true"
-//   :isOpen="true"
-//   position="fixed"
-//   stopPropagation="false"
-//   @on-close="handleClose"
-// />
-
-export const Default = {
-  args: {
-    isOpen: false,
-    isLoading: false,
-    hideClose: false,
-    backdrop: 'white',
-    position: 'fixed',
-    stopPropagation: true,
-  },
-}
-
-export const OpenedBanner = {
-  args: {
-    isOpen: true,
-  },
-}
-
-export const LoadingBanner = {
-  args: {
-    isOpen: true,
-    isLoading: true,
-  },
-}
-
-export const HiddenCloseButton = {
-  args: {
-    isOpen: true,
-    hideClose: true,
-  },
-}
-
-export const DarkBackdrop = {
-  args: {
-    isOpen: true,
-    backdrop: 'dark',
-  },
-}
-
-export const AbsolutePositionBanner = {
-  args: {
-    isOpen: true,
-    position: 'absolute',
-  },
-}
+import Banner from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Banner',
+  component: Banner,
+  tags: ['autodocs'],
+}
+
+// To use:
+// <RCBanner
+//   backdrop="white" // white, dark
+//   :hideClose="true"
+//   :isLoading="true"
+//   :isOpen="true"
+//   position="fixed"
+//   stopPropagation="false"
+//   @on-close="handleClose"
+// />
+
+export const Default = {
+  args: {
+    isOpen: false,
+    isLoading: false,
+    hideClose: false,
+    backdrop: 'white',
+    position: 'fixed',
+    stopPropagation: true,
+  },
+}
+
+export const OpenedBanner = {
+  args: {
+    isOpen: true,
+  },
+}
+
+export const LoadingBanner = {
+  args: {
+    isOpen: true,
+    isLoading: true,
+  },
+}
+
+export const HiddenCloseButton = {
+  args: {
+    isOpen: true,
+    hideClose: true,
+  },
+}
+
+export const DarkBackdrop = {
+  args: {
+    isOpen: true,
+    backdrop: 'dark',
+  },
+}
+
+export const AbsolutePositionBanner = {
+  args: {
+    isOpen: true,
+    position: 'absolute',
+  },
+}