ONL-7032 Adds popover inject functionality (#1375)

* Adds popover inject functionality

* Expose overlayContent container

* Added overlay expose test

* Added export of Symbol

* 2.1.29

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.1.28",
+  "version": "2.1.29",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-full-screen-overlay/ec-full-screen-overlay.spec.js

@@ -39,6 +39,15 @@ describe('EcFullScreenOverlay', () => {
     expect(document.activeElement).toEqual(wrapper.findByDataTest('ec-full-screen-overlay__close-icon-btn').element);
   });
 
+  describe('defineExpose', () => {
+    it('should return the container that was exposed', () => {
+      const wrapper = mountFullScreenOverlay();
+      const container = wrapper.vm.getFocusTrapContainer();
+      const { overlayContent } = wrapper.vm;
+      expect(container).toEqual(overlayContent);
+    });
+  });
+
   describe(':props', () => {
     it(':show - should not render the overlay when is false', () => {
       const wrapper = mountFullScreenOverlay({ show: false });

src/components/ec-full-screen-overlay/ec-full-screen-overlay.vue

@@ -80,6 +80,14 @@ const { deactivate } = useFocusTrap(overlayContent, {
   allowOutsideClick: true,
 });
 
+function getFocusTrapContainer() {
+  return overlayContent.value;
+}
+
+defineExpose({
+  getFocusTrapContainer,
+});
+
 onUnmounted(() => {
   deactivate();
 });

src/components/ec-popover/__snapshots__/ec-popover.spec.js.snap

@@ -10,6 +10,19 @@ exports[`EcPopover component should add the z-index level class if the level was
 >
   
   
+</fv-dropdown-stub>
+`;
+
+exports[`EcPopover component should attach to a different element when provided 1`] = `
+<fv-dropdown-stub
+  ariaid="ec-popover-1"
+  arrowoverflow="true"
+  container="custom-element"
+  data-test="ec-popover"
+  popperclass="ec-popover"
+>
+  
+  
 </fv-dropdown-stub>
 `;
 

src/components/ec-popover/ec-popover-provide.js

@@ -0,0 +1 @@
+export const POPOVER_CONTAINER_KEY = Symbol('popoverContainer');

src/components/ec-popover/ec-popover.spec.js

@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
 
 import EcPopover from './ec-popover.vue';
+import { POPOVER_CONTAINER_KEY } from './ec-popover-provide';
 
 describe('EcPopover component', () => {
   function mountEcPopover(props, mountOpts) {
@@ -53,4 +55,16 @@ describe('EcPopover component', () => {
     const wrapper = mountEcPopover();
     expect(typeof wrapper.vm.update).toBe('function');
   });
+
+  it('should attach to a different element when provided', () => {
+    const wrapper = mount(EcPopover, {
+      global: {
+        stubs: { FvDropdown: true },
+        provide: {
+          [POPOVER_CONTAINER_KEY]: { container: ref('custom-element') },
+        },
+      },
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });

src/components/ec-popover/ec-popover.vue

@@ -22,9 +22,12 @@ export default {
 
 <script setup>
 import { Dropdown as FvDropdown } from 'floating-vue';
-import { ref, toRefs, useAttrs } from 'vue';
+import {
+  inject, ref, toRefs, useAttrs,
+} from 'vue';
 
 import { getUid } from '../../utils/uid';
+import { POPOVER_CONTAINER_KEY } from './ec-popover-provide';
 
 const attrs = useAttrs();
 const props = defineProps({
@@ -42,11 +45,12 @@ const id = getUid();
 const popover = ref(null);
 
 const { level, popperClass } = toRefs(props);
+const { container: containerInject } = inject(POPOVER_CONTAINER_KEY, { container: ref('body') });
 
 function getOptions() {
   return {
     popperClass: `${popperClass.value} ec-popover${level.value && ` ec-popover--${level.value}`}`.trim(),
-    container: 'body',
+    container: containerInject.value,
     ariaId: `ec-popover-${id}`,
     arrowOverflow: true, // to hide the arrow for popover
     ...attrs,

src/main.js

@@ -48,6 +48,7 @@ export { default as EcNavigationLink } from './components/ec-navigation-link';
 export { default as EcPanel } from './components/ec-panel';
 export { default as EcPhoneNumberInput } from './components/ec-phone-number-input';
 export { default as EcPopover } from './components/ec-popover';
+export { POPOVER_CONTAINER_KEY } from './components/ec-popover/ec-popover-provide';
 export { default as EcPrivacyPolicy } from './components/ec-privacy-policy';
 export { default as EcSmartTable } from './components/ec-smart-table';
 export { default as EcSubmenu } from './components/ec-submenu';