Improved contextual notice's title configuration

A default level is now configurable.
On both themes, the default title level is now `h6`.
@see #152

Also, we're not passing an abstract set of options around anymore. We're
parsing and validating them as to have them properly typed.

Author: felixgirault

README.md

@@ -254,6 +254,13 @@ var orejimeConfig = {
     // [optional]
     // You can provide a custom function to unserialize the cookie contents.
     parse: (cookie) => JSON.parse(cookie)
+  },
+
+  // [optional]
+  contextual: {
+    // [optional]
+    // The default level of the consent notice title.
+    defaultTitleLevel: 6
   }
 };
 ```
@@ -439,6 +446,9 @@ the `template`:
   </template>
 ```
 
+When not specified, it will default to `6`, or the level set within
+`orejimeConfig.contextual.defaultTitleLevel`.
+
 <details>
 <summary>Integration tips</summary>
 

src/ui/ContextualConsentsEffect.tsx

@@ -1,10 +1,11 @@
 import {render} from 'preact';
 import {ConsentsMap} from '../core/types';
 import Manager from '../core/Manager';
-import {Config} from './types';
+import {Config, TitleLevel} from './types';
 import Context from './components/Context';
 import ContextualNoticeContainer from './components/ContextualNoticeContainer';
 import ConsentsEffect from '../core/ConsentsEffect';
+import {clamp} from './utils/numbers';
 
 export default class ContextualConsentsEffect implements ConsentsEffect {
 	readonly #config: Config;
@@ -36,15 +37,27 @@ export default class ContextualConsentsEffect implements ConsentsEffect {
 				}}
 			>
 				<ContextualNoticeContainer
-					purposeId={template.dataset.purpose}
-					data={{...template.dataset}}
+					{...this.#parseNoticeData(template.dataset)}
 					isEnabled={isEnabled}
 				/>
 			</Context.Provider>,
 			this.#getNoticeContainer(template)
 		);
 	}
 
+	#parseNoticeData(data: DOMStringMap) {
+		return {
+			purposeId: data.purpose,
+			titleLevel: clamp(
+				parseInt(data.titleLevel, 10)
+					|| this.#config?.contextual?.defaultTitleLevel
+					|| 6,
+				1,
+				6
+			) as TitleLevel
+		};
+	}
+
 	#getNoticeContainer(template: HTMLTemplateElement) {
 		if (!this.#containers.has(template)) {
 			const container = document.createElement('div');

src/ui/components/ContextualNoticeContainer.tsx

@@ -2,17 +2,17 @@ import {useState} from 'preact/hooks';
 import {purposesOnly} from '../utils/config';
 import {useConfig, useManager, useTheme, useTranslations} from '../utils/hooks';
 import {template} from '../utils/template';
-import {Purpose} from '../types';
+import {Purpose, TitleLevel} from '../types';
 
 interface ContextualNoticeContainerProps {
 	purposeId: Purpose['id'];
-	data: Record<string, string>;
+	titleLevel: TitleLevel;
 	isEnabled: boolean;
 }
 
 const ContextualNoticeContainer = ({
 	purposeId,
-	data,
+	titleLevel,
 	isEnabled
 }: ContextualNoticeContainerProps) => {
 	const config = useConfig();
@@ -45,7 +45,7 @@ const ContextualNoticeContainer = ({
 			{isEnabled ? (
 				<ContextualNotice
 					purpose={purpose}
-					data={data}
+					titleLevel={titleLevel}
 					privacyPolicyUrl={config.privacyPolicyUrl}
 					onAccept={() => {
 						manager.setConsent(purpose.id, true);

src/ui/components/types/ContextualNotice.ts

@@ -1,17 +1,12 @@
 import {FunctionComponent} from 'preact';
-import {Purpose} from '../../types';
+import {Purpose, TitleLevel} from '../../types';
 
-export interface ContextualNoticeOptions extends Record<string, string> {
-	titleLevel?: '1' | '2' | '3' | '4' | '5' | '6';
-}
-
-export interface ContextualNoticeProps<Data extends ContextualNoticeOptions> {
+export interface ContextualNoticeProps {
 	purpose: Purpose;
-	data: Data;
+	titleLevel: TitleLevel;
 	privacyPolicyUrl: string;
 	onAccept: () => void;
 }
 
-export type ContextualNoticeComponent<
-	Data extends ContextualNoticeOptions = ContextualNoticeOptions
-> = FunctionComponent<ContextualNoticeProps<Data>>;
+export type ContextualNoticeComponent =
+	FunctionComponent<ContextualNoticeProps>;

src/ui/themes/dsfr/ContextualNotice.tsx

@@ -1,21 +1,14 @@
 import {useTranslations} from '../../utils/hooks';
-import type {
-	ContextualNoticeComponent,
-	ContextualNoticeOptions
-} from '../../components/types/ContextualNotice';
+import type {ContextualNoticeComponent} from '../../components/types/ContextualNotice';
 import {template} from '../../utils/template';
 
 const ContextualNotice: ContextualNoticeComponent = ({
 	purpose,
-	data,
+	titleLevel,
 	onAccept
 }) => {
 	const t = useTranslations();
-	const {titleLevel} = data;
-	const TitleTag: `h${ContextualNoticeOptions['titleLevel']}` = titleLevel
-		? `h${titleLevel}`
-		: 'h4';
-
+	const TitleTag: `h${typeof titleLevel}` = `h${titleLevel}`;
 	const templateProps = {
 		purpose: purpose.title
 	};

src/ui/themes/standard/ContextualNotice.tsx

@@ -1,20 +1,15 @@
 import {useTranslations} from '../../utils/hooks';
-import type {
-	ContextualNoticeComponent,
-	ContextualNoticeOptions
-} from '../../components/types/ContextualNotice';
+import type {ContextualNoticeComponent} from '../../components/types/ContextualNotice';
 import {template} from '../../utils/template';
 
 const ContextualNotice: ContextualNoticeComponent = ({
 	purpose,
-	data,
+	titleLevel,
 	onAccept,
 	privacyPolicyUrl
 }) => {
 	const t = useTranslations();
-	const {titleLevel} = data;
-	const TitleTag: `h${ContextualNoticeOptions['titleLevel']}` | 'strong' =
-		titleLevel ? `h${titleLevel}` : 'strong';
+	const TitleTag: `h${typeof titleLevel}` = `h${titleLevel}`;
 	const templateProps = {
 		purpose: purpose.title,
 		privacyPolicy: (

src/ui/types.ts

@@ -86,6 +86,12 @@ export type ImageAttributes = {
 
 export type ImageDescriptor = string | ImageAttributes;
 
+export type TitleLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface ContextualConfig {
+	defaultTitleLevel?: TitleLevel;
+}
+
 export interface Config {
 	theme: Theme;
 	orejimeElement?: ElementReference;
@@ -96,5 +102,6 @@ export interface Config {
 	forceBanner: boolean;
 	forceModal: boolean;
 	privacyPolicyUrl: string;
+	contextual?: ContextualConfig;
 	translations: Translations;
 }

src/ui/utils/numbers.ts

@@ -0,0 +1,2 @@
+export const clamp = (value: number, min: number, max: number) =>
+	Math.min(Math.max(value, min), max);