feat: mobile site search for navbar

CHANGELOG.md

@@ -5,7 +5,27 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [2.2.0] - 2024-10-31
+
+### Added
+
+- New `EsSearchBar` component
+
+### Changed
+
+- `EsNavBar` now has a search button that is hidden by default
+
+## [2.1.2] - 2024-10-11
+
+### Changed
+
+- Added two new Financing links to `EsNavBar` and renamed one link to "Solar loan providers"
+
+## [2.1.1] - 2024-10-03
+
+### Changed
+
+- Updated intel report link in `EsNavBar`
 
 ## [2.1.0] - 2024-07-24
 
@@ -1064,6 +1084,9 @@ the new `showPrivacySection` prop
 - Tweaks to `EsTabs` *molecule* component
 - Tweaks to `EsCollapse
 
+[2.2.0]: https://github.com/EnergySage/es-ds-legacy/compare/v2.1.2...v2.2.0
+[2.1.2]: https://github.com/EnergySage/es-ds-legacy/compare/v2.1.1...v2.1.2
+[2.1.1]: https://github.com/EnergySage/es-ds-legacy/compare/v2.1.0...v2.1.1
 [2.1.0]: https://github.com/EnergySage/es-ds/compare/v2.0.6...v2.1.0
 [2.0.6]: https://github.com/EnergySage/es-ds/compare/v2.0.5...v2.0.6
 [2.0.5]: https://github.com/EnergySage/es-ds/compare/v2.0.4...v2.0.5

README.md

@@ -1,3 +1,5 @@
+**NOTICE: this repo is for all bootstrap based front-ends, and is in maintenance mode 🚧 for the latest version of the design system see [EnergySage/es-ds](https://github.com/EnergySage/es-ds)**
+
 # EnergySage Design System
 
 This is a **monorepo** containing the elements required for building experiences

e2e/snapshots.js

@@ -45,6 +45,7 @@ module.exports = async () => {
         '/molecules/es-progress',
         '/molecules/es-progress-circle',
         '/molecules/es-rating',
+        '/molecules/es-search-bar',
         '/molecules/es-slider',
         '/molecules/es-support',
         '/molecules/es-tabs',

es-bs-base/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@energysage/es-bs-base",
   "description": "Base CSS for EnergySage design system based on Bootstrap",
-  "version": "2.0.4",
+  "version": "2.2.0",
   "config": {
     "version_short": "0.1"
   },

es-bs-base/scss/_nav.scss

@@ -29,6 +29,20 @@
   }
 }
 
+.nav-button {
+  @include breakpoints.media-breakpoint-up(lg) {
+    &:hover {
+      /* stylelint-disable-next-line declaration-no-important */
+      background: variables.$blue-50 !important;
+    }
+
+    &:focus,
+    &.focus {
+      border-color: variables.$blue-500;
+    }
+  }
+}
+
 //
 // Tabs
 //
@@ -164,16 +178,32 @@ $nav-hover-delay: 300ms;
 .nav-es-container {
   .nav-es-global,
   .nav-es-sticky {
+    // pull navbar up to avoid overlay from getting covered by other DOM elements
+    z-index: 1000;
     // default should be size 14px according to figma
     font-size: variables.$font-size-75;
+
+    // shadow for additional visual separation between nav and more plain pages
+    @include breakpoints.media-breakpoint-up(lg) {
+      filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
+      box-shadow: none;
+    }
   }
 
   .nav-es-global {
     // add a background so veil goes under the nav and nav stands out against page bg
     background-color: variables.$white;
 
-    // shadow for additional visual separation between nav and more plain pages
-    box-shadow: 0 4px 4px rgba(221, 221, 221, 0.25);
+    @include breakpoints.media-breakpoint-up(lg) {
+      // shadow for additional visual separation between nav and more plain pages
+      box-shadow: 0 4px 4px rgba(221, 221, 221, 0.25);
+    }
+  }
+
+  .nav-search-bar-mobile {
+    z-index: 1000;
+    font-size: variables.$font-size-75;
+    background-color: variables.$white;
   }
 
   // override es-ds default
@@ -263,22 +293,17 @@ $nav-hover-delay: 300ms;
     }
   }
 
-  .account-icon {
+  .account-icon,
+  .search-icon {
     fill: variables.$blue-900;
   }
 
+  .search-open {
+    fill: variables.$blue-600 !important;
+  }
+
   // On Desktop a hovers display the dropdowns
   @media only screen and (min-width: $desktop-min-width) {
-    .nav-es-global,
-    .nav-es-sticky {
-      // pull navbar up to avoid overlay from getting covered by other DOM elements
-      z-index: 1000;
-
-      // shadow for additional visual separation between nav and more plain pages
-      filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
-      box-shadow: none;
-    }
-
     // sticky nav bar, initially positioned out of viewport
     .nav-es-sticky {
       top: 0;

es-design-system/components/ds-molecules-list.vue

@@ -100,6 +100,11 @@
                 Radio cards
             </ds-link>
         </li>
+        <li>
+            <ds-link to="/molecules/es-search-bar">
+                Search bar
+            </ds-link>
+        </li>
         <li>
             <ds-link to="/molecules/es-slider">
                 Slider

es-design-system/components/ds-organisms-list.vue

@@ -30,6 +30,11 @@
                 Nav bar
             </ds-link>
         </li>
+        <li>
+            <ds-link to="/organisms/es-nav-bar-with-search">
+                Nav bar with search
+            </ds-link>
+        </li>
         <li>
             <ds-link to="/organisms/es-review">
                 Review

es-design-system/layouts/navSearch.vue

@@ -0,0 +1,82 @@
+<template>
+    <div>
+        <es-nav-bar
+            :account-content="accountContent"
+            :global-content="globalContent"
+            show-search>
+            <template #logo>
+                <ds-es-logo />
+            </template>
+        </es-nav-bar>
+
+        <b-navbar
+            class="d-xl-none mb-100"
+            type="dark"
+            variant="primary">
+            <b-navbar-nav>
+                <b-nav-item v-b-toggle.sidebar-1>
+                    Menu
+                </b-nav-item>
+            </b-navbar-nav>
+        </b-navbar>
+        <b-sidebar
+            id="sidebar-1"
+            class="d-xl-none"
+            :title="`ES DS ${$config.version}`"
+            shadow>
+            <ds-link-list class="mx-100" />
+        </b-sidebar>
+        <div class="d-flex justify-content-center">
+            <div class="ds-side-nav d-none d-xl-block flex-shrink-0 p-100">
+                <ds-link-list />
+            </div>
+            <b-container class="pt-xl-100 mx-0">
+                <b-row class="mb-100">
+                    <b-col cols="12">
+                        <es-breadcrumbs :items="breadcrumbs" />
+                    </b-col>
+                </b-row>
+                <b-row>
+                    <b-col
+                        cols="12">
+                        <Nuxt />
+                    </b-col>
+                </b-row>
+            </b-container>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getEsNavBarAccountContent, getEsNavBarGlobalContent } from '@energysage/es-vue-base';
+
+/* eslint-disable vue/multi-word-component-names, vue/component-definition-name-casing */
+export default {
+    name: 'NavSearchLayout',
+    computed: {
+        accountContent() {
+            return getEsNavBarAccountContent();
+        },
+        breadcrumbs() {
+            const paths = this.$route.path.split('/');
+
+            // Set removes dupes from path
+            return [...new Set(paths)].map((path) => {
+                let text = 'Home';
+                // Convert to CamelCase to be inline with component naming
+                if (path) {
+                    text = path.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                    text = text[0].toUpperCase() + text.slice(1);
+                }
+                return {
+                    text,
+                    to: `/${path}`,
+                };
+            });
+        },
+        globalContent() {
+            return getEsNavBarGlobalContent();
+        },
+    },
+};
+</script>

es-design-system/package.json

@@ -1,6 +1,6 @@
 {
     "name": "es-design-system",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "private": true,
     "scripts": {
         "dev": "nuxt",
@@ -17,8 +17,8 @@
     },
     "prettier": "eslint-config-energysage/prettier",
     "dependencies": {
-        "@energysage/es-bs-base": "^2.0.4",
-        "@energysage/es-vue-base": "^2.1.0",
+        "@energysage/es-bs-base": "^2.2.0",
+        "@energysage/es-vue-base": "^2.2.0",
         "@nuxtjs/axios": "^5.13.6",
         "@nuxtjs/i18n": "^7.3.1",
         "bootstrap-vue": "^2.23.1",