Added atoms TextArea

Author: wintondeshong

src/atoms/forms/text-area.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { text, boolean, number } from "@storybook/addon-knobs";
+import { TextArea } from "./text-area";
+import Faker from "faker";
+
+export default {
+    component: TextArea,
+    title: "Atoms | Forms / Text Area",
+};
+
+export const textAreaKnobs = () => (
+    <TextArea
+        disabled={boolean("Disabled", false)}
+        id={Faker.random.uuid()}
+        maxLength={number("Max Length", 30)}
+        onChange={() => {}}
+        placeholder={text("Placeholder", "Placeholder...")}
+        rows={number("Rows", 5)}
+        value={text("Value", "Input Value")}
+    />
+);

src/atoms/forms/text-area.test.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+describe("TextArea", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/10", () => {});
+});

src/atoms/forms/text-area.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+export interface TextAreaProps {
+    disabled?: boolean;
+    id: string;
+    maxLength?: number;
+    name?: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    rows?: number;
+
+    /**
+     * Unique identifier used select the underlying <textarea> for functional/e2e testing
+     */
+    testId?: string;
+    value?: string;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const TextArea: React.FC<TextAreaProps> = (props: TextAreaProps) => {
+    const {
+        disabled,
+        id,
+        maxLength,
+        name,
+        onChange,
+        placeholder,
+        rows,
+        testId,
+        value,
+    } = props;
+
+    return (
+        <textarea
+            data-test-id={testId}
+            disabled={disabled}
+            id={id}
+            maxLength={maxLength}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            rows={rows}
+            value={value}
+        />
+    );
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { TextArea };
+
+// #endregion Exports

src/index.ts

@@ -11,6 +11,7 @@ export { CheckboxButton } from "./atoms/forms/checkbox-button";
 export { CheckboxInput } from "./atoms/forms/checkbox-input";
 export { PasswordInput } from "./atoms/forms/password-input";
 export { SubmitButton } from "./atoms/forms/submit-button";
+export { TextArea } from "./atoms/forms/text-area";
 export { TextInput } from "./atoms/forms/text-input";
 export { TextInputIcon } from "./atoms/forms/text-input-icon";