Merge branch 'develop-ember' into onboarding/signup-api

Real-Dev-Squad · Dec 26, 2023 · 1eb7b00 · 1eb7b00
2 parents 7e456fa + dca3ef2
commit 1eb7b00
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 69 deletions.
diff --git a/app/components/navbar.hbs → app/components/header.hbs b/app/components/navbar.hbs → 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>
+</header>
diff --git a/app/components/navbar.js → app/components/header.js b/app/components/navbar.js → 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
@@ -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 → app/styles/header.module.css b/app/styles/navbar.module.css → 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
@@ -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 → tests/integration/components/header-test.js b/tests/integration/components/navbar-test.js → 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,15 +50,15 @@ 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', () => {
       this.isLoggedIn = false;
     });
 
     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}}
       />