Add ChartList

components/src/ChartList/ChartList.mdx

@@ -0,0 +1,13 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as ChartListStories from './ChartList.stories.svelte';
+
+<Meta of={ChartListStories} />
+
+# Chart List
+
+Utility component for displaying a list of charts with associated embed URLs during development (typically on the `/` route of your Svelte project).
+
+<Stories />
+
+<Controls />

components/src/ChartList/ChartList.stories.svelte

@@ -0,0 +1,48 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { within, expect } from 'storybook/test';
+
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import ChartList from './ChartList.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Meta/ChartList',
+		component: ChartList
+	});
+
+	const testCharts = [
+		{ title: 'Baden-Württemberg Loosers', slug: 'bw-loosers' },
+		{ title: 'Baden-Württemberg Winners', slug: 'bw-winners' },
+		{ title: 'Rheinland-Pfalz Loosers', slug: 'rp-loosers' },
+		{ title: 'Rheinland-Pfalz Winners', slug: 'rp-winners' }
+	];
+</script>
+
+<Story
+	name="Default"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+
+		await step('Project title renders', async () => {
+			const titleEl = canvas.getByTestId('chartlist-project-title');
+			expect(titleEl).toHaveTextContent('Grafiken für p110: Wie sieht der Wald von morgen aus?');
+		});
+
+		await step('All chart list items render', async () => {
+			testCharts.forEach((c) => {
+				const el = canvas.getByText(c.title);
+				expect(el).toBeTruthy();
+			});
+		});
+	}}
+>
+	<DesignTokens>
+		<ChartList
+			baseUrl="https://static.datenhub.net/apps/p110_wald-klimawandel/main"
+			charts={testCharts}
+			project="p110: Wie sieht der Wald von morgen aus?"
+		/>
+	</DesignTokens>
+</Story>

components/src/ChartList/ChartList.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { dev } from '$app/environment';
+
+	type ProjectPrefix = 'p' | 't';
+	type ProjectIdentifier = `${ProjectPrefix}${number}: ${string}`;
+
+	interface ChartSpec {
+		title: string;
+		slug: string;
+	}
+	interface ChartListProps {
+		project?: ProjectIdentifier;
+		charts?: ChartSpec[];
+		baseUrl?: string;
+	}
+	let { project, charts, baseUrl }: ChartListProps = $props();
+</script>
+
+<main>
+	<div class="inner">
+		<h1 data-testid="chartlist-project-title">Grafiken für {project}</h1>
+		{#if charts}
+			<table>
+				<thead>
+					<tr>
+						<th>Title</th>
+						{#if baseUrl}
+							<th>Embed URL</th>
+						{/if}
+					</tr>
+				</thead>
+				<tbody>
+					{#each charts as chart}
+						<tr>
+							<td>
+								<a href="./{chart.slug}{dev ? '' : '.html'}">{chart.title}</a>
+							</td>
+							{#if baseUrl}
+								<td>
+									<input type="text" value={`${baseUrl}/${chart.slug}.html`} />
+								</td>
+							{/if}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</div>
+</main>
+
+<style>
+	:global(*) {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+		color: inherit;
+	}
+	main {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-flow: column;
+		font-family: var(--swr-sans);
+		font-size: var(--fs-small-1);
+		max-width: 60rem;
+		margin: 0 auto;
+	}
+	.inner {
+		width: 100%;
+		border: 1px solid rgb(0, 0, 0);
+	}
+	h1 {
+		font-size: var(--fs-small-1);
+		width: 100%;
+		border-bottom: 1px solid black;
+		padding-bottom: 0.2em;
+		background-color: rgb(233, 238, 245);
+	}
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+	}
+	a {
+		display: block;
+		text-decoration: none;
+	}
+	th,
+	td,
+	h1 {
+		padding: 0.2em 0.4em;
+		text-align: left;
+	}
+	th {
+		border-bottom: 1px solid black;
+	}
+	tr {
+		border-bottom: 1px solid black;
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	input {
+		display: block;
+		width: 100%;
+		padding: 0.1em 0.3em;
+	}
+
+	a:hover,
+	a:focus-visible {
+		text-decoration: underline;
+	}
+	a:last-child {
+		border-bottom: 0;
+	}
+</style>

components/src/ChartList/index.ts

@@ -0,0 +1,2 @@
+import ChartList from './ChartList.svelte';
+export default ChartList;

components/src/index.js

@@ -39,3 +39,6 @@ export { default as Select } from './Select/Select.svelte';
 
 // Deprecated
 export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
+
+// Meta
+export { default as ChartList } from './ChartList/ChartList.svelte';