DataViews: enable all layouts for combined fields storybook (#65082)

WordPress · Sep 5, 2024 · 05a12eb · 05a12eb
1 parent 1d2f175
commit 05a12eb
Showing 1 changed file with 32 additions and 17 deletions.
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.tsx b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -17,7 +17,7 @@ import {
 } from './fixtures';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
 import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
-import type { View } from '../../../types';
+import type { CombinedField, View } from '../../../types';
 
 import './style.css';
 
@@ -134,24 +134,39 @@ export const FieldsNoSortableNoHidable = () => {
 };
 
 export const CombinedFields = () => {
-	const [ view, setView ] = useState< View >( {
-		...DEFAULT_VIEW,
-		fields: [ 'theme', 'requires', 'tested' ],
-		layout: {
-			combinedFields: [
-				{
-					id: 'theme',
-					label: 'Theme',
-					children: [ 'name', 'description' ],
-					direction: 'vertical',
-				},
-			],
-			styles: {
-				theme: {
-					maxWidth: 300,
+	const defaultLayoutsThemes = {
+		table: {
+			fields: [ 'theme', 'requires', 'tested' ],
+			layout: {
+				primaryField: 'name',
+				combinedFields: [
+					{
+						id: 'theme',
+						label: 'Theme',
+						children: [ 'name', 'description' ],
+						direction: 'vertical',
+					},
+				] as CombinedField[],
+				styles: {
+					theme: {
+						maxWidth: 300,
+					},
 				},
 			},
 		},
+		grid: {
+			fields: [ 'description', 'requires', 'tested' ],
+			layout: { primaryField: 'name', columnFields: [ 'description' ] },
+		},
+		list: {
+			fields: [ 'requires', 'tested' ],
+			layout: { primaryField: 'name' },
+		},
+	};
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: defaultLayoutsThemes.table.fields,
+		layout: defaultLayoutsThemes.table.layout,
 	} );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( themeData, view, themeFields );
@@ -165,7 +180,7 @@ export const CombinedFields = () => {
 			view={ view }
 			fields={ themeFields }
 			onChangeView={ setView }
-			defaultLayouts={ { table: {} } }
+			defaultLayouts={ defaultLayoutsThemes }
 		/>
 	);
 };