Merge pull request #154 from scarraway/Textarea_directive

Add textarea directive and story. Fixes #153

Author: zvonimirfras

src/input/input.directive.ts

@@ -5,7 +5,7 @@ import { Directive, HostBinding } from "@angular/core";
  *
  * Example:
  *
- * ```hmtl
+ * ```html
  * <input ibmText/>
  * ```
  *

src/input/input.module.ts

@@ -6,15 +6,18 @@ import { CommonModule } from "@angular/common";
 // imports
 import { LabelComponent } from "./label.component";
 import { TextInput } from "./input.directive";
+import { TextArea } from "./text-area.directive";
 
 @NgModule({
 	declarations: [
 		LabelComponent,
-		TextInput
+		TextInput,
+		TextArea
 	],
 	exports: [
 		LabelComponent,
-		TextInput
+		TextInput,
+		TextArea
 	],
 	imports: [
 		CommonModule,

src/input/input.stories.ts

@@ -22,4 +22,8 @@ storiesOf("Input", module).addDecorator(
 		template: `
 			<input ibmText placeholder="Optional placeholder text"/>
 		`
+	})).add("TextArea", () => ({
+		template: `
+		<textarea ibmTextArea placeholder="Optional placeholder text" rows="4" cols="50"></textarea>
+		`
 	}));

src/input/text-area.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, HostBinding } from "@angular/core";
+
+/**
+ * A directive for applying styling to a textarea element.
+ *
+ * Example:
+ *
+ * ```html
+ * <textarea ibmTextArea></textarea>
+ * ```
+ *
+ * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
+ */
+@Directive({
+	selector: "[ibmTextArea]"
+})
+export class TextArea {
+	@HostBinding("class.bx--text-area") baseClass = true;
+}