feat(Switcher): Iterate UI

.github/workflows/e2e.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version: 24
+          node-version: 24.15.0
       - run: npm ci --workspace=components --include=dev
       - run: npm run sync --workspace=components
       - run: npm ci --workspace=mock-sveltekit

.github/workflows/test-storybook.yml

@@ -14,14 +14,15 @@ on:
 jobs:
   run-tests:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     defaults:
       run:
         working-directory: ./components
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version: 24
+          node-version: 24.15.0
       - run: npm ci
       - run: npx playwright install --with-deps
       - run: npm run sync

components/package.json

@@ -64,7 +64,7 @@
 		"layercake": "^10.0.2",
 		"mdx-mermaid": "2.0.3",
 		"nodemon": "^3.1.11",
-		"playwright": "1.58.1",
+		"playwright": "1.60.0",
 		"publint": "0.3.17",
 		"sass": "1.93.2",
 		"sass-embedded": "1.97.3",

components/src/DesignTokens/DesignTokens.svelte

@@ -62,6 +62,7 @@
 		--color-pageFill: var(--pageFill-light);
 		--color-surfaceFill: var(--surfaceFill-light);
 		--color-surfaceHover: var(--surfaceHover-light);
+		--color-raisedSurfaceFill: var(--raisedSurfaceFill-light);
 		--color-surfaceBorder: var(--surfaceBorder-light);
 		--color-dropShadow: var(--dropShadow-light);
 
@@ -70,6 +71,7 @@
 			--color-logoFillHover: var(--logoFillHover-dark);
 			--color-pageFill: var(--pageFill-dark);
 			--color-surfaceFill: var(--surfaceFill-dark);
+			--color-raisedSurfaceFill: var(--raisedSurfaceFill-dark);
 			--color-surfaceBorder: var(--surfaceBorder-dark);
 			--color-surfaceHover: var(--surfaceHover-dark);
 			--color-textPrimary: var(--textPrimary-dark);

components/src/DesignTokens/Tokens.ts

@@ -179,19 +179,19 @@ const semantics: ColourMap = {
 	},
 	surfaceFill: {
 		dark: '#222325',
-		light: '#ffffff'
+		light: '#fbfbfb'
 	},
 	surfaceHover: {
-		dark: '#121212',
-		light: '#eee'
+		dark: '#272830',
+		light: '#fdfdfd'
 	},
 	raisedSurfaceFill: {
 		dark: '#393a3b',
 		light: '#ffffff'
 	},
 	surfaceBorder: {
-		dark: 'rgba(255,255,255,.15)',
-		light: shades.gray.light3
+		dark: shades.gray.dark2,
+		light: shades.gray.light2
 	},
 	pageFill: {
 		dark: '#0C0C0C',

components/src/Switcher/Switcher.stories.svelte

@@ -6,27 +6,50 @@
 
 	const { Story } = defineMeta({
 		title: 'Form/Switcher',
-		component: Switcher
+		component: Switcher,
+		parameters: {
+			layout: 'fullscreen'
+		}
 	});
 
 	const onChangeSpy = fn();
+	const dwIds = ['GjkbO', 'R5jey'];
+	let selectedDw = $state(dwIds[0]);
 </script>
 
 <Story name="Two Options" asChild>
 	<DesignTokens theme="auto">
-		<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
+		<div class="container">
+			<Switcher options={['Option A', 'Option B']} value="Option A" size="default" label="Label" />
+		</div>
+	</DesignTokens>
+</Story>
+
+<Story name="Two Options, Centered Label" asChild>
+	<DesignTokens theme="auto">
+		<div class="container">
+			<Switcher
+				align="center"
+				options={['Option A', 'Option B']}
+				value="Option A"
+				size="default"
+				label="Label"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 
 <Story name="Hidden Label" asChild>
 	<DesignTokens theme="auto">
-		<Switcher
-			hideLabel
-			options={['Option A', 'Option B']}
-			value="Option A"
-			size="default"
-			label="Label"
-		/>
+		<div class="container">
+			<Switcher
+				hideLabel
+				options={['Option A', 'Option B']}
+				value="Option A"
+				size="default"
+				label="Label"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 
@@ -48,12 +71,14 @@
 	}}
 >
 	<DesignTokens theme="auto">
-		<Switcher
-			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
-			value="Oranges"
-			label="Label"
-			size="small"
-		/>
+		<div class="container">
+			<Switcher
+				options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
+				value="Oranges"
+				label="Label"
+				size="small"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 
@@ -69,12 +94,14 @@
 	}}
 >
 	<DesignTokens theme="auto">
-		<Switcher
-			options={['Do not wrap', 'on mobile']}
-			value="Do not wrap"
-			label="Label"
-			layout="row"
-		/>
+		<div class="container">
+			<Switcher
+				options={['This switcher', 'will not wrap', 'on mobile']}
+				value="This switcher"
+				label="Label"
+				layout="row"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 
@@ -90,12 +117,14 @@
 	}}
 >
 	<DesignTokens theme="auto">
-		<Switcher
-			options={['Always wrap', 'even on', 'large screens']}
-			value="Always wrap"
-			label="Label"
-			layout="column"
-		/>
+		<div class="container">
+			<Switcher
+				options={['Always wrap', 'even on', 'large screens']}
+				value="Always wrap"
+				label="Label"
+				layout="column"
+			/>
+		</div>
 	</DesignTokens>
 </Story>
 <Story
@@ -114,12 +143,60 @@
 	}}
 >
 	<DesignTokens>
-		<Switcher
-			options={['Option A', 'Option B']}
-			value="Option A"
-			size="default"
-			label="Label"
-			onchange={onChangeSpy}
-		/>
+		<div class="container">
+			<Switcher
+				options={['Option A', 'Option B']}
+				value="Option A"
+				size="default"
+				label="Label"
+				onchange={onChangeSpy}
+			/>
+		</div>
 	</DesignTokens>
 </Story>
+
+<Story name="Datawrapper Switcher" asChild>
+	<DesignTokens theme="auto">
+		<div class="container">
+			<div class="datawrapper-switcher">
+				<Switcher
+					align="center"
+					options={dwIds}
+					size="small"
+					label="Land auswählen"
+					bind:value={selectedDw}
+				/>
+				{#each dwIds as id}
+					<div class="datawrapper-chart" class:active={id === selectedDw} style:height="600px">
+						<img src={`https://datawrapper.dwcdn.net/${id}/full.png`} />
+					</div>
+				{/each}
+			</div>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		background: var(--color-pageFill);
+		padding: 5%;
+	}
+
+	.datawrapper-switcher {
+		display: flex;
+		align-items: center;
+		flex-flow: column;
+		gap: 1rem;
+		img {
+			display: block;
+			width: 40rem;
+		}
+	}
+
+	.datawrapper-chart {
+		display: none;
+	}
+	.active {
+		display: block;
+	}
+</style>