From a68d29fda65c0b76b307b026f0b3adc1550f0af3 Mon Sep 17 00:00:00 2001 From: Graham Hency 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 }} + + + +
+ +
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 @@

Primary Button

Disabled
- With Icon +
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 @@ +
+ + + +

Setup

+ + +

+ To use the checkbox components, you'll need to import the CheckboxModule into your module: +

+ + + + + + +

Simpliest Implementation

+ + +

+ This simpliest way to implement a checkbox requires a <go-checkbox> with the + label and [control] bindings +

+

+ On the <go-checkbox>, the + label is the name that identifies this checkbox + and the [control] is the corresponding FormControl. +

+
+
+

View

+ + +
+
+

Code

+ + +
+
+ + + + + +

Group Implementation

+ + +

+ Sometimes it makes sense to combine a series of checkboxes into a group, there is a component for that, + <go-checkbox-group>. +

+

+ On the <go-checkbox-group>, the only required bindings on + this component are the legend (identifies this set of options) + and the [control] (corresponds to a FormControl). +

+
+
+

View

+ + + + + + +
+
+

Code

+ + + + +
+
+ + + + + +

Checkbox Keys

+ + +

+ The label attribute is used to generate a unique ID to associate the label with the checkbox. + As this might not be desired, the @Input() key: string; + can be used to configure the ID attribute of the checkbox directly. + Anything passed into the component via the [key] + attribute will be used to both assign the ID to the checkbox and + associate the label with the checkbox button. +

+
+
+

View

+ + +
+
+

Code

+ +
+
+
+

Example Output

+

+ Notice in the below example output that the key has been assigned + to both the id attribute on + the input and the for attribute + on the label. +

+ +
+ + + + + +

Checkbox Hints

+ + +

+ Form hints exist to help give more information about the checkbox & checkbox groups they are attached to. + The @Input() hints: Array<string> + can be used to pass in an array of hints to either the checkbox group or an individual checkbox component. +

+
+
+

View

+
+
+ +
+ + +
+
+ + +
+ +
+
+ + +
+
+
+
+

Code

+ + + + +
+
+ + + + + +

Checkbox Theme

+ + +

+ 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. +

+
+
+

View

+
+
+ +
+ + +
+
+ + +
+ +
+
+ + +
+
+
+
+

Code

+ + +
+
+ + 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 = ['this is a hint for the group']; + checkbox3Hints: Array = ['this is a hint for the this checkbox']; + + checkboxSetup: string = ` + import { GoCheckboxModule } from '@tangoe/goponents'; + + @NgModule({ + imports: [ + GoCheckboxModule + ] + }); + `; + + checkbox1Ex: string = ` + + + `; + + checkboxGroup1Ex: string = ` + + + + + + + + + `; + + checkboxGroup1Ex_ts: string = ` + // component.ts + + checkboxGroup1: FormGroup = new FormGroup({ + option1: new FormControl(''), + option2: new FormControl('') + }); + `; + + checkbox2Ex: string = ` + + + `; + + checkbox2KeyCode: string = ` + + + `; + + checkbox3HintsCode: string = ` + // for the group + groupHints: Array = ['this is a hint for the group']; + + // for a single checkbox + checkbox3Hints: Array = ['this is a hint for the this checkbox']; + `; + + checkbox3Ex: string = ` + + +
+ + +
+
+ + +
+ + + + + + `; + + checkbox4Ex: string = ` + + +
+ + +
+
+ + +
+ + + + + + `; + + 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,