From 8d46dbdfad2d66870ea7ced54915c285a8da1850 Mon Sep 17 00:00:00 2001
From: Lourens Schep <lourensschep@gmail.com>
Date: Tue, 17 Sep 2024 12:08:01 +0200
Subject: [PATCH] Add storybook example

---
 .../dataform/stories/index.story.tsx          | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
index 7147b9c2342638..183e0d80c666da 100644
--- a/packages/dataviews/src/components/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -7,6 +7,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import DataForm from '../index';
+import type { CombinedFormField } from '../../../types';
 
 const meta = {
 	title: 'DataViews/DataForm',
@@ -76,6 +77,11 @@ const fields = [
 			{ value: 'published', label: 'Published' },
 		],
 	},
+	{
+		id: 'password',
+		label: 'Password',
+		type: 'text' as const,
+	},
 ];
 
 export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
@@ -118,3 +124,44 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 		/>
 	);
 };
+
+export const CombinedFields = ( { type }: { type: 'panel' | 'regular' } ) => {
+	const [ post, setPost ] = useState( {
+		title: 'Hello, World!',
+		order: 2,
+		author: 1,
+		status: 'draft',
+	} );
+
+	const form = {
+		fields: [ 'title', 'status_and_visibility', 'order', 'author' ],
+		layout: {
+			combinedFields: [
+				{
+					id: 'status_and_visibility',
+					label: 'Status & Visibility',
+					children: [ 'status', 'password' ],
+					direction: 'vertical',
+					render: ( { item } ) => item.status,
+				},
+			] as CombinedFormField< any >[],
+		},
+	};
+
+	return (
+		<DataForm
+			data={ post }
+			fields={ fields }
+			form={ {
+				...form,
+				type,
+			} }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};