From da0cca5199a218120c1e53e5e2bfe26cad073230 Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Mon, 23 Sep 2024 14:29:58 -0400
Subject: [PATCH] fix: changes based on feedback

---
 es-bs-base/scss/_nav.scss                            | 11 +++++++++++
 es-design-system/layouts/nav.vue                     |  9 ++++++++-
 es-design-system/package-lock.json                   |  6 +++---
 es-vue-base/src/lib-components/EsNavBar.vue          | 12 +++++++++---
 es-vue-base/src/lib-components/EsNavBarSearchBar.vue | 12 +++++++++++-
 5 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/es-bs-base/scss/_nav.scss b/es-bs-base/scss/_nav.scss
index 1abd4b15f..869ae351c 100644
--- a/es-bs-base/scss/_nav.scss
+++ b/es-bs-base/scss/_nav.scss
@@ -29,6 +29,17 @@
   }
 }
 
+.nav-button {
+  &:hover {
+    background: variables.$blue-50 !important;
+  }
+
+  &:focus,
+  &.focus {
+    border-color: variables.$blue-500;
+  }
+}
+
 //
 // Tabs
 //
diff --git a/es-design-system/layouts/nav.vue b/es-design-system/layouts/nav.vue
index d3a086631..e14d2654f 100644
--- a/es-design-system/layouts/nav.vue
+++ b/es-design-system/layouts/nav.vue
@@ -4,7 +4,8 @@
             v-model="searchText"
             :account-content="accountContent"
             :global-content="globalContent"
-            show-search>
+            show-search
+            @searchButtonClicked="searchButtonClicked">
             <template #logo>
                 <ds-es-logo />
             </template>
@@ -84,5 +85,11 @@ export default {
             return getEsNavBarGlobalContent();
         },
     },
+    methods: {
+        searchButtonClicked() {
+            /* eslint-disable-next-line no-console */
+            console.log('Searching...');
+        },
+    },
 };
 </script>
diff --git a/es-design-system/package-lock.json b/es-design-system/package-lock.json
index 49c9bf455..47b6b2f6f 100644
--- a/es-design-system/package-lock.json
+++ b/es-design-system/package-lock.json
@@ -2778,9 +2778,9 @@
             }
         },
         "node_modules/@energysage/es-vue-base": {
-            "version": "2.0.6",
-            "resolved": "https://registry.npmjs.org/@energysage/es-vue-base/-/es-vue-base-2.0.6.tgz",
-            "integrity": "sha512-cnfD+B7wSTvFODLduKiQlMMuA0cnvB6UtXa9XVicAAID9WhARErxJzjFSmLeNv3LEQxC8plooLGv5AMqRVZxGw==",
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/@energysage/es-vue-base/-/es-vue-base-2.1.0.tgz",
+            "integrity": "sha512-Q+ZKazgbYEkDQGFiZHjX8s8J1dw/qt3BN/bKHUBfzM5eFHVgA4aAasYTZv5pspZ8LH02ZI3nEloAlf9xA5ouxA==",
             "dependencies": {
                 "path": "^0.12.7",
                 "vue-the-mask": "^0.11.1"
diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index c9e91006f..ebf4af318 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -105,7 +105,8 @@
                             class="nav-item d-none d-lg-block pt-100">
                             <es-button
                                 variant="link"
-                                class="nav-link dropdown-toggle d-none d-lg-flex flex-nowrap py-100"
+                                aria-label="Open search bar"
+                                class="nav-button nav-link dropdown-toggle d-none d-lg-flex flex-nowrap py-100"
                                 @click="toggleSearchBar()">
                                 <icon-search
                                     class="align-self-center account-icon"
@@ -124,10 +125,12 @@
                         <div class="row w-100">
                             <es-nav-bar-search-bar
                                 v-bind="$attrs"
-                                v-on="$listeners">
+                                v-on="$listeners"
+                                @searchButtonClicked="searchButtonClicked">
                                 <template #close>
                                     <es-button
-                                        class="position-absolute"
+                                        class="position-absolute nav-button"
+                                        aria-label="Close search bar"
                                         style="right: 0"
                                         variant="link"
                                         @click="toggleSearchBar()">
@@ -452,6 +455,9 @@ export default {
         toggleSearchBar() {
             this.searchBarOpen = !this.searchBarOpen;
         },
+        searchButtonClicked() {
+            this.$emit('searchButtonClicked');
+        },
     },
 };
 </script>
diff --git a/es-vue-base/src/lib-components/EsNavBarSearchBar.vue b/es-vue-base/src/lib-components/EsNavBarSearchBar.vue
index 01caa4385..5bac98262 100644
--- a/es-vue-base/src/lib-components/EsNavBarSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBarSearchBar.vue
@@ -12,7 +12,9 @@
                     <icon-search />
                 </template>
             </es-form-input>
-            <es-button class="ml-50">
+            <es-button
+                class="ml-50"
+                @click="$emit('searchButtonClicked')">
                 {{ buttonText }}
             </es-button>
         </div>
@@ -21,9 +23,17 @@
 </template>
 
 <script lang="js">
+import EsButton from './EsButton.vue';
+import EsFormInput from './EsFormInput.vue';
+import IconSearch from '../lib-icons/icon-search.vue';
 
 export default {
     name: 'EsNavBarSearchBar',
+    components: {
+        EsButton,
+        EsFormInput,
+        IconSearch
+    },
     props: {
         label: {
             type: String,