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 5e92401
Show file tree
Hide file tree
Showing 7 changed files with 379 additions and 4 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>
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
223 changes: 223 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,223 @@
<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"
[hints]="option1Hints">
</go-checkbox>
</div>
<div>
<go-checkbox label="Option 2"
[control]="checkboxGroup2.controls.option2"
[hints]="option2Hints">
</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"
[hints]="option1Hints">
</go-checkbox>
</div>
<div>
<go-checkbox label="Option 2"
[control]="checkboxGroup3.controls.option2"
[hints]="option2Hints">
</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>
133 changes: 133 additions & 0 deletions .../features/ui-kit/components/form-docs/components/checkbox-docs/checkbox-docs.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
}

}
1 change: 1 addition & 0 deletions projects/go-style-guide/src/app/features/ui-kit/components/form-docs/form-docs.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down
Loading

0 comments on commit 5e92401

Please sign in to comment.