Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Chore] Checkbox Documentation #283

Merged
merged 1 commit into from
Oct 22, 2019
Merged

[Chore] Checkbox Documentation #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions projects/go-lib/src/lib/components/go-checkbox/go-checkbox.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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>
grahamhency marked this conversation as resolved.
Show resolved Hide resolved
</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
Open in desktop
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