Adds Theme Overview content block

.gitignore

@@ -255,3 +255,7 @@ schema.graphql
 /.husky
 
 api/.claude/
+
+*.pdf
+
+ui/.claude/worktrees/

api/package.json

@@ -45,7 +45,7 @@
     "@smithy/protocol-http": "4.1.8",
     "@smithy/signature-v4": "4.2.4",
     "@studiohyperdrive/pagination": "1.0.0",
-    "@viaa/avo2-types": "5.0.18",
+    "@viaa/avo2-types": "5.0.19",
     "app-root-path": "3.0.0",
     "blend-promise-utils": "^1.28.0",
     "cache-manager": "5.2.3",

ui/package.json

@@ -76,11 +76,11 @@
     "@emotion/react": "11.14.0",
     "@floating-ui/react": "0.27.18",
     "@hookform/resolvers": "2.9.11",
-    "@meemoo/react-components": "6.0.7",
+    "@meemoo/react-components": "6.0.8",
     "@studiohyperdrive/pagination": "1.0.0",
     "@tanstack/react-query": "5.99.0",
-    "@viaa/avo2-components": "7.0.1",
-    "@viaa/avo2-types": "5.0.18",
+    "@viaa/avo2-components": "7.0.2",
+    "@viaa/avo2-types": "5.0.19",
     "autosize": "6.0.1",
     "blend-promise-utils": "1.29.2",
     "caniuse-lite": "1.0.30001712",

ui/src/client.ts

@@ -19,6 +19,7 @@ export { BlockIntro } from '~content-blocks/BlockIntro';
 export { BlockKlaar } from '~content-blocks/BlockKlaar';
 export { BlockMaintainersGrid } from '~content-blocks/BlockMaintainersGrid';
 export { BlockOverviewNewspaperTitles } from '~content-blocks/BlockOverviewNewspaperTitles';
+export { BlockOverviewThemes } from '~content-blocks/BlockOverviewThemes';
 export { BlockOverviewWithCarousel } from '~content-blocks/BlockOverviewWithCarousel';
 export { BlockPageOverviewWrapper } from '~content-blocks/BlockPageOverview/BlockPageOverview.wrapper';
 export { BlockQuote } from '~content-blocks/BlockQuote';

ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.const.tsx

@@ -22,6 +22,7 @@ import { BlockIntro } from '~content-blocks/BlockIntro';
 import { BlockKlaar } from '~content-blocks/BlockKlaar';
 import { BlockMaintainersGrid } from '~content-blocks/BlockMaintainersGrid';
 import { BlockOverviewNewspaperTitles } from '~content-blocks/BlockOverviewNewspaperTitles';
+import { BlockOverviewThemes } from '~content-blocks/BlockOverviewThemes/BlockOverviewThemes.tsx';
 import { BlockOverviewWithCarousel } from '~content-blocks/BlockOverviewWithCarousel/BlockOverviewWithCarousel.tsx';
 import { BlockPageOverviewWrapper } from '~content-blocks/BlockPageOverview';
 import { BlockQuote } from '~content-blocks/BlockQuote';
@@ -87,6 +88,7 @@ export function GET_BLOCK_COMPONENT(
 		[ContentBlockType.Breadcrumbs]: BlockBreadcrumbs,
 		[ContentBlockType.HetArchiefImageTextBackground]: BlockHetArchiefImageTextBackground,
 		[ContentBlockType.OverviewWithCarousel]: BlockOverviewWithCarousel,
+		[ContentBlockType.OverviewThemes]: BlockOverviewThemes,
 
 		// Avo specific blocks
 		[ContentBlockType.MediaGrid]: loadComponentFromConfig(ContentBlockType.MediaGrid),
@@ -111,6 +113,7 @@ export const REPEATABLE_CONTENT_BLOCKS = [
 	ContentBlockType.ThreeClickableTiles,
 	ContentBlockType.TagsWithLink,
 	ContentBlockType.CardsWithoutDescription,
+	ContentBlockType.OverviewThemes,
 	// ContentBlockType.ContentEncloseGrid,
 ];
 

ui/src/react-admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.scss

@@ -40,6 +40,10 @@
   }
 }
 
+.c-content-block-preview {
+	overflow-x: hidden;
+}
+
 .c-content-block-preview--dark {
   // Here you can overwrite styles on content-blocks for previews with a dark background
   .c-block-media-list {

ui/src/react-admin/modules/content-page/components/FieldGenerator/FieldGenerator.tsx

@@ -142,6 +142,13 @@ export const FieldGenerator: FunctionComponent<FieldGeneratorProps> = ({
 				<>
 					{/* biome-ignore lint/suspicious/noExplicitAny: todo */}
 					{currentState.map((innerState: any, index: number) => {
+						const fieldId = `${fieldKey}-${index}`;
+						const defaultProps = {
+							...field.editorProps,
+							editorId: fieldId,
+							name: fieldId,
+						};
+
 						// biome-ignore lint/suspicious/noExplicitAny: todo
 						const editorProps: any = generateFieldAttributes(
 							field as ContentBlockField,
@@ -151,29 +158,35 @@ export const FieldGenerator: FunctionComponent<FieldGeneratorProps> = ({
 							},
 							// biome-ignore lint/suspicious/noExplicitAny: todo
 							innerState as any,
-							`${fieldKey}-${index}`,
+							fieldId,
 							fieldKey,
 							currentState
 						);
 
 						return (
 							// biome-ignore lint/suspicious/noArrayIndexKey: We don't have a better key at this time
 							<Spacer margin="top" key={`${fieldKey}-${index}`}>
-								<Flex justify="between" center orientation="vertical">
-									<FlexItem>
-										<FormGroup label={`${field.label} ${index + 1}`}>
-											<Spacer margin="top-small">
-												<EditorComponent {...editorProps} />
-											</Spacer>
-											{renderNote(field)}
-										</FormGroup>
-									</FlexItem>
-									{currentState.length > 1 && (
-										<Spacer margin="left">
-											{renderDeleteButton(currentState, field?.repeat?.deleteButtonLabel, index)}
-										</Spacer>
+								{/*<Flex justify="between" center orientation="vertical">*/}
+								{/*	/!* `center` + `orientation="vertical"` renders as flex-direction: column with*/}
+								{/*	align-items: center, which centers this item at its content width instead of*/}
+								{/*	stretching it — force it to take the full row width regardless. *!/*/}
+								{/*	<FlexItem style={{ alignSelf: 'stretch', width: '100%' }}>*/}
+								<FormGroup label={`${field.label} ${index + 1}`}>
+									<Spacer margin="top-small">
+										<EditorComponent {...defaultProps} {...editorProps} />
+									</Spacer>
+									{renderNote(field)}
+								</FormGroup>
+								{/*</FlexItem>*/}
+								{currentState.length > 1 &&
+									renderDeleteButton(
+										currentState,
+										field?.repeat?.deleteButtonLabel,
+										index,
+										'u-align-right'
 									)}
-								</Flex>
+
+								{/*</Flex>*/}
 							</Spacer>
 						);
 					})}
@@ -249,7 +262,8 @@ export const FieldGenerator: FunctionComponent<FieldGeneratorProps> = ({
 		// biome-ignore lint/suspicious/noExplicitAny: todo
 		stateCopy: any,
 		label?: string,
-		index?: number
+		index?: number,
+		className?: string
 	) => {
 		// biome-ignore lint/suspicious/noExplicitAny: todo
 		const handleFieldDelete = (index: any) => {
@@ -268,6 +282,7 @@ export const FieldGenerator: FunctionComponent<FieldGeneratorProps> = ({
 				title={label}
 				ariaLabel={label}
 				type="danger"
+				className={className}
 			/>
 		);
 	};

ui/src/react-admin/modules/content-page/components/blocks/BlockOverviewThemes/BlockOverviewThemes.editorconfig.ts

@@ -0,0 +1,119 @@
+import { AvoCoreContentPickerType } from '@viaa/avo2-types';
+import { BLOCK_FIELD_DEFAULTS, BLOCK_STATE_DEFAULTS, TEXT_FIELD } from '~content-blocks/defaults';
+import { GET_FULL_HEADING_TYPE_OPTIONS } from '~modules/content-page/const/get-heading-type-options';
+import {
+	type ContentBlockConfig,
+	ContentBlockEditor,
+	ContentBlockType,
+	type DefaultContentBlockState,
+} from '~modules/content-page/types/content-block.types';
+import { tText } from '~shared/helpers/translation-functions';
+import { validateRequiredValue } from '~shared/helpers/validation';
+import { HET_ARCHIEF } from '~shared/types';
+
+const INITIAL_OVERVIEW_THEMES_THEME_STATE = () => ({
+	label: '',
+	type: AvoCoreContentPickerType.IE_OBJECT_THEME,
+	value: '',
+});
+
+const INITIAL_OVERVIEW_THEMES_GROUP_STATE = () => ({
+	title: '',
+	titleType: 'h2',
+	themes: [INITIAL_OVERVIEW_THEMES_THEME_STATE()],
+});
+
+// `components.state` for a repeatable block must be an array: the editor pushes/splices entries
+// into it directly (see content-edit.reducer.ts), and `ContentBlockRenderer` passes it straight
+// through as the `elements` prop.
+export const INITIAL_OVERVIEW_THEMES_COMPONENTS_STATE = () => [INITIAL_OVERVIEW_THEMES_GROUP_STATE()];
+
+export const INITIAL_OVERVIEW_THEMES_BLOCK_STATE = (): DefaultContentBlockState =>
+	BLOCK_STATE_DEFAULTS();
+
+export const OVERVIEW_THEMES_BLOCK_CONFIG = (position = 0): ContentBlockConfig => ({
+	position,
+	name: tText('modules/content-page/const/get-content-block-type-options___overzicht-themas', {}, [
+		HET_ARCHIEF,
+	]),
+	type: ContentBlockType.OverviewThemes,
+	components: {
+		name: tText(
+			'modules/content-page/components/blocks/block-overview-themes/block-overview-themes___themagroep',
+			{},
+			[HET_ARCHIEF]
+		),
+		limits: {
+			min: 1,
+		},
+		state: INITIAL_OVERVIEW_THEMES_COMPONENTS_STATE(),
+		fields: {
+			title: TEXT_FIELD(
+				{
+					label: tText(
+						'modules/content-page/components/blocks/block-overview-themes/block-overview-themes___titel',
+						{},
+						[HET_ARCHIEF]
+					),
+				},
+				tText(
+					'modules/content-page/components/blocks/block-overview-themes/block-overview-themes___titel-is-verplicht',
+					{},
+					[HET_ARCHIEF]
+				)
+			),
+			titleType: {
+				label: tText(
+					'modules/content-page/components/blocks/block-overview-themes/block-overview-themes___titel-type',
+					{},
+					[HET_ARCHIEF]
+				),
+				editorType: ContentBlockEditor.Select,
+				editorProps: {
+					options: GET_FULL_HEADING_TYPE_OPTIONS(),
+				},
+				validator: (value: string) =>
+					validateRequiredValue(
+						value,
+						tText(
+							'modules/content-page/components/blocks/block-overview-themes/block-overview-themes___titel-type-is-verplicht',
+							{},
+							[HET_ARCHIEF]
+						)
+					),
+			},
+			themes: {
+				label: tText(
+					'modules/content-page/components/blocks/block-overview-themes/block-overview-themes___thema',
+					{},
+					[HET_ARCHIEF]
+				),
+				editorType: ContentBlockEditor.ContentPicker,
+				editorProps: {
+					allowedTypes: [AvoCoreContentPickerType.IE_OBJECT_THEME],
+					hideTypeDropdown: true,
+					hideTargetSwitch: true,
+				},
+				repeat: {
+					defaultState: INITIAL_OVERVIEW_THEMES_THEME_STATE(),
+					addButtonLabel: tText(
+						'modules/content-page/components/blocks/block-overview-themes/block-overview-themes___voeg-thema-toe',
+						{},
+						[HET_ARCHIEF]
+					),
+					deleteButtonLabel: tText(
+						'modules/content-page/components/blocks/block-overview-themes/block-overview-themes___verwijder-thema',
+						{},
+						[HET_ARCHIEF]
+					),
+				},
+			},
+		},
+	},
+	block: {
+		state: INITIAL_OVERVIEW_THEMES_BLOCK_STATE(),
+		fields: {
+			...BLOCK_FIELD_DEFAULTS(),
+		},
+	},
+});