Add TextArea story (#460)

* Add Story file
* Add prop documentation
* Add missing value prop
* Add id to explicitly link to label

Bug: T289141

vue-components/src/components/TextArea.vue

@@ -11,10 +11,12 @@
 			</label>
 		</span>
 		<textarea
+			:id="id"
 			:class="[
 				'wikit-TextArea__textarea',
 				`wikit-TextArea__textarea--${resizeType}`
 			]"
+			:value="value"
 			:rows="rows"
 			:placeholder="placeholder"
 			label=""
@@ -28,20 +30,48 @@ import Vue from 'vue';
 import generateId from '@/components/util/generateUid';
 import { ResizeLimit, validateLimit } from '@/components/ResizeLimit';
 
+/**
+ * Text areas are multi-line, non auto-sizing input fields that allow manual resizing by users.
+ */
 export default Vue.extend( {
 	props: {
+		/**
+		 * An initial value for the textarea
+		 */
+		value: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The text area label
+		 */
 		label: {
 			type: String,
 			default: '',
 		},
+		/**
+		 * The text area placeholder
+		 */
 		placeholder: {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Defines the amount of lines of text that the text area can take by
+		 * default before scroll is triggered, therefore influencing the height
+		 * of the component.
+		 */
 		rows: {
 			type: Number,
 			default: 2,
 		},
+		/**
+		 * Allows users to expand the component horizontally or vertically
+		 * using the expand handler. It can be used to entirely disable manual
+		 * resizing.
+		 *
+		 * Allowed values: `vertical`, `horizontal`,  `none`
+		 */
 		resize: {
 			type: String,
 			validator( value: ResizeLimit ): boolean {

vue-components/stories/TextArea.stories.ts

@@ -0,0 +1,84 @@
+import TextArea from '@/components/TextArea';
+import { Component } from 'vue';
+
+export default {
+	component: TextArea,
+	title: 'TextArea',
+};
+
+export function basic( args: object ): Component {
+    return {
+        data(): object {
+            return { args };
+        },
+        components: { TextArea },
+        props: Object.keys( args ),
+        template: `
+			<div style="max-width: 75%">
+				<TextArea 
+                    :label="label"
+                    :placeholder="placeholder"
+                    :rows="rows"
+                    :resize="resize"
+                />
+			</div>
+		`,
+    };
+}
+
+basic.args = {
+    label: 'Label',
+    placeholder: 'Placeholder'
+};
+
+basic.argTypes = {
+    value: {
+        control: false
+    },
+    label: {
+        control: {
+            type: 'text',
+        },
+    },
+    placeholder: {
+        control: {
+            type: 'text',
+        },
+    },
+    rows: {
+        control: {
+            type: 'number',
+        },
+    },
+    resize: {
+        table: {
+            defaultValue: {
+                summary: 'vertical'
+            }
+        },
+        control: {
+            type: 'select',
+            options: ['vertical', 'horizontal', 'none'],
+            default: 'vertical'
+        },
+    },
+    input : {
+        description: 'Emitted on each character input to the textarea, contains the entire string value of the textarea itself.',
+        table: {
+            type: {
+                summary: 'string'
+            }
+        }
+    }
+};
+
+export function all(): Component {
+	return {
+		components: { TextArea },
+		template: `
+			<div style="max-width: 95%">
+				<TextArea label="Label" placeholder="Placeholder" />
+			</div>
+		`,
+	};
+}

vue-components/tests/unit/components/TextArea.spec.ts

@@ -33,6 +33,17 @@ describe( 'TextArea.vue', () => {
 		} ) ).toThrow( 'Invalid prop: custom validator check failed for prop "resize"' );
 	} );
 
+	it( 'accepts a textarea value', () => {
+		const value = 'Some beautiful value!';
+		const wrapper = mount( TextArea, {
+			propsData: { value },
+		} );
+		const element = wrapper.find( 'textarea' ).element as HTMLFormElement;
+
+		expect( wrapper.props().value ).toBe( value );
+		expect( element.value ).toBe( value );
+	} );
+
 	it( 'accepts label property', () => {
 		const label = 'da Label';
 		const wrapper = mount( TextArea, {