feat(daffio): implement tree (#1824)

apps/daffio/src/app/api/pages/api-page/api-page.component.spec.ts

@@ -49,7 +49,6 @@ describe('DaffioApiPageComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DaffioApiPageComponent);
     component = fixture.componentInstance;
-    console.log(doc);
     stubActivatedRoute.data.next({ doc });
     fixture.detectChanges();
   });

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.html

@@ -1,7 +1,7 @@
 <daff-sidebar-viewport (backdropClicked)="close()">
   <daff-sidebar class="daffio-sidebar" [mode]="mode$ | async" [open]="showSidebar$ | async" (escapePressed)="close()">
     <button type="button" daff-button class="daffio-sidebar__button">Get Started</button>
-		<daffio-guides-nav-tree [guideList]="sidebarContents$ | async"></daffio-guides-nav-tree>
+		<daffio-guides-nav [guideList]="sidebarContents$ | async"></daffio-guides-nav>
     <a routerLink="/api">API Index</a>
   </daff-sidebar>
   <ng-container daff-sidebar-viewport-nav>

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts

@@ -12,7 +12,7 @@ import {
   StoreModule,
   combineReducers,
 } from '@ngrx/store';
-import { DaffioGuidesNavTreeModule } from 'apps/daffio/src/app/guides/components/guides-nav-tree/guides-nav-tree.module';
+import { DaffioGuidesNavModule } from 'apps/daffio/src/app/guides/components/guides-nav/guides-nav.module';
 import { cold } from 'jasmine-marbles';
 
 import {
@@ -47,7 +47,7 @@ describe('DaffioSidebarViewportContainer', () => {
         RouterTestingModule,
         NoopAnimationsModule,
         DaffSidebarModule,
-        DaffioGuidesNavTreeModule,
+        DaffioGuidesNavModule,
         HttpClientTestingModule,
       ],
       declarations: [

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

@@ -7,7 +7,7 @@ import {
   DaffButtonModule,
 } from '@daffodil/design';
 
-import { DaffioGuidesNavTreeModule } from '../../guides/components/guides-nav-tree/guides-nav-tree.module';
+import { DaffioGuidesNavModule } from '../../guides/components/guides-nav/guides-nav.module';
 import { DaffioSidebarViewportContainer } from './containers/sidebar-viewport/sidebar-viewport.component';
 import { DaffioSidebarStateModule } from './sidebar.state.module';
 
@@ -18,7 +18,7 @@ import { DaffioSidebarStateModule } from './sidebar.state.module';
     DaffioSidebarStateModule,
     DaffSidebarModule,
     DaffButtonModule,
-    DaffioGuidesNavTreeModule,
+    DaffioGuidesNavModule,
   ],
   declarations: [
     DaffioSidebarViewportContainer,

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

@@ -5,11 +5,13 @@ import {
   waitForAsync,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { DaffArticleModule } from '@daffodil/design';
 
 import { DaffioDoc } from '../../models/doc';
 import { DaffioDocsFactory } from '../../testing/factories/docs.factory';
+import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-contents.module';
 import { DaffioDocViewerComponent } from './doc-viewer.component';
 
 @Component({
@@ -26,8 +28,15 @@ describe('DaffioDocViewerComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [DaffArticleModule],
-      declarations: [WrapperComponent, DaffioDocViewerComponent],
+      imports: [
+        RouterTestingModule,
+        DaffArticleModule,
+        DaffioDocsTableOfContentsModule,
+      ],
+      declarations: [
+        WrapperComponent,
+        DaffioDocViewerComponent,
+      ],
     })
       .compileComponents();
   }));

apps/daffio/src/app/guides/components/guides-nav/guides-nav.component.html

@@ -0,0 +1,9 @@
+<ul daff-tree [tree]="_tree" *ngIf="_tree">
+	<ng-template #daffTreeItemWithChildrenTpl let-node>
+			<button daffTreeItem [node]="node">{{ node.title }} </button>
+	</ng-template>
+
+	<ng-template #daffTreeItemTpl let-node>
+			<a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+	</ng-template>
+</ul>

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

@@ -4,29 +4,33 @@ import {
   TestBed,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { DaffLinkSetModule } from '@daffodil/design';
+import { DaffTreeModule } from '@daffodil/design/tree';
 
-import { DaffioGuidesNavTreeComponent } from './guides-nav-tree.component';
+import { DaffioGuidesNavComponent } from './guides-nav.component';
 
-describe('DaffioGuidesNavTreeComponent', () => {
-  let component: DaffioGuidesNavTreeComponent;
-  let fixture: ComponentFixture<DaffioGuidesNavTreeComponent>;
+describe('DaffioGuidesNavComponent', () => {
+  let component: DaffioGuidesNavComponent;
+  let fixture: ComponentFixture<DaffioGuidesNavComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [DaffioGuidesNavTreeComponent],
+      declarations: [
+        DaffioGuidesNavComponent,
+      ],
       imports: [
         RouterTestingModule,
-        DaffLinkSetModule,
+        NoopAnimationsModule,
+        DaffTreeModule,
       ],
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DaffioGuidesNavTreeComponent);
+    fixture = TestBed.createComponent(DaffioGuidesNavComponent);
     component = fixture.componentInstance;
     const guideWithoutChildren = {
       id: 'id2',
@@ -46,8 +50,8 @@ describe('DaffioGuidesNavTreeComponent', () => {
     };
 
     component.guideList = {
-      id: 'id',
-      title: 'title',
+      id: 'root',
+      title: 'root',
       children: [
         guideWithoutChildren,
         guideWithChildren,
@@ -62,11 +66,9 @@ describe('DaffioGuidesNavTreeComponent', () => {
 
   it('should render an anchor tag when the guide child has no children', () => {
     const anchorTags = fixture.debugElement.queryAll(By.css('a'));
-    expect(anchorTags.length).toEqual(2);
-  });
-
-  it('should render a daff-nav-accordion-item for each guide', () => {
-    const daffNavAccordionItem = fixture.debugElement.queryAll(By.css('daff-nav-accordion-item'));
-    expect(daffNavAccordionItem.length).toEqual(4);
+    expect(anchorTags.length).toEqual(1);
+    const buttons = fixture.debugElement.queryAll(By.css('button'));
+    expect(buttons.length).toEqual(1);
+    console.log(fixture.debugElement.nativeElement.innerHTML);
   });
 });

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

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+} from '@angular/core';
+import { RouterLinkActive } from '@angular/router';
+
+import {
+  DaffTreeData,
+  daffTransformTreeInPlace,
+} from '@daffodil/design/tree';
+
+import { DaffioGuideList } from '../../../docs/models/guide-list';
+
+const visit = (guide: DaffioGuideList): DaffTreeData<unknown> => ({
+  id: guide.id,
+  title: guide.title,
+  url: guide.path,
+  items: [],
+  data: {},
+});
+
+@Component({
+  selector: 'daffio-guides-nav',
+  templateUrl: './guides-nav.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DaffioGuidesNavComponent {
+
+  _guideList: DaffioGuideList;
+  /**
+   * The guide list to render
+   */
+  @Input()
+  get guideList(): DaffioGuideList {
+    return this._guideList;
+  };
+  set guideList(val: DaffioGuideList) {
+    if(this._guideList !== val) {
+      this._tree = daffTransformTreeInPlace(val, visit, 'children');
+    }
+    this._guideList = val;
+  }
+
+  _tree: DaffTreeData<unknown>;
+
+  activeRouterLinkConfiguration: RouterLinkActive['routerLinkActiveOptions'] = {
+    exact: true,
+  };
+}

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

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DaffTreeModule } from '@daffodil/design/tree';
+
+import { DaffioGuidesNavComponent } from './guides-nav.component';
+
+@NgModule({
+  declarations: [
+    DaffioGuidesNavComponent,
+  ],
+  exports: [
+    DaffioGuidesNavComponent,
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    DaffTreeModule,
+  ],
+})
+export class DaffioGuidesNavModule { }

apps/daffio/src/app/guides/pages/guides-page.component.spec.ts

@@ -49,7 +49,6 @@ describe('DaffioGuidesPageComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DaffioGuidesPageComponent);
     component = fixture.componentInstance;
-    console.log(doc);
     stubActivatedRoute.data.next({ doc });
     fixture.detectChanges();
   });