refactor: add sub form wrapper component (#2586)

src/app/components/Form/SubForm.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "testing-library";
+
+import { SubForm } from "./SubForm";
+
+describe("SubForm", () => {
+	it("should render", () => {
+		const { asFragment } = render(
+			<SubForm>
+				<span>Hello</span>
+			</SubForm>,
+		);
+
+		expect(asFragment()).toMatchSnapshot();
+	});
+});

src/app/components/Form/SubForm.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import tw, { css, styled } from "twin.macro";
+
+const SubFormWrapper = styled.div<{ noBackground?: boolean }>`
+	${tw`space-y-8 rounded-lg p-5 -mx-5`}
+	${({ noBackground }) =>
+		!noBackground &&
+		css`
+			& {
+				background-color: var(--theme-color-neutral-100);
+			}
+		`};
+`;
+
+export const SubForm = ({
+	className,
+	children,
+	noBackground,
+}: {
+	className?: string;
+	children: React.ReactNode;
+	noBackground?: boolean;
+}) => (
+	<SubFormWrapper className={className} noBackground={!!noBackground}>
+		{children}
+	</SubFormWrapper>
+);

src/app/components/Form/__snapshots__/SubForm.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubForm should render 1`] = `
+<DocumentFragment>
+  <div
+    class="SubForm__SubFormWrapper-c4tqfs-0 jZidsI"
+  >
+    <span>
+      Hello
+    </span>
+  </div>
+</DocumentFragment>
+`;

src/app/components/Form/index.tsx

@@ -2,3 +2,4 @@ export * from "./Form";
 export * from "./FormField";
 export * from "./FormLabel";
 export * from "./FormHelperText";
+export * from "./SubForm";

src/domains/contact/components/ContactForm/ContactForm.tsx

@@ -2,7 +2,7 @@ import { Contact, ContactAddress, NetworkData } from "@arkecosystem/platform-sdk
 import { Address } from "app/components/Address";
 import { Avatar } from "app/components/Avatar";
 import { Button } from "app/components/Button";
-import { Form, FormField, FormHelperText, FormLabel } from "app/components/Form";
+import { Form, FormField, FormHelperText, FormLabel, SubForm } from "app/components/Form";
 import { Icon } from "app/components/Icon";
 import { Input } from "app/components/Input";
 import { NetworkIcon } from "domains/network/components/NetworkIcon";
@@ -144,29 +144,31 @@ export const ContactForm = ({ contact, networks, onCancel, onDelete, onSave }: C
 				<FormHelperText />
 			</FormField>
 
-			<FormField name="network">
-				<FormLabel>{t("CONTACTS.CONTACT_FORM.NETWORK")}</FormLabel>
-				<SelectNetwork id="ContactForm__network" networks={networks} onSelect={handleSelectNetwork} />
-				<FormHelperText />
-			</FormField>
+			<SubForm>
+				<FormField name="network">
+					<FormLabel>{t("CONTACTS.CONTACT_FORM.NETWORK")}</FormLabel>
+					<SelectNetwork id="ContactForm__network" networks={networks} onSelect={handleSelectNetwork} />
+					<FormHelperText />
+				</FormField>
 
-			<FormField name="address">
-				<FormLabel>{t("CONTACTS.CONTACT_FORM.ADDRESS")}</FormLabel>
-				<Input data-testid="contact-form__address-input" ref={form.register({})} />
-				<FormHelperText />
-			</FormField>
+				<FormField name="address">
+					<FormLabel>{t("CONTACTS.CONTACT_FORM.ADDRESS")}</FormLabel>
+					<Input data-testid="contact-form__address-input" ref={form.register({})} />
+					<FormHelperText />
+				</FormField>
 
-			<div className="mt-4">
-				<Button
-					data-testid="contact-form__add-address-btn"
-					variant="plain"
-					className="w-full"
-					disabled={!network || !address}
-					onClick={handleAddAddress}
-				>
-					{t("CONTACTS.CONTACT_FORM.ADD_ADDRESS")}
-				</Button>
-			</div>
+				<div className="mt-4">
+					<Button
+						data-testid="contact-form__add-address-btn"
+						variant="plain"
+						className="w-full"
+						disabled={!network || !address}
+						onClick={handleAddAddress}
+					>
+						{t("CONTACTS.CONTACT_FORM.ADD_ADDRESS")}
+					</Button>
+				</div>
+			</SubForm>
 
 			{addresses && addresses.length > 0 && <AddressList addresses={addresses} onRemove={handleRemoveAddress} />}