docs: nest textarea docs within 'input' components

Signed-off-by: Akshat Patel <akshat@live.ca>

Author: Akshat55

src/input/input.stories.ts

@@ -1,21 +1,22 @@
 /* tslint:disable variable-name */
 
-import { moduleMetadata, Meta, Story  } from "@storybook/angular";
-import { InputModule, Label } from "./";
+import { moduleMetadata, Meta  } from "@storybook/angular";
+import { InputModule, TextInputLabelComponent } from "./";
 
 export default {
 	title: "Components/Input",
 	decorators: [
 		moduleMetadata({
 			imports: [InputModule]
 		})
-	]
+	],
+	component: TextInputLabelComponent
 } as Meta;
 
-const Template: Story<Label> = (args) => ({
+const Template = (args) => ({
 	props: args,
 	template: `
-		<cds-label
+		<cds-text-label
 		[helperText]="helperText"
 		[invalid]="invalid"
 		[invalidText]="invalidText"
@@ -32,7 +33,7 @@ const Template: Story<Label> = (args) => ({
 			[theme]="theme"
 			[placeholder]="placeholder"
 			[autocomplete]="autocomplete">
-		</cds-label>
+		</cds-text-label>
 	`
 });
 export const Basic = Template.bind({});
@@ -61,53 +62,18 @@ Basic.argTypes = {
 		options: ["sm", "md", "lg"],
 		defaultValue: "md",
 		contorl: "select"
-	},
-	component: Label
+	}
 };
 
-const TextareaTemplate: Story<Label> = (args) => ({
-	props: args,
-	template: `
-		<cds-label
-		[helperText]="helperText"
-		[invalid]="invalid"
-		[disabled]="disabled"
-		[invalidText]="invalidText">
-		{{label}}
-		<textarea
-			cdsTextArea
-			[placeholder]="placeholder"
-			[invalid]="invalid"
-			[disabled]="disabled"
-			[theme]="theme"
-			[rows]="rows"
-			[cols]="cols"
-			aria-label="textarea"></textarea>
-		</cds-label>
-	`
-});
-export const TextArea = TextareaTemplate.bind({});
-TextArea.args = {
-	...Basic.args,
-	cols: 50,
-	rows: 4
-};
-TextArea.argTypes = {
-	...Basic.argTypes
-};
 
-const SkeletonTemplate: Story<Label> = (args) => ({
+const SkeletonTemplate = (args) => ({
 	props: args,
 	template: `
 		<cds-label skeleton="true">
 			<input cdsText skeleton="true">
 		</cds-label>
 		<br>
 		<input cdsText skeleton="true">
-		<br><br>
-		<cds-label skeleton="true">
-			<div cdsTextArea skeleton="true"></div>
-		</cds-label>
 	`
 });
 export const Skeleton = SkeletonTemplate.bind({});

src/input/label.component.ts

@@ -15,7 +15,11 @@ import { TextArea } from "./text-area.directive";
 import { TextInput } from "./input.directive";
 
 /**
- * [See demo](../../?path=/story/components-input--label)
+ * Get started with importing the module:
+ *
+ * ```typescript
+ * import { InputModule } from 'carbon-components-angular';
+ * ```
  *
  * To prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components
  *
@@ -25,6 +29,8 @@ import { TextInput } from "./input.directive";
  * 	<input cdsText type="text" class="input-field">
  * </cds-label>
  * ```
+ *
+ * [See demo](../../?path=/story/components-input--basic)
  */
 @Component({
 	selector: "cds-label, ibm-label",

src/input/text-input-label.component.ts

@@ -9,6 +9,22 @@ import {
 	ChangeDetectorRef
 } from "@angular/core";
 
+/**
+ * Get started with importing the module:
+ *
+ * ```typescript
+ * import { InputModule } from 'carbon-components-angular';
+ * ```
+ *
+ * ```html
+ * <cds-text-label>
+ * 	Label
+ * 	<input cdsText type="text" class="input-field">
+ * </cds-text-label>
+ * ```
+ *
+ * [See demo](../../?path=/story/components-input--basic)
+ */
 @Component({
 	selector: "cds-text-label, ibm-text-label",
 	template: `

src/input/textarea-label.component.ts

@@ -12,6 +12,22 @@ import {
 
 import { TextArea } from "./text-area.directive";
 
+/**
+ * Get started with importing the module:
+ *
+ * ```typescript
+ * import { InputModule } from 'carbon-components-angular';
+ * ```
+ *
+ * ```html
+ * <cds-textarea-label>
+ * 	Label
+ * 	<textarea cdsTextArea class="textarea-field">
+ * </cds-textarea-label>
+ * ```
+ *
+ * [See demo](../../?path=/story/components-input-text-area--basic)
+ */
 @Component({
 	selector: "cds-textarea-label, ibm-textarea-label",
 	template: `

src/input/textarea.stories.ts

@@ -0,0 +1,76 @@
+/* tslint:disable variable-name */
+
+import { moduleMetadata, Meta  } from "@storybook/angular";
+import { InputModule, TextareaLabelComponent } from "./";
+
+export default {
+	title: "Components/Input/Text area",
+	decorators: [
+		moduleMetadata({
+			imports: [InputModule]
+		})
+	],
+	component: TextareaLabelComponent
+} as Meta;
+
+const Template = (args) => ({
+	props: args,
+	template: `
+		<cds-textarea-label
+		[helperText]="helperText"
+		[invalid]="invalid"
+		[disabled]="disabled"
+		[invalidText]="invalidText">
+		{{label}}
+		<textarea
+			cdsTextArea
+			[placeholder]="placeholder"
+			[invalid]="invalid"
+			[disabled]="disabled"
+			[theme]="theme"
+			[rows]="rows"
+			[cols]="cols"
+			aria-label="textarea"></textarea>
+		</cds-textarea-label>
+	`
+});
+export const Basic = Template.bind({});
+Basic.args = {
+	disabled: false,
+	invalid: false,
+	invalidText: "Invalid entry",
+	warn: false,
+	warnText: "This is a warning!",
+	label: "Text input label",
+	helperText: "Optional helper text",
+	placeholder: "Placeholder",
+	cols: 50,
+	rows: 4
+};
+Basic.argTypes = {
+	autocomplete: {
+		options: ["on", "off"],
+		defaultValue: "on",
+		control: "radio"
+	},
+	theme: {
+		options: ["light", "dark"],
+		defaultValue: "dark",
+		control: "radio"
+	},
+	size: {
+		options: ["sm", "md", "lg"],
+		defaultValue: "md",
+		contorl: "select"
+	}
+};
+
+const SkeletonTemplate = (args) => ({
+	props: args,
+	template: `
+		<cds-textarea-label skeleton="true">
+			<div cdsTextArea skeleton="true"></div>
+		</cds-textarea-label>
+	`
+});
+export const Skeleton = SkeletonTemplate.bind({});