Bull 1847

Merge Request Checklist

Review

• Make sure the pipeline has passed. You may have to check the mirrored repo in code.il2.dso.mil to see the pipelines. pipeline: https://code.il2.dso.mil/platform-one/products/bullhorn/sites/platform-one-site/-/pipelines/446402
• Make sure that there are no errors in the development console.
• Make sure everything in the the ticket is addressed and that the acceptance criteria (if applicable) is met.
• Make sure all components and images match the design file or instruction given (if applicable).
• Make sure to take out any unused code.
• Make sure that common mistakes are not present in the code base. (See list under Common Mistakes below).
• Make sure the page is responsive (see the list for Responsiveness below for checklist).
• Check if any other issues may need to be checked (some examples can be found under Other items to look out for)

Common Mistakes

• Make sure all words are spelled correctly (if applicable).
• Make sure the right images are used (if applicable).
• Do not use any inline styles in the HTML component in files.
• Make sure everything is aligned correctly.
• Please avoid making global variables.
• Make sure error handling is in appropriate places.
• Remove all test code within the working sections when ready to push to master.

Responsiveness

For all below check the following breakpoints for Vue apps

Devices	Code	Screen sizes
Extra Small	xs	< 600px
Small	sm	600px > < 960px
Medium	md	960px > < 1264px
Large	lg	1264px > < 1904px
Extra Large	xl	> 1904px

• Check for bad word breaks within each breakpoint.
• Check to see if components are misaligned or have bad spacing, padding, or margin.
• Check to see if components overflow to either side of the viewport.
• Check if there are any weird visual glitches at different breakpoints.

Other items to look out for

• Make sure new API calls use the correct HTTP verb and when working with JSON make sure it is validated.
• With GETs, make sure that text/html return type is avoided and application/json is used when dealing with json data.
• Avoid transmission of confidential data in URL parameters and unnecessary parameters.
• Make sure all API calls are within a try catch block with appropriate error handling.
• If dealing with forms, make sure the form has input validation.
• Avoid logging confidential information.
• Make sure no-cache is on confidential web pages.
• Make sure rel="noopener noreferrer" is on any link that opens to a new tab.
• For browser performance, use .webp images instead of .png, .jpg, .jpeg, etc.

Developer responsibilities with Cypress tests

• Make sure any new download buttons (that don't use DownloadButton.vue) has the attribute data-cy="download".
• Make sure new pages / paths within router.js are added to the links.js test suite.
• Add a new test case for within downloads.js if you're adding the first download button to any page.
• Reuse existing custom commands if they serve the purpose of your test.
• Create a new custom command for any duplicate code / test that can be globally reused.
• Create a local function for duplicate code that can be reused within your test spec.

src/components/NavBar.vue

@@ -8,7 +8,10 @@
       </v-toolbar-title>
       <v-spacer></v-spacer>
       <v-toolbar-items v-show="!burgerMenu">
-        <div class="navbar-nav my-auto">
+        <div
+          class="navbar-nav my-auto d-flex flex-nowrap align-items-center position-relative"
+          :class="{ 'hide-nav-items': searchExpanded }"
+        >
           <router-link class="nav-item" to="/" exact> Home </router-link>
           <v-menu open-on-hover bottom offset-y>
             <template v-slot:activator="{ on, attrs }">
@@ -45,6 +48,20 @@
           <router-link class="nav-item" to="/contact-us">
             Contact Us
           </router-link>
+          <v-text-field
+            placeholder="Search"
+            filled
+            dense
+            clearable
+            full-width
+            :hide-details="true"
+            class="expading-search"
+            :class="{ closed: !searchExpanded }"
+            v-model="searchText"
+            prepend-inner-icon="mdi-magnify"
+            @focus="searchClosed = false"
+            @blur="searchClosed = true"
+          ></v-text-field>
         </div>
       </v-toolbar-items>
 
@@ -158,6 +175,8 @@ export default {
 
   data: () => ({
     menuVisible: false,
+    searchClosed: true,
+    searchText: null,
     servicesSubMenu: [
       routesByName.IronBank,
       routesByName.PartyBus,
@@ -184,7 +203,11 @@ export default {
       this.burgerMenu = window.innerWidth < this.navigationDrawerBreakPoint;
     },
   },
-
+  computed: {
+    searchExpanded() {
+      return !this.searchClosed || this.searchText;
+    },
+  },
   watch: {
     "$vuetify.breakpoint.width": function (value) {
       if (value >= this.navigationDrawerBreakPoint) {
@@ -195,6 +218,33 @@ export default {
 };
 </script>
 <style lang="scss">
+.v-input.expading-search {
+  transition: max-width 0.25s;
+  width: 100%;
+  position: absolute;
+  right: 0;
+  width: 100%;
+
+  .v-input__slot {
+    &:before,
+    &:after {
+      border-color: transparent !important;
+      background-color: transparent;
+    }
+  }
+
+  &.closed {
+    max-width: 45px;
+    .v-input__slot {
+      cursor: pointer !important;
+      background: transparent !important;
+
+      .v-input__icon--append {
+        display: none;
+      }
+    }
+  }
+}
 #nav-drawer {
   margin-top: 102px;
   z-index: 9;
@@ -241,13 +291,19 @@ a.nav-item.router-link-active {
   }
 }
 
-.navbar-icon-cursor {
-  cursor: pointer;
-}
-
 .navbar-nav {
   font-weight: 600;
+  padding-right: 48px;
+
+  &.hide-nav-items .nav-item {
+    visibility: hidden;
+    opacity: 0;
+  }
+
   .nav-item {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
     padding: 0.5rem;
     margin: 0 0.5rem;
     color: $light-text-color !important;