Update variable names of navbar component (#70)

* Rename Navbar.avatarMenuItems to Navbar.userMenuItems * Fix page stories * Rename Navbar.avatar to Navbar.userAvatar * Add navbar user button theme
Sage-Bionetworks · Aug 23, 2021 · d7745d4 · d7745d4
1 parent aeda906
commit d7745d4
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 20 deletions.
diff --git a/projects/sage-angular/src/lib/avatar/_avatar-theme.scss b/projects/sage-angular/src/lib/avatar/_avatar-theme.scss
@@ -5,9 +5,9 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  sage-avatar {
-    // .sage-footer-links a {
-    //   color: mat-color($primary, default-contrast);
-    // }
-  }
+  // sage-avatar {
+  //   // .sage-footer-links a {
+  //   //   color: mat-color($primary, default-contrast);
+  //   // }
+  // }
 }
diff --git a/projects/sage-angular/src/lib/navbar/_navbar-theme.scss b/projects/sage-angular/src/lib/navbar/_navbar-theme.scss
@@ -1,3 +1,5 @@
+@import './navbar-user-button/navbar-user-button-theme';
+
 @mixin navbar-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
@@ -12,4 +14,6 @@
       background: mat-color($primary);
     }
   }
+
+  @include avatar-theme($theme);
 }
diff --git a/projects/sage-angular/src/lib/navbar/navbar-user-button/_navbar-user-button-theme.scss b/projects/sage-angular/src/lib/navbar/navbar-user-button/_navbar-user-button-theme.scss
@@ -0,0 +1,7 @@
+@mixin navbar-user-button-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+}
diff --git a/projects/sage-angular/src/lib/navbar/navbar.component.html b/projects/sage-angular/src/lib/navbar/navbar.component.html
@@ -18,7 +18,7 @@
     aria-label="Sign In">Sign In</a>
   <a mat-button class="sage-button" *ngIf="!signedIn" routerLink="signup"
     aria-label="Sign Up">Sign Up</a>
-  <sage-navbar-user-button *ngIf="signedIn" [avatar]="avatar" [menuItems]="avatarMenuItems"
-    (menuItemSelected)="selectUserMenuItem($event)">
+  <sage-navbar-user-button *ngIf="signedIn" [avatar]="userAvatar"
+    [menuItems]="userMenuItems" (menuItemSelected)="selectUserMenuItem($event)">
   </sage-navbar-user-button>
 </nav>
diff --git a/projects/sage-angular/src/lib/navbar/navbar.component.ts b/projects/sage-angular/src/lib/navbar/navbar.component.ts
@@ -1,10 +1,9 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import {
   Avatar,
-  MOCK_AVATAR_32,
+  EMPTY_AVATAR,
 } from '@sage-bionetworks/sage-angular/src/lib/avatar';
 import { MenuItem } from './navbar-user-button/menu-item';
-import { MOCK_MENU_ITEMS } from './navbar-user-button/mock-menu-items';
 import { Section } from './section';
 
 @Component({
@@ -16,8 +15,8 @@ export class NavbarComponent {
   @Input() title = 'Sage Angular';
   @Input() githubUrl = 'https://github.com/Sage-Bionetworks/sage-angular';
   @Input() signedIn = true;
-  @Input() avatar: Avatar = MOCK_AVATAR_32;
-  @Input() avatarMenuItems: MenuItem[] = MOCK_MENU_ITEMS;
+  @Input() userAvatar: Avatar = EMPTY_AVATAR;
+  @Input() userMenuItems: MenuItem[] = [];
 
   @Output() signIn = new EventEmitter<Event>();
   @Output() signUp = new EventEmitter<Event>();

diff --git a/projects/sage-angular/src/lib/navbar/public-api.ts b/projects/sage-angular/src/lib/navbar/public-api.ts
@@ -1,3 +1,6 @@
 export * from './navbar.module';
 export * from './navbar.component';
 export * from './section';
+export * from './navbar-user-button/menu-item';
+export * from './navbar-user-button/navbar-user-button.component';
+export * from './navbar-user-button/mock-menu-items';
diff --git a/stories/Navbar.stories.ts b/stories/Navbar.stories.ts
@@ -52,23 +52,21 @@ export default {
 } as Meta;
 
 const Template: Story<NavbarComponent> = (args: NavbarComponent) => ({
-  props: {
-    ...args
-  }
+  props: args
 });
 
 export const SignedIn = Template.bind({});
 SignedIn.args = {
   signedIn: true,
   sections: sections,
-  avatar: MOCK_AVATAR_32,
-  avatarMenuItems: MOCK_MENU_ITEMS
+  userAvatar: MOCK_AVATAR_32,
+  userMenuItems: MOCK_MENU_ITEMS
 };
 
 export const SignedOut = Template.bind({});
 SignedOut.args = {
   signedIn: false,
   sections: sections,
-  avatar: MOCK_AVATAR_32,
-  avatarMenuItems: MOCK_MENU_ITEMS
+  userAvatar: MOCK_AVATAR_32,
+  userMenuItems: MOCK_MENU_ITEMS
 };
diff --git a/stories/Page.stories.ts b/stories/Page.stories.ts
@@ -8,6 +8,8 @@ import Page from './components/page/page.component';
 
 import * as NavbarStories from './Navbar.stories';
 import * as FooterStories from './Footer.stories';
+import { MOCK_AVATAR_32 } from '@sage-bionetworks/sage-angular/src/public-api';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @Component({ template: 'Homepage' })
 class HomepageComponent {}
@@ -47,6 +49,7 @@ export default {
       ],
       imports: [
         RouterModule.forRoot(routes, { useHash: true }),
+        BrowserAnimationsModule,
         FooterModule,
         NavbarModule
       ],
@@ -61,7 +64,7 @@ const Template: Story<Page> = (args: Page) => ({
 export const SignedIn = Template.bind({});
 SignedIn.args = {
   ...FooterStories.Default.args,
-  ...NavbarStories.SignedIn.args
+  ...NavbarStories.SignedIn.args,
 };
 
 export const SignedOut = Template.bind({});

diff --git a/stories/components/page/page.component.ts b/stories/components/page/page.component.ts
@@ -1,12 +1,17 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Avatar, EMPTY_AVATAR, MenuItem } from '@sage-bionetworks/sage-angular/src/public-api';
 
 @Component({
   selector: 'sage-page',
   templateUrl: './page.html',
   styleUrls: ['./page.scss'],
 })
 export default class PageComponent {
+  @Input() title = 'App Title';
+  @Input() sections = {};
   @Input() signedIn = false;
+  @Input() userAvatar: Avatar = EMPTY_AVATAR;
+  @Input() userMenuItems: MenuItem[] = [];
 
   // @Input()
   // version = '2.0.0';

diff --git a/stories/components/page/page.html b/stories/components/page/page.html
@@ -1,6 +1,10 @@
 <article>
   <sage-navbar
+    [title]="title"
+    [sections]="sections"
     [signedIn]="signedIn"
+    [userAvatar]="userAvatar"
+    [userMenuItems]="userMenuItems"
   ></sage-navbar>
   <router-outlet></router-outlet>
   <sage-footer [version]="version"></sage-footer>