Merge branch '5594-remove-glnavbar-usage' into 'master'

Resolve "Remove GlNavbar usage"

Closes #5594

See merge request !922



Merged-by: Vanessa Otto <votto@gitlab.com>
Approved-by: Mark Florian <mflorian@gitlab.com>
Reviewed-by: Mark Florian <mflorian@gitlab.com>

src/components/header.vue

 <script>
-import { GlNavbar, GlLink } from '@gitlab/ui';
+import { GlLink } from '@gitlab/ui';
 import GlLogo from './logo.vue';
 
 export default {
@@ -7,16 +7,14 @@ export default {
   components: {
     GlLink,
     GlLogo,
-    GlNavbar,
   },
 };
 </script>
 
 <template>
   <header>
-    <gl-navbar
-      fixed
-      class="header gl-h-8 gl-z-index-2 gl-display-flex gl-justify-content-space-between gl-fixed gl-bg-theme-indigo-900 gl-px-5 gl-mb-0 gl-border-b-solid gl-border-b-1 gl-border-gray-200 gl-top-0 gl-left-0 gl-right-0"
+    <nav
+      class="header navbar gl-h-8 gl-z-index-2 gl-display-flex gl-justify-content-space-between gl-fixed gl-bg-theme-indigo-900 gl-px-5 gl-mb-0 gl-border-b-solid gl-border-b-1 gl-border-gray-200 gl-top-0 gl-left-0 gl-right-0"
       data-qa-selector="navbar"
     >
       <gl-logo />
@@ -28,6 +26,6 @@ export default {
           Contact support
         </gl-link>
       </div>
-    </gl-navbar>
+    </nav>
   </header>
 </template>

tests/integration/components/__snapshots__/header_spec.js.snap

@@ -2,10 +2,9 @@
 
 exports[`Header component renders the header component with a navbar and link 1`] = `
 <header>
-  <gl-navbar-stub
-    class="header gl-h-8 gl-z-index-2 gl-display-flex gl-justify-content-space-between gl-fixed gl-bg-theme-indigo-900 gl-px-5 gl-mb-0 gl-border-b-solid gl-border-b-1 gl-border-gray-200 gl-top-0 gl-left-0 gl-right-0"
+  <nav
+    class="header navbar gl-h-8 gl-z-index-2 gl-display-flex gl-justify-content-space-between gl-fixed gl-bg-theme-indigo-900 gl-px-5 gl-mb-0 gl-border-b-solid gl-border-b-1 gl-border-gray-200 gl-top-0 gl-left-0 gl-right-0"
     data-qa-selector="navbar"
-    fixed=""
   >
     <gl-logo-stub />
      
@@ -21,6 +20,6 @@ exports[`Header component renders the header component with a navbar and link 1`
       
       </gl-link-stub>
     </div>
-  </gl-navbar-stub>
+  </nav>
 </header>
 `;

tests/integration/components/header_spec.js

-import { GlLink, GlNavbar } from '@gitlab/ui';
+import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { GlHead } from '~/components';
 
@@ -19,12 +19,11 @@ describe('Header component', () => {
     }
   });
 
-  const findNavbar = () => wrapper.findComponent(GlNavbar);
   const findLink = () => wrapper.findComponent(GlLink);
 
   it('renders the header component with a navbar and link', () => {
     expect(wrapper.element).toMatchSnapshot();
-    expect(findNavbar().exists()).toBe(true);
+    expect(wrapper.find('nav').exists()).toBe(true);
     expect(findLink().exists()).toBe(true);
   });
 });