From 823a32ea1bd2b9ef7b086b42492784ee4a250f7e Mon Sep 17 00:00:00 2001
From: Matt Wagner <matt.a.wagner4@gmail.com>
Date: Mon, 7 Oct 2019 13:02:10 -0400
Subject: [PATCH] Add Placeholder to GoSelect Documentation

Seeing that are looking to add the Placeholder to the GoSelect box in
v1.3.0, we should also release with up to date documentation on the
GoSelect box that includes implementing the placeholder.

This adds the placeholder documentation to the GoSelect page.
---
 .../select-docs/select-docs.component.html    | 34 +++++++++++++++++++
 .../select-docs/select-docs.component.ts      | 13 +++++++
 2 files changed, 47 insertions(+)

diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
index ba1948c4c..102ef2cfe 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html
@@ -246,4 +246,38 @@ <h2 class="go-heading-6 go-heading--underlined">Code</h2>
       </div>
     </ng-container>
   </go-card>
+  <go-card id="form-select-placeholder" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Component Placeholder</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        Sometimes we may want to be able to add a placeholder for the select box. We can achieve this through the
+        <code class="code-block--inline">@Input() placeholder: string;</code> binding. Setting
+        <code class="code-block--inline">placeholder</code> to a string will display that string by default in the
+        select box. When you select an option in the select box, it will replace the placeholder with the selected item.
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">View</h2>
+          <go-select
+            bindLabel="name"
+            bindValue="value"
+            [control]="select8"
+            [items]="items"
+            [multiple]="true"
+            placeholder="Select a Candy"
+            label="Favorite Candy"
+          ></go-select>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code
+            [highlight]="select8Code"
+            class="code-block--no-bottom-margin"
+          ></code>
+        </div>
+      </div>
+    </ng-container>
+  </go-card>
 </section>
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
index 4296af931..1b11fa96d 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts
@@ -16,6 +16,7 @@ export class SelectDocsComponent implements OnInit {
   select5: FormControl = new FormControl('');
   select6: FormControl = new FormControl('');
   select7: FormControl = new FormControl('');
+  select8: FormControl = new FormControl('');
 
   hints: Array<string> = ['please select you favorite candy'];
 
@@ -105,6 +106,18 @@ export class SelectDocsComponent implements OnInit {
   ></go-select>
   `;
 
+  select8Code: string = `
+  <go-select
+    bindLabel="name"
+    bindValue="value"
+    [control]="select"
+    [items]="items"
+    [multiple]="true"
+    placeholder="Select a Candy"
+    label="Favorite Candy"
+  ></go-select>
+  `;
+
   ngOnInit(): void {
     setTimeout((): void => {
       this.select5.setErrors([