From ad0ad37d16ab1f3a5dc7277f6c775b5a5cb788b2 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 24 Jun 2025 09:32:18 +0200
Subject: [PATCH 1/2] Add alignment prop

---
 .../src/ChartFooter/ChartFooter.stories.svelte       | 11 +++++++++++
 components/src/ChartFooter/ChartFooter.svelte        | 12 +++++++++---
 .../src/ChartHeader/ChartHeader.stories.svelte       | 12 ++++++++++++
 components/src/ChartHeader/ChartHeader.svelte        | 11 +++++++++--
 4 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/components/src/ChartFooter/ChartFooter.stories.svelte b/components/src/ChartFooter/ChartFooter.stories.svelte
index 8a3158c1..51b51fb0 100644
--- a/components/src/ChartFooter/ChartFooter.stories.svelte
+++ b/components/src/ChartFooter/ChartFooter.stories.svelte
@@ -22,6 +22,17 @@
 	</DesignTokens>
 </Story>
 
+<Story name="One-up Centered" asChild>
+	<DesignTokens>
+		<ChartFooter layout="one-up" alignment="center">
+			Daten: <a href="#1">Zensus 2022</a>
+			(Durchschnittsmieten und Einwohnerzahlen),
+			<a href="#1">OpenStreetMap</a> (Kartenmaterial) <Middot /> In unserer Darstellung wurde das Zensusgitter
+			auf bewohnte Gebiete begrenzt.
+		</ChartFooter>
+	</DesignTokens>
+</Story>
+
 <Story name="Two-up" asChild>
 	<DesignTokens>
 		<ChartFooter layout="two-up">
diff --git a/components/src/ChartFooter/ChartFooter.svelte b/components/src/ChartFooter/ChartFooter.svelte
index c35399f5..d62142b1 100644
--- a/components/src/ChartFooter/ChartFooter.svelte
+++ b/components/src/ChartFooter/ChartFooter.svelte
@@ -4,14 +4,15 @@
 	import Note from '../Note/Note.svelte';
 
 	interface ChartFooterProps {
-		layout: 'one-up' | 'two-up';
+		layout?: 'one-up' | 'two-up';
+		alignment?: 'left' | 'center';
 		children?: Snippet;
 	}
 
-	let { layout = 'one-up', children }: ChartFooterProps = $props();
+	let { layout = 'one-up', alignment = 'left', children }: ChartFooterProps = $props();
 </script>
 
-<footer class={`container ${layout}`}>
+<footer class={`container ${layout} align-${alignment}`}>
 	{#if children}
 		<Note>
 			{@render children()}
@@ -33,6 +34,11 @@
 		display: flex;
 		flex-flow: column;
 		align-items: flex-start;
+		&.align-center {
+			align-items: center;
+			text-align: center;
+			text-wrap: balance;
+		}
 	}
 	.two-up {
 		display: grid;
diff --git a/components/src/ChartHeader/ChartHeader.stories.svelte b/components/src/ChartHeader/ChartHeader.stories.svelte
index 70df0f17..24bca57a 100644
--- a/components/src/ChartHeader/ChartHeader.stories.svelte
+++ b/components/src/ChartHeader/ChartHeader.stories.svelte
@@ -29,3 +29,15 @@
 		</ChartHeader>
 	</DesignTokens>
 </Story>
+
+<Story name="Centered" asChild>
+	<DesignTokens>
+		<ChartHeader
+			title="Mehr über-60-Jährige in allen Berufen"
+			subtitle="Veränderung des Anteils der Beschäftigen über 60 Jahren in allen Berufsgruppen seit 2013 (Bundesweit)"
+			alignment="center"
+		>
+			Arbitrary HTML content can go here
+		</ChartHeader>
+	</DesignTokens>
+</Story>
diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte
index f1953c64..4689b327 100644
--- a/components/src/ChartHeader/ChartHeader.svelte
+++ b/components/src/ChartHeader/ChartHeader.svelte
@@ -7,12 +7,13 @@
 	interface ChartHeaderProps {
 		title: string;
 		subtitle?: string;
+		alignment?: 'left' | 'center';
 		children?: Snippet;
 	}
-	let { title, subtitle, children }: ChartHeaderProps = $props();
+	let { title, subtitle, alignment = 'left', children }: ChartHeaderProps = $props();
 </script>
 
-<header class="container" id={slugify(title)}>
+<header class={`container align-${alignment}`} id={slugify(title)}>
 	<Headline>{title}</Headline>
 	{#if subtitle}
 		<Copy><p class="subtitle">{subtitle}</p></Copy>
@@ -28,6 +29,12 @@
 	.container {
 		color: var(--violet-blue);
 		font-family: var(--swr-sans);
+		display: flex;
+		flex-flow: column;
+		gap: 0.125rem;
+	}
+	.align-center {
+		text-align: center;
 	}
 	.subtitle {
 		text-wrap: balance;

From 89c9fb7e5f6111e43d18a71d4d87233cd88f7a50 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 24 Jun 2025 09:35:38 +0200
Subject: [PATCH 2/2] Rename alignment -> align

---
 components/src/ChartFooter/ChartFooter.stories.svelte | 2 +-
 components/src/ChartFooter/ChartFooter.svelte         | 6 +++---
 components/src/ChartHeader/ChartHeader.stories.svelte | 2 +-
 components/src/ChartHeader/ChartHeader.svelte         | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/src/ChartFooter/ChartFooter.stories.svelte b/components/src/ChartFooter/ChartFooter.stories.svelte
index 51b51fb0..e424c044 100644
--- a/components/src/ChartFooter/ChartFooter.stories.svelte
+++ b/components/src/ChartFooter/ChartFooter.stories.svelte
@@ -24,7 +24,7 @@
 
 <Story name="One-up Centered" asChild>
 	<DesignTokens>
-		<ChartFooter layout="one-up" alignment="center">
+		<ChartFooter layout="one-up" align="center">
 			Daten: <a href="#1">Zensus 2022</a>
 			(Durchschnittsmieten und Einwohnerzahlen),
 			<a href="#1">OpenStreetMap</a> (Kartenmaterial) <Middot /> In unserer Darstellung wurde das Zensusgitter
diff --git a/components/src/ChartFooter/ChartFooter.svelte b/components/src/ChartFooter/ChartFooter.svelte
index d62142b1..c92fa5e9 100644
--- a/components/src/ChartFooter/ChartFooter.svelte
+++ b/components/src/ChartFooter/ChartFooter.svelte
@@ -5,14 +5,14 @@
 
 	interface ChartFooterProps {
 		layout?: 'one-up' | 'two-up';
-		alignment?: 'left' | 'center';
+		align?: 'left' | 'center';
 		children?: Snippet;
 	}
 
-	let { layout = 'one-up', alignment = 'left', children }: ChartFooterProps = $props();
+	let { layout = 'one-up', align = 'left', children }: ChartFooterProps = $props();
 </script>
 
-<footer class={`container ${layout} align-${alignment}`}>
+<footer class={`container ${layout} align-${align}`}>
 	{#if children}
 		<Note>
 			{@render children()}
diff --git a/components/src/ChartHeader/ChartHeader.stories.svelte b/components/src/ChartHeader/ChartHeader.stories.svelte
index 24bca57a..4bde8e10 100644
--- a/components/src/ChartHeader/ChartHeader.stories.svelte
+++ b/components/src/ChartHeader/ChartHeader.stories.svelte
@@ -35,7 +35,7 @@
 		<ChartHeader
 			title="Mehr über-60-Jährige in allen Berufen"
 			subtitle="Veränderung des Anteils der Beschäftigen über 60 Jahren in allen Berufsgruppen seit 2013 (Bundesweit)"
-			alignment="center"
+			align="center"
 		>
 			Arbitrary HTML content can go here
 		</ChartHeader>
diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte
index 4689b327..040eebab 100644
--- a/components/src/ChartHeader/ChartHeader.svelte
+++ b/components/src/ChartHeader/ChartHeader.svelte
@@ -7,13 +7,13 @@
 	interface ChartHeaderProps {
 		title: string;
 		subtitle?: string;
-		alignment?: 'left' | 'center';
+		align?: 'left' | 'center';
 		children?: Snippet;
 	}
-	let { title, subtitle, alignment = 'left', children }: ChartHeaderProps = $props();
+	let { title, subtitle, align = 'left', children }: ChartHeaderProps = $props();
 </script>
 
-<header class={`container align-${alignment}`} id={slugify(title)}>
+<header class={`container align-${align}`} id={slugify(title)}>
 	<Headline>{title}</Headline>
 	{#if subtitle}
 		<Copy><p class="subtitle">{subtitle}</p></Copy>