Release 1.0.0 (#33)

* Remove github button from lib * Add pages to demo app * Fix dark theme * Include components themes * Fix demo selector prefix * Fix lib module import in demo app * Remove reference to github button module * Remove reference to github button module * Describe how to use lib in an app * Add section Previews to README
Sage-Bionetworks · May 3, 2021 · 6287abd · 6287abd
1 parent 6d936ac
commit 6287abd
Show file tree

Hide file tree

Showing 52 changed files with 385 additions and 173 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Sage Bionetworks library for Angular
 
-<!-- [![GitHub Release](https://img.shields.io/github/release/Sage-Bionetworks/sage-angular.svg?include_prereleases&color=94398d&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=github)](https://github.com/Sage-Bionetworks/sage-angular/releases) -->
+[![GitHub Release](https://img.shields.io/github/release/Sage-Bionetworks/sage-angular.svg?include_prereleases&color=94398d&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=github)](https://github.com/Sage-Bionetworks/sage-angular/releases)
 [![GitHub CI](https://img.shields.io/github/workflow/status/Sage-Bionetworks/sage-angular/CI.svg?color=94398d&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=github)](https://github.com/Sage-Bionetworks/sage-angular/actions)
 [![GitHub License](https://img.shields.io/github/license/Sage-Bionetworks/sage-angular.svg?color=94398d&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=github)](https://github.com/Sage-Bionetworks/sage-angular/blob/main/LICENSE)
 
@@ -18,18 +18,44 @@ of the library `@sage-bionetworks/sage-angular`. The two projects included are:
 - `sage-angular`: the library `@sage-bionetworks/sage-angular`.
 - `sage-angular-demo`: a demo app used to showcase the content of the library.
 
-### Specification
+## Previews
 
-- Angular version: 11.2.4
-- Typescript: 4.1.5
-- RxJS: 6.6.6
+Version | Demo app | Storybook
+------- | -------- | ---------
+1.0.0   | [Demo app](https://sage-bionetworks.github.io/sage-angular/1.0.0/demo/) | [Storybook](https://sage-bionetworks.github.io/sage-angular/1.0.0/storybook/)
+Edge   | [Demo app](https://sage-bionetworks.github.io/sage-angular/edge/demo/) | [Storybook](https://sage-bionetworks.github.io/sage-angular/edge/storybook/)
 
 ## Installation
 
-```
+```console
 npm install @sage-bionetworks/sage-angular --save
 ```
 
+Import the styles and themes of the library in your main *styles.scss*:
+
+```
+@import '@sage-bionetworks/sage-angular/src/styles';
+@import '@sage-bionetworks/sage-angular/src/lib-theme';
+
+// Include material core styles.
+@include mat-core();
+
+@include angular-material-theme($theme);
+@include sage-angular-theme($theme);
+```
+
+Import the image assets of the library in your *angular.json*:
+
+```json
+"assets": [
+  {
+    "glob": "**/*.@(svg)",
+    "input": "sage-angular/dist/sage-angular/src/assets/images",
+    "output": "images"
+  }
+],
+```
+
 ## Development server
 
 Run `npm ci` to install the npm dependencies of this project.

diff --git a/angular.json b/angular.json
@@ -52,7 +52,7 @@
       },
       "root": "projects/sage-angular-demo",
       "sourceRoot": "projects/sage-angular-demo/src",
-      "prefix": "app",
+      "prefix": "demo",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",

diff --git a/projects/sage-angular-demo/src/_app-theme.scss b/projects/sage-angular-demo/src/_app-theme.scss
@@ -1,30 +1,24 @@
 @import '~@angular/material/theming';
 
-// @import './app/pages/component-category-list/component-category-list-theme';
-// @import './app/pages/component-sidenav/component-sidenav-theme';
-// @import './app/pages/component-viewer/component-viewer-theme';
-// @import './app/pages/guide-list/guide-list-theme';
-// @import './app/pages/homepage/homepage-theme';
-// @import './app/pages/not-found/not-found-theme';
-// @import './app/shared/carousel/carousel-theme';
-// @import './app/shared/example-viewer/example-viewer-theme';
-// @import './app/shared/footer/footer-theme';
-// @import './app/shared/navbar/navbar-theme';
-// @import './app/shared/table-of-contents/table-of-contents-theme';
-// @import './styles/api-theme';
-// @import './styles/markdown-theme';
-// @import './styles/svg-theme';
-// @import './styles/tables-theme';
+@import './app/pages/explore/explore-theme';
+@import './app/pages/homepage/homepage-theme';
+@import './app/pages/signin/signin-theme';
+@import './app/pages/signup/signup-theme';
 
 // Styles for the docs app that are based on the current theme.
-@mixin sage-angular-demo-theme($theme) {
+@mixin demo-app-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);
   $next-theme: mat-palette($mat-red);
 
+  demo-app {
+    background: mat-color($background, background);
+    color: mat-color($foreground, secondary-text);
+  }
+
   // .docs-app-background {
   //   background: mat-color($background, background);
   // }
@@ -46,21 +40,10 @@
   //   background: mat-color($next-theme, 900) !important;
   // }
 
-  // @include carousel-theme($theme);
-  // @include component-category-list-theme($theme);
-  // @include component-viewer-sidenav-theme($theme);
-  // @include component-viewer-theme($theme);
-  // @include docs-site-api-theme($theme);
-  // @include docs-site-markdown-theme($theme);
-  // @include docs-site-svg-theme($theme);
-  // @include docs-site-tables-theme($theme);
-  // @include example-viewer-theme($theme);
-  // @include footer-theme($theme);
-  // @include guide-list-theme($theme);
-  // @include home-page-theme($theme);
-  // @include not-found-theme($theme);
-  // @include nav-bar-theme($theme);
-  // @include table-of-contents-theme($theme);
+  @include explore-theme($theme);
+  @include homepage-theme($theme);
+  @include signin-theme($theme);
+  @include signup-theme($theme);
 }
 
 // Define the light theme.

diff --git a/projects/sage-angular-demo/src/app/app-routing.module.ts b/projects/sage-angular-demo/src/app/app-routing.module.ts
@@ -2,16 +2,23 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-  // { path: 'home', redirectTo: '', pathMatch: 'full' },
   {
     path: '',
     pathMatch: 'full',
     loadChildren: () => import('./pages/homepage').then(m => m.HomepageModule)
   },
-  { path: 'explore', pathMatch: 'full', redirectTo: '' },
-  { path: 'organizations', pathMatch: 'full', redirectTo: '' }
-  // { path: 'explore', component: undefined },
-  // { path: 'organizations', component: undefined },
+  {
+    path: 'explore',
+    loadChildren: () => import('./pages/explore').then(m => m.ExploreModule)
+  },
+  {
+    path: 'signin',
+    loadChildren: () => import('./pages/signin').then(m => m.SigninModule)
+  },
+  {
+    path: 'signup',
+    loadChildren: () => import('./pages/signup').then(m => m.SignupModule)
+  },
 ];
 
 @NgModule({

diff --git a/projects/sage-angular-demo/src/app/app.component.scss b/projects/sage-angular-demo/src/app/app.component.scss
@@ -1,7 +1,30 @@
+@import '../styles/constants';
+
+demo-app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
 sage-navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
+}
+
+demo-app > router-outlet + .main-content,
+demo-app > router-outlet + app-component-sidenav {
+  margin-top: 56px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: $extra-small-breakpoint-width) {
+  demo-app > router-outlet + .main-content,
+  demo-app > router-outlet + app-component-sidenav {
+    margin-top: 92px;
+    overflow-y: visible;
+  }
 }
diff --git a/projects/sage-angular-demo/src/app/app.component.ts b/projects/sage-angular-demo/src/app/app.component.ts
@@ -1,22 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 import { Section } from '@sage-bionetworks/sage-angular/src/lib/navbar';
 
 @Component({
-  selector: 'app-root',
+  selector: 'demo-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   title = 'Sage Angular Demo';
   sections: { [key: string]: Section } = {
     explore: {
       name: 'Explore',
       summary: 'Explore things.'
-    },
-    organizations: {
-      name: 'Organizations',
-      summary: 'The organizations you belong to.'
     }
   };
 

diff --git a/projects/sage-angular-demo/src/app/app.module.ts b/projects/sage-angular-demo/src/app/app.module.ts
@@ -2,8 +2,6 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { FooterModule } from '@sage-bionetworks/sage-angular/src/lib/footer';
-import { GithubButtonModule } from '@sage-bionetworks/sage-angular/src/lib/github-button';
 import { NavbarModule } from '@sage-bionetworks/sage-angular/src/lib/navbar';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -17,8 +15,6 @@ import { AppComponent } from './app.component';
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
-    FooterModule,
-    GithubButtonModule,
     NavbarModule
   ],
   providers: [],

diff --git a/projects/sage-angular-demo/src/app/pages/explore/_explore-theme.scss b/projects/sage-angular-demo/src/app/pages/explore/_explore-theme.scss
@@ -0,0 +1,7 @@
+@mixin explore-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-demo/src/app/pages/explore/explore.component.html b/projects/sage-angular-demo/src/app/pages/explore/explore.component.html
@@ -0,0 +1,5 @@
+<main>
+  <p>explore works!</p>
+</main>
+
+<sage-footer></sage-footer>
diff --git a/projects/sage-angular-demo/src/app/pages/explore/explore.component.scss b/projects/sage-angular-demo/src/app/pages/explore/explore.component.scss
@@ -0,0 +1,3 @@
+main {
+  min-height: 100vh;
+}
diff --git a/...ub-button/github-button.component.spec.ts → ...p/pages/explore/explore.component.spec.ts b/...ub-button/github-button.component.spec.ts → ...p/pages/explore/explore.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { GithubButtonComponent } from './github-button.component';
+import { ExploreComponent } from './explore.component';
 
-describe('GithubButtonComponent', () => {
-  let component: GithubButtonComponent;
-  let fixture: ComponentFixture<GithubButtonComponent>;
+describe('ExploreComponent', () => {
+  let component: ExploreComponent;
+  let fixture: ComponentFixture<ExploreComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ GithubButtonComponent ]
+      declarations: [ ExploreComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(GithubButtonComponent);
+    fixture = TestBed.createComponent(ExploreComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/projects/sage-angular-demo/src/app/pages/explore/explore.component.ts b/projects/sage-angular-demo/src/app/pages/explore/explore.component.ts
@@ -0,0 +1,14 @@
+import { Component, HostBinding, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'demo-explore',
+  templateUrl: './explore.component.html',
+  styleUrls: ['./explore.component.scss']
+})
+export class ExploreComponent implements OnInit {
+  @HostBinding('class.main-content') readonly mainContentClass = true;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/projects/sage-angular-demo/src/app/pages/explore/explore.module.ts b/projects/sage-angular-demo/src/app/pages/explore/explore.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+
+import { FooterModule } from '@sage-bionetworks/sage-angular/src/lib/footer';
+
+import { ExploreComponent } from './explore.component';
+
+const routes: Routes = [
+  { path: '', component: ExploreComponent }
+];
+
+@NgModule({
+  declarations: [ExploreComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    FooterModule
+  ],
+  exports: [ExploreComponent]
+})
+export class ExploreModule {}
diff --git a/projects/sage-angular-demo/src/app/pages/explore/index.ts b/projects/sage-angular-demo/src/app/pages/explore/index.ts
@@ -0,0 +1,2 @@
+export * from './explore.component';
+export * from './explore.module';
diff --git a/projects/sage-angular-demo/src/app/pages/homepage/_homepage-theme.scss b/projects/sage-angular-demo/src/app/pages/homepage/_homepage-theme.scss
@@ -0,0 +1,7 @@
+@mixin homepage-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-demo/src/app/pages/homepage/homepage.component.html b/projects/sage-angular-demo/src/app/pages/homepage/homepage.component.html
@@ -1,2 +1,5 @@
-<p>homepage works!</p>
+<main>
+  <p>homepage works!</p>
+</main>
+
 <sage-footer></sage-footer>
diff --git a/projects/sage-angular-demo/src/app/pages/homepage/homepage.component.scss b/projects/sage-angular-demo/src/app/pages/homepage/homepage.component.scss
@@ -0,0 +1,3 @@
+main {
+  min-height: 100vh;
+}
diff --git a/projects/sage-angular-demo/src/app/pages/homepage/homepage.component.ts b/projects/sage-angular-demo/src/app/pages/homepage/homepage.component.ts
@@ -1,11 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostBinding, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-homepage',
+  selector: 'demo-homepage',
   templateUrl: './homepage.component.html',
   styleUrls: ['./homepage.component.scss']
 })
 export class HomepageComponent implements OnInit {
+  @HostBinding('class.main-content') readonly mainContentClass = true;
+
   constructor() {}
 
   ngOnInit(): void {}

diff --git a/projects/sage-angular-demo/src/app/pages/homepage/homepage.module.ts b/projects/sage-angular-demo/src/app/pages/homepage/homepage.module.ts
@@ -1,14 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
 
 import { FooterModule } from '@sage-bionetworks/sage-angular/src/lib/footer';
 
 import { HomepageComponent } from './homepage.component';
 
+const routes: Routes = [
+  { path: '', component: HomepageComponent }
+];
+
 @NgModule({
   declarations: [HomepageComponent],
   imports: [
     CommonModule,
+    RouterModule.forChild(routes),
     FooterModule
   ],
   exports: [HomepageComponent]

diff --git a/projects/sage-angular-demo/src/app/pages/signin/_signin-theme.scss b/projects/sage-angular-demo/src/app/pages/signin/_signin-theme.scss
@@ -0,0 +1,7 @@
+@mixin signin-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-demo/src/app/pages/signin/index.ts b/projects/sage-angular-demo/src/app/pages/signin/index.ts
@@ -0,0 +1,2 @@
+export * from './signin.component';
+export * from './signin.module';