feat(Typography): Add as prop

components/src/Caption/Caption.stories.svelte

@@ -1,5 +1,6 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect } from 'storybook/test';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	import Caption from './Caption.svelte';
@@ -28,8 +29,21 @@
 	</DesignTokens>
 </Story>
 
-<style>
-	.container {
-		color: var(--color-textPrimary);
-	}
-</style>
+<Story
+	name="Render as HTML element"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const el = canvasElement.querySelector('p');
+		await step('Renders as specified HTML element', async () => {
+			expect(el).toBeTruthy();
+		});
+	}}
+>
+	<DesignTokens theme="light">
+		<div class="container">
+			<Caption weight="bold" as="p">
+				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
+			</Caption>
+		</div>
+	</DesignTokens>
+</Story>

components/src/Caption/Caption.svelte

@@ -3,16 +3,15 @@
 
 	interface CaptionProps {
 		weight?: 'regular' | 'bold';
+		as?: string;
 		children?: Snippet;
 	}
-	let { weight = 'regular', children }: CaptionProps = $props();
+	let { weight = 'regular', as = 'div', children }: CaptionProps = $props();
 </script>
 
-<div class={['container', weight]}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
+<svelte:element this={as} class={['container', weight]}>
+	{@render children?.()}
+</svelte:element>
 
 <style lang="scss">
 	.container {

components/src/Copy/Copy.stories.svelte

@@ -1,5 +1,7 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect } from 'storybook/test';
+
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	import Copy from './Copy.svelte';
@@ -24,7 +26,7 @@
 	</DesignTokens>
 </Story>
 <Story name="Bold" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Copy weight="bold">
 				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
@@ -36,6 +38,28 @@
 		</div>
 	</DesignTokens>
 </Story>
+<Story
+	name="Render as HTML element"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const el = canvasElement.querySelector('p');
+		await step('Renders as specified HTML element', async () => {
+			expect(el).toBeTruthy();
+		});
+	}}
+>
+	<DesignTokens theme="light">
+		<div class="container">
+			<Copy as="p">
+				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
+				größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die
+				Pollensaison hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die
+				Pollensaison wird länger, die Grippesaison wird länger und dadurch überlappt sich das
+				Ganze."
+			</Copy>
+		</div>
+	</DesignTokens>
+</Story>
 
 <style>
 	.container {

components/src/Headline/Headline.stories.svelte

@@ -1,7 +1,8 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import { expect } from 'storybook/test';
 
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 	import Headline from './Headline.svelte';
 
 	const { Story } = defineMeta({
@@ -18,6 +19,23 @@
 	</DesignTokens>
 </Story>
 
+<Story
+	name="Render as HTML element"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const el = canvasElement.querySelector('h3');
+		await step('Renders as specified HTML element', async () => {
+			expect(el).toBeTruthy();
+		});
+	}}
+>
+	<DesignTokens theme="light">
+		<div class="container">
+			<Headline as="h3">This should be a H3</Headline>
+		</div>
+	</DesignTokens>
+</Story>
+
 <style>
 	.container {
 		color: var(--color-textPrimary);

components/src/Headline/Headline.svelte

@@ -3,13 +3,15 @@
 
 	interface HeadlineProps {
 		children?: Snippet;
+		as?: string;
 	}
-	let { children }: HeadlineProps = $props();
+
+	let { as = 'h2', children }: HeadlineProps = $props();
 </script>
 
-<h2 class="container">
+<svelte:element this={as} class="container">
 	{@render children?.()}
-</h2>
+</svelte:element>
 
 <style>
 	.container {

components/src/Note/Note.stories.svelte

@@ -1,5 +1,7 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect } from 'storybook/test';
+
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 	import Middot from '../Middot/Middot.svelte';
 
@@ -21,3 +23,23 @@
 		</Note>
 	</DesignTokens>
 </Story>
+
+<Story
+	name="Render as HTML element"
+	asChild
+	play={async ({ canvasElement, step }) => {
+		const el = canvasElement.querySelector('p');
+		await step('Renders as specified HTML element', async () => {
+			expect(el).toBeTruthy();
+		});
+	}}
+>
+	<DesignTokens theme="light">
+		<Note as="p">
+			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.
+		</Note>
+	</DesignTokens>
+</Story>

components/src/Note/Note.svelte

@@ -3,15 +3,14 @@
 
 	interface NoteProps {
 		children?: Snippet;
+		as?: string;
 	}
-	let { children }: NoteProps = $props();
+	let { as = 'div', children }: NoteProps = $props();
 </script>
 
-<div class="container">
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
+<svelte:element this={as} class="container">
+	{@render children?.()}
+</svelte:element>
 
 <style lang="scss">
 	.container {