From 180cfb13f1951b8f8eca8250c9ca4ae29de5efc4 Mon Sep 17 00:00:00 2001
From: Femke Reunes <femke.reunes@studiohyperdrive.be>
Date: Wed, 16 Sep 2026 10:09:15 +0200
Subject: [PATCH] ARC-3953: add option to hide the date

---
 .../BlockTimeline/BlockTimeline.editorconfig.ts       | 11 ++++++++++-
 .../blocks/BlockTimeline/BlockTimeline.scss           |  1 +
 .../components/blocks/BlockTimeline/BlockTimeline.tsx |  2 +-
 .../modules/content-page/types/content-block.types.ts |  1 +
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.editorconfig.ts b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.editorconfig.ts
index 0cbb3c78..dfc24927 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.editorconfig.ts
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.editorconfig.ts
@@ -1,4 +1,4 @@
-import type { SelectOption } from '@viaa/avo2-components';
+import type { CheckboxProps, SelectOption } from '@viaa/avo2-components';
 import { AvoCoreContentPickerType, AvoSearchOrderDirection } from '@viaa/avo2-types';
 import { GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF } from '~modules/content-page/const/get-color-options';
 import type { FileUploadProps } from '~shared/components/FileUpload/FileUpload';
@@ -80,6 +80,7 @@ const visualTypeIsImage: ContentBlockField['isVisible'] = (_config, formGroupSta
 
 const INITIAL_TIMELINE_NODE_STATE = (): TimelineNodeBlockComponentState => ({
 	date: '',
+	showDate: true,
 	title: '',
 	text: '',
 	visualType: 'NONE',
@@ -148,6 +149,14 @@ export const TIMELINE_BLOCK_CONFIG = (position = 0): ContentBlockConfig => ({
 								)
 							),
 					},
+					showDate: {
+						editorType: ContentBlockEditor.Checkbox,
+						editorProps: {
+							label: tText(
+								'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___toon-datum'
+							),
+						} as CheckboxProps,
+					},
 					title: TEXT_FIELD(
 						{
 							label: tText(
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss
index 990dcbc7..8911f4cc 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.scss
@@ -150,6 +150,7 @@ $object-meta-vertical-padding: variables.$g-spacer-unit * 2;
 
 		@include typography.heading-lg;
 
+		min-height: 2.6rem; // to avoid that an invisible date would case jumping in styling
 		line-height: 2.6rem;
 		color: colors.$color-gray-300;
 	}
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.tsx b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.tsx
index 693815f0..ea169f9d 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.tsx
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.tsx
@@ -278,7 +278,7 @@ export const BlockTimeline: FunctionComponent<BlockTimelineProps> = ({
 						)}
 						aria-hidden="true"
 					/>
-					{formatDateToDayMonthNameYear(node.date, locale)}
+					{node.showDate && formatDateToDayMonthNameYear(node.date, locale)}
 				</time>
 				<div className="c-block-timeline__node-content">
 					<div
diff --git a/ui/src/react-admin/modules/content-page/types/content-block.types.ts b/ui/src/react-admin/modules/content-page/types/content-block.types.ts
index 6634970e..7fde1d27 100644
--- a/ui/src/react-admin/modules/content-page/types/content-block.types.ts
+++ b/ui/src/react-admin/modules/content-page/types/content-block.types.ts
@@ -677,6 +677,7 @@ export interface MediaItemComponentState {
 
 export interface TimelineNodeBlockComponentState extends MediaItemComponentState {
 	date: string;
+	showDate: boolean;
 	title: string;
 	text?: string;
 	visualType: TimelineNodeVisualType;