Set ID attribute on ChartHeader

components/src/ChartHeader/ChartHeader.stories.svelte

@@ -1,7 +1,7 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
+	import { expect } from '@storybook/test';
 	import ChartHeader from './ChartHeader.svelte';
 
 	const { Story } = defineMeta({
@@ -10,7 +10,15 @@
 	});
 </script>
 
-<Story name="Default">
+<Story
+	name="Default"
+	play={async ({ step }) => {
+		await step('Container has ID attribute derived from title prop', async () => {
+			const containerEl = document.querySelector('#mehr-uber-60-jahrige-in-allen-berufen');
+			expect(containerEl).toBeTruthy();
+		});
+	}}
+>
 	<DesignTokens>
 		<ChartHeader
 			title="Mehr über-60-Jährige in allen Berufen"

components/src/ChartHeader/ChartHeader.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-
+	import slugify from "../utils/slugify.ts" 
+
 	interface ChartHeaderProps {
 		title: string;
 		subtitle?: string;
@@ -9,7 +10,7 @@
 	let { title, subtitle, children }: ChartHeaderProps = $props();
 </script>
 
-<header class="container">
+<header class="container" id={slugify(title)}>
 	<h2 class="title">{title}</h2>
 	{#if subtitle}
 		<p class="subtitle">{subtitle}</p>

components/src/utils/slugify.ts

@@ -0,0 +1,12 @@
+// Source: https://svelte.dev/playground/b130be5e485441a1842ae97e4ce4f244?version=5.20.0
+
+export default function slugify(str: string): string {
+  return str
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .trim()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9 -]/g, '')
+}