feat(daffio): create packages sidebar

apps/daffio/src/app/api/api.module.ts

@@ -10,7 +10,7 @@ import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.
 import { DaffioApiPageComponent } from './pages/api-page/api-page.component';
 import { DaffioDocsSidebarComponentModule } from '../core/sidebar/components/docs-sidebar/docs-sidebar.module';
 import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.module';
-import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.module';
+import { DaffioDocsPackagesSidebarComponentModule } from '../guides/components/packages-sidebar/packages-sidebar.module';
 
 @NgModule({
   imports: [
@@ -20,6 +20,7 @@ import { DaffioDocsSidebarModule } from '../docs/containers/sidebar/sidebar.modu
     DaffioApiListModule,
     DaffioDocViewerModule,
     DaffioDocsSidebarComponentModule,
+    DaffioDocsPackagesSidebarComponentModule,
 
     DaffContainerModule,
   ],

apps/daffio/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { DaffioMarketingHeaderContainerModule } from './core/header/containers/m
 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 { DaffioDocsPackagesSidebarComponentModule } from './guides/components/packages-sidebar/packages-sidebar.module';
 import { environment } from '../environments/environment';
 
 @NgModule({
@@ -36,6 +37,7 @@ import { environment } from '../environments/environment';
     DaffioDocsHeaderContainerModule,
     DaffioMarketingSidebarComponentModule,
     DaffioDocsSidebarComponentModule,
+    DaffioDocsPackagesSidebarComponentModule,
 
     //Make sure this loads after Router and Store
     StoreRouterConnectingModule.forRoot({ serializer: FullRouterStateSerializer,

apps/daffio/src/app/core/sidebar/sidebar.module.ts

@@ -9,7 +9,7 @@ import { DaffRouterNamedViewOutletModule } from '@daffodil/router';
 
 import { DaffioSidebarViewportContainer } from './containers/sidebar-viewport/sidebar-viewport.component';
 import { DaffioSidebarStateModule } from './sidebar.state.module';
-import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides-nav.module';
+import { DaffioDocsPackagesListContainerModule } from '../../guides/containers/packages-list/packages-list.module';
 
 @NgModule({
   imports: [
@@ -21,7 +21,7 @@ import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides
     DaffButtonModule,
 
     DaffioSidebarStateModule,
-    DaffioGuidesNavModule,
+    DaffioDocsPackagesListContainerModule,
     DaffRouterNamedViewOutletModule,
   ],
   declarations: [

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html

@@ -1,7 +1,7 @@
-<!-- <button class="daffio-doc-viewer__packages-button">
+<button class="daffio-doc-viewer__packages-button" (click)="open()">
 	<fa-icon [icon]="faBars"></fa-icon>
 	<div>Packages Menu</div>
-</button> -->
+</button>
 <div class="daffio-doc-viewer__grid">
 	<daff-article
 		class="daffio-doc-viewer__content"

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts

@@ -9,7 +9,9 @@ import {
   SafeHtml,
 } from '@angular/platform-browser';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { Store } from '@ngrx/store';
 
+import { ToggleSidebar } from '../../../core/sidebar/actions/sidebar.actions';
 import { DaffioDoc } from '../../models/doc';
 
 @Component({
@@ -21,7 +23,7 @@ import { DaffioDoc } from '../../models/doc';
 export class DaffioDocViewerComponent implements OnChanges {
   faBars = faBars;
 
-  constructor(private sanitizer: DomSanitizer) {}
+  constructor(private sanitizer: DomSanitizer, private store: Store<any>) {}
 
   /**
    * The doc to render
@@ -34,4 +36,8 @@ export class DaffioDocViewerComponent implements OnChanges {
 	  //It is necessary to bypass the default angular sanitization to keep id tags in the injected html. These id tags are used for fragment routing.
 	  this.sanitizedContent = this.sanitizer.bypassSecurityTrustHtml(this.doc.contents);
   }
+
+  open() {
+    this.store.dispatch(new ToggleSidebar('content'));
+  }
 }

apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.spec.ts → apps/daffio/src/app/guides/components/packages-list/packages-list.component.spec.ts

@@ -9,16 +9,16 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { DaffTreeModule } from '@daffodil/design/tree';
 
-import { DaffioGuidesNavComponent } from './guides-nav.component';
+import { DaffioDocsPackagesListComponent } from './packages-list.component';
 
-describe('DaffioGuidesNavComponent', () => {
-  let component: DaffioGuidesNavComponent;
-  let fixture: ComponentFixture<DaffioGuidesNavComponent>;
+describe('DaffioDocsPackagesListComponent', () => {
+  let component: DaffioDocsPackagesListComponent;
+  let fixture: ComponentFixture<DaffioDocsPackagesListComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        DaffioGuidesNavComponent,
+        DaffioDocsPackagesListComponent,
       ],
       imports: [
         RouterTestingModule,
@@ -30,7 +30,7 @@ describe('DaffioGuidesNavComponent', () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DaffioGuidesNavComponent);
+    fixture = TestBed.createComponent(DaffioDocsPackagesListComponent);
     component = fixture.componentInstance;
     const guideWithoutChildren = {
       id: 'id2',

apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.ts → apps/daffio/src/app/guides/components/packages-list/packages-list.component.ts

@@ -21,11 +21,11 @@ const visit = (guide: DaffioGuideList): DaffTreeData<unknown> => ({
 });
 
 @Component({
-  selector: 'daffio-guides-nav',
-  templateUrl: './guides-nav.component.html',
+  selector: 'daffio-docs-packages-list',
+  templateUrl: './packages-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffioGuidesNavComponent {
+export class DaffioDocsPackagesListComponent {
 
   _guideList: DaffioGuideList;
   /**

apps/daffio/src/app/guides/components/guides-nav/guides-nav.module.ts → apps/daffio/src/app/guides/components/packages-list/packages-list.module.ts

@@ -4,19 +4,19 @@ import { RouterModule } from '@angular/router';
 
 import { DaffTreeModule } from '@daffodil/design/tree';
 
-import { DaffioGuidesNavComponent } from './guides-nav.component';
+import { DaffioDocsPackagesListComponent } from './packages-list.component';
 
 @NgModule({
   declarations: [
-    DaffioGuidesNavComponent,
+    DaffioDocsPackagesListComponent,
   ],
   exports: [
-    DaffioGuidesNavComponent,
+    DaffioDocsPackagesListComponent,
   ],
   imports: [
     CommonModule,
     RouterModule,
     DaffTreeModule,
   ],
 })
-export class DaffioGuidesNavModule { }
+export class DaffioDocsPackagesListComponentModule { }

apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngrxLet="sidebarKind$; let sidebarKind">
+	<daffio-docs-packages-list-container *ngIf="sidebarKind === 'content'"></daffio-docs-packages-list-container>
+
+	<daffio-docs-sidebar-content *ngIf="!sidebarKind"></daffio-docs-sidebar-content>
+</ng-container>
+

apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.scss

@@ -0,0 +1,4 @@
+:host {
+	display: block;
+	padding: 24px 0;
+}

apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.spec.ts

@@ -0,0 +1,37 @@
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+
+import { DaffioDocsPackagesSidebarComponent } from './packages-sidebar.component';
+import { DaffioDocsPackagesListContainerModule } from '../../containers/packages-list/packages-list.module';
+
+describe('DaffioDocsPackagesSidebarComponent', () => {
+  let component: DaffioDocsPackagesSidebarComponent;
+  let fixture: ComponentFixture<DaffioDocsPackagesSidebarComponent>;
+
+  beforeEach(waitForAsync(() => {
+
+    TestBed.configureTestingModule({
+      imports: [
+        DaffioDocsPackagesListContainerModule,
+      ],
+      declarations: [
+        DaffioDocsPackagesSidebarComponent,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffioDocsPackagesSidebarComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/daffio/src/app/guides/components/packages-sidebar/packages-sidebar.component.ts

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+} from '@angular/core';
+import {
+  select,
+  Store,
+} from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { selectSidebarKind } from '../../../core/sidebar/reducers';
+
+@Component({
+  selector: 'daffio-docs-packages-sidebar',
+  templateUrl: './packages-sidebar.component.html',
+  styleUrls: ['./packages-sidebar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DaffioDocsPackagesSidebarComponent implements OnInit {
+  constructor(private store: Store) {}
+
+  sidebarKind$: Observable<string | undefined>;
+
+  ngOnInit() {
+    this.sidebarKind$ = this.store.pipe(select(selectSidebarKind));
+  }
+}