@swr-data-lab/components 1.9.1 → 1.11.0

package/.storybook/main.ts

@@ -11,20 +11,14 @@ const config: StorybookConfig = {
     '../src/**/*.mdx'
   ],
 
-  addons: [
-    {
-      name: '@storybook/addon-svelte-csf',
-      options: {
-        legacyTemplate: true
-      }
-    },
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@chromatic-com/storybook'),
-    getAbsolutePath('@storybook/experimental-addon-test')
-  ],
+  addons: [{
+    name: getAbsolutePath("@storybook/addon-svelte-csf"),
+    options: {
+      legacyTemplate: true
+    }
+  }, getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@chromatic-com/storybook'), getAbsolutePath('@storybook/addon-vitest'), getAbsolutePath("@storybook/addon-docs")],
   framework: {
-    name: '@storybook/sveltekit',
+    name: getAbsolutePath("@storybook/sveltekit"),
     options: {}
   },
 

package/.storybook/preview.ts

@@ -1,9 +1,9 @@
-import type { Preview } from "@storybook/svelte";
+import type { Preview } from "@storybook/sveltekit";
 
 const preview: Preview = {
   parameters: {
     options: {
-      storySort: { order: ['About', 'Design Tokens', "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] },
+      storySort: { order: ['About', 'Design Tokens', "Typography", ["Headline", "Copy", "Caption"], "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] },
     },
     controls: {
       matchers: {

package/package.json

@@ -1,71 +1,70 @@
 {
-	"name": "@swr-data-lab/components",
-	"description": "SWR Data Lab component library",
-	"author": "SWR Data Lab",
-	"publishConfig": {
-		"access": "restricted"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"storybook": "storybook dev -p 6006",
-		"start": "storybook dev -p 6006",
-		"build-storybook": "storybook build --disable-telemetry",
-		"test-storybook": "vitest run --project=storybook",
-		"test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
-		"semantic-release": "semantic-release"
-	},
-	"dependencies": {
-		"svelte-select": "^5.8.3"
-	},
-	"devDependencies": {
-		"@chromatic-com/storybook": "^2.0.2",
-		"@semantic-release/changelog": "^6.0.3",
-		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/npm": "^12.0.1",
-		"@storybook/addon-essentials": "^8.6.4",
-		"@storybook/addon-links": "^8.6.4",
-		"@storybook/addon-svelte-csf": "^5.0.0-next.27",
-		"@storybook/blocks": "^8.6.4",
-		"@storybook/docs-tools": "^8.6.4",
-		"@storybook/experimental-addon-test": "^8.6.12",
-		"@storybook/svelte": "^8.6.4",
-		"@storybook/sveltekit": "^8.6.4",
-		"@storybook/test": "^8.6.4",
-		"@storybook/test-runner": "^0.22.0",
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@vitest/browser": "^3.1.1",
-		"@vitest/coverage-v8": "^3.1.1",
-		"concurrently": "^9.0.1",
-		"http-server": "^14.1.1",
-		"playwright": "^1.51.1",
-		"sass-embedded": "^1.78.0",
-		"semantic-release": "^24.1.2",
-		"storybook": "^8.6.4",
-		"svelte": "^5.23.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^6.0.0",
-		"vitest": "^3.1.1",
-		"wait-on": "^8.0.1"
-	},
-	"type": "module",
-	"release": {
-		"plugins": [
-			"@semantic-release/commit-analyzer",
-			"@semantic-release/release-notes-generator",
-			"@semantic-release/npm"
-		]
-	},
-	"exports": {
-		".": {
-			"svelte": "./src/index.js"
-		}
-	},
-	"version": "1.9.1"
+  "name": "@swr-data-lab/components",
+  "description": "SWR Data Lab component library",
+  "author": "SWR Data Lab",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "storybook": "storybook dev -p 6006",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build --disable-telemetry",
+    "test-storybook": "vitest run --project=storybook",
+    "test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
+    "semantic-release": "semantic-release"
+  },
+  "dependencies": {
+    "svelte-select": "^5.8.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.0-next.6",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@storybook/addon-docs": "^9.0.0-beta.11",
+    "@storybook/addon-links": "^9.0.0-beta.11",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.30",
+    "@storybook/addon-vitest": "^9.0.0-beta.11",
+    "@storybook/sveltekit": "^9.0.0-beta.11",
+    "@storybook/test-runner": "^0.23.0-next.1",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "concurrently": "^9.0.1",
+    "http-server": "^14.1.1",
+    "playwright": "^1.51.1",
+    "sass-embedded": "^1.78.0",
+    "semantic-release": "^24.1.2",
+    "storybook": "^9.0.0-beta.11",
+    "svelte": "^5.23.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.1.1",
+    "wait-on": "^8.0.1"
+  },
+  "type": "module",
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm"
+    ]
+  },
+  "exports": {
+    ".": {
+      "svelte": "./src/index.js"
+    }
+  },
+  "version": "1.11.0",
+  "overrides": {
+    "storybook": "$storybook"
+  }
 }

package/src/Autocomplete/Autocomplete.stories.svelte

@@ -1,13 +1,12 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { userEvent, within, expect } from '@storybook/test';
+	import { userEvent, within, expect } from 'storybook/test';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	import Autocomplete from './Autocomplete.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Deprecated/Autocomplete',
-		component: Autocomplete
+		title: 'Deprecated/Autocomplete'
 	});
 
 	const testData = ['Apples', 'Oranges', 'Pears', 'Peaches', 'Bananas'].map((el) => {

package/src/Autocomplete/Autocomplete.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import Circle from '../assets/times-circle-solid.svg.svelte';
+	import Caption from '../Caption/Caption.svelte';
 
 	export let data = [];
 	export let query: string = '';
@@ -137,7 +138,9 @@ Data should be provided as array of objects. Each object contains the informatio
 						handleItemClick(i);
 					}}
 				>
-					{item.label}
+					<Caption>
+						{item.label}
+					</Caption>
 				</button>
 			</li>
 		{/each}
@@ -158,9 +161,6 @@ Data should be provided as array of objects. Each object contains the informatio
 		color: white;
 		display: flex;
 		flex-flow: column;
-		label {
-			@extend %form-label;
-		}
 
 		input {
 			@extend %form-input;
@@ -188,7 +188,6 @@ Data should be provided as array of objects. Each object contains the informatio
 			}
 
 			.item {
-				@extend %caption;
 				padding: 0.5em;
 				width: 100%;
 				background: transparent;

package/src/Button/Button.stories.svelte

@@ -0,0 +1,20 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from './Button.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Form/Button'
+	});
+</script>
+
+<Story name="Basic">
+	<DesignTokens>
+		<Button label="This is a button label"></Button>
+	</DesignTokens>
+</Story>
+<Story name="Disabled">
+	<DesignTokens>
+		<Button disabled label="This button is disabled"></Button>
+	</DesignTokens>
+</Story>

package/src/Button/Button.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import Copy from '../Copy/Copy.svelte';
+
 	interface ButtonProps {
-		as: 'button' | 'a';
 		label: string;
+		as?: 'button' | 'a';
 		href?: string;
 		disabled?: boolean;
 		onclick?: (e: MouseEvent) => any | void;
@@ -11,31 +13,32 @@
 </script>
 
 {#if as === 'a'}
-	<a class="button" class:disabled {href}>{label}</a>
+	<a class="button" class:disabled {href}>
+		<Copy weight="bold">
+			{label}
+		</Copy>
+	</a>
 {:else}
-	<button class="button" {onclick} {disabled}>{label}</button>
+	<button class="button" {onclick} {disabled}>
+		<Copy weight="bold">
+			{label}
+		</Copy>
+	</button>
 {/if}
 
 <style lang="scss">
-	@use '../styles/base.scss';
 	.button {
-		@extend %copy-bold;
 		background: var(--violet-dark-3);
 		display: inline-flex;
 		align-items: center;
 		justify-self: flex-start;
-		padding: 0.25em 1.25em;
-		padding-bottom: 0.35em;
+		padding: 0.45em 1.25em;
 		color: white;
 		border: 1px solid rgba(white, 0.1);
 		box-shadow: 0px 0px 10px rgba(black, 0.05);
 		border-radius: var(--br-small);
 		text-shadow: 0px 0px 5px rgba(black, 0.05);
-		font-size: 1.2rem;
 		text-decoration: none;
-		@media (min-width: base.$break-tablet) {
-			font-size: 1.4rem;
-		}
 		&:hover,
 		&:focus-visible {
 			text-decoration: underline;

package/src/Caption/Caption.stories.svelte

@@ -0,0 +1,23 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import Caption from './Caption.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Typography/Caption'
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
+	</DesignTokens>
+</Story>
+<Story name="Bold">
+	<DesignTokens>
+		<Caption weight="bold">
+			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
+		</Caption>
+	</DesignTokens>
+</Story>

package/src/Caption/Caption.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface CaptionProps {
+		weight?: 'regular' | 'bold';
+		children?: Snippet;
+	}
+	let { weight = 'regular', children }: CaptionProps = $props();
+</script>
+
+<div class={['container', weight]}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style lang="scss">
+	.container {
+		font-family: var(--swr-sans);
+		font-size: var(--fs-small-2);
+		line-height: 1;
+		letter-spacing: 0.0045em;
+	}
+
+	.bold {
+		font-weight: 585;
+		letter-spacing: 0;
+	}
+</style>

package/src/Caption/index.ts

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

package/src/Card/Card.stories.svelte

@@ -4,8 +4,7 @@
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Display/Card/Base',
-		component: Card
+		title: 'Display/Card/Base'
 	});
 </script>
 

package/src/Card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import Copy from '../Copy/Copy.svelte';
 
 	interface CardProps {
 		children?: Snippet;
@@ -10,7 +11,9 @@
 
 <div class="card">
 	{#if children}
-		{@render children()}
+		<Copy>
+			{@render children()}
+		</Copy>
 	{/if}
 </div>
 
@@ -18,14 +21,13 @@
 	@use '../styles/base.scss';
 
 	.card {
-		@extend %copy;
 		color: white;
 		width: auto;
 		max-width: var(--app-max-width);
 		background: var(--violet-dark-5);
 		border-radius: var(--br-large);
 		padding: 1.5rem;
-		@media (min-width: base.$break-tablet) {
+		@media (min-width: base.$bp-m) {
 			padding: 2.5rem;
 		}
 	}

package/src/ChartFooter/ChartFooter.mdx

@@ -1,4 +1,4 @@
-import { Story,  Meta, Primary, Controls, Stories } from '@storybook/blocks';
+import { Story,  Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
  
 import * as ChartFooterStories from './ChartFooter.stories.svelte';
 

package/src/ChartFooter/ChartFooter.stories.svelte

@@ -6,8 +6,7 @@
 	import Middot from '../Middot/Middot.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/ChartFooter',
-		component: ChartFooter
+		title: 'Chart/ChartFooter'
 	});
 </script>
 

package/src/ChartFooter/ChartFooter.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Logotype from '../Logotype/Logotype.svelte';
+	import Note from '../Note/Note.svelte';
 
 	interface ChartFooterProps {
 		layout: 'one-up' | 'two-up';
@@ -12,9 +13,9 @@
 
 <footer class={`container ${layout}`}>
 	{#if children}
-		<div class="notes">
+		<Note>
 			{@render children()}
-		</div>
+		</Note>
 	{/if}
 	<Logotype />
 </footer>
@@ -24,9 +25,9 @@
 
 	.container {
 		gap: 0.5rem;
-		font-size: var(--fs-small-1);
-		font-family: var(--swr-sans);
-		line-height: 1.4;
+		:global(div) {
+			width: 100%;
+		}
 	}
 	.one-up {
 		display: flex;
@@ -36,24 +37,10 @@
 	.two-up {
 		display: grid;
 		grid-template-columns: 1fr;
-		@media (min-width: base.$break-phone) {
+		@media (min-width: base.$bp-s) {
 			grid-template-columns: 2.5fr 1fr;
 			align-items: last baseline;
 			justify-items: flex-end;
 		}
 	}
-	.notes {
-		width: 100%;
-	}
-	footer :global(*) {
-		margin-bottom: 0;
-		color: var(--gray-base);
-	}
-	footer :global(a),
-	footer :global(summary) {
-		&:hover,
-		&:focus-visible {
-			color: var(--gray-dark-3);
-		}
-	}
 </style>

package/src/ChartHeader/ChartHeader.mdx

@@ -1,4 +1,4 @@
-import { Story,  Meta, Primary, Controls, Stories } from '@storybook/blocks';
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
  
 import * as ChartHeaderStories from './ChartHeader.stories.svelte';
 
@@ -8,6 +8,7 @@ import * as ChartHeaderStories from './ChartHeader.stories.svelte';
 
 Standard chart header.
 
+- The slugified `title` is set as the header element's `id` attribute (useful for linking to interactives from in-article table of contents)
 - Any nested HTML will render under the description (useful for i.e colour keys and interactives controls).
 
 <Controls  />

package/src/ChartHeader/ChartHeader.stories.svelte

@@ -1,12 +1,11 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { expect } from '@storybook/test';
+	import { expect } from 'storybook/test';
 	import ChartHeader from './ChartHeader.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Chart/ChartHeader',
-		component: ChartHeader
+		title: 'Chart/ChartHeader'
 	});
 </script>
 

package/src/ChartHeader/ChartHeader.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import slugify from "../utils/slugify.ts" 
-	
+	import Headline from '../Headline/Headline.svelte';
+	import Copy from '../Copy/Copy.svelte';
+	import slugify from '../utils/slugify';
+
 	interface ChartHeaderProps {
 		title: string;
 		subtitle?: string;
@@ -11,9 +13,9 @@
 </script>
 
 <header class="container" id={slugify(title)}>
-	<h2 class="title">{title}</h2>
+	<Headline>{title}</Headline>
 	{#if subtitle}
-		<p class="subtitle">{subtitle}</p>
+		<Copy><p class="subtitle">{subtitle}</p></Copy>
 	{/if}
 	{#if children}
 		<div class="content">
@@ -27,19 +29,10 @@
 		color: var(--violet-blue);
 		font-family: var(--swr-sans);
 	}
-	.title {
-		font-size: var(--fs-large-3);
-		line-height: 1.05;
-		text-wrap: balance;
-		font-weight: 700;
-		margin-bottom: 0.2em;
-	}
 	.subtitle {
 		text-wrap: balance;
-		margin-bottom: 0.25em;
-		font-size: var(--fs-large-1);
-		&:last-child {
-			margin-bottom: 0;
-		}
+	}
+	.content {
+		margin-top: 0.25em;
 	}
 </style>

package/src/Copy/Copy.stories.svelte

@@ -0,0 +1,31 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import Copy from './Copy.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Typography/Copy'
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<Copy>
+			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>
+	</DesignTokens>
+</Story>
+<Story name="Bold">
+	<DesignTokens>
+		<Copy weight="bold">
+			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>
+	</DesignTokens>
+</Story>

package/src/Copy/Copy.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface CopyProps {
+		weight?: 'regular' | 'bold';
+		children?: Snippet;
+	}
+	let { weight = 'regular', children }: CopyProps = $props();
+</script>
+
+<div class={['container', weight]}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style lang="scss">
+	.container {
+		font-family: var(--swr-sans);
+		font-size: var(--fs-base);
+		letter-spacing: 0.005em;
+		line-height: 1.475;
+	}
+
+	.bold {
+		font-weight: 585;
+		letter-spacing: 0;
+	}
+</style>

package/src/Copy/index.ts

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