fix: changes based on feedback

EnergySage · Sep 23, 2024 · da0cca5 · da0cca5
1 parent f1686e1
commit da0cca5
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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,