docs(cb-a11y): Content - Form controls

Author: AlmeroSteyn

public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-checkboxes.component.html

@@ -1,3 +1,4 @@
+<!--#docregion-->
 <fieldset class="form-group row">
     <legend class="col-xs-12">
         <ng-content></ng-content>
@@ -8,4 +9,5 @@
             {{checkbox.name}}
         </label>
     </div>
-</fieldset>
+</fieldset>
+<!--#enddocregion-->

public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-form-controls.component.html

@@ -12,17 +12,25 @@ <h3>Implicit labeling</h3>
         <a11y-input>Type something:</a11y-input>
         <!--#enddocregion-->
 
+        <!-- #docregion cb-a11y-form-controls-textarea-usage -->
         <a11y-textarea>Type some text:</a11y-textarea>
+        <!--#enddocregion-->
 
+        <!-- #docregion cb-a11y-form-controls-checkboxes-usage -->
         <a11y-checkboxes [checkboxModel]="checkBoxes" [checkboxName]="'likes'">
             What do you like most about Angular 2?
         </a11y-checkboxes>
+        <!--#enddocregion-->
 
+        <!-- #docregion cb-a11y-form-controls-radiobuttons-usage -->
         <a11y-radiobuttons [radiobuttonModel]="radioButtons" [radiobuttonName]="'language'">
             Choose your favourite Angular 2 language:
         </a11y-radiobuttons>
+        <!--#enddocregion-->
 
+        <!-- #docregion cb-a11y-form-controls-select-usage -->
         <a11y-select [optionsModel]="selectOptions">Why are you interested in a11y?</a11y-select>
+        <!--#enddocregion-->
 
     </section>
     <section class="row well">

public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-radiobuttons.component.html

@@ -1,3 +1,4 @@
+<!--#docregion-->
 <fieldset class="form-group row">
     <legend class="col-xs-12">
         <ng-content></ng-content>
@@ -8,4 +9,5 @@
             {{radiobutton.name}}
         </label>
     </div>
-</fieldset>
+</fieldset>
+<!--#enddocregion-->

public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-select.component.html

@@ -1,7 +1,9 @@
+<!--#docregion-->
 <div class="form-group">
     <label><ng-content></ng-content>
         <select class="form-control">
             <option *ngFor="#option of optionsModel" [value]="option.value">{{option.name}}</option>
         </select>
     </label>
-</div>
+</div>
+<!--#enddocregion-->

public/docs/_examples/cb-a11y/ts/app/form-controls/a11y-textarea.component.html

@@ -1,5 +1,7 @@
+<!-- #docregion-->
 <div class="form-group">
     <label><ng-content></ng-content>
         <textarea class="form-control"></textarea>
     </label>
-</div>
+</div>
+<!--#enddocregion-->

public/docs/ts/latest/cookbook/a11y.jade

@@ -150,7 +150,7 @@ code-example(language="html" escape="html").
 :marked
     Which is then rendered as:
 
-code-example(language="html" escape="html").
+code-example(language="html" escape="html" format="linenums").
     <a11y-input>
         <div class="form-group ">
             <label>
@@ -163,9 +163,75 @@ code-example(language="html" escape="html").
 :marked
     #### Textareas
 
+    Your component template:
+
++makeExample('cb-a11y/ts/app/form-controls/a11y-textarea.component.html')
+
+:marked
+    Used as:
+
++makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-textarea-usage')
+
+:marked
+    Which is then rendered as:
+
+code-example(language="html" escape="html" format="linenums").
+    <a11y-textarea>
+        <div class="form-group">
+            <label>Type some text:
+                <textarea class="form-control"></textarea>
+            </label>
+        </div>
+    </a11y-textarea>
+
 :marked
     #### Checkboxes
 
+    Your component template:
+
++makeExample('cb-a11y/ts/app/form-controls/a11y-checkboxes.component.html')
+
+:marked
+    Used as:
+
++makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-checkboxes-usage')
+
+:marked
+    Which is then rendered as:
+
+code-example(language="html" escape="html" format="linenums").
+    <a11y-checkboxes>
+        <fieldset class="form-group row">
+            <legend class="col-xs-12">
+                    What do you like most about Angular 2?
+            </legend>
+            <div class="checkbox col-xs-12">
+                <label>
+                    <input type="checkbox" value="0" name="likes">
+                    Template syntax
+                </label>
+            </div>
+            <div class="checkbox col-xs-12">
+                <label>
+                    <input type="checkbox" value="1" name="likes">
+                    Observables
+                </label>
+            </div>
+            <div class="checkbox col-xs-12">
+                <label>
+                    <input type="checkbox" value="2" name="likes">
+                    Components
+                </label>
+            </div>
+            <div class="checkbox col-xs-12">
+                <label>
+                    <input type="checkbox" value="3" name="likes">
+                    Forms
+                </label>
+            </div>
+        </fieldset>
+    </a11y-checkboxes>
+
 :marked
     #### Radiobuttons