From 0c6db3653d289d2376e4cc85a708e4648930526b Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 23 Apr 2025 11:45:43 +0200
Subject: [PATCH 1/4] Set ID attribute on ChartHeader

---
 components/src/ChartHeader/ChartHeader.stories.svelte | 11 ++++++++++-
 components/src/ChartHeader/ChartHeader.svelte         |  5 +++--
 components/src/utils/slugify.ts                       | 10 ++++++++++
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 components/src/utils/slugify.ts

diff --git a/components/src/ChartHeader/ChartHeader.stories.svelte b/components/src/ChartHeader/ChartHeader.stories.svelte
index 3cc4e0e..c11a3e4 100644
--- a/components/src/ChartHeader/ChartHeader.stories.svelte
+++ b/components/src/ChartHeader/ChartHeader.stories.svelte
@@ -1,6 +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';
 
@@ -10,7 +11,15 @@
 	});
 </script>
 
-<Story name="Default">
+<Story
+	name="Default"
+	play={async ({ canvasElement, 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"
diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte
index 007f7e5..f4b6c52 100644
--- a/components/src/ChartHeader/ChartHeader.svelte
+++ b/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>
diff --git a/components/src/utils/slugify.ts b/components/src/utils/slugify.ts
new file mode 100644
index 0000000..27244a5
--- /dev/null
+++ b/components/src/utils/slugify.ts
@@ -0,0 +1,10 @@
+export default function slugify(str: String) {
+  return str
+    .replace(/\s+/g, '-') 
+    .replace(/-+/g, '-')
+    .trim()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9 -]/g, '')
+}

From b4ccf2ced046571cc2f296f63fb04e1d0b837f70 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 23 Apr 2025 11:48:00 +0200
Subject: [PATCH 2/4] Remove unused argument

---
 components/src/ChartHeader/ChartHeader.stories.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/src/ChartHeader/ChartHeader.stories.svelte b/components/src/ChartHeader/ChartHeader.stories.svelte
index c11a3e4..8840f26 100644
--- a/components/src/ChartHeader/ChartHeader.stories.svelte
+++ b/components/src/ChartHeader/ChartHeader.stories.svelte
@@ -2,7 +2,6 @@
 	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({
@@ -13,7 +12,7 @@
 
 <Story
 	name="Default"
-	play={async ({ canvasElement, step }) => {
+	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();

From f4d48ae3c7afa71d24719ae5bda91cdaf2b25f4f Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 23 Apr 2025 11:48:57 +0200
Subject: [PATCH 3/4] Add source

---
 components/src/utils/slugify.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/src/utils/slugify.ts b/components/src/utils/slugify.ts
index 27244a5..d9d24b0 100644
--- a/components/src/utils/slugify.ts
+++ b/components/src/utils/slugify.ts
@@ -1,6 +1,8 @@
+// Source: https://svelte.dev/playground/b130be5e485441a1842ae97e4ce4f244?version=5.20.0
+
 export default function slugify(str: String) {
   return str
-    .replace(/\s+/g, '-') 
+    .replace(/\s+/g, '-')
     .replace(/-+/g, '-')
     .trim()
     .normalize('NFKD')

From 66ec77df5fe67152a96214d20da0aa470e3bb4bc Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 23 Apr 2025 11:50:43 +0200
Subject: [PATCH 4/4] Fix types

---
 components/src/utils/slugify.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/utils/slugify.ts b/components/src/utils/slugify.ts
index d9d24b0..4914e60 100644
--- a/components/src/utils/slugify.ts
+++ b/components/src/utils/slugify.ts
@@ -1,6 +1,6 @@
 // Source: https://svelte.dev/playground/b130be5e485441a1842ae97e4ce4f244?version=5.20.0
 
-export default function slugify(str: String) {
+export default function slugify(str: string): string {
   return str
     .replace(/\s+/g, '-')
     .replace(/-+/g, '-')