Added Molecules Form

Author: wintondeshong

src/index.ts

@@ -62,6 +62,7 @@ export { AccessibleList } from "./molecules/accessible-list/accessible-list";
 export { Card } from "./molecules/cards/card";
 export { DropdownButton } from "./molecules/dropdown-button/dropdown-button";
 export { ErrorBanner } from "./molecules/errors/error-banner";
+export { Form } from "./molecules/forms/form";
 
 // Form Fields
 

src/molecules/forms/form.stories.tsx

@@ -0,0 +1,36 @@
+import Faker from "faker";
+import { Form } from "./form";
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import { SubmitButton } from "../../atoms/forms/submit-button";
+
+export default {
+    component: Form,
+    title: "Molecules | Forms / Form",
+};
+
+const renderChildren = () => (
+    <React.Fragment>
+        <div className="c-form-field">
+            <label>
+                {Faker.hacker.noun()}
+                <input type="text"></input>
+            </label>
+        </div>
+
+        <SubmitButton />
+    </React.Fragment>
+);
+
+export const formDefault = () => (
+    <Form onSubmit={() => alert("form submitted")}>{renderChildren()}</Form>
+);
+
+export const formKnobs = () => (
+    <Form
+        buttonText={text("buttonText", "Submit")}
+        cssClassName={text("cssClassName", "c-form")}
+        onSubmit={() => alert("Form Submitted")}>
+        {renderChildren()}
+    </Form>
+);

src/molecules/forms/form.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Form } from "./form";
+import faker from "faker";
+
+describe("Form", () => {
+    test("when default props, renders children", () => {
+        // Arrange
+        const expected = faker.random.words();
+
+        // Act
+        const { getByText } = render(
+            <Form onSubmit={() => {}}>{expected}</Form>
+        );
+
+        // Assert
+        expect(getByText(expected)).not.toBeNull();
+    });
+});

src/molecules/forms/form.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { PropsWithChildren } from "react";
+
+const COMPONENT_CLASS = "c-form";
+
+interface FormProps {
+    action?: string;
+    buttonText?: string;
+    cssClassName?: string;
+    id?: string;
+    method?: string;
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+const Form: React.FC<FormProps> = (props: PropsWithChildren<FormProps>) => (
+    <form
+        action={props.action}
+        className={props.cssClassName ?? COMPONENT_CLASS}
+        id={props.id}
+        method={props.method}
+        onSubmit={props.onSubmit}>
+        {props.children}
+    </form>
+);
+
+export { Form };