Merge branch 'main' into feat/EMP-4163-migrate-query-suggestions-modu…

…le-to-composition-api # Conflicts: # packages/_vue3-migration-test/src/router.ts
empathyco · Jun 3, 2024 · cf4fd8f · cf4fd8f
2 parents 53e6a69 + c3f18a2
commit cf4fd8f
Show file tree

Hide file tree

Showing 15 changed files with 539 additions and 357 deletions.
diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.21](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.21) (2024-05-31)
+
+
+### Features
+
+* **keyboard-navigation:** migrate keyboard-navigation component to composition API (#1493) ([4cf31c9](https://github.com/empathyco/x/commit/4cf31c9df4b751514deaaef4c9abfe4ee5ddfc40))
+
+
+
+## [1.0.0-alpha.20](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.20) (2024-05-31)
+
+
+### Features
+
+* **panels:** migrate `base-panels` components to composition api (#1491) ([077ad4d](https://github.com/empathyco/x/commit/077ad4d1bcc1dcf0ae2e16a02f1ac073481a1892))
+* **result-images:** migrate result images components to composition API (#1496) ([624fb45](https://github.com/empathyco/x/commit/624fb459e71b3c0905e53ba70c1a3a15f581a0fc))
+
+
+
 ## [1.0.0-alpha.19](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.19) (2024-05-30)
 
 

diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.19",
+  "version": "1.0.0-alpha.21",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
@@ -10,3 +10,5 @@ export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
 export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
+export { default as TestBasePanel } from './panels/test-base-panel.vue';
+export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
diff --git a/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue b/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <h2>Base header toggle panel</h2>
+    <BaseHeaderTogglePanel :start-collapsed="false">
+      <template #header-content="{ open }">
+        <p>Header, open: {{ open ? 'close' : 'open' }}</p>
+      </template>
+      <template>
+        <p>Default content</p>
+      </template>
+    </BaseHeaderTogglePanel>
+
+    <h2>Base id toggle panel, Base id toggle panel button and Base Toggle panel</h2>
+    <BaseIdTogglePanelButton panelId="myToggle">Toggle Aside</BaseIdTogglePanelButton>
+    <BaseIdTogglePanel :startOpen="true" panelId="myToggle">
+      <div>My toggle</div>
+    </BaseIdTogglePanel>
+
+    <h2>Base tabs panel component</h2>
+    <BaseTabsPanel initial-tab="fall">
+      <template #summer>
+        <div>Summer Top Sales</div>
+      </template>
+
+      <template #fall>
+        <div>Fall Top Sales</div>
+      </template>
+
+      <template #outlet>
+        <div>Outlet Top Sales</div>
+      </template>
+    </BaseTabsPanel>
+  </div>
+</template>
+
+<script setup>
+  import BaseHeaderTogglePanel from '../../../../x-components/src/components/panels/base-header-toggle-panel.vue';
+  import BaseIdTogglePanelButton from '../../../../x-components/src/components/panels/base-id-toggle-panel-button.vue';
+  import BaseIdTogglePanel from '../../../../x-components/src/components/panels/base-id-toggle-panel.vue';
+  import BaseTabsPanel from '../../../../x-components/src/components/panels/base-tabs-panel.vue';
+</script>
+
+<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/components/test-base-keyboard-navigation.vue b/packages/_vue3-migration-test/src/components/test-base-keyboard-navigation.vue
@@ -0,0 +1,27 @@
+<template>
+  <SearchInput />
+  <BaseKeyboardNavigation>
+    <ul>
+      <li>
+        <button>First</button>
+      </li>
+      <li>
+        <button>Second</button>
+      </li>
+      <li>
+        <button>Third</button>
+      </li>
+    </ul>
+  </BaseKeyboardNavigation>
+</template>
+
+<script setup lang="ts">
+  import BaseKeyboardNavigation from '../../../x-components/src/components/base-keyboard-navigation.vue';
+  import SearchInput from '../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
+
+<style>
+  button:focus-visible {
+    border: 3px solid red;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -25,6 +25,8 @@ import {
   TestBaseSuggestions,
   TestHighlight,
   TestBaseResultImages,
+  TestBasePanel,
+  TestBaseKeyboardNavigation,
   TestQuerySuggestions
 } from './';
 
@@ -154,6 +156,16 @@ const routes = [
     name: 'BaseResultImages',
     component: TestBaseResultImages
   },
+  {
+    path: '/test-base-panel',
+    name: 'TestBasePanel',
+    component: TestBasePanel
+  },
+  {
+    path: '/base-keyboard-navigation',
+    name: 'TestBaseKeyboardNavigation',
+    component: TestBaseKeyboardNavigation
+  },
   {
     path: '/query-suggestions',
     name: 'QuerySuggestions',

diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.29](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-31)
+
+
+### Features
+
+* **keyboard-navigation:** migrate keyboard-navigation component to composition API (#1493) ([4cf31c9](https://github.com/empathyco/x/commit/4cf31c9df4b751514deaaef4c9abfe4ee5ddfc40))
+
+
+
+## [5.0.0-alpha.28](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-31)
+
+
+### Features
+
+* **panels:** migrate `base-panels` components to composition api (#1491) ([077ad4d](https://github.com/empathyco/x/commit/077ad4d1bcc1dcf0ae2e16a02f1ac073481a1892))
+* **result-images:** migrate result images components to composition API (#1496) ([624fb45](https://github.com/empathyco/x/commit/624fb459e71b3c0905e53ba70c1a3a15f581a0fc))
+
+
+
 ## [5.0.0-alpha.27](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-30)
 
 

diff --git a/packages/x-components/package.json b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.27",
+  "version": "5.0.0-alpha.29",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

diff --git a/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts b/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import { SearchInput } from '../../x-modules/search-box/components/index';
 import { installNewXPlugin } from '../../__tests__/utils';
 import BaseKeyboardNavigation from '../base-keyboard-navigation.vue';
+import { DirectionalFocusNavigationService } from '../../services/directional-focus-navigation.service';
 
 describe('testing keyboard navigation component', () => {
   let localVue: typeof Vue;
@@ -12,9 +13,12 @@ describe('testing keyboard navigation component', () => {
   });
 
   it('takes control of the navigation when a defined condition is triggered', () => {
-    const mockedFocusNextNavigableElement = jest.fn();
+    const navigateToSpy = jest.spyOn(
+      DirectionalFocusNavigationService.prototype as any,
+      'navigateTo'
+    );
     const searchInput = mount(SearchInput, { localVue });
-    const keyboardNavigation = mount(BaseKeyboardNavigation, {
+    mount(BaseKeyboardNavigation, {
       localVue,
       propsData: {
         navigationHijacker: [
@@ -26,36 +30,28 @@ describe('testing keyboard navigation component', () => {
         ]
       }
     });
-    Object.defineProperty(keyboardNavigation.vm, 'focusNextNavigableElement', {
-      value: mockedFocusNextNavigableElement
-    });
     searchInput.trigger('keydown', { key: 'ArrowUp' });
-    expect(mockedFocusNextNavigableElement).not.toHaveBeenCalled();
+    expect(navigateToSpy).not.toHaveBeenCalled();
 
     searchInput.trigger('keydown', { key: 'ArrowDown' });
-    expect(mockedFocusNextNavigableElement).toHaveBeenCalled();
+    expect(navigateToSpy).toHaveBeenCalled();
   });
 
   it('emits the defined event when reaching the limit in the direction of the navigation', () => {
     const listener = jest.fn();
-    const htmlElement = document.createElement('div');
+    // As cannot mock elementToFocus (it will be undefined), making the navigateTo method return undefined
+    jest
+      .spyOn(DirectionalFocusNavigationService.prototype as any, 'navigateTo')
+      .mockReturnValue(undefined);
     const keyboardNavigation = mount(BaseKeyboardNavigation, {
       localVue,
-      data() {
-        return {
-          elementToFocus: htmlElement
-        };
-      },
       propsData: {
         takeNavigationControl: [],
         eventsForDirectionLimit: {
           ArrowUp: 'UserReachedEmpathizeTop'
         }
       }
     });
-    Object.defineProperty((keyboardNavigation.vm as any).navigationService, 'navigateTo', {
-      value: (): HTMLElement => htmlElement
-    });
     keyboardNavigation.vm.$x.on('UserReachedEmpathizeTop').subscribe(listener);
     keyboardNavigation.trigger('keydown', { key: 'ArrowUp' });