Skip to content

ARC-3815 Timeline component #386

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bertyhell wants to merge 10 commits into
base: release/v6.0.0
Choose a base branch
from
Open

ARC-3815 Timeline component #386

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
94534b0
feat(ARC-3815): add timeline block
bertyhell Jul 20, 2026
19845e1
feat(ARC-3815): create initial version of timeline block
bertyhell Jul 20, 2026
683fae5
Merge branch 'release/v6.0.0' into feature/ARC-3815-timeline-block
bertyhell Aug 13, 2026
a00fdb6
fix(ARC-3815): init date for timeline
bertyhell Aug 13, 2026
ab971ba
feat(ARC-3815): remove sorting options, improve styling
bertyhell Aug 13, 2026
fcf8ba7
feat(ARC-3815): enhance timeline block styling and player configuration
bertyhell Aug 13, 2026
d934f87
feat(ARC-3815): refactor timeline block for batched IE object fetchin…
bertyhell Aug 13, 2026
015bced
feat(ARC-3815): refactor timeline object rendering and styling
bertyhell Aug 13, 2026
51db676
feat(ARC-3815): enhance timeline block responsive layout and object m…
bertyhell Aug 13, 2026
4f21543
Merge branch 'release/v6.0.0' into feature/ARC-3815-timeline-block
bertyhell Aug 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion ui/src/react-admin/core/config/config.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import type {
} from '~modules/content-page/types/content-pages.types';
import type { App, Locale } from '~modules/translations/translations.core.types';
import type { UserBulkAction } from '~modules/user/user.types';
import type { AudioOrVideoPlayerProps } from '~shared/components/AudioOrVideoPlayer/AudioOrVideoPlayer.types.ts';
import type { FlowPlayerWrapperProps } from '~shared/components/FlowPlayerWrapper/FlowPlayerWrapper.types';

export enum ToastType {
Expand Down Expand Up @@ -116,7 +117,8 @@ export interface AdminConfig {
component: ComponentType | null;
};
defaultAudioStill: string;
flowplayer?: FC<FlowPlayerWrapperProps>;
flowplayer?: FC<FlowPlayerWrapperProps>; // User by avo for
audioOrVideoPlayer?: FC<AudioOrVideoPlayerProps>; // Used by hetarchief for timeline component
buttonTypes: () => { label: string; value: string }[];
enableMultiLanguage: boolean;
};
Expand Down
3 changes: 3 additions & 0 deletions ...admin/modules/content-page/components/ContentBlockRenderer/ContentBlockRenderer.const.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { BlockProjectSpotlightWrapper, BlockSpotlight } from '~content-blocks/Bl
import { BlockTagsWithLink } from '~content-blocks/BlockTagsWithLink';
import { BlockThemeReels } from '~content-blocks/BlockThemeReels';
import { BlockThreeClickableTiles } from '~content-blocks/BlockThreeClickableTiles';
import { BlockTimeline } from '~content-blocks/BlockTimeline';
import { BlockUitgeklaard } from '~content-blocks/BlockUitgeklaard';
import { BlockVideoWrapper } from '~content-blocks/BlockVideo';
import { BlockVideoTitleTextButtonWrapper } from '~content-blocks/BlockVideoTitleTextButton';
Expand Down Expand Up @@ -99,6 +100,7 @@ export function GET_BLOCK_COMPONENT(
[ContentBlockType.HighlightText]: BlockHighlightText,
[ContentBlockType.ThemeReels]: BlockThemeReels,
[ContentBlockType.OverviewThemes]: BlockOverviewThemes,
[ContentBlockType.Timeline]: BlockTimeline,

// Avo specific blocks
[ContentBlockType.MediaGrid]: loadComponentFromConfig(ContentBlockType.MediaGrid),
Expand Down Expand Up @@ -130,6 +132,7 @@ export const REPEATABLE_CONTENT_BLOCKS = [
ContentBlockType.TagsWithLink,
ContentBlockType.CardsWithoutDescription,
ContentBlockType.OverviewThemes,
ContentBlockType.Timeline,
// ContentBlockType.ContentEncloseGrid,
];

Expand Down
2 changes: 1 addition & 1 deletion ui/src/react-admin/modules/content-page/components/blocks/BlockAvoHero/BlockAvoHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const BlockAvoHero: FunctionComponent<BlockAvoHeroProps> = ({
)}
{!!textBelowButtons && (
<Spacer margin="top-large" style={{ color: contentColor }}>
{isString(textBelowButtons) && <Html content={textBelowButtons} type="p"></Html>}
{isString(textBelowButtons) && <Html content={textBelowButtons} type="p" />}
{!isString(textBelowButtons) && textBelowButtons}
Comment thread
bertyhell marked this conversation as resolved.
</Spacer>
)}
Expand Down
251 changes: 251 additions & 0 deletions ...-admin/modules/content-page/components/blocks/BlockTimeline/BlockTimeline.editorconfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,251 @@
import type { CheckboxProps, SelectOption } from '@viaa/avo2-components';
import { GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF } from '~modules/content-page/const/get-color-options';
import type { FileUploadProps } from '~shared/components/FileUpload/FileUpload';
import { tText } from '~shared/helpers/translation-functions';
import { HET_ARCHIEF } from '~shared/types';
import type {
ContentBlockConfig,
ContentBlockField,
TimelineBlockState,
TimelineNodeBlockComponentState,
TimelineNodeVisualType,
} from '../../../types/content-block.types';
import { Color, ContentBlockEditor, ContentBlockType } from '../../../types/content-block.types';

import { BLOCK_FIELD_DEFAULTS, BLOCK_STATE_DEFAULTS, FILE_FIELD, TEXT_FIELD } from '../defaults';

const GET_TIMELINE_NODE_VISUAL_TYPE_OPTIONS = (): SelectOption<TimelineNodeVisualType>[] => [
{
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___geen',
{},
[HET_ARCHIEF]
),
value: 'NONE',
},
{
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___object',
{},
[HET_ARCHIEF]
),
value: 'OBJECT',
},
{
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___afbeelding',
{},
[HET_ARCHIEF]
),
value: 'IMAGE',
},
];

const visualTypeIsObject: ContentBlockField['isVisible'] = (_config, formGroupState) =>
(formGroupState as TimelineNodeBlockComponentState).visualType === 'OBJECT';

const visualTypeIsImage: ContentBlockField['isVisible'] = (_config, formGroupState) =>
(formGroupState as TimelineNodeBlockComponentState).visualType === 'IMAGE';

export const INITIAL_TIMELINE_COMPONENTS_STATE = (): TimelineNodeBlockComponentState[] => [
{
date: '',
title: '',
text: '',
visualType: 'NONE',
mediaItem: undefined,
image: undefined,
imageAlt: '',
imageCaptionCopyright: '',
imageCaptionCopyrightIconVisible: true,
imageCaptionDescription: '',
backgroundColor: Color.Transparent,
},
];

export const INITIAL_TIMELINE_BLOCK_STATE = (): TimelineBlockState => ({
...BLOCK_STATE_DEFAULTS(),
});

export const TIMELINE_BLOCK_CONFIG = (position = 0): ContentBlockConfig => ({
position,
name: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___tijdslijn',
{},
[HET_ARCHIEF]
),
type: ContentBlockType.Timeline,
components: {
name: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___node',
{},
[HET_ARCHIEF]
),
state: INITIAL_TIMELINE_COMPONENTS_STATE(),
fields: {
date: {
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___datum',
{},
[HET_ARCHIEF]
),
editorType: ContentBlockEditor.DatePicker,
validator: (value: string) =>
value
? []
: [
tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___datum-is-verplicht',
{},
[HET_ARCHIEF]
),
],
},
title: TEXT_FIELD(
{
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___titel',
{},
[HET_ARCHIEF]
),
},
tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___titel-is-verplicht',
{},
[HET_ARCHIEF]
)
),
text: TEXT_FIELD({
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___tekst',
{},
[HET_ARCHIEF]
),
editorType: ContentBlockEditor.RICH_TEXT_EDITOR,
validator: undefined,
}),
visualType: {
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___visuele-elementen',
{},
[HET_ARCHIEF]
),
editorType: ContentBlockEditor.Select,
editorProps: {
options: GET_TIMELINE_NODE_VISUAL_TYPE_OPTIONS(),
},
validator: (value: string) =>
value
? []
: [
tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___keuze-van-visuele-elementen-is-verplicht',
{},
[HET_ARCHIEF]
),
],
},
mediaItem: {
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___object-audio-video-of-krant',
{},
[HET_ARCHIEF]
),
editorType: ContentBlockEditor.ContentPicker,
editorProps: {
allowedTypes: ['IE_OBJECT'],
hideTargetSwitch: true,
// Only one type is allowed, so the type dropdown would only ever have a single option
hideTypeDropdown: true,
},
isVisible: visualTypeIsObject,
validator: (value: unknown) =>
value
? []
: [
tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___selecteren-van-een-object-is-verplicht',
{},
[HET_ARCHIEF]
),
],
},
image: FILE_FIELD(
tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___een-afbeelding-is-verplicht',
{},
[HET_ARCHIEF]
),
{
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___afbeelding',
{},
[HET_ARCHIEF]
),
editorProps: {
assetType: 'CONTENT_BLOCK_IMAGE',
allowMulti: false,
showDeleteButton: true,
} as FileUploadProps,
isVisible: visualTypeIsImage,
}
),
imageAlt: TEXT_FIELD({
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___alternatieve-tekst-afbeelding',
{},
[HET_ARCHIEF]
),
validator: undefined,
isVisible: visualTypeIsImage,
}),
imageCaptionCopyright: TEXT_FIELD({
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___bijschrift-copyright',
{},
[HET_ARCHIEF]
),
validator: undefined,
isVisible: visualTypeIsImage,
}),
imageCaptionCopyrightIconVisible: {
editorType: ContentBlockEditor.Checkbox,
editorProps: {
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___copyright-icoon-toevoegen',
{},
[HET_ARCHIEF]
),
} as CheckboxProps,
isVisible: visualTypeIsImage,
},
imageCaptionDescription: TEXT_FIELD({
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___bijschrift-beschrijving',
{},
[HET_ARCHIEF]
),
validator: undefined,
isVisible: visualTypeIsImage,
}),
Comment thread
bertyhell marked this conversation as resolved.
backgroundColor: {
label: tText(
'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___achtergrondkleur-van-de-node',
{},
[HET_ARCHIEF]
),
editorType: ContentBlockEditor.ColorSelect,
editorProps: {
options: GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF(),
defaultValue: GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF()[0],
},
},
},
},
block: {
state: INITIAL_TIMELINE_BLOCK_STATE(),
fields: {
...BLOCK_FIELD_DEFAULTS(),
},
},
});
Loading