Skip to content

Commit

Permalink
Added documentation for checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@grahamhency
grahamhency committed Oct 22, 2019
1 parent 8e263aa commit a68d29f
Show file tree
Hide file tree
Showing 8 changed files with 381 additions and 5 deletions.
12 changes: 12 additions & 0 deletions projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
7 changes: 6 additions & 1 deletion projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -10,7 +11,11 @@ describe('GoCheckboxComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [GoCheckboxComponent],
imports: [FormsModule, ReactiveFormsModule]
imports: [
FormsModule,
ReactiveFormsModule,
GoHintModule
]
})
.compileComponents();
}));
Expand Down
2 changes: 1 addition & 1 deletion .../go-style-guide/src/app/features/ui-kit/components/button-docs/button-docs.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
219 changes: 219 additions & 0 deletions ...eatures/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit a68d29f

Please sign in to comment.