From dca3ef20aff4f8b03a6dcb88df97614e81569c1b Mon Sep 17 00:00:00 2001
From: Ajoy Kumar Das <87164140+ajoykumardas12@users.noreply.github.com>
Date: Tue, 26 Dec 2023 03:07:58 +0530
Subject: [PATCH] Add Semantic header Tag Around Navbar (#784)

* add semantic header tag around navbar

* rename navbar component to header, move nav tag around nav links

* update navbar component name in tests

* rename navbar css file to header

* update class names nav__ to header__
---
 app/components/{navbar.hbs => header.hbs}     | 106 +++++++++---------
 app/components/{navbar.js => header.js}       |   2 +-
 app/styles/app.css                            |   2 +-
 .../{navbar.module.css => header.module.css}  |   8 +-
 app/templates/application.hbs                 |   2 +-
 .../{navbar-test.js => header-test.js}        |  20 ++--
 6 files changed, 71 insertions(+), 69 deletions(-)
 rename app/components/{navbar.hbs => header.hbs} (65%)
 rename app/components/{navbar.js => header.js} (95%)
 rename app/styles/{navbar.module.css => header.module.css} (98%)
 rename tests/integration/components/{navbar-test.js => header-test.js} (94%)

diff --git a/app/components/navbar.hbs b/app/components/header.hbs
similarity index 65%
rename from app/components/navbar.hbs
rename to app/components/header.hbs
index 23544af8..d1a08b50 100644
--- a/app/components/navbar.hbs
+++ b/app/components/header.hbs
@@ -1,4 +1,4 @@
-<nav class="nav">
+<header>
   <button
     data-test-toggle-button
     type="button"
@@ -8,59 +8,61 @@
     <FaIcon @icon="bars" @size="2x" />
   </button>
 
-  <ul data-test-nav-menu class="nav__menu {{if this.isNavOpen 'active' ''}}">
-    <li>
-      <LinkTo data-test-home-link @route={{this.HOME_PAGE}} class="nav__home">
-        <img
-          data-test-home-img
-          class="nav__home__img"
-          src="assets/images/rds-logo.png"
-          alt="Real_Dev_Squad"
-        />
-      </LinkTo>
-    </li>
-    <li>
-      <LinkTo
-        data-test-home
-        class="nav__home__link nav__element"
-        @route={{this.HOME_PAGE}}
-      >
-        Home
-      </LinkTo>
-    </li>
-    <li><a
-        data-test-welcome
-        class="nav__element"
-        href={{this.WELCOME_URL}}
-      >Welcome</a></li>
-    <li><a
-        data-test-events
-        class="nav__element"
-        href={{this.EVENTS_URL}}
-      >Events</a></li>
-    <li><a
-        data-test-members
-        class="nav__element"
-        href={{this.MEMBERS_URL}}
-      >Members</a></li>
-    <li><a
-        data-test-status
-        class="nav__element"
-        href={{this.STATUS_URL}}
-      >Status</a></li>
-    {{#if @dev}}
+  <nav class="nav">
+    <ul data-test-nav-menu class="nav__menu {{if this.isNavOpen 'active' ''}}">
+      <li>
+        <LinkTo data-test-home-link @route={{this.HOME_PAGE}} class="nav__home">
+          <img
+            data-test-home-img
+            class="nav__home__img"
+            src="assets/images/rds-logo.png"
+            alt="Real_Dev_Squad"
+          />
+        </LinkTo>
+      </li>
       <li>
-        {{! TODO - remove query for dev when it goes to production }}
         <LinkTo
-          @route={{this.LIVE_URL}}
-          @query={{hash dev="true"}}
-          class="nav__element"
-        >Live</LinkTo>
+          data-test-home
+          class="nav__home__link nav__element"
+          @route={{this.HOME_PAGE}}
+        >
+          Home
+        </LinkTo>
       </li>
-    {{/if}}
-  </ul>
+      <li><a
+          data-test-welcome
+          class="nav__element"
+          href={{this.WELCOME_URL}}
+        >Welcome</a></li>
+      <li><a
+          data-test-events
+          class="nav__element"
+          href={{this.EVENTS_URL}}
+        >Events</a></li>
+      <li><a
+          data-test-members
+          class="nav__element"
+          href={{this.MEMBERS_URL}}
+        >Members</a></li>
+      <li><a
+          data-test-status
+          class="nav__element"
+          href={{this.STATUS_URL}}
+        >Status</a></li>
+      {{#if @dev}}
+        <li>
+          {{! TODO - remove query for dev when it goes to production }}
+          <LinkTo
+            @route={{this.LIVE_URL}}
+            @query={{hash dev="true"}}
+            class="nav__element"
+          >Live</LinkTo>
+        </li>
+      {{/if}}
+    </ul>
+  </nav>
 
-  <div class="nav__login">
+  <div class="header__login">
     {{#if @isLoading}}
       <div data-test-loading class="skeleton-holder">
         <div
@@ -73,7 +75,7 @@
       {{#if @isLoggedIn}}
         <button
           data-test-dropdown-toggle
-          class="nav__user"
+          class="header__user"
           type="button"
           {{on "click" this.toggleMenu}}
           {{on-click-outside this.outsideClickMenu}}
@@ -164,4 +166,4 @@
       Sign Out
     </div>
   </section>
-</nav>
\ No newline at end of file
+</header>
\ No newline at end of file
diff --git a/app/components/navbar.js b/app/components/header.js
similarity index 95%
rename from app/components/navbar.js
rename to app/components/header.js
index b8341106..31568ff4 100644
--- a/app/components/navbar.js
+++ b/app/components/header.js
@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 import { APPS, AUTH } from '../constants/urls';
 import { inject as service } from '@ember/service';
 
-export default class NavbarComponent extends Component {
+export default class HeaderComponent extends Component {
   @service router;
   @service fastboot;
   @tracked isNavOpen = false;
diff --git a/app/styles/app.css b/app/styles/app.css
index 2c84c66a..1268dfc3 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,4 +1,4 @@
-@import url("navbar.module.css");
+@import url("header.module.css");
 @import url("hero-section.module.css");
 @import url("description.module.css");
 @import url("cards.module.css");
diff --git a/app/styles/navbar.module.css b/app/styles/header.module.css
similarity index 98%
rename from app/styles/navbar.module.css
rename to app/styles/header.module.css
index b635b5b9..e99c85b5 100644
--- a/app/styles/navbar.module.css
+++ b/app/styles/header.module.css
@@ -1,6 +1,6 @@
 @import url("./variables.css");
 
-.nav {
+header {
   background-color: var(--color-navyblue);
   font-weight: 700;
 }
@@ -58,7 +58,7 @@ nav li {
   text-align: center;
 }
 
-.nav__login {
+.header__login {
   position: absolute;
   right: 0;
   top: 0;
@@ -86,7 +86,7 @@ nav li {
   margin: 3px;
 }
 
-.nav__user {
+.header__user {
   font-weight: 700;
   font-size: 1rem;
   color: var(--color-white);
@@ -249,7 +249,7 @@ nav li {
     text-decoration: none;
   }
 
-  .nav__login {
+  .header__login {
     margin: 22px 20px;
   }
 
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index f46ef1b4..96787a44 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,6 +1,6 @@
 {{page-title "Real Dev Squad"}}
 <body>
-  <Navbar
+  <Header
     @firstName={{this.login.userData.first_name}}
     @profilePicture={{this.login.userData.picture.url}}
     @isLoggedIn={{this.login.isLoggedIn}}
diff --git a/tests/integration/components/navbar-test.js b/tests/integration/components/header-test.js
similarity index 94%
rename from tests/integration/components/navbar-test.js
rename to tests/integration/components/header-test.js
index e39cd136..c172764e 100644
--- a/tests/integration/components/navbar-test.js
+++ b/tests/integration/components/header-test.js
@@ -4,10 +4,10 @@ import { render, click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { APPS } from '../../constants/urls';
 
-module('Integration | Component | navbar', function (hooks) {
+module('Integration | Component | header', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('navbar elements renders', async function (assert) {
+  test('header elements renders', async function (assert) {
     assert.expect(15);
 
     this.setProperties({
@@ -20,7 +20,7 @@ module('Integration | Component | navbar', function (hooks) {
     });
 
     await render(hbs`
-      <Navbar
+      <Header
         @isLoggedIn={{this.isLoggedIn}}
         @isLoading={{this.isLoading}}
         @signOut={{this.signOut}}
@@ -50,7 +50,7 @@ module('Integration | Component | navbar', function (hooks) {
     assert.dom('[data-test-login-img]').exists();
   });
 
-  test('toggle navbar menu in mobile view', async function (assert) {
+  test('toggle nav menu in mobile view', async function (assert) {
     assert.expect(5);
 
     this.set('signOut', () => {
@@ -58,7 +58,7 @@ module('Integration | Component | navbar', function (hooks) {
     });
 
     await render(hbs`
-      <Navbar
+      <Header
         @isLoggedIn={{this.isLoggedIn}}
         @signOut={{this.signOut}}
       />
@@ -76,7 +76,7 @@ module('Integration | Component | navbar', function (hooks) {
     assert.dom('[data-test-nav-menu]').doesNotHaveClass('active');
   });
 
-  test('navbar renders when user logged in', async function (assert) {
+  test('header renders when user logged in', async function (assert) {
     assert.expect(5);
 
     this.setProperties({
@@ -91,7 +91,7 @@ module('Integration | Component | navbar', function (hooks) {
     });
 
     await render(hbs`
-      <Navbar
+      <Header
         @firstName={{this.firstName}}
         @profilePicture={{this.profilePicture}}
         @isLoggedIn={{this.isLoggedIn}}
@@ -126,7 +126,7 @@ module('Integration | Component | navbar', function (hooks) {
     });
 
     await render(hbs`
-      <Navbar
+      <Header
         @firstName={{this.firstName}}
         @profilePicture={{this.profilePicture}}
         @isLoggedIn={{this.isLoggedIn}}
@@ -158,7 +158,7 @@ module('Integration | Component | navbar', function (hooks) {
     });
 
     await render(hbs`
-      <Navbar
+      <Header
         @firstName={{this.firstName}}
         @profilePicture={{this.profilePicture}}
         @isLoggedIn={{this.isLoggedIn}}
@@ -203,7 +203,7 @@ module('Integration | Component | navbar', function (hooks) {
     });
 
     await render(hbs`
-      <Navbar
+      <Header
         @isLoading={{this.isLoading}}
         @signOut={{this.signOut}}
       />