- {image && (
-
)}
+ {image && (
+
+
+ 
+
+ )}
+
+
+
+
- {title &&
- )}
+ © {title}
} - {text &&{text}
} - [
{
@@ -22,6 +29,7 @@ export const INITIAL_USP_GRID_COMPONENTS_STATE = (): ImageGridBlockComponentStat
title: '',
text: '',
action: undefined,
+ ...COPYRIGHT_STATE(),
} as unknown as ImageGridBlockComponentStateFields,
];
@@ -58,6 +66,7 @@ export const USP_GRID_BLOCK_CONFIG = (position = 0): ContentBlockConfig => ({
} as FileUploadProps,
}
),
+ ...COPYRIGHT_FIELDS(),
title: TEXT_FIELD({
label: tText('admin/content-block/helpers/generators/image-grid___titel'),
}),
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockRichText/BlockRichText.editorconfig.ts b/ui/src/react-admin/modules/content-page/components/blocks/BlockRichText/BlockRichText.editorconfig.ts
index 5afac4a0..3b771479 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockRichText/BlockRichText.editorconfig.ts
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockRichText/BlockRichText.editorconfig.ts
@@ -9,10 +9,17 @@ import type {
} from '../../../types/content-block.types';
import { ContentBlockEditor, ContentBlockType } from '../../../types/content-block.types';
-import { BLOCK_FIELD_DEFAULTS, BLOCK_STATE_DEFAULTS, TEXT_FIELD } from '../defaults';
+import {
+ BLOCK_FIELD_DEFAULTS,
+ BLOCK_STATE_DEFAULTS,
+ COPYRIGHT_FIELDS,
+ COPYRIGHT_STATE,
+ TEXT_FIELD,
+} from '../defaults';
export const INITIAL_RICH_TEXT_COMPONENTS_STATE = (): RichTextBlockComponentState => ({
content: '',
+ ...COPYRIGHT_STATE(),
});
export const INITIAL_RICH_TEXT_BLOCK_STATE = (): DefaultContentBlockState =>
@@ -43,6 +50,7 @@ export const RICH_TEXT_BLOCK_CONFIG = (position = 0): ContentBlockConfig => ({
},
tText('admin/content-block/helpers/generators/rich-text___tekst-is-verplicht')
),
+ ...COPYRIGHT_FIELDS(),
},
},
block: {
diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockRichText/BlockRichText.tsx b/ui/src/react-admin/modules/content-page/components/blocks/BlockRichText/BlockRichText.tsx
index ffcf1ba3..0d88565f 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockRichText/BlockRichText.tsx
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockRichText/BlockRichText.tsx
@@ -17,9 +17,13 @@ import { defaultRenderLinkFunction } from '~shared/helpers/routing/link';
import { SanitizePreset } from '~shared/helpers/sanitize/presets';
import './BlockRichText.scss';
+import { CopyrightAttribution } from '~shared/components/CopyrightAttribution';
interface BlockRichTextElement {
content: string;
+ copyrightTitle?: string;
+ copyrightIconVisible?: boolean;
+ copyrightText?: string;
buttons?: (ButtonProps & { buttonAction: ButtonAction })[];
color?: string;
}
@@ -35,6 +39,9 @@ export const BlockRichText: FunctionComponent = ({
elements = [
{
content: '',
+ copyrightTitle: '',
+ copyrightIconVisible: false,
+ copyrightText: '',
},
],
maxTextWidth,
@@ -69,7 +76,8 @@ export const BlockRichText: FunctionComponent = ({
};
const renderContent = (contentElem: BlockRichTextElement, columnIndex = 0) => {
- const { content, color, buttons } = contentElem;
+ const { content, copyrightTitle, copyrightIconVisible, copyrightText, color, buttons } =
+ contentElem;
return (
<>
@@ -83,6 +91,11 @@ export const BlockRichText: FunctionComponent = ({
}}
type="div"
/>
+ ;
+ };
+ showIcon?: {
+ fieldName?: string;
+ overrides?: Partial;
+ };
+ text?: {
+ fieldName?: string;
+ overrides?: Partial;
+ };
+}): ContentBlockComponentsConfig['fields'] => ({
+ [overrides?.title?.fieldName || 'copyrightTitle']: TEXT_FIELD({
+ label: tText('bijschrift titel'),
+ validator: undefined,
+ ...overrides?.title?.overrides,
+ }),
+ [overrides?.showIcon?.fieldName || 'copyrightIconVisible']: {
+ editorType: ContentBlockEditor.Checkbox,
+ editorProps: {
+ label: tText('Toon bijschrift icoon'),
+ } as CheckboxProps,
+ ...overrides?.showIcon?.overrides,
+ },
+ [overrides?.text?.fieldName || 'copyrightText']: TEXT_FIELD({
+ label: tText('bijschrift beschrijving'),
+ validator: undefined,
+ ...overrides?.text?.overrides,
+ }),
+});
+
+export const COPYRIGHT_STATE = (): CopyrightComponentState => ({
+ copyrightTitle: '',
+ copyrightIconVisible: true,
+ copyrightText: '',
+});
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 b8462c62..e9133974 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
@@ -283,7 +283,14 @@ export interface HeadingBlockComponentState {
align: AlignOption;
}
-export interface ImageBlockComponentState {
+export interface CopyrightComponentState {
+ copyrightTitle: string;
+ copyrightIconVisible: boolean;
+ copyrightText: string;
+}
+
+export interface ImageBlockComponentState
+ extends Omit {
title: string;
text: string;
imageSource: string;
@@ -298,7 +305,7 @@ export interface ImageBlockComponentState {
buttonAlign?: AlignOption;
}
-export interface ImageGridBlockComponentStateFields {
+export interface ImageGridBlockComponentStateFields extends CopyrightComponentState {
source: string;
title?: string;
text?: string;
@@ -331,7 +338,7 @@ export interface ButtonsBlockComponentState {
navigate?: (buttonAction: ButtonAction) => void;
}
-export interface RichTextBlockComponentState {
+export interface RichTextBlockComponentState extends CopyrightComponentState {
content: string;
buttons?: ButtonsBlockComponentState[];
}
@@ -559,7 +566,7 @@ export interface AvoImageTextBackgroundBlockComponentState {
buttonIconAlignment?: SimpleAlignOption;
}
-export interface HetArchiefImageTextBackgroundBlockComponentState {
+export interface HetArchiefImageTextBackgroundBlockComponentState extends CopyrightComponentState {
heading: string;
headingType: HeadingTypeOption;
headingSize: HeadingSizeOption;
diff --git a/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss
new file mode 100644
index 00000000..da5fab27
--- /dev/null
+++ b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.scss
@@ -0,0 +1,22 @@
+@use "../../styles/settings/colors" as colors;
+@use "../../styles/mixins/typography" as typography;
+
+.a-copyright-attribution {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ &__annotation {
+ color: colors.$neutral;
+ @include typography.sofia-pro-body-sm(true);
+ font-size: 1.4rem;
+ line-height: 2rem;
+ }
+
+ &__text {
+ color: colors.$color-gray-1000;
+ @include typography.sofia-pro-body-sm(true);
+ font-size: 1.4rem;
+ line-height: 2rem;
+ }
+}
diff --git a/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.tsx b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.tsx
new file mode 100644
index 00000000..31bed498
--- /dev/null
+++ b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/CopyrightAttribution.tsx
@@ -0,0 +1,42 @@
+import type { DefaultProps } from '@viaa/avo2-components';
+import type { FunctionComponent } from 'react';
+import React from 'react';
+
+import './CopyrightAttribution.scss';
+import clsx from 'clsx';
+
+export interface CopyrightAttributionProps extends DefaultProps {
+ title?: string;
+ showIcon?: boolean;
+ text?: string;
+}
+
+export const CopyrightAttribution: FunctionComponent = ({
+ className,
+ title = '',
+ showIcon = false,
+ text = '',
+}) => {
+ if (!title && !text) {
+ return null;
+ }
+
+ const renderTitle = () => {
+ if (!title && !showIcon) {
+ return null;
+ }
+
+ return (
+
+ {showIcon && <>©} {title}
+
+ );
+ };
+
+ return (
+
+ {renderTitle()}
+ {text && {text}}
+
+ );
+};
diff --git a/ui/src/react-admin/modules/shared/components/CopyrightAttribution/index.ts b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/index.ts
new file mode 100644
index 00000000..034f4f4c
--- /dev/null
+++ b/ui/src/react-admin/modules/shared/components/CopyrightAttribution/index.ts
@@ -0,0 +1 @@
+export * from './CopyrightAttribution.tsx';