@eturnity/eturnity_reusable_components 7.45.0 → 7.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.45.0",
+  "version": "7.45.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() {