From f98cd3d61e9bc1bba16cfa3878b3d9e7370582d1 Mon Sep 17 00:00:00 2001
From: varodv <72568818+alvarodE@users.noreply.github.com>
Date: Tue, 14 May 2024 09:38:52 +0200
Subject: [PATCH] Add components to vue3-migration-test playground

---
 .../src/components/animations/index.ts             |  2 ++
 .../components/animations/test-fade-and-slide.vue  | 11 +++++++++++
 .../animations/test-staggered-fade-and-slide.vue   | 11 +++++++++++
 packages/_vue3-migration-test/src/router.ts        | 14 +++++++++++++-
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
 create mode 100644 packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue

diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
index 4d2c00cf2b..a102e70e6b 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -3,3 +3,5 @@ export { default as TestCollapseHeight } from './test-collapse-height.vue';
 export { default as TestCollapseWidth } from './test-collapse-width.vue';
 export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
+export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
+export { default as TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
new file mode 100644
index 0000000000..8553f4e244
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
@@ -0,0 +1,11 @@
+<template>
+  <FadeAndSlide tag="ul">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </FadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import FadeAndSlide from '../../../../x-components/src/components/animations/fade-and-slide.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
new file mode 100644
index 0000000000..4384f4ca0c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -0,0 +1,11 @@
+<template>
+  <StaggeredFadeAndSlide tag="ul" :stagger="50">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </StaggeredFadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index b0338e1304..fe652b0b80 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -11,10 +11,12 @@ import {
   TestElementsList,
   TestFacets,
   TestFade,
+  TestFadeAndSlide,
   TestScroll,
   TestSortDropdown,
   TestSortList,
-  TestSortPickerList
+  TestSortPickerList,
+  TestStaggeredFadeAndSlide
 } from './';
 
 const routes = [
@@ -43,6 +45,16 @@ const routes = [
     name: 'Fade',
     component: TestFade
   },
+  {
+    path: '/fade-and-slide',
+    name: 'FadeAndSlide',
+    component: TestFadeAndSlide
+  },
+  {
+    path: '/staggered-fade-and-slide',
+    name: 'StaggeredFadeAndSlide',
+    component: TestStaggeredFadeAndSlide
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',