From a68d29fda65c0b76b307b026f0b3adc1550f0af3 Mon Sep 17 00:00:00 2001
From: Graham Hency <grahamhency@gmail.com>
Date: Tue, 22 Oct 2019 08:38:46 -0400
Subject: [PATCH] Added documentation for checkbox

---
 .../go-checkbox/go-checkbox.component.html    |  12 +
 .../go-checkbox/go-checkbox.component.spec.ts |   7 +-
 .../button-docs/button-docs.component.html    |   2 +-
 .../checkbox-docs.component.html              | 219 ++++++++++++++++++
 .../checkbox-docs/checkbox-docs.component.ts  | 133 +++++++++++
 .../form-docs/form-docs.component.ts          |   1 +
 .../ui-kit/routes/ui-kit-routing.module.ts    |   2 +
 .../src/app/features/ui-kit/ui-kit.module.ts  |  10 +-
 8 files changed, 381 insertions(+), 5 deletions(-)
 create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html
 create mode 100644 projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts

diff --git a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html
index d84f2ed10..77b46c8a3 100644
--- a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html
+++ b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html
@@ -10,4 +10,16 @@
          [ngClass]="{'go-form__label--dark': theme === 'dark'}">
     {{ label }}
   </label>
+  
+  <go-hint *ngFor="let hint of hints" [message]="hint" [theme]="theme"></go-hint>
+  
+  <div *ngIf="control?.errors?.length">
+    <go-hint
+      *ngFor="let error of control.errors"
+      [message]="error.message"
+      [label]="error.type"
+      [theme]="theme"
+      type="negative"
+    ></go-hint>
+  </div>
 </div>
diff --git a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts
index 47d94a00d..d58089721 100644
--- a/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts
+++ b/projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts
@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { GoCheckboxComponent } from './go-checkbox.component';
+import { GoHintModule } from '../go-hint/go-hint.module';
 
 describe('GoCheckboxComponent', () => {
   let component: GoCheckboxComponent;
@@ -10,7 +11,11 @@ describe('GoCheckboxComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [GoCheckboxComponent],
-      imports: [FormsModule, ReactiveFormsModule]
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        GoHintModule
+      ]
     })
     .compileComponents();
   }));
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html
index 75d6f2fdd..05da3c776 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html
@@ -107,7 +107,7 @@ <h2 class="go-heading-5">Primary Button</h2>
           <go-button (handleClick)="testClick()" buttonDisabled="true">Disabled</go-button>
         </div>
         <div class="go-column go-column--33">
-          <go-button (handleClick)="testClick()" buttonIcon="work">With Icon</go-button>
+          <go-button (handleClick)="testClick()" buttonIcon="work"></go-button>
         </div>
       </div>
     </ng-container>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html
new file mode 100644
index 000000000..1dea8e2fe
--- /dev/null
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html
@@ -0,0 +1,219 @@
+<section class="go-container">
+  <app-form-control-docs class="go-column go-column--100"></app-form-control-docs>
+  <go-card id="setup" class="go-column--100 go-column">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Setup</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        To use the checkbox components, you'll need to import the CheckboxModule into your module:
+      </p>
+      <code [highlight]="checkboxSetup"
+            class="code-block--no-bottom-margin">
+    </code>
+    </ng-container>
+  </go-card>
+  <go-card id="form-checkbox" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Simpliest Implementation</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        This simpliest way to implement a checkbox requires a <code class="code-block--inline">&lt;go-checkbox&gt;</code> with the
+        <code class="code-block--inline">label</code> and <code class="code-block--inline">[control]</code> bindings
+      </p>
+      <p class="go-body-copy">
+        On the <code class="code-block--inline">&lt;go-checkbox&gt;</code>, the 
+        <code class="code-block--inline">label</code> is the name that identifies this checkbox
+        and the <code class="code-block--inline">[control]</code> is the corresponding <code class="code-block--inline">FormControl</code>.
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">View</h2>
+          <go-checkbox label="Checkbox 1" [control]="checkbox1">
+          </go-checkbox>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code [highlight]="checkbox1Ex"
+                class="code-block--no-bottom-margin">
+          </code>
+        </div>
+      </div>
+    </ng-container>
+  </go-card>
+
+  <go-card id="form-checkbox-group" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Group Implementation</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        Sometimes it makes sense to combine a series of checkboxes into a group, there is a component for that,
+        <code class="code-block--inline">&lt;go-checkbox-group&gt;</code>.
+      </p>
+      <p class="go-body-copy">
+        On the <code class="code-block--inline">&lt;go-checkbox-group&gt;</code>, the only required bindings on 
+        this component are the <code class="code-block--inline">legend</code> (identifies this set of options)
+        and the <code class="code-block--inline">[control]</code> (corresponds to a <code class="code-block--inline">FormControl</code>).
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">View</h2>
+          <go-checkbox-group legend="Options" [control]="checkboxGroup1">
+            <go-checkbox label="Option 1" [control]="checkboxGroup1.controls.option1">
+            </go-checkbox>
+            <go-checkbox label="Option 2" [control]="checkboxGroup1.controls.option2">
+            </go-checkbox>
+          </go-checkbox-group>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code [highlight]="checkboxGroup1Ex_ts"
+                class="code-block--no-bottom-margin">
+          </code>
+          <code [highlight]="checkboxGroup1Ex"
+                class="code-block--no-bottom-margin">
+          </code>
+        </div>
+      </div>
+    </ng-container>
+  </go-card>
+
+  <go-card id="form-checkbox-key" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Checkbox Keys</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        The label attribute is used to generate a unique ID to associate the label with the checkbox.
+        As this might not be desired, the <code class="code-block--inline">@Input() key: string;</code>
+        can be used to configure the ID attribute of the checkbox directly.
+        Anything passed into the component via the <code class="code-block--inline">[key]</code>
+        attribute will be used to both assign the ID to the checkbox and
+        associate the label with the checkbox button.
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">View</h2>
+          <go-checkbox label="Checkbox 2"
+                       [control]="checkbox2"
+                       key="checkbox_2">
+          </go-checkbox>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code [highlight]="checkbox2Ex" class="code-block--no-bottom-margin"></code>
+        </div>
+      </div>
+      <div class="go-column go-column--100">
+        <h2 class="go-heading-6 go-heading--underlined">Example Output</h2>
+        <p class="go-body-copy">
+          Notice in the below example output that the <code class="code-block--inline">key</code> has been assigned
+          to both the <code class="code-block--inline">id</code> attribute on
+          the input and the <code class="code-block--inline">for</code> attribute
+          on the label.
+        </p>
+        <code [highlight]="checkbox2KeyCode" class="code-block--no-bottom-margin"></code>
+      </div>
+    </ng-container>
+  </go-card>
+
+  <go-card id="form-checkbox-hints" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Checkbox Hints</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        Form hints exist to help give more information about the checkbox & checkbox groups they are attached to.
+        The <code class="code-block--inline">@Input() hints: Array&lt;string&gt;</code>
+        can be used to pass in an array of hints to either the checkbox group or an individual checkbox component.
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">View</h2>
+          <div class="go-container">
+            <div class="go-column go-column--100">
+              <go-checkbox-group legend="Options"
+                                 [control]="checkboxGroup2"
+                                 [hints]="groupHints">
+                <div>
+                  <go-checkbox label="Option 1"
+                               [control]="checkboxGroup2.controls.option1">
+                  </go-checkbox>
+                </div>
+                <div>
+                  <go-checkbox label="Option 2"
+                               [control]="checkboxGroup2.controls.option2">
+                  </go-checkbox>
+                </div>
+              </go-checkbox-group>
+            </div>
+            <div class="go-column--100 go-column">
+              <go-checkbox label="Checkbox 3"
+                          [control]="checkbox3"
+                          [hints]="checkbox3Hints">
+              </go-checkbox>
+            </div>
+          </div>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code [highlight]="checkbox3HintsCode"
+                class="code-block--no-bottom-margin">
+          </code>
+          <code [highlight]="checkbox3Ex"
+                class="code-block--no-bottom-margin">
+          </code>
+        </div>
+      </div>
+    </ng-container>
+  </go-card>
+
+  <go-card id="form-checkbox-theme" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Checkbox Theme</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        By default the theme for the checkboxes is 'light', but there could be
+        and instance where we need a 'dark' theme. There is a binding
+        available for that on both the checkbox itself and a checkbox group.
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50 go-column--dark">
+          <h2 class="go-heading-6 go-heading--underlined" style="color: #fff;">View</h2>
+          <div class="go-container">
+            <div class="go-column go-column--100">
+              <go-checkbox-group legend="Options"
+                                 [control]="checkboxGroup3"
+                                 theme="dark">
+                <div>
+                  <go-checkbox label="Option 1"
+                                [control]="checkboxGroup3.controls.option1">
+                  </go-checkbox>
+                </div>
+                <div>
+                  <go-checkbox label="Option 2"
+                                [control]="checkboxGroup3.controls.option2">
+                  </go-checkbox>
+                </div>
+              </go-checkbox-group>
+            </div>
+            <div class="go-column--100 go-column">
+              <go-checkbox label="Checkbox 4"
+                          [control]="checkbox4"
+                          theme="dark">
+              </go-checkbox>
+            </div>
+          </div>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code [highlight]="checkbox4Ex"
+                class="code-block--no-bottom-margin">
+          </code>
+        </div>
+      </div>
+    </ng-container>
+  </go-card>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts
new file mode 100644
index 000000000..fa23b1aaf
--- /dev/null
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts
@@ -0,0 +1,133 @@
+import { Component } from '@angular/core';
+import { SubNavService } from 'projects/go-style-guide/src/app/shared/components/sub-nav/sub-nav.service';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-checkbox-docs',
+  templateUrl: './checkbox-docs.component.html'
+})
+export class CheckboxDocsComponent {
+
+  checkbox1: FormControl = new FormControl('');
+  checkbox2: FormControl = new FormControl('');
+  checkbox3: FormControl = new FormControl('');
+  checkbox4: FormControl = new FormControl('');
+
+  checkboxGroup1: FormGroup = new FormGroup({
+    option1: new FormControl(''),
+    option2: new FormControl('')
+  });
+
+  checkboxGroup2: FormGroup = new FormGroup({
+    option1: new FormControl(''),
+    option2: new FormControl('')
+  });
+
+  checkboxGroup3: FormGroup = new FormGroup({
+    option1: new FormControl(''),
+    option2: new FormControl('')
+  });
+
+  groupHints: Array<string> = ['this is a hint for the group'];
+  checkbox3Hints: Array<string> = ['this is a hint for the this checkbox'];
+
+  checkboxSetup: string = `
+  import { GoCheckboxModule } from '@tangoe/goponents';
+
+  @NgModule({
+    imports: [
+      GoCheckboxModule
+    ]
+  });
+  `;
+
+  checkbox1Ex: string = `
+  <go-checkbox label="Checkbox 1" [control]="checkbox1">
+  </go-checkbox>
+  `;
+
+  checkboxGroup1Ex: string = `
+  <!-- component.html -->
+
+  <go-checkbox-group legend="Options" [control]="checkboxGroup1">
+    <go-checkbox label="Option 1" [control]="checkboxGroup1.controls.option1">
+    </go-checkbox>
+    <go-checkbox label="Option 2" [control]="checkboxGroup1.controls.option2">
+    </go-checkbox>
+  </go-checkbox-group>
+  `;
+
+  checkboxGroup1Ex_ts: string = `
+  // component.ts
+
+  checkboxGroup1: FormGroup = new FormGroup({
+    option1: new FormControl(''),
+    option2: new FormControl('')
+  });
+  `;
+
+  checkbox2Ex: string = `
+  <go-checkbox label="Checkbox 2"
+               [control]="checkbox2"
+               key="checkbox_2">
+  </go-checkbox>
+  `;
+
+  checkbox2KeyCode: string = `
+  <input type="checkbox" id="checkbox_2">
+  <label for="checkbox_2"> Checkbox 2 </label>
+  `;
+
+  checkbox3HintsCode: string = `
+  // for the group
+  groupHints: Array<string> = ['this is a hint for the group'];
+
+  // for a single checkbox
+  checkbox3Hints: Array<string> = ['this is a hint for the this checkbox'];
+  `;
+
+  checkbox3Ex: string = `
+  <!-- hints for a group -->
+  <go-checkbox-group legend="Options" [control]="checkboxGroup2">
+    <div>
+      <go-checkbox label="Option 1" [control]="checkboxGroup2.controls.option1">
+      </go-checkbox>
+    </div>
+    <div>
+      <go-checkbox label="Option 2" [control]="checkboxGroup2.controls.option2">
+      </go-checkbox>
+    </div>
+  </go-checkbox-group>
+
+  <!-- hints for an individual checkbox -->
+  <go-checkbox label="Checkbox 3"
+               [control]="checkbox3"
+               [hints]="checkbox3Hints">
+  </go-checkbox>
+  `;
+
+  checkbox4Ex: string = `
+  <!-- theme for a group -->
+  <go-checkbox-group legend="Options" [control]="checkboxGroup3" theme="dark">
+    <div>
+      <go-checkbox label="Option 1" [control]="checkboxGroup3.controls.option1">
+      </go-checkbox>
+    </div>
+    <div>
+      <go-checkbox label="Option 2" [control]="checkboxGroup3.controls.option2">
+      </go-checkbox>
+    </div>
+  </go-checkbox-group>
+
+  <!-- theme for an individual checkbox -->
+  <go-checkbox label="Checkbox 3"
+               [control]="checkbox3"
+               theme="dark">
+  </go-checkbox>
+  `;
+
+  constructor(private subNavService: SubNavService) {
+    this.subNavService.pageTitle = 'Checkboxes';
+  }
+
+}
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts
index 1090f3a9a..655233ea1 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts
@@ -10,6 +10,7 @@ export class FormDocsComponent {
     {
       routeTitle: 'Forms', subRoutes: [
         { route: './', routeTitle: 'Overview' },
+        { route: 'checkbox', routeTitle: 'Checkbox' },
         { route: './datepicker', routeTitle: 'Datepicker' },
         { route: './input', routeTitle: 'Input' },
         { route: './radio', routeTitle: 'Radio' },
diff --git a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
index 87f5cb438..c7370e5d1 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/routes/ui-kit-routing.module.ts
@@ -43,6 +43,7 @@ import { ActionSheetPanelDocsComponent } from '../components/action-sheet-docs/c
 import { AccordionOverviewComponent } from '../components/accordion-docs/components/accordion-overview/accordion-overview.component';
 import { SwitchToggleDocsComponent } from '../components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component';
 import { RadioButtonDocsComponent } from '../components/form-docs/components/radio-button-docs/radio-button-docs.component';
+import { CheckboxDocsComponent } from '../components/form-docs/components/checkbox-docs/checkbox-docs.component';
 
 const routes: Routes = [
   { path: 'ui-kit', component: UiKitComponent },
@@ -62,6 +63,7 @@ const routes: Routes = [
   { path: 'ui-kit/copy', component: CopyDocsComponent },
   { path: 'ui-kit/forms', component: FormDocsComponent, children: [
     { path: '', component: FormsOverviewComponent },
+    { path: 'checkbox', component: CheckboxDocsComponent },
     { path: 'datepicker', component: DatepickerDocsComponent },
     { path: 'input', component: InputDocsComponent },
     { path: 'radio', component: RadioButtonDocsComponent },
diff --git a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
index 996a21714..e3fecbe10 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts
@@ -10,6 +10,7 @@ import {
   GoBadgeModule,
   GoButtonModule,
   GoCardModule,
+  GoCheckboxModule,
   GoConfigService,
   GoCopyModule,
   GoDatepickerModule,
@@ -22,13 +23,13 @@ import {
   GoOffCanvasModule,
   GoOffCanvasService,
   GoRadioModule,
+  GoSelectComponent,
   GoSelectModule,
   GoSwitchToggleModule,
   GoTableModule,
   GoTextAreaModule,
   GoToasterService,
-  GoToastModule,
-  GoSelectComponent
+  GoToastModule
 } from '../../../../../go-lib/src/public_api';
 
 // Module Routes
@@ -80,6 +81,7 @@ import { ActionSheetPanelDocsComponent } from './components/action-sheet-docs/co
 import { AccordionOverviewComponent } from './components/accordion-docs/components/accordion-overview/accordion-overview.component';
 import { SwitchToggleDocsComponent } from './components/form-docs/components/switch-toggle-docs/switch-toggle-docs.component';
 import { RadioButtonDocsComponent } from './components/form-docs/components/radio-button-docs/radio-button-docs.component';
+import { CheckboxDocsComponent } from './components/form-docs/components/checkbox-docs/checkbox-docs.component';
 
 @NgModule({
   imports: [
@@ -89,6 +91,7 @@ import { RadioButtonDocsComponent } from './components/form-docs/components/radi
     GoBadgeModule,
     GoButtonModule,
     GoCardModule,
+    GoCheckboxModule,
     GoCopyModule,
     GoDatepickerModule,
     GoIconButtonModule,
@@ -150,7 +153,8 @@ import { RadioButtonDocsComponent } from './components/form-docs/components/radi
     ActionSheetPanelDocsComponent,
     AccordionOverviewComponent,
     SwitchToggleDocsComponent,
-    RadioButtonDocsComponent
+    RadioButtonDocsComponent,
+    CheckboxDocsComponent
   ],
   entryComponents: [
     BasicTestComponent,