From 4fe945c9f84f29b87e2d21b5cdbfdb224fdf8cbf Mon Sep 17 00:00:00 2001 From: griest024 Date: Tue, 9 Jan 2024 13:02:59 -0500 Subject: [PATCH] feat(daffio): dynamic nav and sidebar content (#2686) --------- Co-authored-by: xelaint --- apps/daffio/src/app/api/api-routing.module.ts | 10 +-- apps/daffio/src/app/api/api.module.ts | 2 + apps/daffio/src/app/app-routing.module.ts | 45 ++++++++++-- apps/daffio/src/app/app.module.ts | 8 +++ .../src/app/content/home/home.module.ts | 2 + .../app/content/home/view/home-view.module.ts | 2 + .../docs-header/docs-header.component.html | 13 ++++ .../docs-header.component.spec.ts} | 16 ++--- .../docs-header/docs-header.component.ts | 27 +++++++ .../docs-header.module.ts} | 10 +-- .../marketing-header.component.html} | 0 .../marketing-header.component.spec.ts | 72 +++++++++++++++++++ .../marketing-header.component.ts} | 9 ++- .../marketing-header.module.ts | 32 +++++++++ .../docs-sidebar/docs-sidebar.component.html | 3 + .../docs-sidebar/docs-sidebar.component.scss | 4 ++ .../docs-sidebar/docs-sidebar.component.ts | 16 +++++ .../docs-sidebar/docs-sidebar.module.ts | 23 ++++++ .../marketing-sidebar.component.html | 4 ++ .../marketing-sidebar.component.scss | 4 ++ .../marketing-sidebar.component.ts | 17 +++++ .../marketing-sidebar.module.ts | 23 ++++++ .../sidebar-viewport-theme.scss | 19 +++++ .../sidebar-viewport.component.html | 12 +++- .../sidebar-viewport.component.scss | 13 ++-- .../sidebar-viewport.component.ts | 7 +- .../src/app/core/sidebar/sidebar.module.ts | 8 ++- .../app/core/template/template.component.html | 8 +-- .../core/template/template.component.spec.ts | 4 -- .../app/core/template/template.component.ts | 6 +- .../src/app/core/template/template.module.ts | 5 +- .../containers/sidebar/sidebar.component.html | 3 + .../containers/sidebar/sidebar.component.scss | 0 .../sidebar/sidebar.component.spec.ts | 70 ++++++++++++++++++ .../containers/sidebar/sidebar.component.ts | 27 +++++++ .../docs/containers/sidebar/sidebar.module.ts | 24 +++++++ .../docs/services/docs-service.interface.ts | 2 +- .../src/app/docs/services/docs.service.ts | 4 +- .../testing/factories/guide-list.factory.ts | 4 +- .../named-views/models/named-views.enum.ts | 4 ++ apps/daffio/src/scss/component-themes.scss | 2 + 41 files changed, 507 insertions(+), 57 deletions(-) create mode 100644 apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html rename apps/daffio/src/app/core/header/containers/{header.component.spec.ts => docs-header/docs-header.component.spec.ts} (72%) create mode 100644 apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts rename apps/daffio/src/app/core/header/containers/{header.module.ts => docs-header/docs-header.module.ts} (71%) rename apps/daffio/src/app/core/header/containers/{header.component.html => marketing-header/marketing-header.component.html} (100%) create mode 100644 apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.spec.ts rename apps/daffio/src/app/core/header/containers/{header.component.ts => marketing-header/marketing-header.component.ts} (67%) create mode 100644 apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts create mode 100644 apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.html create mode 100644 apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.scss create mode 100644 apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.ts create mode 100644 apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.module.ts create mode 100644 apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.html create mode 100644 apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.scss create mode 100644 apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts create mode 100644 apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.module.ts create mode 100644 apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss create mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.component.html create mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.component.scss create mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.component.spec.ts create mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.component.ts create mode 100644 apps/daffio/src/app/docs/containers/sidebar/sidebar.module.ts create mode 100644 apps/daffio/src/app/named-views/models/named-views.enum.ts diff --git a/apps/daffio/src/app/api/api-routing.module.ts b/apps/daffio/src/app/api/api-routing.module.ts index 150dc4ac7e..ef16409f97 100644 --- a/apps/daffio/src/app/api/api-routing.module.ts +++ b/apps/daffio/src/app/api/api-routing.module.ts @@ -4,21 +4,20 @@ import { RouterModule, } from '@angular/router'; +import { DaffRouteWithNamedViews } from '@daffodil/router'; + import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component'; import { DaffioApiPageComponent } from './pages/api-page/api-page.component'; import { DaffioApiListResolver } from './resolvers/api-list-resolver.service'; import { DocsResolver } from '../docs/resolvers/docs-resolver.service'; export const apiRoutes: Routes = [ - { + { path: '', component: DaffioApiListPageComponent, resolve: { reference: DaffioApiListResolver, }, - data: { - sidebarMode: 'side-fixed', - }, }, { path: '**', @@ -26,9 +25,6 @@ export const apiRoutes: Routes = [ resolve: { doc: DocsResolver, }, - data: { - sidebarMode: 'side-fixed', - }, }, ]; diff --git a/apps/daffio/src/app/api/api.module.ts b/apps/daffio/src/app/api/api.module.ts index 8f126ce51e..e0ca3df2af 100644 --- a/apps/daffio/src/app/api/api.module.ts +++ b/apps/daffio/src/app/api/api.module.ts @@ -9,6 +9,7 @@ import { DaffioApiListModule } from './components/api-list/api-list.module'; import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component'; import { DaffioApiPageComponent } from './pages/api-page/api-page.component'; import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.module'; +import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.module'; @NgModule({ imports: [ @@ -17,6 +18,7 @@ import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer. DaffioDocsApiRoutingModule, DaffioApiListModule, DaffioDocViewerModule, + DaffioDocsSidebarModule, DaffContainerModule, ], diff --git a/apps/daffio/src/app/app-routing.module.ts b/apps/daffio/src/app/app-routing.module.ts index f35774108f..34e335c483 100644 --- a/apps/daffio/src/app/app-routing.module.ts +++ b/apps/daffio/src/app/app-routing.module.ts @@ -4,17 +4,48 @@ import { RouterModule, } from '@angular/router'; +import { DaffRouteWithNamedViews } from '@daffodil/router'; + +import { DaffioDocsHeaderContainer } from './core/header/containers/docs-header/docs-header.component'; +import { DaffioMarketingHeaderContainer } from './core/header/containers/marketing-header/marketing-header.component'; +import { DaffioDocsSidebarComponent } from './core/sidebar/components/docs-sidebar/docs-sidebar.component'; +import { DaffioMarketingSidebarComponent } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.component'; import { TemplateComponent } from './core/template/template.component'; +import { DaffioRouterNamedViewsEnum } from './named-views/models/named-views.enum'; export const appRoutes: Routes = [ { - path: '', component: TemplateComponent, children: [ - { path: '', pathMatch: 'full', loadChildren: () => import('./content/home/home.module').then(m => m.DaffioHomeModule) }, - { path: 'why-pwa', loadChildren: () => import('./content/why-pwa/why-pwa.module').then(m => m.DaffioWhyPwaModule) }, - { path: 'support', loadChildren: () => import('./content/support/support.module').then(m => m.DaffioSupportModule) }, - { path: 'api', loadChildren: () => import('./api/api.module').then(m => m.DaffioApiModule) }, - { path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) }, - { path: '404', loadChildren: () => import('./content/not-found/not-found.module').then(m => m.DaffioNotFoundModule) }, + path: '', component: TemplateComponent, + children: [ + { + path: '', + children: [ + { path: '', pathMatch: 'full', loadChildren: () => import('./content/home/home.module').then(m => m.DaffioHomeModule) }, + { path: 'why-pwa', loadChildren: () => import('./content/why-pwa/why-pwa.module').then(m => m.DaffioWhyPwaModule) }, + { path: 'support', loadChildren: () => import('./content/support/support.module').then(m => m.DaffioSupportModule) }, + { path: '404', loadChildren: () => import('./content/not-found/not-found.module').then(m => m.DaffioNotFoundModule) }, + ], + data: { + daffNamedViews: { + [DaffioRouterNamedViewsEnum.NAV]: DaffioMarketingHeaderContainer, + [DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioMarketingSidebarComponent, + }, + }, + }, + + { + path: '', + children: [ + { path: 'api', loadChildren: () => import('./api/api.module').then(m => m.DaffioApiModule) }, + { path: 'guides', loadChildren: () => import('./guides/guides.module').then(m => m.DaffioGuidesModule) }, + ], + data: { + daffNamedViews: { + [DaffioRouterNamedViewsEnum.NAV]: DaffioDocsHeaderContainer, + [DaffioRouterNamedViewsEnum.SIDEBAR]: DaffioDocsSidebarComponent, + }, + }, + }, ], }, { diff --git a/apps/daffio/src/app/app.module.ts b/apps/daffio/src/app/app.module.ts index 8ee90d2f91..b5269d8ec6 100644 --- a/apps/daffio/src/app/app.module.ts +++ b/apps/daffio/src/app/app.module.ts @@ -15,6 +15,10 @@ import { DAFF_THEME_INITIALIZER } from '@daffodil/design'; import { AppRoutingModule } from './app-routing.module'; import { DaffioAppComponent } from './app.component'; +import { DaffioDocsHeaderContainerModule } from './core/header/containers/docs-header/docs-header.module'; +import { DaffioMarketingHeaderContainerModule } from './core/header/containers/marketing-header/marketing-header.module'; +import { DaffioDocsSidebarComponentModule } from './core/sidebar/components/docs-sidebar/docs-sidebar.module'; +import { DaffioMarketingSidebarComponentModule } from './core/sidebar/components/marketing-sidebar/marketing-sidebar.module'; import { TemplateModule } from './core/template/template.module'; import { environment } from '../environments/environment'; @@ -28,6 +32,10 @@ import { environment } from '../environments/environment'; HttpClientModule, AppRoutingModule, + DaffioMarketingHeaderContainerModule, + DaffioDocsHeaderContainerModule, + DaffioMarketingSidebarComponentModule, + DaffioDocsSidebarComponentModule, //Make sure this loads after Router and Store StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer, diff --git a/apps/daffio/src/app/content/home/home.module.ts b/apps/daffio/src/app/content/home/home.module.ts index 73e728e166..cb67a63b63 100644 --- a/apps/daffio/src/app/content/home/home.module.ts +++ b/apps/daffio/src/app/content/home/home.module.ts @@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router'; import { DaffioHomeRoutingModule } from './home-routing.module'; import { DaffioHomeViewModule } from './view/home-view.module'; +import { DaffioMarketingHeaderContainerModule } from '../../core/header/containers/marketing-header/marketing-header.module'; import { TemplateModule } from '../../core/template/template.module'; import { IphoneModule } from '../../design/device/iphone/iphone.module'; @@ -19,6 +20,7 @@ import { IphoneModule } from '../../design/device/iphone/iphone.module'; DaffioHomeRoutingModule, DaffioHomeViewModule, + DaffioMarketingHeaderContainerModule, ], }) export class DaffioHomeModule { } diff --git a/apps/daffio/src/app/content/home/view/home-view.module.ts b/apps/daffio/src/app/content/home/view/home-view.module.ts index 2a4503bf43..fd2500e018 100644 --- a/apps/daffio/src/app/content/home/view/home-view.module.ts +++ b/apps/daffio/src/app/content/home/view/home-view.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { DaffioHomeViewComponent } from './home-view.component'; +import { DaffioMarketingHeaderContainerModule } from '../../../core/header/containers/marketing-header/marketing-header.module'; import { DaffioHomeCalloutPlatformsComponentModule } from '../components/home-callout-platforms/home-callout-platforms.module'; import { DaffioHomeCalloutPwaComponentModule } from '../components/home-callout-pwa/home-callout-pwa.module'; import { DaffioHomeHeroComponentModule } from '../components/home-hero/home-hero.module'; @@ -15,6 +16,7 @@ import { DaffioHomeHeroComponentModule } from '../components/home-hero/home-hero DaffioHomeHeroComponentModule, DaffioHomeCalloutPwaComponentModule, DaffioHomeCalloutPlatformsComponentModule, + DaffioMarketingHeaderContainerModule, ], declarations: [ DaffioHomeViewComponent, diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html new file mode 100644 index 0000000000..ecde57c16a --- /dev/null +++ b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.html @@ -0,0 +1,13 @@ + + + + + + {{ link.title }} + Get Started + + \ No newline at end of file diff --git a/apps/daffio/src/app/core/header/containers/header.component.spec.ts b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.spec.ts similarity index 72% rename from apps/daffio/src/app/core/header/containers/header.component.spec.ts rename to apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.spec.ts index d954f5924c..eaf11f9dd5 100644 --- a/apps/daffio/src/app/core/header/containers/header.component.spec.ts +++ b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.spec.ts @@ -15,17 +15,17 @@ import { Store, } from '@ngrx/store'; -import { DaffioHeaderContainer } from './header.component'; -import { ToggleSidebar } from '../../sidebar/actions/sidebar.actions'; -import * as fromSidebar from '../../sidebar/reducers/index'; +import { DaffioDocsHeaderContainer } from './docs-header.component'; +import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'; +import * as fromSidebar from '../../../../core/sidebar/reducers/index'; -@Component({ template: '' }) +@Component({ template: '' }) class WrapperComponent {} -describe('DaffioHeaderContainer', () => { +describe('DaffioDocsHeaderContainer', () => { let component: WrapperComponent; let fixture: ComponentFixture; - let daffioHeaderContainer: DaffioHeaderContainer; + let daffioDocsHeaderContainer: DaffioDocsHeaderContainer; let store: Store; @@ -38,7 +38,7 @@ describe('DaffioHeaderContainer', () => { ], declarations: [ WrapperComponent, - DaffioHeaderContainer, + DaffioDocsHeaderContainer, ], schemas: [ CUSTOM_ELEMENTS_SCHEMA, @@ -54,7 +54,7 @@ describe('DaffioHeaderContainer', () => { spyOn(store, 'dispatch'); fixture.detectChanges(); - daffioHeaderContainer = fixture.debugElement.query(By.css('daffio-header-container')).componentInstance; + daffioDocsHeaderContainer = fixture.debugElement.query(By.css('daffio-docs-header-container')).componentInstance; }); it('should create', () => { diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts new file mode 100644 index 0000000000..2abe8bef55 --- /dev/null +++ b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts @@ -0,0 +1,27 @@ +import { + ChangeDetectionStrategy, + Component, +} from '@angular/core'; +import { faBars } from '@fortawesome/free-solid-svg-icons'; +import { Store } from '@ngrx/store'; + +import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'; + +@Component({ + selector: 'daffio-docs-header-container', + templateUrl: './docs-header.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioDocsHeaderContainer { + faBars = faBars; + + links: any[] = [ + { path: '/api', title: 'API Index' }, + ]; + + constructor(private store: Store) { } + + openDocsSidebar() { + this.store.dispatch(new ToggleSidebar()); + } +} diff --git a/apps/daffio/src/app/core/header/containers/header.module.ts b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts similarity index 71% rename from apps/daffio/src/app/core/header/containers/header.module.ts rename to apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts index dde49e9824..a68982bf44 100644 --- a/apps/daffio/src/app/core/header/containers/header.module.ts +++ b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.module.ts @@ -7,8 +7,8 @@ import { DaffLogoModule } from '@daffodil/branding'; import { DaffButtonModule } from '@daffodil/design/button'; import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch'; -import { DaffioHeaderContainer } from './header.component'; -import { DaffioHeaderComponentModule } from '../components/header.module'; +import { DaffioDocsHeaderContainer } from './docs-header.component'; +import { DaffioHeaderComponentModule } from '../../components/header.module'; @NgModule({ imports: [ @@ -23,10 +23,10 @@ import { DaffioHeaderComponentModule } from '../components/header.module'; FontAwesomeModule, ], declarations: [ - DaffioHeaderContainer, + DaffioDocsHeaderContainer, ], exports: [ - DaffioHeaderContainer, + DaffioDocsHeaderContainer, ], }) -export class DaffioHeaderModule { } +export class DaffioDocsHeaderContainerModule { } diff --git a/apps/daffio/src/app/core/header/containers/header.component.html b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.html similarity index 100% rename from apps/daffio/src/app/core/header/containers/header.component.html rename to apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.html diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.spec.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.spec.ts new file mode 100644 index 0000000000..8f7d0dc71a --- /dev/null +++ b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.spec.ts @@ -0,0 +1,72 @@ +import { + CUSTOM_ELEMENTS_SCHEMA, + Component, +} from '@angular/core'; +import { + ComponentFixture, + TestBed, + waitForAsync, +} from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { RouterTestingModule } from '@angular/router/testing'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { + StoreModule, + Store, +} from '@ngrx/store'; + +import { DaffioMarketingHeaderContainer } from './marketing-header.component'; +import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'; +import * as fromSidebar from '../../../../core/sidebar/reducers/index'; + +@Component({ template: '' }) +class WrapperComponent {} + +describe('DaffioMarketingHeaderContainer', () => { + let component: WrapperComponent; + let fixture: ComponentFixture; + let daffioMarketingHeaderContainer: DaffioMarketingHeaderContainer; + + let store: Store; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [ + StoreModule.forRoot({}), + RouterTestingModule, + FontAwesomeModule, + ], + declarations: [ + WrapperComponent, + DaffioMarketingHeaderContainer, + ], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WrapperComponent); + component = fixture.componentInstance; + store = TestBed.inject(Store); + spyOn(store, 'dispatch'); + fixture.detectChanges(); + + daffioMarketingHeaderContainer = fixture.debugElement.query(By.css('daffio-marketing-header-container')).componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('when [sidebar-button] is clicked', () => { + it('should call store.dispatch with a ToggleSidebar action', () => { + const sidebarButton = fixture.debugElement.query(By.css('[sidebar-button]')).nativeElement; + sidebarButton.click(); + + expect(store.dispatch).toHaveBeenCalledWith(new ToggleSidebar()); + }); + }); +}); diff --git a/apps/daffio/src/app/core/header/containers/header.component.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts similarity index 67% rename from apps/daffio/src/app/core/header/containers/header.component.ts rename to apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts index 4e1c5aae34..65cb348691 100644 --- a/apps/daffio/src/app/core/header/containers/header.component.ts +++ b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.component.ts @@ -5,15 +5,14 @@ import { import { faBars } from '@fortawesome/free-solid-svg-icons'; import { Store } from '@ngrx/store'; -import { ToggleSidebar } from '../../sidebar/actions/sidebar.actions'; - +import { ToggleSidebar } from '../../../../core/sidebar/actions/sidebar.actions'; @Component({ - selector: 'daffio-header-container', - templateUrl: './header.component.html', + selector: 'daffio-marketing-header-container', + templateUrl: './marketing-header.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DaffioHeaderContainer { +export class DaffioMarketingHeaderContainer { faBars = faBars; links: any[] = [ diff --git a/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts new file mode 100644 index 0000000000..9b252a99b9 --- /dev/null +++ b/apps/daffio/src/app/core/header/containers/marketing-header/marketing-header.module.ts @@ -0,0 +1,32 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; + +import { DaffLogoModule } from '@daffodil/branding'; +import { DaffButtonModule } from '@daffodil/design/button'; +import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch'; + +import { DaffioMarketingHeaderContainer } from './marketing-header.component'; +import { DaffioHeaderComponentModule } from '../../components/header.module'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + + DaffioHeaderComponentModule, + DaffLogoModule, + DaffButtonModule, + DaffThemeSwitchButtonModule, + + FontAwesomeModule, + ], + declarations: [ + DaffioMarketingHeaderContainer, + ], + exports: [ + DaffioMarketingHeaderContainer, + ], +}) +export class DaffioMarketingHeaderContainerModule { } diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.html b/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.html new file mode 100644 index 0000000000..5eeecffa95 --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.html @@ -0,0 +1,3 @@ + + {{ link.title }} + \ No newline at end of file diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.scss b/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.scss new file mode 100644 index 0000000000..a9233a7f48 --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + margin: 16px 0 0; +} \ No newline at end of file diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.ts b/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.ts new file mode 100644 index 0000000000..4d7d47c389 --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.component.ts @@ -0,0 +1,16 @@ +import { + ChangeDetectionStrategy, + Component, +} from '@angular/core'; + +@Component({ + selector: 'daffio-docs-sidebar', + templateUrl: './docs-sidebar.component.html', + styleUrls: ['./docs-sidebar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioDocsSidebarComponent { + links: any[] = [ + { path: '/api', title: 'API Index' }, + ]; +} diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.module.ts b/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.module.ts new file mode 100644 index 0000000000..440ff0ea12 --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/components/docs-sidebar/docs-sidebar.module.ts @@ -0,0 +1,23 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { DaffListModule } from '@daffodil/design/list'; + +import { DaffioDocsSidebarComponent } from './docs-sidebar.component'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + + DaffListModule, + ], + declarations: [ + DaffioDocsSidebarComponent, + ], + exports: [ + DaffioDocsSidebarComponent, + ], +}) +export class DaffioDocsSidebarComponentModule { } diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.html b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.html new file mode 100644 index 0000000000..4825945a6e --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.html @@ -0,0 +1,4 @@ + + {{ link.title }} + Sponsor + \ No newline at end of file diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.scss b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.scss new file mode 100644 index 0000000000..a9233a7f48 --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.scss @@ -0,0 +1,4 @@ +:host { + display: block; + margin: 16px 0 0; +} \ No newline at end of file diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts new file mode 100644 index 0000000000..db14236cd3 --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.component.ts @@ -0,0 +1,17 @@ +import { + ChangeDetectionStrategy, + Component, +} from '@angular/core'; + +@Component({ + selector: 'daffio-marketing-sidebar', + templateUrl: './marketing-sidebar.component.html', + styleUrls: ['./marketing-sidebar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioMarketingSidebarComponent { + links: any[] = [ + { path: '/api', title: 'Docs' }, + { path: '/why-pwa', title: 'Why PWA' }, + ]; +} diff --git a/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.module.ts b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.module.ts new file mode 100644 index 0000000000..f638623df8 --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/components/marketing-sidebar/marketing-sidebar.module.ts @@ -0,0 +1,23 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { DaffListModule } from '@daffodil/design/list'; + +import { DaffioMarketingSidebarComponent } from './marketing-sidebar.component'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + + DaffListModule, + ], + declarations: [ + DaffioMarketingSidebarComponent, + ], + exports: [ + DaffioMarketingSidebarComponent, + ], +}) +export class DaffioMarketingSidebarComponentModule { } diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss new file mode 100644 index 0000000000..daa8e7cb10 --- /dev/null +++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme.scss @@ -0,0 +1,19 @@ +@use 'sass:map'; +@use 'theme' as daff-theme; + +@mixin daffio-sidebar-viewport-theme($theme) { + $gray: daff-theme.daff-map-deep-get($theme, 'core.gray'); + $base: daff-theme.daff-map-deep-get($theme, 'core.base'); + $base-contrast: daff-theme.daff-map-deep-get($theme, 'core.base-contrast'); + $primary: map.get($theme, primary); + + .daffio-sidebar-viewport { + &__get-started { + background: daff-theme.daff-illuminate($base, $gray, 2); + + &:hover { + background: daff-theme.daff-illuminate($base, $gray, 3); + } + } + } +} \ No newline at end of file diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html index 20d1c5b915..f114322fe6 100644 --- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html +++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html @@ -1,8 +1,14 @@ - - - API Index + + + + + + Get Started + diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss index 1ffcbf53b4..c1d2d68498 100644 --- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss +++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.scss @@ -1,6 +1,9 @@ -.daffio-sidebar { - align-self: flex-start; - position: sticky; - top: 70px; - height: calc(100vh - 70px); +.daffio-sidebar-viewport { + &__get-started { + display: block; + font-weight: 500; + padding: 16px; + text-align: center; + text-decoration: none; + } } diff --git a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts index 8805c8ed8d..6c972dc462 100644 --- a/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts +++ b/apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts @@ -3,6 +3,7 @@ import { Component, OnInit, } from '@angular/core'; +import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { Store, select, @@ -14,6 +15,7 @@ import { Observable } from 'rxjs'; import { DaffSidebarMode } from '@daffodil/design/sidebar'; import { DaffioGuideList } from '../../../../docs/models/guide-list'; +import { DaffioRouterNamedViewsEnum } from '../../../../named-views/models/named-views.enum'; import { CloseSidebar, OpenSidebar, @@ -24,9 +26,12 @@ import * as fromDaffioSidebar from '../../reducers/index'; @Component({ selector: 'daffio-sidebar-viewport-container', templateUrl: './sidebar-viewport.component.html', + styleUrls: ['./sidebar-viewport.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DaffioSidebarViewportContainer implements OnInit{ +export class DaffioSidebarViewportContainer implements OnInit { + faTimes = faTimes; + readonly sidebarNamedView = DaffioRouterNamedViewsEnum.SIDEBAR; showSidebar$: Observable; sidebarContents$: Observable; diff --git a/apps/daffio/src/app/core/sidebar/sidebar.module.ts b/apps/daffio/src/app/core/sidebar/sidebar.module.ts index ba4c3a7d7a..71b21c9bc7 100644 --- a/apps/daffio/src/app/core/sidebar/sidebar.module.ts +++ b/apps/daffio/src/app/core/sidebar/sidebar.module.ts @@ -1,9 +1,11 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { DaffButtonModule } from '@daffodil/design/button'; import { DaffSidebarModule } from '@daffodil/design/sidebar'; +import { DaffRouterNamedViewOutletModule } from '@daffodil/router'; import { DaffioSidebarViewportContainer } from './containers/sidebar-viewport/sidebar-viewport.component'; import { DaffioSidebarStateModule } from './sidebar.state.module'; @@ -13,10 +15,14 @@ import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides imports: [ CommonModule, RouterModule, - DaffioSidebarStateModule, + FontAwesomeModule, + DaffSidebarModule, DaffButtonModule, + + DaffioSidebarStateModule, DaffioGuidesNavModule, + DaffRouterNamedViewOutletModule, ], declarations: [ DaffioSidebarViewportContainer, diff --git a/apps/daffio/src/app/core/template/template.component.html b/apps/daffio/src/app/core/template/template.component.html index 40ab7f6cf8..56e9efd249 100644 --- a/apps/daffio/src/app/core/template/template.component.html +++ b/apps/daffio/src/app/core/template/template.component.html @@ -1,6 +1,6 @@ - - - - + + + + \ No newline at end of file diff --git a/apps/daffio/src/app/core/template/template.component.spec.ts b/apps/daffio/src/app/core/template/template.component.spec.ts index a5999ba7f3..34ed694ee9 100644 --- a/apps/daffio/src/app/core/template/template.component.spec.ts +++ b/apps/daffio/src/app/core/template/template.component.spec.ts @@ -45,10 +45,6 @@ describe('TemplateComponent', () => { expect(component).toBeTruthy(); }); - it('should render a ', () => { - expect(fixture.debugElement.query(By.css('daffio-header-container'))).not.toBeNull(); - }); - it('should render a inside a ', () => { expect(sidebarViewport.query(By.css('router-outlet'))).not.toBeNull(); }); diff --git a/apps/daffio/src/app/core/template/template.component.ts b/apps/daffio/src/app/core/template/template.component.ts index 0d513330b7..cbfb77d102 100644 --- a/apps/daffio/src/app/core/template/template.component.ts +++ b/apps/daffio/src/app/core/template/template.component.ts @@ -3,9 +3,13 @@ import { Component, } from '@angular/core'; +import { DaffioRouterNamedViewsEnum } from '../../named-views/models/named-views.enum'; + @Component({ templateUrl: './template.component.html', styleUrls: ['./template.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TemplateComponent {} +export class TemplateComponent { + readonly navNamedView = DaffioRouterNamedViewsEnum.NAV; +} diff --git a/apps/daffio/src/app/core/template/template.module.ts b/apps/daffio/src/app/core/template/template.module.ts index 25b27e1495..cf4412e5fc 100644 --- a/apps/daffio/src/app/core/template/template.module.ts +++ b/apps/daffio/src/app/core/template/template.module.ts @@ -3,18 +3,19 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { DaffRouterNamedViewOutletModule } from '@daffodil/router'; + import { TemplateComponent } from './template.component'; import { DaffioFooterModule } from '../footer/footer.module'; -import { DaffioHeaderModule } from '../header/containers/header.module'; import { DaffioSidebarModule } from '../sidebar/sidebar.module'; @NgModule({ imports: [ RouterModule, CommonModule, - DaffioHeaderModule, DaffioSidebarModule, DaffioFooterModule, + DaffRouterNamedViewOutletModule, ], declarations: [ TemplateComponent, diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.html b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.html new file mode 100644 index 0000000000..8f7e3a7365 --- /dev/null +++ b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.html @@ -0,0 +1,3 @@ + + +API Index \ No newline at end of file diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.scss b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.spec.ts b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000000..4be0f92264 --- /dev/null +++ b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.spec.ts @@ -0,0 +1,70 @@ +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { + ComponentFixture, + TestBed, + waitForAsync, +} from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; +import { DaffioGuidesNavModule } from 'apps/daffio/src/app/guides/components/guides-nav/guides-nav.module'; +import { of } from 'rxjs'; + +import { DaffioDocsSidebarContainer } from './sidebar.component'; +import { DaffioGuidesNavComponent } from '../../../guides/components/guides-nav/guides-nav.component'; +import { DaffioDocsService } from '../../services/docs.service'; +import { mockGuides } from '../../testing/factories/guide-list.factory'; + +describe('DaffioDocsSidebarContainer', () => { + let component: DaffioDocsSidebarContainer; + let fixture: ComponentFixture; + let docServiceSpy: jasmine.SpyObj; + + beforeEach(waitForAsync(() => { + docServiceSpy = jasmine.createSpyObj('DaffioDocsService', ['getGuideList']); + + TestBed.configureTestingModule({ + imports: [ + RouterTestingModule, + NoopAnimationsModule, + DaffioGuidesNavModule, + HttpClientTestingModule, + ], + declarations: [ + DaffioDocsSidebarContainer, + ], + providers: [ + { + provide: DaffioDocsService, + useValue: docServiceSpy, + }, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + docServiceSpy.getGuideList.and.returnValue(of(mockGuides)); + + fixture = TestBed.createComponent(DaffioDocsSidebarContainer); + component = fixture.componentInstance; + + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('on ', () => { + let guidesNav: DaffioGuidesNavComponent; + + beforeEach(() => { + guidesNav = fixture.debugElement.query(By.directive(DaffioGuidesNavComponent)).componentInstance; + }); + + it('should set guideList', () => { + expect(guidesNav.guideList).toEqual(mockGuides); + }); + }); +}); diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.ts b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.ts new file mode 100644 index 0000000000..6a2f34cb00 --- /dev/null +++ b/apps/daffio/src/app/docs/containers/sidebar/sidebar.component.ts @@ -0,0 +1,27 @@ +import { + ChangeDetectionStrategy, + Component, + OnInit, +} from '@angular/core'; +import { Observable } from 'rxjs'; + +import { DaffioDoc } from '../../models/doc'; +import { DaffioGuideList } from '../../models/guide-list'; +import { DaffioDocsService } from '../../services/docs.service'; + +@Component({ + selector: 'daffio-sidebar-container', + templateUrl: './sidebar.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioDocsSidebarContainer implements OnInit{ + sidebarContents$: Observable; + + constructor( + private docService: DaffioDocsService, + ) {} + + ngOnInit() { + this.sidebarContents$ = this.docService.getGuideList(); + } +} diff --git a/apps/daffio/src/app/docs/containers/sidebar/sidebar.module.ts b/apps/daffio/src/app/docs/containers/sidebar/sidebar.module.ts new file mode 100644 index 0000000000..893d0168fd --- /dev/null +++ b/apps/daffio/src/app/docs/containers/sidebar/sidebar.module.ts @@ -0,0 +1,24 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { DaffButtonModule } from '@daffodil/design/button'; + +import { DaffioDocsSidebarContainer } from './sidebar.component'; +import { DaffioGuidesNavModule } from '../../../guides/components/guides-nav/guides-nav.module'; + +@NgModule({ + imports: [ + CommonModule, + RouterModule, + DaffButtonModule, + DaffioGuidesNavModule, + ], + declarations: [ + DaffioDocsSidebarContainer, + ], + exports: [ + DaffioDocsSidebarContainer, + ], +}) +export class DaffioDocsSidebarModule {} diff --git a/apps/daffio/src/app/docs/services/docs-service.interface.ts b/apps/daffio/src/app/docs/services/docs-service.interface.ts index 945e5e349e..78cbb76879 100644 --- a/apps/daffio/src/app/docs/services/docs-service.interface.ts +++ b/apps/daffio/src/app/docs/services/docs-service.interface.ts @@ -4,7 +4,7 @@ import { DaffioDoc } from '../models/doc'; import { DaffioDocList } from '../models/doc-list'; import { DaffioGuideList } from '../models/guide-list'; -export interface DaffioDocsServiceInterface { +export interface DaffioDocsServiceInterface { get(path: string): Observable; getGuideList(): Observable; } diff --git a/apps/daffio/src/app/docs/services/docs.service.ts b/apps/daffio/src/app/docs/services/docs.service.ts index e7ecc7fae6..51c9129959 100644 --- a/apps/daffio/src/app/docs/services/docs.service.ts +++ b/apps/daffio/src/app/docs/services/docs.service.ts @@ -15,7 +15,7 @@ import { DaffioGuideList } from '../models/guide-list'; @Injectable({ providedIn: 'root', }) -export class DaffioDocsService implements DaffioDocsServiceInterface { +export class DaffioDocsService implements DaffioDocsServiceInterface { constructor( private http: HttpClient, @@ -26,7 +26,7 @@ export class DaffioDocsService i return this.http.get(this.docsPath + crossOsFilename(path) + '.json'); } - getGuideList(): Observable { + getGuideList(): Observable { return this.http.get(this.docsPath + 'guides/guide-list.json'); } } diff --git a/apps/daffio/src/app/docs/testing/factories/guide-list.factory.ts b/apps/daffio/src/app/docs/testing/factories/guide-list.factory.ts index 61623c127a..a7c31dc35c 100644 --- a/apps/daffio/src/app/docs/testing/factories/guide-list.factory.ts +++ b/apps/daffio/src/app/docs/testing/factories/guide-list.factory.ts @@ -1,4 +1,6 @@ -export const mockGuides = { +import { DaffioGuideList } from '../../models/guide-list'; + +export const mockGuides: DaffioGuideList = { id: '', title: '', children: [ diff --git a/apps/daffio/src/app/named-views/models/named-views.enum.ts b/apps/daffio/src/app/named-views/models/named-views.enum.ts new file mode 100644 index 0000000000..92a7f8da96 --- /dev/null +++ b/apps/daffio/src/app/named-views/models/named-views.enum.ts @@ -0,0 +1,4 @@ +export enum DaffioRouterNamedViewsEnum { + SIDEBAR = 'sidebar', + NAV = 'nav' +} diff --git a/apps/daffio/src/scss/component-themes.scss b/apps/daffio/src/scss/component-themes.scss index 2e6978e5ce..74472cf9d3 100644 --- a/apps/daffio/src/scss/component-themes.scss +++ b/apps/daffio/src/scss/component-themes.scss @@ -4,6 +4,7 @@ @use '../app/docs/components/table-of-contents/table-of-contents-theme' as toc; @use '../app/api/components/api-list/api-list-theme' as api-list; @use '../app/newsletter/newsletter-theme' as newsletter; +@use '../app/core/sidebar/containers/sidebar-viewport/sidebar-viewport-theme' as sidebar; @mixin component-themes($theme) { @include simple-footer.daffio-simple-footer-theme($theme); @@ -12,4 +13,5 @@ @include toc.daffio-table-of-contents-theme($theme); @include api-list.daffio-api-list-theme($theme); @include newsletter.daffio-newsletter-theme($theme); + @include sidebar.daffio-sidebar-viewport-theme($theme); } \ No newline at end of file