From baa150ecf921bccf8c3c6acd8b3ac734e62a4cd5 Mon Sep 17 00:00:00 2001 From: Elain T Date: Tue, 26 Mar 2024 15:43:52 -0400 Subject: [PATCH] feat(design): implement article encapsulated mixin in DaffTreeComponent and add docs to design-land (#2771) --- .../design-land/src/app/app-routing.module.ts | 1 + apps/design-land/src/app/app.component.ts | 2 ++ .../src/app/tree/tree-routing-module.ts | 21 ++++++++++++++ .../src/app/tree/tree.component.html | 23 +++++++++++++++ .../src/app/tree/tree.component.scss | 0 .../src/app/tree/tree.component.spec.ts | 29 +++++++++++++++++++ .../src/app/tree/tree.component.ts | 8 +++++ apps/design-land/src/app/tree/tree.module.ts | 28 ++++++++++++++++++ apps/design-land/src/assets/nav.json | 7 +++++ libs/design/tree/README.md | 4 +-- .../design/tree/src/tree/specs/simple.spec.ts | 4 +-- libs/design/tree/src/tree/tree.component.ts | 22 ++++++++++++-- 12 files changed, 141 insertions(+), 8 deletions(-) create mode 100644 apps/design-land/src/app/tree/tree-routing-module.ts create mode 100644 apps/design-land/src/app/tree/tree.component.html create mode 100644 apps/design-land/src/app/tree/tree.component.scss create mode 100644 apps/design-land/src/app/tree/tree.component.spec.ts create mode 100644 apps/design-land/src/app/tree/tree.component.ts create mode 100644 apps/design-land/src/app/tree/tree.module.ts 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(`