Merge pull request #420 from patryk0605/go-tree

[Feature] Go-Tree

projects/go-lib/src/lib/animations/tree.animation.ts

@@ -0,0 +1,26 @@
+import {
+  animate,
+  AnimationTriggerMetadata,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+
+import { easing, timing } from './_configs';
+
+export const treeAnimation: AnimationTriggerMetadata = trigger('treeAnimation', [
+  state('open', style({
+    height: '*',
+    overflow: 'visible',
+    visibility: 'visible'
+  })),
+  state('close', style({
+    height: 0,
+    overflow: 'hidden',
+    visibility: 'hidden'
+  })),
+  transition('open <=> close', [
+    animate(timing + easing)
+  ])
+]);

projects/go-lib/src/lib/components/go-tree/go-tree-node-config.model.ts

@@ -0,0 +1,5 @@
+export interface GoTreeNodeConfig {
+  name: string;
+  children?: GoTreeNodeConfig[];
+  expanded?: boolean;
+}

projects/go-lib/src/lib/components/go-tree/go-tree.component.html

@@ -0,0 +1,23 @@
+<ng-template
+  #nodeTemplate
+  let-node="node"
+  let-isChildNode="isChildNode">
+  <div [ngClass]="{ 'go-tree-node-item__child-offset': isChildNode }">
+    <go-icon
+      class="go-tree-node-item__expander"
+      [icon]="node.expanded ? 'expand_more' : 'expand_less'"
+      (click)="node.expanded = !node.expanded"
+      *ngIf="node?.children">
+    </go-icon>
+    {{ node.name }}
+    <div [@treeAnimation]="node.expanded ? 'open' : 'close'">
+      <ng-container *ngFor="let node of node?.children">
+        <ng-container *ngTemplateOutlet="nodeTemplate; context:{ node: node, isChildNode: true }"></ng-container>
+      </ng-container>
+    </div>
+  </div>
+</ng-template>
+
+<ng-container *ngFor="let node of nodeConfig">
+  <ng-container *ngTemplateOutlet="nodeTemplate; context:{ node: node }"></ng-container>
+</ng-container>

projects/go-lib/src/lib/components/go-tree/go-tree.component.scss

@@ -0,0 +1,7 @@
+.go-tree-node-item__child-offset {
+  margin-left: 2.5rem;
+}
+
+.go-tree-node-item__expander {
+  cursor: pointer;
+}

projects/go-lib/src/lib/components/go-tree/go-tree.component.spec.ts

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

projects/go-lib/src/lib/components/go-tree/go-tree.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+import { GoTreeNodeConfig } from './go-tree-node-config.model';
+import { treeAnimation } from '../../animations/tree.animation';
+
+@Component({
+  animations: [ treeAnimation ],
+  selector: 'go-tree',
+  templateUrl: './go-tree.component.html',
+  styleUrls: ['./go-tree.component.scss']
+})
+export class GoTreeComponent {
+  @Input() nodeConfig: GoTreeNodeConfig[];
+}

projects/go-lib/src/lib/components/go-tree/go-tree.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { GoIconModule } from '../go-icon/go-icon.module';
+import { GoTreeComponent } from './go-tree.component';
+
+@NgModule({
+  declarations: [
+    GoTreeComponent
+  ],
+  imports: [
+    CommonModule,
+    GoIconModule
+  ],
+  exports: [
+    GoTreeComponent
+  ]
+})
+export class GoTreeModule { }

projects/go-lib/src/public_api.ts

@@ -154,5 +154,10 @@ export * from './lib/components/go-toaster/go-toaster.component';
 export * from './lib/components/go-toaster/go-toaster.module';
 export * from './lib/components/go-toaster/go-toaster.service';
 
+// Tree
+export * from './lib/components/go-tree/go-tree.component';
+export * from './lib/components/go-tree/go-tree.module';
+export * from './lib/components/go-tree/go-tree-node-config.model';
+
 /***** Utils *****/
 export * from './lib/utilities/form.utils';

projects/go-style-guide/src/app/app.component.ts

@@ -41,7 +41,8 @@ export class AppComponent {
       { route: 'ui-kit/pills', routeTitle: 'Pills' },
       { route: 'ui-kit/tabs', routeTitle: 'Tabs', },
       { route: 'ui-kit/table', routeTitle: 'Table'},
-      { route: 'ui-kit/toast', routeTitle: 'Toast' }
+      { route: 'ui-kit/toast', routeTitle: 'Toast' },
+      { route: 'ui-kit/tree', routeTitle: 'Tree' }
     ]}
   ];
 

projects/go-style-guide/src/app/features/ui-kit/components/tree-docs/tree-docs.component.html

@@ -0,0 +1,54 @@
+<header class="go-page-title">
+  <h1 class="go-heading-1">Tree</h1>
+</header>
+
+<section class="go-container">
+  <go-card [showHeader]="false" class="go-column go-column--100">
+    <div class="go-container" go-card-content>
+
+      <div class="go-column go-column--100">
+        <h2 class="go-heading-2">Usage</h2>
+        <p class="go-body-copy">
+          The <code class="code-block--inline">&lt;go-tree&gt;</code> component should be used for any instance
+          of "tree" like data, such as folder structures or groupings.
+        </p>
+      </div>
+
+      <div class="go-column go-column--100">
+        <h3 class="go-heading-3">Bindings</h3>
+        <code [highlight]="componentBindings"></code>
+      </div>
+
+      <div class="go-column go-column--100">
+        <h4 class="go-heading-4">nodeConfig</h4>
+        <p class="go-body-copy">
+          The layout of the tree. This binding is required. The interface <code class="code-block--inline">GoTreeNodeConfig</code>
+          supports the following options:
+        </p>
+        <p class="go-body-copy go-body-copy--no-margin">
+          <code [highlight]="goTreeNodeConfig"></code>
+        </p>
+      </div>
+    </div>
+  </go-card>
+
+
+  <go-card class="go-column go-column--100">
+    <header go-card-header>
+      <h2 class="go-heading-2">Default</h2>
+    </header>
+    <div go-card-content>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h4 class="go-heading-4 go-heading--underlined">View</h4>
+          <go-tree [nodeConfig]="exampleDefaultTreeData"></go-tree>
+        </div>
+        <div class="go-column go-column--50">
+          <h4 class="go-heading-4 go-heading--underlined">Code</h4>
+          <code [highlight]="exampleDefaultTreeDataHtml"></code>
+        </div>
+      </div>
+    </div>
+  </go-card>
+
+</section>

projects/go-style-guide/src/app/features/ui-kit/components/tree-docs/tree-docs.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+
+import { GoTreeNodeConfig } from 'projects/go-lib/src/public_api';
+
+@Component({
+  templateUrl: './tree-docs.component.html'
+})
+export class TreeDocsComponent {
+
+  readonly componentBindings: string = `
+  @Input() nodeConfig: GoTreeNodeConfig[];
+  `;
+
+  readonly goTreeNodeConfig: string = `
+  interface GoTreeNodeConfig {
+    name: string;
+    children?: GoTreeNodeConfig[];
+    expanded?: boolean;
+  }
+  `;
+
+  exampleDefaultTreeDataHtml: string = `
+  exampleTreeData: GoTreeNodeConfig[] = [
+    {
+      name: 'Fruit',
+      children: [{ name: 'Apple' }, { name: 'Banana' }],
+      expanded: true
+    },
+    {
+      name: 'Vegetables',
+      children: [
+        {
+          name: 'Green',
+          children: [{ name: 'Broccoli' }, { name: 'Brussel sprouts' }]
+        },
+        {
+          name: 'Orange',
+          children: [{ name: 'Pumpkins' }, { name: 'Carrots' }]
+        }
+      ]
+    }
+  ];
+
+  <go-tree [nodeConfig]="exampleDefaultTreeData"></go-tree>
+  `;
+
+  exampleDefaultTreeData: GoTreeNodeConfig[] = [
+    {
+      name: 'Fruit',
+      children: [{ name: 'Apple' }, { name: 'Banana' }],
+      expanded: true
+    },
+    {
+      name: 'Vegetables',
+      children: [
+        {
+          name: 'Green',
+          children: [{ name: 'Broccoli' }, { name: 'Brussel sprouts' }]
+        },
+        {
+          name: 'Orange',
+          children: [{ name: 'Pumpkins' }, { name: 'Carrots' }]
+        }
+      ]
+    }
+  ];
+}

projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts

@@ -54,6 +54,7 @@ import { TabDocsComponent } from '../components/tab-docs/tab-docs.component';
 import { PillDocsComponent } from '../components/pill-docs/pill-docs.component';
 import { TableSearchingComponent } from '../components/table-docs/components/table-searching/table-searching.component';
 import { TableFiltersComponent } from '../components/table-docs/components/table-filters/table-filters.component';
+import { TreeDocsComponent } from '../components/tree-docs/tree-docs.component';
 
 const routes: Routes = [
   { path: 'ui-kit', component: UiKitComponent },
@@ -112,7 +113,8 @@ const routes: Routes = [
     { path: 'templating', component: TableTemplatesComponent },
     { path: 'details', component: TableDetailsComponent }
   ]},
-  { path: 'ui-kit/toast', component: ToastDocsComponent }
+  { path: 'ui-kit/toast', component: ToastDocsComponent },
+  { path: 'ui-kit/tree', component: TreeDocsComponent }
 ];
 
 @NgModule({

projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts

@@ -33,7 +33,8 @@ import {
   GoTabModule,
   GoTextAreaModule,
   GoToasterService,
-  GoToastModule
+  GoToastModule,
+  GoTreeModule
 } from '../../../../../go-lib/src/public_api';
 
 // Module Routes
@@ -98,6 +99,7 @@ import { TabDocsComponent } from './components/tab-docs/tab-docs.component';
 import { PillDocsComponent } from './components/pill-docs/pill-docs.component';
 import { TableSearchingComponent } from './components/table-docs/components/table-searching/table-searching.component';
 import { TableFiltersComponent } from './components/table-docs/components/table-filters/table-filters.component';
+import { TreeDocsComponent } from './components/tree-docs/tree-docs.component';
 
 @NgModule({
   imports: [
@@ -129,7 +131,8 @@ import { TableFiltersComponent } from './components/table-docs/components/table-
     SharedModule,
     UiKitRoutesModule,
     GoSharedModule,
-    FormsModule
+    FormsModule,
+    GoTreeModule
   ],
   declarations: [
     AccordionDocsComponent,
@@ -186,6 +189,7 @@ import { TableFiltersComponent } from './components/table-docs/components/table-
     CheckboxDocsComponent,
     LoadingTestComponent,
     HeaderBarDocsComponent,
+    TreeDocsComponent,
     PillDocsComponent,
     TableFiltersComponent
   ],