From f208c75ad384e93159d280424bb23e66d1ff8969 Mon Sep 17 00:00:00 2001
From: Javier Iglesias <javieri@empathy.co>
Date: Sun, 17 Jul 2022 17:53:29 +0200
Subject: [PATCH 1/3] WIP: feat: add x-components XModal

EX-6701
---
 package.json                       |  2 +-
 rollup.config.js                   |  2 +-
 src/App.vue                        | 14 ++++------
 src/components/custom-x-modal.vue  | 30 +++++++++++++++++++++
 src/components/desktop/desktop.vue |  4 +--
 src/components/mobile/mobile.vue   |  4 +--
 src/components/x-modal.vue         | 42 ------------------------------
 7 files changed, 41 insertions(+), 57 deletions(-)
 create mode 100644 src/components/custom-x-modal.vue
 delete mode 100644 src/components/x-modal.vue

diff --git a/package.json b/package.json
index 712105e2..a92fe3f9 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "eslint src tests build --ext .ts,.tsx,.vue,.js,.jsx",
     "lint:fix": "npm run lint -- --fix",
-    "install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.124.tgz --no-save",
+    "install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.133.tgz --no-save",
     "json:csv": "json-csv ./src/i18n/messages",
     "csv:json": "csv-json ./output ./src/i18n/messages"
   },
diff --git a/rollup.config.js b/rollup.config.js
index 17b83e7e..a0920802 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -8,7 +8,7 @@ export default createConfig({
   output: {
     chunkFileNames: chunkInfo => {
       switch (chunkInfo.name) {
-        case 'x-modal':
+        case 'custom-x-modal':
           return 'x-empty-search-[hash].js';
         case 'index':
           return 'x-search-[hash].js';
diff --git a/src/App.vue b/src/App.vue
index 794c9d47..f8f579d9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,12 +5,12 @@
     <DeviceDetector @DeviceProvided="$setLocaleDevice" :breakpoints="breakpoints" />
     <Tagging />
     <UrlHandler env="env" />
-    <XModal v-if="isOpen" :openEvents="openEvents" />
+    <XModal v-if="isOpen" />
   </div>
 </template>
 
 <script lang="ts">
-  import { SnippetCallbacks, SnippetConfig, XEvent, XOn, XProvide } from '@empathyco/x-components';
+  import { SnippetCallbacks, SnippetConfig, XOn, XProvide } from '@empathyco/x-components';
   import { DeviceDetector } from '@empathyco/x-components/device';
   import { Tagging } from '@empathyco/x-components/tagging';
   import { UrlHandler } from '@empathyco/x-components/url';
@@ -28,7 +28,7 @@
       SnippetConfigExtraParams,
       Tagging,
       UrlHandler,
-      XModal: () => import('./components/x-modal.vue').then(m => m.default)
+      XModal: () => import('./components/custom-x-modal.vue').then(m => m.default)
     }
   })
   export default class Layer extends Vue {
@@ -37,13 +37,8 @@
       desktop: Number.POSITIVE_INFINITY
     };
     protected isOpen = false;
-    protected openEvents: XEvent[] = [
-      'UserClickedOpenEventsModal',
-      'UserOpenXProgrammatically',
-      'UserClickedOpenX'
-    ];
 
-    @XOn((component: Vue) => (component as Layer).openEvents)
+    @XOn(['UserOpenXProgrammatically', 'UserClickedOpenX'])
     open(): void {
       this.isOpen = true;
     }
@@ -103,6 +98,7 @@
       width: 100%;
     }
   }
+
   .x-modal__overlay {
     background: var(--x-color-background-modal-overlay-default) !important;
     opacity: 0.3 !important;
diff --git a/src/components/custom-x-modal.vue b/src/components/custom-x-modal.vue
new file mode 100644
index 00000000..dbdf7d12
--- /dev/null
+++ b/src/components/custom-x-modal.vue
@@ -0,0 +1,30 @@
+<template>
+  <XModal :animation="animation" :class="$x.device === 'mobile' ? 'x-mobile' : 'x-desktop'">
+    <Mobile v-if="$x.device === 'mobile'" />
+    <Desktop v-else />
+  </XModal>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+  import { animateClipPath, XModal } from '@empathyco/x-components';
+  import Mobile from './mobile/mobile.vue';
+  import Desktop from './desktop/desktop.vue';
+
+  @Component({
+    components: {
+      XModal,
+      Mobile,
+      Desktop
+    }
+  })
+  export default class CustomXModal extends Vue {
+    /**
+     * Animation to use for opening/closing the modal.
+     *
+     * @internal
+     */
+    protected animation = animateClipPath();
+  }
+</script>
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index 8117ffd8..f4a203e2 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -80,7 +80,7 @@
 <script lang="ts">
   import {
     animateTranslate,
-    BaseEventsModalClose,
+    CloseXModal,
     BaseIdModal,
     BaseVariableColumnGrid,
     CartIcon,
@@ -108,7 +108,7 @@
       BaseVariableColumnGrid,
       BaseIdModal,
       CartIcon,
-      Close: BaseEventsModalClose,
+      Close: CloseXModal,
       CrossIcon,
       CrossTinyIcon,
       DesktopToolbar,
diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index 51b25b5b..ef9cdaa0 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -82,7 +82,7 @@
   import {
     ArrowLeftIcon,
     BaseColumnPickerList,
-    BaseEventsModalClose,
+    CloseXModal,
     BaseIdModalOpen,
     BaseScroll,
     FiltersIcon,
@@ -108,7 +108,7 @@
       BaseIdModal,
       BaseIdModalOpen,
       BaseScroll,
-      Close: BaseEventsModalClose,
+      Close: CloseXModal,
       ColumnPicker: BaseColumnPickerList,
       FiltersIcon,
       LocationProvider,
diff --git a/src/components/x-modal.vue b/src/components/x-modal.vue
deleted file mode 100644
index 819cb8f4..00000000
--- a/src/components/x-modal.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <BaseEventsModal
-    :eventsToOpenModal="openEvents"
-    :animation="animation"
-    :class="$x.device === 'mobile' ? 'x-mobile' : 'x-desktop'"
-  >
-    <Mobile v-if="$x.device === 'mobile'" />
-    <Desktop v-else />
-  </BaseEventsModal>
-</template>
-
-<script lang="ts">
-  import Component from 'vue-class-component';
-  import Vue from 'vue';
-  import { BaseEventsModal, animateClipPath, XEvent } from '@empathyco/x-components';
-  import { Prop } from 'vue-property-decorator';
-  import Mobile from './mobile/mobile.vue';
-  import Desktop from './desktop/desktop.vue';
-
-  @Component({
-    components: {
-      BaseEventsModal,
-      Mobile,
-      Desktop
-    }
-  })
-  export default class XModal extends Vue {
-    /**
-     * List of events to open the modal when emitted.
-     *
-     * @public
-     */
-    @Prop()
-    public openEvents?: XEvent[];
-    /**
-     * Animation to use for opening/closing the modal.
-     *
-     * @internal
-     */
-    protected animation = animateClipPath();
-  }
-</script>

From 7793d0ea38166504a1523fcb06f28c6b0b00d4f0 Mon Sep 17 00:00:00 2001
From: Javier Iglesias <javieri@empathy.co>
Date: Mon, 25 Jul 2022 08:59:04 +0200
Subject: [PATCH 2/3] PR fixes

---
 src/components/desktop/desktop.vue | 6 +++---
 src/components/mobile/mobile.vue   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index 76d633c2..12a695ed 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -32,9 +32,9 @@
         >
           <EnvSelector />
 
-          <Close class="x-button--ghost x-padding--right-00">
+          <CloseMainModal class="x-button--ghost x-padding--right-00">
             <CrossIcon class="x-icon--l" />
-          </Close>
+          </CloseMainModal>
         </div>
       </div>
     </template>
@@ -111,7 +111,7 @@
       BaseVariableColumnGrid,
       BaseIdModal,
       CartIcon,
-      Close: CloseMainModal,
+      CloseMainModal,
       CrossIcon,
       CrossTinyIcon,
       DesktopToolbar,
diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index e7246cf8..acecf3b1 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -12,12 +12,12 @@
           x-background--neutral-100
         "
       >
-        <Close
+        <CloseMainModal
           class="x-button--ghost x-padding--left-00"
           :class="{ 'x-padding--right-03': $x.device === 'mobile' }"
         >
           <ArrowLeftIcon class="x-icon--l" />
-        </Close>
+        </CloseMainModal>
         <SearchBox class="x-list__item--expand" />
       </div>
     </template>
@@ -111,7 +111,7 @@
       BaseIdModal,
       BaseIdModalOpen,
       BaseScroll,
-      Close: CloseMainModal,
+      CloseMainModal,
       ColumnPicker: BaseColumnPickerList,
       FiltersIcon,
       LocationProvider,

From f9ab9ae0f88a5ce4c0f121f9a2177802946b3189 Mon Sep 17 00:00:00 2001
From: Javier Iglesias <javieri@empathy.co>
Date: Mon, 25 Jul 2022 10:32:35 +0200
Subject: [PATCH 3/3] PR fixes

---
 rollup.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/rollup.config.js b/rollup.config.js
index d28840ed..93c4434b 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -8,7 +8,7 @@ export default createConfig({
   output: {
     chunkFileNames: chunkInfo => {
       switch (chunkInfo.name) {
-        case 'custom-mamodal':
+        case 'custom-main-modal':
           return 'x-empty-search-[hash].js';
         case 'index':
           return 'x-search-[hash].js';