From a4175b75ce77e92d334ee9ad3434b57dcf45fa6b Mon Sep 17 00:00:00 2001
From: MdNadimHossain <getovic@gmail.com>
Date: Thu, 26 Sep 2019 12:01:15 +1000
Subject: [PATCH] [SDPA-2346] Added quick-exit button for search component.
 (#538)

* [SDPA-2346] Added quick-exit for search component.
---
 .../Organisms/SiteHeader/search.vue           | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/components/Organisms/SiteHeader/search.vue b/packages/components/Organisms/SiteHeader/search.vue
index 994766968..b1c5f5ca5 100644
--- a/packages/components/Organisms/SiteHeader/search.vue
+++ b/packages/components/Organisms/SiteHeader/search.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="rpl-site-header-search">
+    <rpl-quick-exit class="rpl-search__quickexit" v-if="rplOptions.quickexit" />
     <rpl-search-form
       class="rpl-site-header-search__form"
       searchPlaceholder="Start typing..."
@@ -22,6 +23,7 @@
 import RplIcon from '@dpc-sdp/ripple-icon'
 import RplMetaTag from '@dpc-sdp/ripple-meta-tag'
 import { RplSearchForm } from '@dpc-sdp/ripple-search'
+import RplQuickExit from '@dpc-sdp/ripple-layout/QuickExit'
 
 export default {
   name: 'RplSearch',
@@ -31,7 +33,8 @@ export default {
   components: {
     RplIcon,
     RplMetaTag,
-    RplSearchForm
+    RplSearchForm,
+    RplQuickExit
   },
   methods: {
     searchTerm: function (searchInput) {
@@ -55,6 +58,7 @@ export default {
   $rpl-site-header-search-term-margin: auto $rpl-space-2 $rpl-space-3 auto !default;
   $rpl-site-header-search-terms-header-text-color: rpl-color('white') !default;
   $rpl-site-header-search-field-underline-background-image: rpl-gradient('primary_gradient') !default;
+  $rpl-site-header-search-quickexit-margin-bottom: ($rpl-space * 6) !default;
 
   .rpl-site-header-search {
     $root: &;
@@ -101,6 +105,24 @@ export default {
       color: $rpl-site-header-search-terms-header-text-color;
     }
 
+    .rpl-search__quickexit {
+      margin-bottom: $rpl-site-header-search-quickexit-margin-bottom;
+
+      @include rpl_breakpoint('s') {
+        top: $rpl-space;
+        right: $rpl-space;
+        position: absolute;
+      }
+
+       > a {
+        width: 100%;
+
+        @include rpl_breakpoint('s') {
+          width: auto;
+        }
+      }
+    }
+
     .rpl-search-form__field {
       &::after {
         content: '';