diff --git a/site/features/contextual.html b/site/features/contextual.html
index a5129418..43fa9261 100644
--- a/site/features/contextual.html
+++ b/site/features/contextual.html
@@ -39,7 +39,11 @@
purposes: [
{
id: 'youtube',
- title: 'YouTube'
+ title: 'YouTube videos'
+ },
+ {
+ id: 'other',
+ title: 'Another purpose'
}
],
privacyPolicyUrl: '#'
diff --git a/src/ui/components/types/ContextualNotice.ts b/src/ui/components/types/ContextualNotice.ts
index 3a19e0d2..6512eaea 100644
--- a/src/ui/components/types/ContextualNotice.ts
+++ b/src/ui/components/types/ContextualNotice.ts
@@ -1,14 +1,18 @@
import {FunctionComponent} from 'preact';
import {Purpose} from '../../types';
-export type ContextualNoticeOptions = Record;
+export interface ContextualNoticeOptions extends Record {
+ titleLevel?: '1' | '2' | '3' | '4' | '5' | '6';
+}
-export interface ContextualNoticeProps {
+export interface ContextualNoticeProps<
+ Data extends ContextualNoticeOptions
+> {
purpose: Purpose;
data: Data;
onAccept: () => void;
}
export type ContextualNoticeComponent<
- Data extends ContextualNoticeOptions
+ Data extends ContextualNoticeOptions = ContextualNoticeOptions
> = FunctionComponent>;
diff --git a/src/ui/themes/dsfr/ContextualNotice.tsx b/src/ui/themes/dsfr/ContextualNotice.tsx
index 15c7f1b5..cc2a35c5 100644
--- a/src/ui/themes/dsfr/ContextualNotice.tsx
+++ b/src/ui/themes/dsfr/ContextualNotice.tsx
@@ -5,18 +5,17 @@ import type {
} from '../../components/types/ContextualNotice';
import {template} from '../../utils/template';
-interface DsfrContextualNoticeData extends ContextualNoticeOptions {
- titleLevel?: string;
-}
-
-const ContextualNotice: ContextualNoticeComponent = ({
+const ContextualNotice: ContextualNoticeComponent = ({
purpose,
data,
onAccept
}) => {
const t = useTranslations();
const {titleLevel} = data;
- const TitleTag = titleLevel ? `h${titleLevel}` : 'h4';
+ const TitleTag: `h${ContextualNoticeOptions['titleLevel']}` = titleLevel
+ ? `h${titleLevel}`
+ : 'h4';
+
const templateProps = {
purpose: purpose.title
};
diff --git a/src/ui/themes/standard/ContextualNotice.tsx b/src/ui/themes/standard/ContextualNotice.tsx
index 586cb2e6..fa5c08fd 100644
--- a/src/ui/themes/standard/ContextualNotice.tsx
+++ b/src/ui/themes/standard/ContextualNotice.tsx
@@ -5,18 +5,16 @@ import type {
} from '../../components/types/ContextualNotice';
import {template} from '../../utils/template';
-interface StandardContextualNoticeOptions extends ContextualNoticeOptions {
- titleLevel?: string;
-}
-
-const ContextualNotice: ContextualNoticeComponent = ({
+const ContextualNotice: ContextualNoticeComponent = ({
purpose,
data,
onAccept
}) => {
const t = useTranslations();
const {titleLevel} = data;
- const TitleTag = titleLevel ? `h${data.titleLevel}` : 'h2';
+ const TitleTag:
+ | `h${ContextualNoticeOptions['titleLevel']}`
+ | 'strong' = titleLevel ? `h${titleLevel}` : 'strong';
const templateProps = {
purpose: purpose.title
};