@swr-data-lab/components 1.6.0 → 1.7.0

package/.storybook/main.ts

@@ -1,14 +1,14 @@
-import { dirname, join } from "path";
-import type { StorybookConfig } from "@storybook/sveltekit";
+import { dirname, join } from 'path';
+import type { StorybookConfig } from '@storybook/sveltekit';
 
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(join(value, 'package.json')));
 }
 
 const config: StorybookConfig = {
   stories: [
-    "../src/**/*.stories.@(js|ts|svelte)",
-    "../src/**/*.mdx",
+    '../src/**/*.stories.@(js|ts|svelte)',
+    '../src/**/*.mdx'
   ],
 
   addons: [
@@ -18,20 +18,17 @@ const config: StorybookConfig = {
         legacyTemplate: true
       }
     },
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
-    getAbsolutePath("@storybook/addon-mdx-gfm")
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/experimental-addon-test')
   ],
   framework: {
-    name: getAbsolutePath("@storybook/sveltekit"),
-    options: {},
+    name: '@storybook/sveltekit',
+    options: {}
   },
 
-  docs: {
-    autodocs: true
-  }
+  docs: {}
 };
 
-export default config;
+export default config;

package/.storybook/preview.ts

@@ -2,6 +2,9 @@ import type { Preview } from "@storybook/svelte";
 
 const preview: Preview = {
   parameters: {
+    options: {
+      storySort: { order: ['About', 'Design Tokens', "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

package/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/sveltekit';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package/package.json

@@ -14,7 +14,7 @@
 		"storybook": "storybook dev -p 6006",
 		"start": "storybook dev -p 6006",
 		"build-storybook": "storybook build --disable-telemetry",
-		"test-storybook": "test-storybook --browsers chromium firefox",
+		"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"
 	},
@@ -27,21 +27,23 @@
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/npm": "^12.0.1",
 		"@storybook/addon-essentials": "^8.6.4",
-		"@storybook/addon-interactions": "^8.6.4",
 		"@storybook/addon-links": "^8.6.4",
-		"@storybook/addon-mdx-gfm": "^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.19.1",
+		"@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",
@@ -49,6 +51,7 @@
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0",
+		"vitest": "^3.1.1",
 		"wait-on": "^8.0.1"
 	},
 	"type": "module",
@@ -64,5 +67,5 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.6.0"
+	"version": "1.7.0"
 }

package/src/Autocomplete/Autocomplete.stories.svelte

@@ -0,0 +1,61 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	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
+	});
+
+	const testData = ['Apples', 'Oranges', 'Pears', 'Peaches', 'Bananas'].map((el) => {
+		return {
+			value: el,
+			label: el,
+			details: {}
+		};
+	});
+</script>
+
+<Story
+	name="Basic"
+	tags={['autodocs']}
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const input = canvas.getByTestId('autocomplete-input');
+		await step('Select using the mouse', async () => {
+			await userEvent.click(input);
+			expect(input).toHaveFocus();
+			await userEvent.keyboard('ba');
+			const bananasOption = canvas.getByText('Bananas');
+			await userEvent.click(bananasOption);
+			expect(input).toHaveValue('Bananas');
+		});
+		await userEvent.clear(input);
+		await step('Select using the keyboard', async () => {
+			await userEvent.click(input);
+			expect(input).toHaveFocus();
+			await userEvent.keyboard('ap');
+			await userEvent.keyboard('{ArrowDown}');
+			await userEvent.keyboard('{Enter}');
+			expect(input).toHaveValue('Apples');
+		});
+		await userEvent.clear(input);
+	}}
+>
+	<DesignTokens>
+		<div class="container">
+			<Autocomplete label="" name="test" data={testData} query="" placeholder="Select a fruit"
+			></Autocomplete>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		background: var(--violet-dark-5);
+		padding: 5%;
+	}
+</style>

package/src/Autocomplete/Autocomplete.svelte

@@ -108,8 +108,8 @@ Data should be provided as array of objects. Each object contains the informatio
 		autocapitalize="off"
 		data-testid="autocomplete-input"
 		bind:this={inputRef}
-		on:keydown={handleKeyDown}
 		bind:value={query}
+		on:keydown={handleKeyDown}
 		on:input={handleInput}
 		on:focus={() => {
 			isActive = true;
@@ -150,28 +150,30 @@ Data should be provided as array of objects. Each object contains the informatio
 </div>
 
 <style lang="scss">
-	@import '../styles/base.scss';
+	@use '../styles/base.scss';
 
 	.autocomplete {
 		position: relative;
 		display: block;
 		color: white;
-
+		display: flex;
+		flex-flow: column;
 		label {
 			@extend %form-label;
 		}
 
 		input {
 			@extend %form-input;
+			width: auto;
 		}
 
 		ul {
 			position: absolute;
 			top: 100%;
 			border: 1px solid currentColor;
-			background: $color-violetblue;
-			border-bottom-left-radius: $border-radius-input;
-			border-bottom-right-radius: $border-radius-input;
+			background: var(--violet-dark-3);
+			border-bottom-left-radius: var(--br-small);
+			border-bottom-right-radius: var(--br-small);
 			border-top: 0;
 			left: 0;
 			right: 0;
@@ -218,7 +220,7 @@ Data should be provided as array of objects. Each object contains the informatio
 			}
 			&:hover,
 			&:focus {
-				color: $color-activeorange;
+				color: var(--red-base);
 				cursor: pointer;
 			}
 		}

package/src/Button/Button.svelte

@@ -1,21 +1,26 @@
 <script lang="ts">
-	export let as: string = 'button';
-	export let label: string = '';
-	export let href: string = '';
-	export let disabled: boolean = false;
+	interface ButtonProps {
+		as: 'button' | 'a';
+		label: string;
+		href?: string;
+		disabled?: boolean;
+		onclick?: (e: MouseEvent) => any | void;
+	}
+
+	const { as = 'button', label, href, disabled, onclick }: ButtonProps = $props();
 </script>
 
 {#if as === 'a'}
 	<a class="button" class:disabled {href}>{label}</a>
 {:else}
-	<button class="button" on:click {disabled}>{label}</button>
+	<button class="button" {onclick} {disabled}>{label}</button>
 {/if}
 
 <style lang="scss">
-	@import '../styles/base.scss';
+	@use '../styles/base.scss';
 	.button {
 		@extend %copy-bold;
-		background: $color-violet;
+		background: var(--violet-dark-3);
 		display: inline-flex;
 		align-items: center;
 		justify-self: flex-start;
@@ -24,11 +29,11 @@
 		color: white;
 		border: 1px solid rgba(white, 0.1);
 		box-shadow: 0px 0px 10px rgba(black, 0.05);
-		border-radius: $border-radius-input;
+		border-radius: var(--br-small);
 		text-shadow: 0px 0px 5px rgba(black, 0.05);
 		font-size: 1.2rem;
 		text-decoration: none;
-		@include bp($break-tablet) {
+		@media (min-width: base.$break-tablet) {
 			font-size: 1.4rem;
 		}
 		&:hover,
@@ -39,7 +44,6 @@
 		&.disabled,
 		&:disabled {
 			opacity: 0.5;
-			/* pointer-events: none; */
 		}
 	}
 </style>

package/src/Card/Card.stories.svelte

@@ -1,27 +1,12 @@
-<script context="module">
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Card from './Card.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
-	export const meta = {
-		title: 'Input Components/Card',
+	const { Story } = defineMeta({
+		title: 'Display/Card/Base',
 		component: Card
-	};
-</script>
-
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
-	import {
-		userEvent,
-		within,
-		expect,
-		getByTestId,
-		getAllByLabelText,
-		getByText
-	} from '@storybook/test';
-	import { hasContext } from 'svelte';
-	import Input from '../Input/Input.svelte';
-
-	let component;
+	});
 </script>
 
 <Story name="Basic card">

package/src/Card/Card.svelte

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

package/src/ChartFooter/ChartFooter.mdx

@@ -0,0 +1,17 @@
+import { Story,  Meta, Primary, Controls, Stories } from '@storybook/blocks';
+ 
+import * as ChartFooterStories from './ChartFooter.stories.svelte';
+
+<Meta of={ChartFooterStories}/>
+
+# Chart Footer
+
+Standard chart footer.
+
+- Nest arbitrary HTML inside component to render your notes
+- Use `one-up` layout unless your footnotes fit two lines or fewer.
+- Use `<Middot/>` to separate sentences
+
+<Controls  />
+
+<Stories/>

package/src/ChartFooter/ChartFooter.stories.svelte

@@ -1,40 +1,32 @@
 <script context="module">
-	import ChartFooter from './ChartFooter.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import ChartFooter from './ChartFooter.svelte';
 	import Middot from '../Middot/Middot.svelte';
 
-	export const meta = {
+	const { Story } = defineMeta({
 		title: 'Chart/ChartFooter',
 		component: ChartFooter
-	};
+	});
 </script>
 
-<script>
-	import { Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Story name="One-up">
+<Story name="One-up" tags={['autodocs']}>
 	<DesignTokens>
 		<ChartFooter layout="one-up">
-			Daten: <a href="https://www.zensus2022.de/DE/Aktuelles/Hinweis_Zensusatlas.html#_ck0gbia65"
-				>Zensus 2022</a
-			>
+			Daten: <a href="#1">Zensus 2022</a>
 			(Durchschnittsmieten und Einwohnerzahlen),
-			<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> (Kartenmaterial) <Middot
-			/> In unserer Darstellung wurde das Zensusgitter auf bewohnte Gebiete begrenzt.</ChartFooter
-		>
+			<a href="#1">OpenStreetMap</a> (Kartenmaterial) <Middot /> In unserer Darstellung wurde das Zensusgitter
+			auf bewohnte Gebiete begrenzt.
+		</ChartFooter>
 	</DesignTokens>
 </Story>
 
 <Story name="Two-up">
 	<DesignTokens>
 		<ChartFooter layout="two-up">
-			Daten: <a href="https://www.zensus2022.de/DE/Aktuelles/Hinweis_Zensusatlas.html#_ck0gbia65"
-				>Zensus 2022</a
-			>
-			(Durchschnittsmieten und Einwohnerzahlen),
-			<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> (Kartenmaterial) <Middot
-			/> In unserer Darstellung wurde das Zensusgitter auf bewohnte Gebiete begrenzt.
+			Daten: <a href="#1">Zensus 2022</a>
+			(Durchschnittsmieten und Einwohnerzahlen)
 		</ChartFooter>
 	</DesignTokens>
 </Story>

package/src/ChartFooter/ChartFooter.svelte

@@ -1,17 +1,26 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
 	import Logotype from '../Logotype/Logotype.svelte';
-	export let layout = 'one-up';
+
+	interface ChartFooterProps {
+		layout: 'one-up' | 'two-up';
+		children?: Snippet;
+	}
+
+	let { layout = 'one-up', children }: ChartFooterProps = $props();
 </script>
 
 <footer class={`container ${layout}`}>
-	<div class="notes">
-		<slot />
-	</div>
+	{#if children}
+		<div class="notes">
+			{@render children()}
+		</div>
+	{/if}
 	<Logotype />
 </footer>
 
 <style lang="scss">
-	@use '../styles/vars.scss';
+	@use '../styles/base.scss';
 
 	.container {
 		gap: 0.5rem;
@@ -19,21 +28,6 @@
 		font-family: var(--swr-sans);
 		line-height: 1.4;
 	}
-	.notes {
-		width: 100%;
-	}
-	footer :global(*) {
-		margin-bottom: 0;
-		color: var(--gray-base);
-	}
-	footer :global(a),
-	footer :global(summary) {
-		&:hover,
-		&:focus-visible {
-			color: rgb(50, 50, 50);
-		}
-	}
-
 	.one-up {
 		display: flex;
 		flex-flow: column;
@@ -42,10 +36,24 @@
 	.two-up {
 		display: grid;
 		grid-template-columns: 1fr;
-		@include vars.bp(vars.$break-phone) {
+		@media (min-width: base.$break-phone) {
 			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

@@ -0,0 +1,15 @@
+import { Story,  Meta, Primary, Controls, Stories } from '@storybook/blocks';
+ 
+import * as ChartHeaderStories from './ChartHeader.stories.svelte';
+
+<Meta of={ChartHeaderStories}/>
+
+# Chart header
+
+Standard chart header.
+
+- Any nested HTML will render under the description (useful for i.e colour keys and interactives controls).
+
+<Controls  />
+
+<Stories/>

package/src/ChartHeader/ChartHeader.stories.svelte

@@ -1,19 +1,22 @@
 <script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
 	import ChartHeader from './ChartHeader.svelte';
 
-	export const meta = {
+	const { Story } = defineMeta({
 		title: 'Chart/ChartHeader',
 		component: ChartHeader
-	};
-</script>
-
-<script>
-	import { Story } from '@storybook/addon-svelte-csf';
+	});
 </script>
 
-<Story name="Basic ChartHeader">
-	<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)"
-	/>
+<Story name="Default">
+	<DesignTokens>
+		<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)"
+		>
+			Arbitrary HTML content can go here
+		</ChartHeader>
+	</DesignTokens>
 </Story>

package/src/ChartHeader/ChartHeader.svelte

@@ -1,21 +1,27 @@
-<script>
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+<script lang="ts">
+	import type { Snippet } from 'svelte';
 
-	export let title = '';
-	export let subtitle = '';
+	interface ChartHeaderProps {
+		title: string;
+		subtitle?: string;
+		children?: Snippet;
+	}
+	let { title, subtitle, children }: ChartHeaderProps = $props();
 </script>
 
-<DesignTokens>
-	<header class="container">
-		<h2 class="title">{title}</h2>
+<header class="container">
+	<h2 class="title">{title}</h2>
+	{#if subtitle}
 		<p class="subtitle">{subtitle}</p>
-		<slot />
-	</header>
-</DesignTokens>
-
-<style lang="scss">
-	@use '../styles/vars.scss';
+	{/if}
+	{#if children}
+		<div class="content">
+			{@render children()}
+		</div>
+	{/if}
+</header>
 
+<style>
 	.container {
 		color: var(--violet-blue);
 		font-family: var(--swr-sans);

package/src/DesignTokens/DesignTokens.mdx

@@ -1,5 +1,5 @@
 import { Title, Story, ColorPalette, ColorItem, Meta, Typeset } from '@storybook/blocks';
-import {shades, scales} from "./Tokens"
+import { shades, scales } from "./Tokens"
 
 <Meta title='Design Tokens'/>
 
@@ -7,11 +7,13 @@ import {shades, scales} from "./Tokens"
 
 ## Usage
 
+### Web
+
 The `<DesignTokens>` component makes colours, type sizes and other design tokens available to its children as CSS variables.
 
-```jsx
+```html
 <script>
-  import DesignTokens from "components"
+  import DesignTokens from "@swr-data-lab/components"
 </script>
 
 <DesignTokens>
@@ -25,14 +27,18 @@ The `<DesignTokens>` component makes colours, type sizes and other design tokens
 </style>
 ```
 
-You can also import from `Tokens` directly to use colours in maps and charts:
+You can also import `tokens` directly to use them in Javascript:
 
-```js
-import { scales } from 'Tokens'
+```jsx
+import tokens from "@swr-data-lab/components"
 import { scaleThreshold } from 'd3-scale';
-const sampleScale = scaleThreshold([0, 10], scales.red_blue);
+const sampleScale = scaleThreshold([0, 10], tokens.scales.red_blue);
 ```
 
+### Figma
+
+The tokens on this page are available as a [Figma library](https://www.figma.com/design/Wrd7uUV3GxpNXXkM5ozuHk/Datalab-Design-Tokens?node-id=0-1&t=iOqDxhuMdvEyY8VK-1). This is enabled by default for any file in the [SWR Data Lab team](https://www.figma.com/files/1125823985461580916/team/1415988138343592768). 
+
 ## Available Tokens
 
 ### Typography
@@ -40,7 +46,7 @@ const sampleScale = scaleThreshold([0, 10], scales.red_blue);
 ### Colours
 
 <ColorPalette>
-{["violet", "red", "teal", "yellow", "forest", "pink", "orange", "plum", "apple", "blue", "gray"].map((el, i) => {
+{["violet", "plum", "pink", "red", "orange", "yellow", "apple" , "forest","teal",    "blue", "gray"].map((el, i) => {
 	return(
 		<ColorItem
 		title={`${el.split("")[0].toUpperCase()}${el.slice(1)}`}
@@ -59,7 +65,7 @@ const sampleScale = scaleThreshold([0, 10], scales.red_blue);
 	return(
 		<ColorItem
 		
-		title={`${el.split("_").join("/")}`}
+		title={`${el.split("_").map(c => {return c[0].toUpperCase() + c.slice(1)}).join("-")}`}
 		subtitle={el}
 		colors={scales[el]}
 	/>