From d0c13aeed76275a4255aaa6df2df79571efe6bf5 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Mon, 10 Nov 2025 10:43:54 +0100 Subject: [PATCH 1/3] Block out feature --- components/src/DevContainer/DevContainer.svelte | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte index 9caa4cd1..0d948c5f 100644 --- a/components/src/DevContainer/DevContainer.svelte +++ b/components/src/DevContainer/DevContainer.svelte @@ -4,9 +4,9 @@ import GridInspector from './GridInspector.svelte'; import Copy from '../Copy/Copy.svelte'; import DesignTokens from '../DesignTokens/DesignTokens.svelte'; - import { text } from '@sveltejs/kit'; interface DevContainerProps { + theme: 'light' | 'dark' | 'auto'; showHeader?: boolean; showNav?: boolean; showPlayer?: boolean; @@ -21,6 +21,7 @@ children?: Snippet; } let { + theme = 'auto', showHeader = true, showNav = true, showArticleHeader = true, @@ -39,8 +40,13 @@ let articleEl: HTMLElement | undefined = $state(); - -
+ +
{#if showHeader}
@@ -144,9 +150,8 @@ display: block; } .container { - --blue: hsl(221, 75%, 46%); - --blue-light: hsl(221, 100%, 95%); color: var(--blue); + background: var(--color-pageFill); font-family: 'SWR-VAR-Sans', sans-serif; } header { From f641f57fa4e69655f46fa06ebec62ae94b3386bd Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Mon, 10 Nov 2025 10:48:03 +0100 Subject: [PATCH 2/3] Default to light theme for backwards compatibility --- components/src/DevContainer/DevContainer.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte index 0d948c5f..54ab5498 100644 --- a/components/src/DevContainer/DevContainer.svelte +++ b/components/src/DevContainer/DevContainer.svelte @@ -21,7 +21,7 @@ children?: Snippet; } let { - theme = 'auto', + theme = 'light', showHeader = true, showNav = true, showArticleHeader = true, From 6f882f322f68b005341bc2bf35b9988816c0d419 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Mon, 10 Nov 2025 10:54:02 +0100 Subject: [PATCH 3/3] Iterate docs --- components/src/ChartList/ChartList.mdx | 24 ++++++++++++++++++- components/src/DevContainer/DevContainer.mdx | 10 ++++---- .../src/DevContainer/DevContainer.svelte | 3 ++- 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/components/src/ChartList/ChartList.mdx b/components/src/ChartList/ChartList.mdx index b66774bd..4064d0aa 100644 --- a/components/src/ChartList/ChartList.mdx +++ b/components/src/ChartList/ChartList.mdx @@ -6,7 +6,7 @@ import * as ChartListStories from './ChartList.stories.svelte'; # ChartList -Utility component for displaying a list of charts with associated embed URLs during development, typically at the `/` route of your Svelte project. +**Development-only** utility component for displaying a list of charts with associated embed, typically at the `/` route of your Svelte project. - `charts` is a list of `ChartSpec` objects of the following shape: @@ -19,6 +19,28 @@ Utility component for displaying a list of charts with associated embed URLs dur - `project` is a string of the shape `: `. +## Usage + +In your `+page.svelte`: + +```js + + + + + +``` + diff --git a/components/src/DevContainer/DevContainer.mdx b/components/src/DevContainer/DevContainer.mdx index b24cbdca..a2cdf838 100644 --- a/components/src/DevContainer/DevContainer.mdx +++ b/components/src/DevContainer/DevContainer.mdx @@ -6,7 +6,7 @@ import * as DevContainerStories from './DevContainer.stories.svelte'; # DevContainer -Development fixture for simulating the grid system and various UI features on [SWR.de](https://www.swr.de). Particularly useful for developing charts using the [breakout component](?path=/docs/layout-breakout--docs). +**Development-only** fixture for simulating the grid system and various UI features on [SWR.de](https://www.swr.de). Particularly useful for developing charts using the [breakout component](?path=/docs/layout-breakout--docs). @@ -14,18 +14,20 @@ Development fixture for simulating the grid system and various UI features on [S ## Usage +In your `+page.svelte`: + ```jsx {#if dev} - + {:else} {/if} -``` \ No newline at end of file +``` diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte index 54ab5498..bedb7836 100644 --- a/components/src/DevContainer/DevContainer.svelte +++ b/components/src/DevContainer/DevContainer.svelte @@ -1,9 +1,10 @@