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"><go-checkbox></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"><go-checkbox></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"><go-checkbox-group></code>. + </p> + <p class="go-body-copy"> + On the <code class="code-block--inline"><go-checkbox-group></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<string></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,