feat(design): create tree component

apps/design-land/src/app/app-routing.module.ts

@@ -35,6 +35,7 @@ export const appRoutes: Routes = [
   { path: 'quantity-field', loadChildren: () => import('./quantity-field/quantity-field.module').then(m => m.DesignLandQuantityFieldModule) },
   { path: 'sidebar', loadChildren: () => import('./sidebar/sidebar.module').then(m => m.DesignLandSidebarModule) },
   { path: 'radio', loadChildren: () => import('./radio/radio.module').then(m => m.DesignLandRadioModule) },
+  { path: 'tree', loadChildren: () => import('./tree/tree.module').then(m => m.DesignLandTreeModule) },
   { path: 'typography', loadChildren: () => import('./typography/typography.module').then(m => m.DesignLandTypographyModule) },
 ];
 

apps/design-land/src/app/app.component.ts

@@ -2,6 +2,7 @@ import {
   Component,
   Injector,
   ComponentFactoryResolver,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 
@@ -18,13 +19,15 @@ import { MEDIA_GALLERY_EXAMPLES } from '@daffodil/design/media-gallery/examples'
 import { MODAL_EXAMPLES } from '@daffodil/design/modal/examples';
 import { QUANTITY_FIELD_EXAMPLES } from '@daffodil/design/quantity-field/examples';
 import { RADIO_EXAMPLES } from '@daffodil/design/radio/examples';
+import { TREE_EXAMPLES } from '@daffodil/design/tree/examples';
 
 import { createCustomElementFromExample } from './core/elements/create-element-from-example';
 
 @Component({
   selector: 'design-land-app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DesignLandAppComponent {
   constructor(
@@ -45,6 +48,7 @@ export class DesignLandAppComponent {
       ...MODAL_EXAMPLES,
       ...QUANTITY_FIELD_EXAMPLES,
       ...LIST_EXAMPLES,
+      ...TREE_EXAMPLES,
     ].map((componentExample) => createCustomElementFromExample(componentExample, injector))
       .map((customElement) => {
         // Register the custom element with the browser.

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 {}

apps/design-land/src/app/tree/tree.component.html

@@ -0,0 +1,10 @@
+<daff-article>
+	<h1 daffArticleTitle>Tree</h1>
+	<p daffArticleLead>Tree is used to display hierarchial data.</p>
+
+	<h2>Basic Tree</h2>
+	<design-land-example-viewer-container example="basic-tree"></design-land-example-viewer-container>
+
+	<h2>Nested Tree</h2>
+	<design-land-example-viewer-container example="nested-tree"></design-land-example-viewer-container>
+</daff-article>

apps/design-land/src/app/tree/tree.component.scss

@@ -0,0 +1,11 @@
+daff-accordion {
+  max-width: 800px;
+}
+
+.design-land-accordion-example {
+	margin-bottom: 40px;
+}
+
+a {
+	font-weight: 400;
+}

apps/design-land/src/app/tree/tree.component.spec.ts

@@ -0,0 +1,31 @@
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+
+import { DesignLandTreeComponent } from './tree.component';
+
+describe('DesignLandTreeComponent', () => {
+  let component: DesignLandTreeComponent;
+  let fixture: ComponentFixture<DesignLandTreeComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        DesignLandTreeComponent,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DesignLandTreeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {}

apps/design-land/src/app/tree/tree.module.ts

@@ -0,0 +1,47 @@
+import { CommonModule } from '@angular/common';
+import {
+  ComponentFactoryResolver,
+  Injector,
+  NgModule,
+} from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+
+import { DaffArticleModule } from '@daffodil/design';
+import { DaffTreeModule } from '@daffodil/design/tree';
+import { TREE_EXAMPLES } from '@daffodil/design/tree/examples';
+
+import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
+import { DesignLandTreeRoutingModule } from './tree-routing.module';
+import { DesignLandTreeComponent } from './tree.component';
+
+@NgModule({
+  declarations: [
+    DesignLandTreeComponent,
+  ],
+  imports: [
+    CommonModule,
+    DesignLandTreeRoutingModule,
+    DesignLandExampleViewerModule,
+    DaffTreeModule,
+    DaffArticleModule,
+  ],
+})
+export class DesignLandTreeModule {
+  constructor(
+    injector: Injector,
+    private componentFactoryResolver: ComponentFactoryResolver,
+  ) {
+    TREE_EXAMPLES
+      .map((classConstructor) => ({
+        element: createCustomElement(classConstructor, { injector }),
+        class: classConstructor,
+      }))
+      .map((customElement) => {
+        // Register the custom element with the browser.
+        customElements.define(
+          this.componentFactoryResolver.resolveComponentFactory<unknown>(customElement.class).selector + '-example',
+          customElement.element,
+        );
+      });
+  }
+}

libs/design/src/scss/theming/_theme.scss

@@ -18,6 +18,7 @@
 @import '../../molecules/paginator/paginator-theme';
 @import '../../molecules/sidebar/sidebar/sidebar-theme';
 @import '../../molecules/sidebar/sidebar-viewport/sidebar-viewport-theme';
+@import '../../../tree/src/tree-item/tree-item-theme.scss';
 
 //
 // Generates the styles of a @daffodil/design theme.
@@ -49,4 +50,5 @@
 	@include daff-paginator-theme($theme);
 	@include daff-sidebar-theme($theme);
 	@include daff-sidebar-viewport-theme($theme);
+	@include daff-tree-item-theme($theme);
 }

libs/design/tree/examples/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/examples",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../src/scss"]
+  }
+} 

libs/design/tree/examples/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@daffodil/design/tree/examples"
+} 

libs/design/tree/examples/src/basic-tree/basic-tree.component.html

@@ -0,0 +1,26 @@
+<daff-tree>
+	<daff-tree-item>
+		<div daffTreeItemTitle>Foundations</div>
+		<a daff-tree-item [selected]="rla.isActive" routerLink="/tree" routerLinkActive #rla="routerLinkActive">
+			<div daffTreeItemTitle>Color</div>
+		</a>
+		<a daff-tree-item routerLink="/tree">
+			<div daffTreeItemTitle>Typography</div>
+		</a>
+	</daff-tree-item>
+	<daff-tree-item>
+		<div daffTreeItemTitle>Packages</div>
+		<daff-tree-item>
+			<div daffTreeItemTitle>@daffodil/authorizenet</div>
+			<a daff-tree-item>
+				<div daffTreeItemTitle>Installation</div>
+			</a>
+		</daff-tree-item>
+		<a daff-tree-item>
+			<div daffTreeItemTitle>@daffodil/cart</div>
+		</a>
+		<a daff-tree-item>
+			<div daffTreeItemTitle>@daffodil/category</div>
+		</a>
+	</daff-tree-item>
+</daff-tree>

libs/design/tree/examples/src/basic-tree/basic-tree.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'basic-tree',
+  templateUrl: './basic-tree.component.html',
+})
+export class BasicTreeComponent {}

libs/design/tree/examples/src/basic-tree/basic-tree.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DaffTreeModule } from '@daffodil/design/tree';
+
+import { BasicTreeComponent } from './basic-tree.component';
+
+
+@NgModule({
+  declarations: [
+    BasicTreeComponent,
+  ],
+  exports: [
+    BasicTreeComponent,
+  ],
+  imports: [
+    DaffTreeModule,
+    RouterModule,
+  ],
+})
+export class BasicTreeModule { }

libs/design/tree/examples/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

libs/design/tree/examples/src/nested-tree/nested-tree.component.html

@@ -0,0 +1,44 @@
+<daff-tree>
+	<daff-tree-item>
+		<div daffTreeItemTitle>Design</div>
+		<daff-tree-item>
+			<div daffTreeItemTitle>Foundations</div>
+			<a daff-tree-item [selected]="rla.isActive" routerLink="/tree" routerLinkActive #rla="routerLinkActive">
+				<div daffTreeItemTitle>Color</div>
+			</a>
+			<a daff-tree-item routerLink="/tree">
+				<div daffTreeItemTitle>Typography</div>
+			</a>
+		</daff-tree-item>
+		<daff-tree-item>
+			<div daffTreeItemTitle>Components</div>
+			<daff-tree-item>
+				<div daffTreeItemTitle>Atoms</div>
+				<a daff-tree-item>
+					<div daffTreeItemTitle>Button</div>
+				</a>
+				<a daff-tree-item>
+					<div daffTreeItemTitle>Forms</div>
+					<a daff-tree-item>
+						<div daffTreeItemTitle>Checkbox</div>
+					</a>
+					<a daff-tree-item>
+						<div daffTreeItemTitle>Form Field</div>
+					</a>
+					<a daff-tree-item>
+						<div daffTreeItemTitle>Input</div>
+					</a>
+					<a daff-tree-item>
+						<div daffTreeItemTitle>Radio</div>
+					</a>
+					<a daff-tree-item>
+						<div daffTreeItemTitle>Select</div>
+					</a>
+					<a daff-tree-item>
+						<div daffTreeItemTitle>Textarea</div>
+					</a>
+				</a>
+			</daff-tree-item>
+		</daff-tree-item>
+	</daff-tree-item>
+</daff-tree>

libs/design/tree/examples/src/nested-tree/nested-tree.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'nested-tree',
+  templateUrl: './nested-tree.component.html',
+})
+export class NestedTreeComponent {}

libs/design/tree/examples/src/nested-tree/nested-tree.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DaffTreeModule } from '@daffodil/design/tree';
+
+import { NestedTreeComponent } from './nested-tree.component';
+
+
+@NgModule({
+  declarations: [
+    NestedTreeComponent,
+  ],
+  exports: [
+    NestedTreeComponent,
+  ],
+  imports: [
+    DaffTreeModule,
+    RouterModule,
+  ],
+})
+export class NestedTreeModule { }

libs/design/tree/examples/src/public_api.ts

@@ -0,0 +1,9 @@
+import { BasicTreeComponent } from './basic-tree/basic-tree.component';
+import { NestedTreeComponent } from './nested-tree/nested-tree.component';
+export { BasicTreeModule } from './basic-tree/basic-tree.module';
+export { NestedTreeModule } from './nested-tree/nested-tree.module';
+
+export const TREE_EXAMPLES = [
+  BasicTreeComponent,
+  NestedTreeComponent,
+];

libs/design/tree/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/tree",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 

libs/design/tree/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@daffodil/design/tree"
+}