feat(select): Add invalid and optional text fields

Author: youda97

src/select/select.component.ts

@@ -41,6 +41,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 				<select
 					#select
 					[attr.id]="id"
+					[attr.data-invalid]="(invalid ? '' : null)"
 					[disabled]="disabled"
 					(change)="onChange($event)"
 					class="bx--select-input">
@@ -49,9 +50,16 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 				<svg *ngIf="!skeleton" class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
 				<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
 				</svg>
+				<div *ngIf="helperText" class="bx--form__helper-text">{{helperText}}</div>
+				<div *ngIf="invalid" class="bx--form-requirement">{{invalidText}}</div>
 			</div>
 		</div>
 	`,
+	styles: [`
+		[data-invalid] ~ .bx--select__arrow {
+			bottom: 2.25rem;
+		}
+	`],
 	providers: [
 		{
 			provide: NG_VALUE_ACCESSOR,
@@ -74,6 +82,14 @@ export class Select implements ControlValueAccessor {
 	 * Label for the select. Appears above the input.
 	 */
 	@Input() label = "Select label";
+	/**
+	 * Optional helper text that appears under he label.
+	 */
+	@Input() helperText: string;
+	/**
+	 * Sets the invalid text.
+	 */
+	@Input() invalidText: string;
 	/**
 	 * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`
 	 */
@@ -86,6 +102,11 @@ export class Select implements ControlValueAccessor {
 	 * Set to true for a loading select.
 	 */
 	@Input() skeleton = false;
+	/**
+	 * Set to `true` for an invalid select component.
+	 */
+	@Input() invalid = false;
+
 	/**
 	 * `light` or `dark` select theme
 	 */

src/select/select.stories.ts

@@ -1,6 +1,6 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, select } from "@storybook/addon-knobs/angular";
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs/angular";
 
 import { SelectModule } from "../";
 
@@ -12,8 +12,13 @@ storiesOf("Select", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-		<div style="width: 165px">
-			<ibm-select [theme]="theme" [display]="display">
+			<ibm-select
+				[disabled]="disabled"
+				[invalid]="invalid"
+				[invalidText]="invalidText"
+				[helperText]="helperText"
+				[theme]="theme"
+				[display]="display">
 				<option value="" disabled selected hidden>Choose an option</option>
 				<option value="solong">A much longer option that is worth having around to check how text flows</option>
 				<optgroup label="Category 1">
@@ -25,9 +30,12 @@ storiesOf("Select", module).addDecorator(
 					<option value="option2">Option 2</option>
 				</optgroup>
 			</ibm-select>
-		</div>
 	`,
 		props: {
+			disabled: boolean("Disabled", false),
+			invalid: boolean("Show form validation", false),
+			invalidText: text("Form validation content", "Please select an option."),
+			helperText: text("Helper text", "Optional helper text."),
 			theme: select("Theme", ["dark", "light"], "dark"),
 			display: select("Display", ["default", "inline"], "default")
 		}