diff --git a/apps/design-land/src/app/app-routing.module.ts b/apps/design-land/src/app/app-routing.module.ts
index 1f72572336..1b7483b21f 100644
--- a/apps/design-land/src/app/app-routing.module.ts
+++ b/apps/design-land/src/app/app-routing.module.ts
@@ -41,6 +41,7 @@ export const appRoutes: Routes = [
{ path: 'sidebar', loadChildren: () => import('./sidebar/sidebar.module').then(m => m.DesignLandSidebarModule) },
{ path: 'radio', loadChildren: () => import('./radio/radio.module').then(m => m.DesignLandRadioModule) },
{ path: 'toast', loadChildren: () => import('./toast/toast.module').then(m => m.DesignLandToastModule) },
+ { path: 'tree', loadChildren: () => import('./tree/tree.module').then(m => m.DesignLandTreeModule) },
{ path: 'typography', loadChildren: () => import('./typography/typography.module').then(m => m.DesignLandTypographyModule) },
{ path: 'variables', loadChildren: () => import('./foundations/variables/variables.module').then(m => m.DesignLandVariablesModule) },
],
diff --git a/apps/design-land/src/app/app.component.ts b/apps/design-land/src/app/app.component.ts
index bbd4e9bc2f..1e78359623 100644
--- a/apps/design-land/src/app/app.component.ts
+++ b/apps/design-land/src/app/app.component.ts
@@ -26,6 +26,7 @@ import { QUANTITY_FIELD_EXAMPLES } from '@daffodil/design/quantity-field/example
import { RADIO_EXAMPLES } from '@daffodil/design/radio/examples';
import { SIDEBAR_EXAMPLES } from '@daffodil/design/sidebar/examples';
import { TOAST_EXAMPLES } from '@daffodil/design/toast/examples';
+import { TREE_EXAMPLES } from '@daffodil/design/tree/examples';
import { createCustomElementFromExample } from './core/elements/create-element-from-example';
@@ -62,6 +63,7 @@ export class DesignLandAppComponent {
...INPUT_EXAMPLES,
...SIDEBAR_EXAMPLES,
...TOAST_EXAMPLES,
+ ...TREE_EXAMPLES,
].map((componentExample) => createCustomElementFromExample(componentExample, injector))
.map((customElement) => {
// Register the custom element with the browser.
diff --git a/apps/design-land/src/app/tree/tree-routing-module.ts b/apps/design-land/src/app/tree/tree-routing-module.ts
new file mode 100644
index 0000000000..feb62b90f0
--- /dev/null
+++ b/apps/design-land/src/app/tree/tree-routing-module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import {
+ Routes,
+ RouterModule,
+} from '@angular/router';
+
+import { DesignLandTreeComponent } from './tree.component';
+
+export const treeRoutes: Routes = [
+ { path: '', component: DesignLandTreeComponent },
+];
+
+@NgModule({
+ imports: [
+ RouterModule.forChild(treeRoutes),
+ ],
+ exports: [
+ RouterModule,
+ ],
+})
+export class DesignLandTreeRoutingModule {}
diff --git a/apps/design-land/src/app/tree/tree.component.html b/apps/design-land/src/app/tree/tree.component.html
new file mode 100644
index 0000000000..2f80c561bb
--- /dev/null
+++ b/apps/design-land/src/app/tree/tree.component.html
@@ -0,0 +1,23 @@
+
Tree
+Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.
+
+Overview
+The DaffTreeComponent
renders a tree structure. Typically, this is a structure of <a>
and <button>
elements that allow users to either navigate to a page, or explore the tree to find an item inside the tree that they want to navigate to.
+
+Instead of defining a recursive tree structure of components, which is often prohibitively slow when rendering large trees, the DaffTreeComponent
renders a flattened tree, using padding to indicate the nesting level of the tree elements.
+
+Generally, tree usage consists of taking existing tree data, converting it to the DaffTreeData
format, setting the tree
input on the DaffTreeComponent
, and providing templates for the cases where the tree element has children or not.
+
+Features
+The DaffTreeComponent
controls the rendering of the structure of the tree and provides template slots so that you can control the ultimate UI rendered for each node.
+
+Currently, we support two kind of templates: daffTreeItemWithChildrenTpl
and daffTreeItemTpl
. These templates allow you to control the content of each tree node. In the case of daffTreeItemWithChildrenTpl
, a click
handler will be automatically applied (along with an icon indicating the expanded state) to the template to allow users to automatically open and close the node.
+
+Usage
+
+Basic Tree
+
+
+
+Accessibility
+The DaffTreeComponent
follows the specification for a disclosure navigation menu instead of a tree view.
\ No newline at end of file
diff --git a/apps/design-land/src/app/tree/tree.component.scss b/apps/design-land/src/app/tree/tree.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/design-land/src/app/tree/tree.component.spec.ts b/apps/design-land/src/app/tree/tree.component.spec.ts
new file mode 100644
index 0000000000..efc23e71b1
--- /dev/null
+++ b/apps/design-land/src/app/tree/tree.component.spec.ts
@@ -0,0 +1,29 @@
+import {
+ ComponentFixture,
+ TestBed,
+ waitForAsync,
+} from '@angular/core/testing';
+
+import { DesignLandTreeComponent } from './tree.component';
+
+describe('DesignLandTreeComponent', () => {
+ let component: DesignLandTreeComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(waitForAsync(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DesignLandTreeComponent ],
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DesignLandTreeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/apps/design-land/src/app/tree/tree.component.ts b/apps/design-land/src/app/tree/tree.component.ts
new file mode 100644
index 0000000000..26489f46e3
--- /dev/null
+++ b/apps/design-land/src/app/tree/tree.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'design-land-tree',
+ templateUrl: './tree.component.html',
+ styleUrls: ['./tree.component.scss'],
+})
+export class DesignLandTreeComponent {}
diff --git a/apps/design-land/src/app/tree/tree.module.ts b/apps/design-land/src/app/tree/tree.module.ts
new file mode 100644
index 0000000000..34abadd975
--- /dev/null
+++ b/apps/design-land/src/app/tree/tree.module.ts
@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DaffArticleModule } from '@daffodil/design/article';
+import { DaffTreeModule } from '@daffodil/design/tree';
+
+import { DesignLandTreeRoutingModule } from './tree-routing-module';
+import { DesignLandTreeComponent } from './tree.component';
+import { DesignLandArticleEncapsulatedModule } from '../core/article-encapsulated/article-encapsulated.module';
+import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
+
+@NgModule({
+ declarations: [
+ DesignLandTreeComponent,
+ ],
+ imports: [
+ CommonModule,
+ RouterModule,
+ DesignLandTreeRoutingModule,
+ DesignLandExampleViewerModule,
+ DesignLandArticleEncapsulatedModule,
+
+ DaffArticleModule,
+ DaffTreeModule,
+ ],
+})
+export class DesignLandTreeModule {}
diff --git a/apps/design-land/src/assets/nav.json b/apps/design-land/src/assets/nav.json
index a9f1e67769..fa5199feed 100644
--- a/apps/design-land/src/assets/nav.json
+++ b/apps/design-land/src/assets/nav.json
@@ -249,6 +249,13 @@
"id": "toast",
"items": [],
"data": {}
+ },
+ {
+ "title": "Tree",
+ "url": "tree",
+ "id": "tree",
+ "items": [],
+ "data": {}
}
],
"data": {}
diff --git a/libs/design/tree/README.md b/libs/design/tree/README.md
index 3721952361..a6f14a431e 100644
--- a/libs/design/tree/README.md
+++ b/libs/design/tree/README.md
@@ -1,5 +1,4 @@
# Tree
-
Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.
## Overview
@@ -11,10 +10,9 @@ Instead of defining a recursive tree structure of components, which is often pro
Generally, tree usage consists of taking existing tree data, converting it to the `DaffTreeData` format, setting the `tree` input on the `DaffTreeComponent`, and providing templates for the cases where the tree element has children or not.
## Features
-
The `DaffTreeComponent` controls the rendering of the structure of the tree and provides template slots so that you can control the ultimate UI rendered for each node.
-Currently, we support two kind of templates `daffTreeItemWithChildrenTpl` and `daffTreeItemTpl`. These templates allow you to control the content of each tree node. In the case of `daffTreeItemWithChildrenTpl` a `click` handler will be automatically applied (along with an icon indicating the expanded state) to the template to allow users to automatically open and close the node.
+Currently, we support two kind of templates: `daffTreeItemWithChildrenTpl` and `daffTreeItemTpl`. These templates allow you to control the content of each tree node. In the case of `daffTreeItemWithChildrenTpl`, a `click` handler will be automatically applied (along with an icon indicating the expanded state) to the template to allow users to automatically open and close the node.
```html
diff --git a/libs/design/tree/src/tree/specs/simple.spec.ts b/libs/design/tree/src/tree/specs/simple.spec.ts
index f01524ea7a..1da6dd3606 100644
--- a/libs/design/tree/src/tree/specs/simple.spec.ts
+++ b/libs/design/tree/src/tree/specs/simple.spec.ts
@@ -45,12 +45,12 @@ describe('@daffodil/design/tree - DaffTreeComponent | Simple', () => {
});
it('should render nothing', () => {
- expect(fixture.debugElement.nativeElement.innerHTML).toContain(` {
wrapper.data = { title: '', url: '', id: '', items: [], data: {}};
fixture.detectChanges();
- expect(fixture.debugElement.nativeElement.innerHTML).toContain(`