Add FormSection component (#34348)

* Add FormSection component

* Add changelog entry

* Move card styling outside component

* Add readme

* Allow JSX elements for title and description

* Fix lint errors

packages/js/components/changelog/add-section-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add FormSection component

packages/js/components/src/form-section/README.md

@@ -0,0 +1,27 @@
+FormSection
+===
+
+A layout wrapper to help align form title, description, and fields.
+
+## Usage
+
+```jsx
+<FormSection
+    title="My form section"
+    description="Some text to describe what this section covers"
+>
+    <Card>
+        <CardBody>
+            My form fields
+        </CardBody>
+    </Card>
+</FormSection>
+```
+
+### Props
+
+Name | Type | Default | Description
+--- | --- | --- | ---
+`children` | JSX.Element | JSX.Element[] | `undefined` | The children to be rendered content area of the form section.
+`description` | String | `undefined` | The description to be used beneath the section title.
+`title` | String | `undefined` | The title of the form section.

packages/js/components/src/form-section/form-section.scss

@@ -0,0 +1,27 @@
+.woocommerce-form-section {
+	display: grid;
+	grid-template-columns: 32% auto;
+	gap: $gap-large;
+
+    &__title {
+        margin-bottom: $gap-small;
+        display: flex;
+        align-items: center;
+    }
+
+    &__description {
+        &>*:first-child {
+            margin-top: 0;
+        }
+    }
+
+	&__content {
+        .components-card {
+            margin-bottom: $gap;
+        }
+
+		> * {
+			width: 100%;
+		}
+	}
+}

packages/js/components/src/form-section/form-section.tsx

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+type FormSectionProps = {
+	title: JSX.Element | string;
+	description: JSX.Element | string;
+};
+
+export const FormSection: React.FC< FormSectionProps > = ( {
+	title,
+	description,
+	children,
+} ) => {
+	return (
+		<div className="woocommerce-form-section">
+			<div className="woocommerce-form-section__header">
+				<h3 className="woocommerce-form-section__title">{ title }</h3>
+				<div className="woocommerce-form-section__description">
+					{ description }
+				</div>
+			</div>
+			<div className="woocommerce-form-section__content">
+				{ children }
+			</div>
+		</div>
+	);
+};

packages/js/components/src/form-section/index.ts

@@ -0,0 +1 @@
+export * from './form-section';

packages/js/components/src/form-section/stories/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { Button, Card, CardBody, TextControl } from '@wordpress/components';
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FormSection } from '../';
+import Pill from '../../pill';
+
+export const Basic: React.FC = () => {
+	return (
+		<FormSection
+			title="My form section"
+			description="Some text to describe what this section covers"
+		>
+			<Card>
+				<CardBody>
+					<TextControl
+						label="My first field"
+						onChange={ () => {} }
+						value=""
+					/>
+					<TextControl
+						label="My second field"
+						onChange={ () => {} }
+						value=""
+					/>
+				</CardBody>
+			</Card>
+
+			<Card>
+				<CardBody>
+					<TextControl
+						label="My third field"
+						onChange={ () => {} }
+						value=""
+					/>
+				</CardBody>
+			</Card>
+		</FormSection>
+	);
+};
+
+export const CustomElements: React.FC = () => {
+	return (
+		<FormSection
+			title={
+				<>
+					Custom elements <Pill>Cool</Pill>
+				</>
+			}
+			description={
+				<>
+					<p>Some text to describe what this section covers</p>
+					<Button variant="link">Read more</Button>
+				</>
+			}
+		>
+			<Card>
+				<CardBody>
+					<TextControl
+						label="My first field"
+						onChange={ () => {} }
+						value=""
+					/>
+					<TextControl
+						label="My second field"
+						onChange={ () => {} }
+						value=""
+					/>
+				</CardBody>
+			</Card>
+		</FormSection>
+	);
+};
+
+export default {
+	title: 'WooCommerce Admin/components/FormSection',
+	component: FormSection,
+};

packages/js/components/src/index.ts

@@ -13,6 +13,7 @@ export { default as EllipsisMenu } from './ellipsis-menu';
 export { default as EmptyContent } from './empty-content';
 export { default as Flag } from './flag';
 export { Form, useFormContext } from './form';
+export { FormSection } from './form-section';
 export type { FormContext, FormRef } from './form';
 export { default as FilterPicker } from './filter-picker';
 export { H, Section } from './section';

packages/js/components/src/style.scss

@@ -20,6 +20,7 @@
 @import 'filter-picker/style.scss';
 @import 'filters/style.scss';
 @import 'flag/style.scss';
+@import 'form-section/form-section.scss';
 @import 'image-upload/style.scss';
 @import 'list/style.scss';
 @import 'media-uploader/style.scss';