@eturnity/eturnity_reusable_components 7.39.1-EPDM-11736.1 → 7.39.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.39.1-EPDM-11736.1",
+  "version": "7.39.2",
   "files": [
     "dist",
     "src"

package/src/components/banner/actionBanner/ActionBanner.stories.js

@@ -0,0 +1,45 @@
+import ActionBanner from './index.vue'
+import theme from '@/assets/theme'
+export default {
+  title: 'ActionBanner',
+  component: ActionBanner,
+  tags: ['autodocs'],
+}
+
+// <RCActionBanner
+//   :isOpen="true"
+//   @on-close="handleClose"
+// >
+//   <template #title>Sample title</template>
+//   <template #body>Sample body</template>
+//   <template #buttons>
+//     <button>Sample button </button>
+//   </template>
+// </RCActionBanner>
+
+export const Default = {
+  args: {
+    isOpen: false,
+  },
+}
+
+export const OpenedActionBanner = {
+  args: {
+    isOpen: true,
+  },
+  render: (args) => ({
+    components: { ActionBanner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <ActionBanner v-bind="args">
+        <template #title>Sample title</template>
+        <template #body>Sample body</template>
+        <template #buttons>
+          <button>Sample button </button>
+        </template>
+      </ActionBanner>
+    `,
+  }),
+}

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

@@ -0,0 +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)
+  })
+})

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

@@ -1,21 +1,37 @@
 <template>
-  <Modal :is-open="isOpen" @on-close="closeModal">
+  <Modal
+    :is-open="isOpen"
+    data-test-id="action_banner_wrapper"
+    @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>
   </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 '../modal'
+  import Modal from '@/components/modals/modal'
   const ModalContainer = styled.div`
     width: 450px;
     min-height: 205px;
@@ -23,7 +39,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 +53,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;
@@ -45,6 +61,7 @@
     padding: 30px 0px;
     white-space: pre-wrap;
   `
+
   export default {
     name: 'ActionModal',
     components: {
@@ -54,7 +71,12 @@
       ButtonContainer,
       TextContainer,
     },
-    props: ['isOpen'],
+    props: {
+      isOpen: {
+        type: Boolean,
+        default: false,
+      },
+    },
     methods: {
       closeModal() {
         this.$emit('on-close')

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

@@ -0,0 +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',
+  },
+}

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

@@ -0,0 +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()
+  })
+})

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

@@ -2,29 +2,45 @@
   <PageWrapper
     :backdrop="backdrop"
     :class="{ visible: isOpen, hidden: !isOpen }"
+    data-test-id="banner_wrapper"
     :is-open="isOpen"
     :position="position"
   >
-    <ModalContainer @click="onClickModalContainer">
-      <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
+    <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" @click="onCloseModal()" />
+      <CloseButton
+        v-if="!hideClose"
+        class="close"
+        data-test-id="banner_close_button"
+        @click="onCloseModal()"
+      />
     </ModalContainer>
   </PageWrapper>
 </template>
 
 <script>
-  // Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
-  // 1. On clicking the “escape” key, close the modal onCloseModal()
-  // 2. Always prevent outside close
-  // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
-  // This is a more flexible modal box, where the parent can decide how the body of the modal looks
   // To use:
-  // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
-  //   <div>Data....</div>
-  // </modal>
+  // 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'
@@ -33,6 +49,7 @@
   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 }
@@ -129,23 +146,23 @@
     },
     props: {
       isOpen: {
-        required: true,
+        type: Boolean,
         default: false,
       },
       isLoading: {
-        required: false,
+        type: Boolean,
         default: false,
       },
       hideClose: {
-        required: false,
+        type: Boolean,
         default: false,
       },
       backdrop: {
-        required: false,
+        type: String,
         default: 'white',
       },
       position: {
-        required: false,
+        type: String,
         default: 'fixed',
       },
       stopPropagation: {

package/src/components/selectedOptions/index.vue

@@ -1,9 +1,50 @@
 <template>
   <PageWrapper>
-    <CenterPageContainer v-if="expanded">
+    <PageContainer v-if="!expanded">
+      <BoxContainer>
+        <SelectedContainer>
+          {{ numberSelected }} {{ $gettext('selected') }}
+        </SelectedContainer>
+        <ListContainer v-if="optionsList.length">
+          <ListItem
+            v-for="item in limitedOptions"
+            :key="item.type"
+            :disabled="item.disabled || false"
+            :hover-color="item.hoverColor"
+            @click="$emit('on-' + item.type)"
+          >
+            {{ item.name }}
+          </ListItem>
+          <IconContainer @click="expandOptions">
+            <ButtonContainer
+              v-if="optionsList.length > optionLimit || hasComponent"
+              name="more_options,_tool_tips"
+            >
+              <DotItem />
+              <DotItem />
+              <DotItem />
+            </ButtonContainer>
+          </IconContainer>
+        </ListContainer>
+        <EmptyText v-if="!optionsList.length">
+          {{ $gettext('no_batch_actions_available') }}
+        </EmptyText>
+        <CloseContainer>
+          <IconContainer @click="$emit('on-close')">
+            <Icon
+              color="white"
+              cursor="pointer"
+              name="close_for_modals,_tool_tips"
+              size="14px"
+            />
+          </IconContainer>
+        </CloseContainer>
+      </BoxContainer>
+    </PageContainer>
+    <CenterPageContainer v-else>
       <CenterBox>
         <TitleContainer>
-          <BoxTitle> {{ numberSelected }} {{ selectedText }} </BoxTitle>
+          <BoxTitle> {{ numberSelected }} {{ $gettext('selected') }} </BoxTitle>
           <IconContainer @click="$emit('on-close')">
             <Icon
               color="white"
@@ -21,7 +62,7 @@
             v-for="item in expandedOptions"
             :key="item.type"
             :disabled="item.disabled || false"
-            :has-component="!!item?.component"
+            :hasComponent="!!item?.component"
             :hover-color="item.hoverColor"
             @click="
               !item?.component && !item.disabled && $emit('on-' + item.type)
@@ -29,8 +70,7 @@
           >
             <ListItemWrapper
               v-if="item?.component"
-              :has-component="!!item?.component"
-              test-data-id="expanded_list_item"
+              :hasComponent="!!item?.component"
               @click="!item.disabled && toggleElement(item.type)"
             >
               <ListItemTitle>
@@ -59,48 +99,6 @@
         </ExpandedList>
       </CenterBox>
     </CenterPageContainer>
-    <PageContainer v-else>
-      <BoxContainer>
-        <SelectedContainer>
-          {{ numberSelected }} {{ selectedText }}
-        </SelectedContainer>
-        <ListContainer v-if="optionsList.length">
-          <ListItem
-            v-for="item in limitedOptions"
-            :key="item.type"
-            :disabled="item.disabled || false"
-            :hover-color="item.hoverColor"
-            @click="$emit('on-' + item.type)"
-          >
-            {{ item.name }}
-          </ListItem>
-          <IconContainer
-            v-if="optionsList.length > optionLimit || hasComponent"
-            test-data-id="more_actions_button_wrapper"
-            @click="expandOptions"
-          >
-            <ButtonContainer name="more_options,_tool_tips">
-              <DotItem />
-              <DotItem />
-              <DotItem />
-            </ButtonContainer>
-          </IconContainer>
-        </ListContainer>
-        <EmptyText v-else test-data-id="no_bulk_actions">
-          {{ noBulkActionsText }}
-        </EmptyText>
-        <CloseContainer>
-          <IconContainer @click="$emit('on-close')">
-            <Icon
-              color="white"
-              cursor="pointer"
-              name="close_for_modals,_tool_tips"
-              size="14px"
-            />
-          </IconContainer>
-        </CloseContainer>
-      </BoxContainer>
-    </PageContainer>
   </PageWrapper>
 </template>
 
@@ -175,8 +173,8 @@
   `
 
   const OptionsContainer = styled.div`
-    position: absolute;
-    left: 101%;
+    position: fixed;
+    right: -252px;
     background-color: ${(props) => props.theme.colors.black};
     border-radius: 4px;
     padding: 15px;
@@ -380,21 +378,12 @@
       optionsList: {
         type: Array,
         required: true,
-        default: () => [],
       },
       numberSelected: {
         type: Number,
         required: true,
         default: 0,
       },
-      selectedLabel: {
-        type: String,
-        default: null,
-      },
-      noBulkActionsLabel: {
-        type: String,
-        default: null,
-      },
     },
     data() {
       return {
@@ -412,16 +401,6 @@
       limitedOptions() {
         return this.expandedOptions.filter((option) => !option.component)
       },
-      selectedText() {
-        //work around for storybook not finding the $gettext function
-        return this.selectedLabel || this.$gettext('selected')
-      },
-      noBulkActionsText() {
-        //work around for storybook not finding the $gettext function
-        return (
-          this.noBulkActionsLabel || this.$gettext('no_batch_actions_available')
-        )
-      },
     },
     watch: {
       optionsList() {
@@ -436,7 +415,7 @@
         this.expandedOptions = [...this.optionsList]
           .map((option, index) => {
             const currentOption = this.expandedOptions[index]
-            const isOpen = currentOption ? currentOption.open : false
+            const isOpen = !!currentOption ? currentOption.open : false
 
             return { ...option, open: isOpen }
           })

package/src/components/selectedOptions/selectedOptions.spec.js

@@ -1,176 +0,0 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import RCSelectedOptions from '@/components/selectedOptions'
-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('close_for_modals,_tool_tips.svg')),
-}))
-
-describe('RCSelectedOptions.vue', () => {
-  const simpleOptionsProps = {
-    optionLimit: 4,
-    numberSelected: 2,
-    selectedLabel: 'selected',
-    noBulkActionsLabel: 'No bulk actions available',
-    optionsList: [
-      {
-        type: 'close',
-        name: 'Close',
-      },
-      {
-        type: 'delete',
-        name: 'Delete',
-        hoverColor: 'red',
-      },
-    ],
-  }
-
-  it('selected options are rendered with correct options', () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: simpleOptionsProps,
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-  })
-
-  it('should display "No bulk actions available" if there are no options', () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: {
-        ...simpleOptionsProps,
-        optionsList: [],
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-
-    const noBulkActions = selectedOptions.find(
-      '[test-data-id="no_bulk_actions"]'
-    )
-    expect(noBulkActions.exists()).toBe(true)
-  })
-
-  it('should not display "•••" option if it is less than the limit of 4', () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: simpleOptionsProps,
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-
-    //since we have 2 options, and the limit is 4, we should not see "•••" button
-    const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
-    )
-    expect(moreActionsButton.exists()).toBe(false)
-  })
-
-  it('should display "•••" option if it is more than the limit of 4 or if there is a component parameter on the options', () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: {
-        ...simpleOptionsProps,
-        optionsList: [
-          {
-            type: 'close',
-            name: 'Close',
-          },
-          {
-            type: 'delete',
-            name: 'Delete',
-            component: 'set_supplier',
-          },
-        ],
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-
-    //since we a component parameter, we should see "•••" button
-    const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
-    )
-    expect(moreActionsButton.exists()).toBe(true)
-  })
-  it("should display the named slot content when the 'component' parameter is passed", async () => {
-    const wrapper = mount(RCSelectedOptions, {
-      props: {
-        ...simpleOptionsProps,
-        optionsList: [
-          {
-            type: 'close',
-            name: 'Close',
-          },
-          {
-            type: 'delete',
-            name: 'Delete',
-            component: 'set_supplier',
-          },
-        ],
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-      slots: {
-        set_supplier: '<div data-id="set_supplier">set_supplier</div>',
-      },
-    })
-
-    const selectedOptions = wrapper.findComponent(RCSelectedOptions)
-    expect(selectedOptions.exists()).toBe(true)
-
-    //since we a component parameter, we should see "•••" button
-    const moreActionsButton = selectedOptions.find(
-      '[test-data-id="more_actions_button_wrapper"]'
-    )
-    expect(moreActionsButton.exists()).toBe(true)
-
-    //click the more actions button
-    moreActionsButton.trigger('click')
-    selectedOptions.vm.expanded = true
-    selectedOptions.vm.expandedOptions = selectedOptions.props().optionsList
-    expect(selectedOptions.vm.expanded).toBe(true)
-
-    await wrapper.vm.$nextTick()
-
-    //toggle the element with the component parameter
-    const expandedListItems = selectedOptions.findAll(
-      '[test-data-id="expanded_list_item"]'
-    )
-
-    //there should be only one since we have only one option with the component parameter
-    expect(expandedListItems.length).toBe(1)
-    expandedListItems[0].trigger('click')
-
-    await wrapper.vm.$nextTick()
-
-    //check if the named slot content is displayed
-    const setSupplierSlot = wrapper.find('[data-id="set_supplier"]')
-    expect(setSupplierSlot.exists()).toBe(true)
-  })
-})

package/src/components/selectedOptions/selectedOptions.stories.js

@@ -1,155 +0,0 @@
-import SelectedOptions from './index.vue'
-
-export default {
-  title: 'Components/SelectedOptions',
-  component: SelectedOptions,
-  tags: ['autodocs'],
-  // argTypes: {}
-}
-
-// How to use in your template
-// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
-//
-// optionsList = [
-//   {
-//     type: 'close',
-//     name: 'Close'
-//   },
-//   {
-//     type: 'export',
-//     name: 'Export'
-//     ...
-//     add component parameter if we were passing a component to the selected options (see below)
-//     component: 'set_supplier'
-//   },
-//   {
-//     type: 'delete',
-//     name: 'Delete',
-//     hoverColor: 'red' // default is green
-//   }
-// ]
-//
-// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
-//
-// <selected-options
-//   :numberSelected="numberSelected"
-//   :optionsList="optionsList"
-//   @on-close="onCloseFunction()"
-//   @on-export="function()" @on-delete="function()"
-// >
-//   add any custom components here that you want to pass to the expanded options
-//   <template v-slot:set_supplier>
-//     <CustomSelectComponent
-//       :option-list="suppliers"
-//       @set-supplier="checkboxBulkActions('setSupplier', $event)"
-//     />
-//   </template>
-// </SelectedOptions>
-
-export const Default = {
-  render: (args) => ({
-    components: { SelectedOptions },
-    setup() {
-      return { args }
-    },
-    template: '<SelectedOptions v-bind="args"  />',
-  }),
-  args: {
-    optionLimit: 4,
-    selectedLabel: 'selected',
-    noBulkActionsLabel: 'No bulk actions available',
-
-    //selected options count, in this case 5 options are selected
-    numberSelected: 5,
-
-    //show overlay
-    showOverlay: true,
-
-    //expanded options, this will display list of actions in the middle of the screen
-    expanded: false,
-    optionsList: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-    ],
-    expandedOptions: [],
-  },
-}
-
-export const Expanded = {
-  render: (args) => ({
-    components: { SelectedOptions },
-    setup() {
-      return { args }
-    },
-    template: `
-    <SelectedOptions v-bind="args">
-      <template v-slot:set_supplier>
-        <div>supplier</div>
-      </template>
-    </SelectedOptions>
-    `,
-  }),
-  args: {
-    ...Default.args,
-    //expanded options, this will display list of actions in the middle of the screen
-    expanded: true,
-
-    //optionsList, to be displayed when expanded is false and this will be filtered based on the optionLimit
-    optionsList: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-      {
-        type: 'export_all',
-        name: 'Export All',
-      },
-      {
-        type: 'export_row',
-        name: 'Export Row',
-      },
-      {
-        type: 'set_supplier',
-        name: 'Set Supplier',
-        // add component parameter if we were passing a component to the selected options
-        component: 'set_supplier',
-      },
-    ],
-
-    //duplicate of optionsList, to be displayed when expanded is true
-    expandedOptions: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-      {
-        type: 'export_all',
-        name: 'Export All',
-      },
-      {
-        type: 'export_row',
-        name: 'Export Row',
-      },
-      {
-        type: 'set_supplier',
-        name: 'Set Supplier',
-        // add component parameter if we were passing a component to the selected options
-        component: 'set_supplier',
-      },
-    ],
-  },
-}