feat: add Redirection component to the playground

empathyco · Jun 20, 2024 · f090bdb · f090bdb
1 parent bff8bc3
commit f090bdb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 2 deletions.
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
@@ -5,6 +5,7 @@ import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import {
+  createRedirectionStub,
   getBannersStub,
   getNextQueriesStub,
   getPromotedsStub,
@@ -74,7 +75,8 @@ const adapter = {
         results: getResultsStub(10),
         totalResults: 50,
         promoteds: getPromotedsStub(),
-        banners: getBannersStub()
+        banners: getBannersStub(),
+        redirections: [createRedirectionStub('redirection')]
       });
     })
 } as unknown as XComponentsAdapter;

diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -38,7 +38,8 @@ import {
   TestSemanticQueries,
   TestRecommendations,
   TestNextQueries,
-  TestIdentifierResults
+  TestIdentifierResults,
+  TestRedirection
 } from './';
 
 const routes = [
@@ -236,6 +237,11 @@ const routes = [
     path: '/identifier-results',
     name: 'IdentifierResults',
     component: TestIdentifierResults
+  },
+  {
+    path: '/redirection',
+    name: 'Redirection',
+    component: TestRedirection
   }
 ];
 

diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/index.ts b/packages/_vue3-migration-test/src/x-modules/search/components/index.ts
@@ -3,3 +3,4 @@ export { default as TestSortList } from './test-sort-list.vue';
 export { default as TestSortPickerList } from './test-sort-picker-list.vue';
 export { default as TestSpellcheck } from './test-spellcheck.vue';
 export { default as TestPartialResultsList } from './test-partial-results-list.vue';
+export { default as TestRedirection } from './test-redirection.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-redirection.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-redirection.vue
@@ -0,0 +1,36 @@
+<template>
+  <SearchInput />
+  <Redirection
+    #default="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
+    class="redirection-container"
+    :delayInSeconds="5"
+  >
+    <p>Your search matches a special place in our website. You are being redirected to:</p>
+    <a @click="redirect" :href="redirection.url" data-test="redirection-link">
+      {{ redirection.url }}
+    </a>
+    <div class="x-flex x-gap-32">
+      <button @click="abortRedirect" class="">No, I'll stay here</button>
+      <button @click="redirect" class="">Yes, redirect me</button>
+    </div>
+    <AutoProgressBar :isLoading="isRedirecting" :durationInSeconds="delayInSeconds" />
+  </Redirection>
+</template>
+
+<script setup>
+  import Redirection from '../../../../../x-components/src/x-modules/search/components/redirection.vue';
+  import AutoProgressBar from '../../../../../x-components/src/components/auto-progress-bar.vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
+
+<style>
+  .redirection-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: antiquewhite;
+    width: fit-content;
+    padding: 0 10px 10px 10px;
+    margin-top: 15px;
+  }
+</style>