feat: Breakout + DevContainer

components/.storybook/preview.ts

@@ -19,6 +19,7 @@ const preview: Preview = {
 					'Design Tokens',
 					'Typography',
 					['Headline', 'Copy', 'Caption'],
+					'Layout',
 					'Display',
 					'Chart',
 					['ChartHeader'],

components/src/Breakout/Breakout.mdx

@@ -0,0 +1,13 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as BreakoutStories from './Breakout.stories.svelte';
+
+<Meta of={BreakoutStories} />
+
+# Breakout
+
+Utility component for breaking out of the [SWR.de](https://www.swr.de) grid system.
+
+<Story of={BreakoutStories.Default} />
+
+<Controls />

components/src/Breakout/Breakout.stories.svelte

@@ -0,0 +1,56 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import Breakout from './Breakout.svelte';
+	import DevContainer from '../DevContainer/DevContainer.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Layout/Breakout',
+		component: Breakout,
+		parameters: {
+			layout: 'fullscreen'
+		}
+	});
+</script>
+
+<Story name="Default" asChild>
+	<DevContainer
+		title="Autokauf-Dilemma: Elektroautos teuer, Verbrenner bald auch"
+		showPlayer={false}
+		showGrid
+		showArticleHeader={false}
+	>
+		<DesignTokens>
+			<div class="demo">
+				<Breakout layout="medium">
+					<div class="chart">medium</div>
+				</Breakout>
+				<Breakout layout="large">
+					<div class="chart">large</div>
+				</Breakout>
+				<Breakout layout="bleed">
+					<div class="chart">bleed</div>
+				</Breakout>
+			</div>
+		</DesignTokens>
+	</DevContainer>
+</Story>
+
+<style>
+	.demo {
+		position: relative;
+		mix-blend-mode: multiply;
+	}
+	.chart {
+		height: 200px;
+		font-family: var(--swr-sans);
+		background: hsl(15, 100%, 96%);
+		border: 1px solid hsl(15, 100%, 35%);
+		border-radius: 4px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 2rem;
+		color: hsl(15, 100%, 35%);
+	}
+</style>

components/src/Breakout/Breakout.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface BreakoutProps {
+		layout: 'medium' | 'large' | 'bleed';
+		children?: Snippet;
+	}
+	let { layout = 'medium', children }: BreakoutProps = $props();
+</script>
+
+<div class={`container ${layout}`}>
+	{@render children?.()}
+</div>
+
+<style lang="scss">
+	.container {
+		--margin: 16px;
+		--column-gap: 16px;
+		--column-width: calc((var(--grid-width) - var(--column-gap) * 11) / 12);
+		--grid-width: calc(100vw - var(--margin) * 2);
+
+		@media (min-width: 640px) {
+			--margin: 40px;
+		}
+		@media (min-width: 768px) {
+			--margin: 40px;
+		}
+		@media (min-width: 1024px) {
+			--margin: 48px;
+			--column-gap: 32px;
+		}
+		@media (min-width: 1440px) {
+			--grid-width: calc(Min(1312px, 100vw));
+			--margin: calc((100vw - var(--grid-width)) * 0.5);
+		}
+	}
+
+	.medium {
+		@media (min-width: 1024px) {
+			width: calc(var(--column-width) * 10 + var(--column-gap) * 9);
+			margin-left: calc((var(--column-width) * -1) + (var(--column-gap)) * -1);
+		}
+		@media (min-width: 1440px) {
+			width: calc(var(--column-width) * 8 + var(--column-gap) * 7);
+			margin-left: calc((var(--column-width) * -1) + (var(--column-gap)) * -1);
+		}
+	}
+	.large {
+		@media (min-width: 640px) {
+			width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
+			margin-left: calc((var(--column-width) * -1 + var(--column-gap) * -1));
+		}
+		@media (min-width: 1024px) {
+			width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
+			margin-left: calc((var(--column-width) * -2 + var(--column-gap) * -2));
+		}
+		@media (min-width: 1440px) {
+			width: calc(var(--column-width) * 10 + var(--column-gap) * 11);
+			margin-left: calc((var(--column-width) * -2 + var(--column-gap) * -3));
+		}
+	}
+	.bleed {
+		width: 100vw;
+		margin-left: calc(var(--margin) * -1);
+
+		@media (min-width: 640px) {
+			margin-left: calc(var(--column-width) * -1 + (var(--column-gap)) * -1 - var(--margin) * 1);
+		}
+		@media (min-width: 768px) {
+			margin-left: calc(var(--column-width) * -1 + (var(--column-gap)) * -1 - (var(--margin) * 1));
+		}
+		@media (min-width: 1024px) {
+			margin-left: calc(var(--column-width) * -2 + (var(--column-gap)) * -2 - var(--margin) * 1);
+		}
+		@media (min-width: 1440px) {
+			margin-left: calc(var(--column-width) * -3 + (var(--column-gap)) * -3 - var(--margin) * 1);
+		}
+	}
+</style>

components/src/Breakout/index.ts

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

components/src/Caption/Caption.stories.svelte

@@ -11,15 +11,15 @@
 </script>
 
 <Story name="Default" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
 		</div>
 	</DesignTokens>
 </Story>
 
 <Story name="Bold" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Caption weight="bold">
 				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)

components/src/ChartHeader/ChartHeader.stories.svelte

@@ -20,7 +20,7 @@
 		});
 	}}
 >
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<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)"
@@ -31,7 +31,7 @@
 </Story>
 
 <Story name="Long title" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<ChartHeader
 			title="Wärmepumpe dominiert bei Neubauten in den meisten Landkreisen in Baden-Württemberg"
 			subtitle="Neue Wohngebäude nach Heizenergieträger, 2024"
@@ -42,7 +42,7 @@
 	</DesignTokens>
 </Story>
 <Story name="Centered" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<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)"

components/src/ChartList/ChartList.stories.svelte

@@ -8,7 +8,10 @@
 
 	const { Story } = defineMeta({
 		title: 'Meta/ChartList',
-		component: ChartList
+		component: ChartList,
+		parameters: {
+			layout: 'fullscreen'
+		}
 	});
 
 	const testCharts = [

components/src/ChartList/ChartList.svelte

@@ -44,8 +44,8 @@
 				</tbody>
 			</table>
 		{/if}
+		<p class="notes">Nutze die "Embed URL" um Grafiken in Sophora einzubinden.</p>
 	</div>
-	<p class="notes">Nutze die "Embed URL" um Grafiken in Sophora einzubinden.</p>
 </main>
 
 <style lang="scss">
@@ -56,8 +56,8 @@
 		flex-flow: column;
 		font-family: var(--swr-sans);
 		font-size: var(--fs-small-1);
+		background: var(--color-pageFill);
 		color: var(--color-textPrimary);
-		max-width: 40rem;
 		margin: 0 auto;
 		height: 90vh;
 		* {
@@ -66,15 +66,13 @@
 		}
 	}
 	.inner {
+		margin: 0 auto;
 		width: 100%;
-		background: var(--color-surfaceFill);
-		border: 1px solid var(--color-surfaceBorder);
+		max-width: 40rem;
 	}
 	h1 {
 		font-size: var(--fs-base);
-		border-bottom: 1px solid var(--color-textSecondary);
-		padding-bottom: 0.2em;
-		background-color: rgba(black, 0.2);
+		margin-bottom: 0.2em;
 		em {
 			background: rgba(134, 139, 84, 0.4);
 			font-style: normal;
@@ -86,15 +84,15 @@
 		border-collapse: collapse;
 		border-spacing: 0;
 		width: 100%;
+		border: 1px solid var(--color-surfaceBorder);
 	}
 	a {
 		display: block;
 		color: inherit;
 		text-decoration: none;
 	}
 	th,
-	td,
-	h1 {
+	td {
 		padding: 0.2em 0.4em;
 		text-align: left;
 	}

components/src/Copy/Copy.stories.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <Story name="Default" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Copy>
 				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit

components/src/Copy/Copy.svelte

@@ -3,16 +3,15 @@
 
 	interface CopyProps {
 		weight?: 'regular' | 'bold';
+		as?: string;
 		children?: Snippet;
 	}
-	let { weight = 'regular', children }: CopyProps = $props();
+	let { as = 'div', weight = 'regular', children }: CopyProps = $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 {