@swr-data-lab/components 1.9.1 → 1.11.0

package/src/DesignTokens/DesignTokens.mdx

@@ -1,10 +1,29 @@
-import { Title, Story, ColorPalette, ColorItem, Meta, Typeset } from '@storybook/blocks';
-import { shades, scales } from "./Tokens"
+import { Title, Story, ColorPalette, ColorItem, Meta, Typeset, Canvas } from '@storybook/addon-docs/blocks';
+import { shades, scales, typography } from "./Tokens"
+
+import * as HeadlineStories from "../Headline/Headline.stories.svelte"
+import * as CopyStories from "../Copy/Copy.stories.svelte"
+import * as CaptionStories from "../Caption/Caption.stories.svelte"
+import * as NoteStories from "../Note/Note.stories.svelte"
 
 <Meta title='Design Tokens'/>
 
 # Design Tokens
 
+## Table of Contents
+ 
+- [Usage](#usage)
+  - [Web](#web)
+  - [Figma](#figma) 
+- [Typography](#typography)
+  - [Sizes](#sizes)
+  - [Styles](#styles)
+- [Colours](#colours)
+	- [Shades](#shades)
+	- [Linear scales](#linear-scales)
+	- [Categorical Scales](#categorical-scales)
+	- [Divergent Scales](#divergent-scales)
+
 ## Usage
 
 ### Web
@@ -39,12 +58,32 @@ const sampleScale = scaleThreshold([0, 10], tokens.scales.red_blue);
 
 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
+## Typography
+
+Type sizes and paragraph styles are designed to match the typography on [swr.de](https://www.swr.de/). **Styles** come with built-in settings for `line-height`, `letter-spacing`, etc. and should be preferred over using **sizes** directly.
+
+### Styles
+#### H2
+<Canvas of={HeadlineStories.Default}/>
+
+#### Copy
+<Canvas of={CopyStories.Default}/>
+
+#### Caption
+<Canvas of={CaptionStories.Default}/>
 
-### Colours
+#### Note
+<Canvas of={NoteStories.Default}/>
 
+### Sizes
+<Typeset fontWeight={600} fontFamily='SWR-VAR-Text' sampleText='Pollenflug in BW: Was Heuschnupfengeplagte jetzt wissen sollten' fontSizes={Object.entries(typography.wide.sizes).map(([key, size]) => {
+	return size
+}).reverse()}/>
+
+
+## Colours
+### Shades
 <ColorPalette>
 {["violet", "plum", "pink", "red", "orange", "yellow", "apple" , "forest","teal",    "blue", "gray"].map((el, i) => {
 	return(
@@ -61,14 +100,11 @@ The tokens on this page are available as a [Figma library](https://www.figma.com
 ### Divergent Scales
 
 <ColorPalette>
-{["red_blue", "red_violet",  "red_forest", "red_apple", "red_teal", "violet_teal","violet_orange", "blue_pink", "teal_pink","forest_plum","apple_plum",  "orange_blue", "orange_teal"].map((el, i) => {
-	return(
-		<ColorItem
-		
-		title={`${el.split("_").map(c => {return c[0].toUpperCase() + c.slice(1)}).join("-")}`}
-		subtitle={el}
-		colors={scales[el]}
-	/>
-			) 
+{["red_blue", "red_violet", "red_forest", "red_apple", "red_teal", "violet_teal", "violet_orange", "blue_pink", "teal_pink", "forest_plum", "apple_plum", "orange_blue", "orange_teal"].map((el, _) => {
+	return(<ColorItem	
+			title={`${el.split("_").map(c => {return c[0].toUpperCase() + c.slice(1)}).join("/")}`}
+			subtitle={el}
+			colors={scales[el]}
+		/>) 
 })}
 </ColorPalette>

package/src/DesignTokens/DesignTokens.svelte

@@ -1,6 +1,12 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
 	import { shades } from './Tokens';
 
+	interface DesignTokensProps {
+		children?: Snippet;
+	}
+	let { children }: DesignTokensProps = $props();
+
 	const rules = [
 		...Object.keys(shades).map((key) => {
 			return Object.entries(shades[key])
@@ -11,35 +17,55 @@
 						: `--${key}-${ldb}-${index}: ${value}`;
 				})
 				.join(';');
-		}),
-		,
-		'display: contents',
-		'--fast: 150ms',
-		'--slow: 300ms',
-		'--app-max-width: 40rem',
-		'--br-large: 8px',
-		'--br-small: 4px',
-		'--input-height: 2.5rem',
-		'--swr-sans: "SWR-VAR-Sans", sans-serif',
-		'--swr-text: "SWR-VAR-Text", sans-serif',
-		'--ratio: 1.15',
-		'--fs-small-3: calc(var(--fs-small-2) / var(--ratio))',
-		'--fs-small-2: calc(var(--fs-small-1) / var(--ratio))',
-		'--fs-small-1: calc(var(--fs-base) / var(--ratio))',
-		'--fs-base: clamp(1rem, calc(1.5vw + 0.25rem), 1.125rem)',
-		'--fs-large-1: calc(var(--fs-base) * var(--ratio))',
-		'--fs-large-2: calc(var(--fs-large-1) * var(--ratio))',
-		'--fs-large-3: calc(var(--fs-large-2) * var(--ratio))'
+		})
 	];
 </script>
 
 <div class="container" style={rules.join(';')}>
-	<slot />
+	{#if children}
+		{@render children()}
+	{/if}
 </div>
 
-<style>
+<style lang="scss">
+	@use '../styles/base.scss';
+
 	:global(*) {
 		margin: 0;
 		padding: 0;
 	}
+
+	.container {
+		display: contents;
+		--fast: 150ms;
+		--slow: 300ms;
+		--app-max-width: 40rem;
+		--br-large: 8px;
+		--br-small: 4px;
+		--input-height: 2.5rem;
+		--swr-text: 'SWR-VAR-Text', sans-serif;
+		--swr-sans: 'SWR-VAR-Sans', sans-serif;
+
+		// Type scale copied 1:1 from swr.de
+
+		--fs-small-3: 0.75rem;
+		--fs-small-2: 0.875rem;
+		--fs-small-1: 1rem;
+		--fs-base: 1.125rem;
+		--fs-large-1: 1.25rem;
+		--fs-large-2: 1.5rem;
+		--fs-large-3: 1.75rem;
+		--fs-large-4: 2.25rem;
+
+		@media (min-width: base.$bp-m) {
+			--fs-small-3: 0.75rem;
+			--fs-small-2: 0.875rem;
+			--fs-small-1: 1rem;
+			--fs-base: 1.25rem;
+			--fs-large-1: 1.5rem;
+			--fs-large-2: 2rem;
+			--fs-large-3: 2.5rem;
+			--fs-large-4: 3.5rem;
+		}
+	}
 </style>

package/src/DesignTokens/{Tokens.js → Tokens.ts}

@@ -1,4 +1,14 @@
-const shades = {
+interface ColourMap {
+	[index: string]: ColourPalette | ColourList;
+}
+interface ColourPalette {
+	[index: string]: string
+}
+interface ColourList {
+	[index: number]: string
+}
+
+const shades: ColourMap = {
 	violet: {
 		light5: '#f3eefa',
 		light4: '#e5dbf5',
@@ -138,31 +148,36 @@ const shades = {
 	}
 };
 
-const scales = {
-	violets: [
-		shades.violet.dark3,
-		shades.violet.dark2,
-		shades.violet.dark1,
-		shades.violet.base,
-		shades.violet.light1,
-		shades.violet.light2,
-		shades.violet.light3
-	],
-	red_blue: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.blue)],
-	red_violet: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.violet)],
-	violet_teal: [...Object.entries(shades.violet).reverse(), ...Object.entries(shades.teal)],
-	orange_teal: [...Object.entries(shades.orange).reverse(), ...Object.entries(shades.teal)],
-	red_forest: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.forest)],
-	red_apple: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.apple)],
-	red_teal: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.violet)],
-	violet_orange: [...Object.entries(shades.violet).reverse(), ...Object.entries(shades.orange)],
-	orange_blue: [...Object.entries(shades.orange).reverse(), ...Object.entries(shades.blue)],
-	teal_pink: [...Object.entries(shades.teal).reverse(), ...Object.entries(shades.pink)],
-	blue_pink: [...Object.entries(shades.blue).reverse(), ...Object.entries(shades.pink)],
-	apple_plum: [...Object.entries(shades.apple).reverse(), ...Object.entries(shades.plum)],
-	forest_plum: [...Object.entries(shades.forest).reverse(), ...Object.entries(shades.plum)]
+const scales: ColourMap = {
+	red_blue: [...Object.values(shades.red).reverse(), ...Object.values(shades.blue)],
+	red_violet: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)],
+	violet_teal: [...Object.values(shades.violet).reverse(), ...Object.values(shades.teal)],
+	orange_teal: [...Object.values(shades.orange).reverse(), ...Object.values(shades.teal)],
+	red_forest: [...Object.values(shades.red).reverse(), ...Object.values(shades.forest)],
+	red_apple: [...Object.values(shades.red).reverse(), ...Object.values(shades.apple)],
+	red_teal: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)],
+	violet_orange: [...Object.values(shades.violet).reverse(), ...Object.values(shades.orange)],
+	orange_blue: [...Object.values(shades.orange).reverse(), ...Object.values(shades.blue)],
+	teal_pink: [...Object.values(shades.teal).reverse(), ...Object.values(shades.pink)],
+	blue_pink: [...Object.values(shades.blue).reverse(), ...Object.values(shades.pink)],
+	apple_plum: [...Object.values(shades.apple).reverse(), ...Object.values(shades.plum)],
+	forest_plum: [...Object.values(shades.forest).reverse(), ...Object.values(shades.plum)]
 };
 
-const typography = {};
 
-export { shades, scales };
+const typography = {
+	wide: {
+		sizes: {
+			"fs-small-3": "0.75rem",
+			"fs-small-2": "0.875rem",
+			"fs-small-1": "1rem",
+			"fs-base": "1.25rem",
+			"fs-large-1": "1.5rem",
+			"fs-large-2": "2rem",
+			"fs-large-3": "2.5rem",
+			"fs-large-4": "3.5rem"
+		}
+	}
+};
+
+export { shades, scales, typography };

package/src/FormLabel/FormLabel.mdx

@@ -0,0 +1,13 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+ 
+import * as FormLabelStories from './FormLabel.stories.svelte';
+
+<Meta of={FormLabelStories}/>
+
+# Form Label
+
+Standard form label. The `htmlFor` prop is required to semantically link the label to the form element it describes. 
+
+<Controls  />
+
+<Stories/>

package/src/FormLabel/FormLabel.stories.svelte

@@ -0,0 +1,50 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { userEvent, within, expect } from 'storybook/test';
+
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import FormLabel from './FormLabel.svelte';
+	import Select from '../Select/Select.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Form/Label'
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<FormLabel htmlFor="">Deine Gemeinde</FormLabel>
+	</DesignTokens>
+</Story>
+
+<Story
+	name="With Select"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const label = canvas.getByTestId('label-container');
+		const input = canvas.getByPlaceholderText('...');
+		await step('Label renders children', async () => {
+			await userEvent.click(label);
+			expect(label).toHaveTextContent('Deine Gemeinde');
+		});
+		await step('Clicking the label focuses the input', async () => {
+			await userEvent.click(label);
+			expect(input).toHaveFocus();
+		});
+	}}
+>
+	<DesignTokens>
+		<FormLabel htmlFor="select-gemeinde">Deine Gemeinde</FormLabel>
+		<Select
+			inputId="select-gemeinde"
+			placeholder="..."
+			value={undefined}
+			items={[
+				{ value: 'konstanz', label: 'Konstanz' },
+				{ value: 'stuttgart', label: 'Stuttgart' },
+				{ value: 'heidelberg', label: 'Heidelberg' }
+			]}
+		></Select>
+	</DesignTokens>
+</Story>

package/src/FormLabel/FormLabel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface FormLabelProps {
+		as?: string;
+		htmlFor?: string;
+		children?: Snippet;
+	}
+	let { as = 'label', htmlFor, children }: FormLabelProps = $props();
+</script>
+
+{#if as == 'legend'}
+	<legend class="container" data-testid="label-container">
+		{#if children}
+			{@render children()}
+		{/if}
+	</legend>
+{/if}
+{#if as == 'label'}
+	<label class="container" for={htmlFor} data-testid="label-container">
+		{#if children}
+			{@render children()}
+		{/if}
+	</label>
+{/if}
+
+<style>
+	.container {
+		font-family: var(--swr-text);
+		font-size: var(--fs-small-1);
+		font-weight: 400;
+		margin-bottom: 0.25em;
+		display: inline-block;
+		letter-spacing: 0.005em;
+	}
+</style>

package/src/FormLabel/index.ts

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

package/src/Headline/Headline.stories.svelte

@@ -0,0 +1,16 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import Headline from './Headline.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Typography/Headline'
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
+	</DesignTokens>
+</Story>

package/src/Headline/Headline.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface HeadlineProps {
+		children?: Snippet;
+	}
+	let { children }: HeadlineProps = $props();
+</script>
+
+<h2 class="container">
+	{#if children}
+		{@render children()}
+	{/if}
+</h2>
+
+<style>
+	.container {
+		font-family: var(--swr-text);
+		font-size: var(--fs-large-1);
+		font-weight: 550;
+		letter-spacing: 0.005em;
+	}
+</style>

package/src/Headline/index.ts

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

package/src/HighlightCard/HighlightCard.stories.svelte

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

package/src/HighlightCard/HighlightCard.svelte

@@ -47,8 +47,7 @@
 	}
 
 	.middle {
-		font-family: var(--swr-sans);
-		font-size: 54px;
+		font-size: var(--fs-large-4);
 		font-weight: 700;
 		padding-bottom: 0.2em;
 	}

package/src/Input/Input.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import FormLabel from '../FormLabel/FormLabel.svelte';
+
 	export let label: string = '';
 	export let name: string = '';
 	export let placeholder: string = '';
@@ -6,16 +8,13 @@
 </script>
 
 <div class="container">
-	<label for={name}>{label}</label>
+	<FormLabel htmlFor={name}>{label}</FormLabel>
 	<input {name} type="text" {placeholder} bind:value />
 </div>
 
 <style lang="scss">
 	@use '../styles/base.scss';
 
-	label {
-		@extend %form-label;
-	}
 	input {
 		@extend %form-input;
 	}

package/src/Intro.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="About" />
 

package/src/Logotype/Logotype.stories.svelte

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

package/src/Middot/Middot.stories.svelte

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

package/src/Note/Note.stories.svelte

@@ -0,0 +1,22 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import Middot from '../Middot/Middot.svelte';
+
+	import Note from './Note.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Typography/Note'
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<Note>
+			Daten: <a href="#1">Zensus 2022</a>
+			(Durchschnittsmieten und Einwohnerzahlen),
+			<a href="#1">OpenStreetMap</a> (Kartenmaterial) <Middot /> In unserer Darstellung wurde das Zensusgitter
+			auf bewohnte Gebiete begrenzt.
+		</Note>
+	</DesignTokens>
+</Story>

package/src/Note/Note.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface NoteProps {
+		children?: Snippet;
+	}
+	let { children }: NoteProps = $props();
+</script>
+
+<div class="container">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style lang="scss">
+	.container {
+		font-family: var(--swr-sans);
+		font-size: var(--fs-small-2);
+		line-height: 1.4;
+		letter-spacing: 0.001em;
+		color: var(--gray-base);
+
+		:global(*) {
+			color: inherit;
+		}
+		:global(p) {
+			margin-bottom: 0.5em;
+		}
+		:global(a),
+		:global(summary) {
+			&:hover,
+			&:focus-visible {
+				color: var(--gray-dark-3);
+			}
+		}
+	}
+</style>

package/src/Note/index.ts

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

package/src/Select/Select.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 SelectStories from './Select.stories.svelte';
 

package/src/Select/Select.stories.svelte

@@ -1,17 +1,17 @@
 <script context="module" lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Select from './Select.svelte';
+	import FormLabel from '../FormLabel/FormLabel.svelte';
 	import StoryTemplate from './SelectStoriesTemplate.svelte';
 	import jobsData from './mock_data/jobs.json';
 
 	const { Story } = defineMeta({
-		title: 'Form/Select',
-		component: Select
+		title: 'Form/Select'
 	});
 </script>
 
 <script lang="ts">
-	import { userEvent, within, expect } from '@storybook/test';
+	import { userEvent, within, expect } from 'storybook/test';
 	import { type SelectItem } from './Select.types';
 	let selectedItem: SelectItem | undefined = undefined;
 </script>
@@ -148,7 +148,7 @@
 >
 	<StoryTemplate>
 		{#snippet demoComponent()}
-			<label for="job-select">Berufe</label>
+			<FormLabel htmlFor="job-select">Berufe</FormLabel>
 			<Select
 				bind:value={selectedItem}
 				inputId="job-select"

package/src/Select/SelectStoriesTemplate.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Select from './Select.svelte';
+	import FormLabel from '../FormLabel/FormLabel.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
 	let { args = null, selectedItem = $bindable(), demoComponent = null } = $props();
@@ -9,7 +10,7 @@
 	{#if demoComponent}
 		{@render demoComponent()}
 	{:else}
-		<label for={args.inputId}>Select</label>
+		<FormLabel htmlFor={args.inputId}>Select</FormLabel>
 		<Select {...args} bind:value={selectedItem} />
 	{/if}
 </DesignTokens>
@@ -20,11 +21,6 @@ value = {JSON.stringify(selectedItem, null, ' ')}</pre>
 {/if}
 
 <style>
-	label {
-		display: block;
-		font-family: var(--swr-sans);
-		margin-bottom: 0.25em;
-	}
 	.output {
 		display: block;
 		margin-top: 1rem;

package/src/Switcher/Switcher.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 SwictherStories from './Switcher.stories.svelte';
 

package/src/Switcher/Switcher.stories.svelte

@@ -2,11 +2,10 @@
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Switcher from './Switcher.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { userEvent, within, expect } from '@storybook/test';
+	import { userEvent, within, expect } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: 'Form/Switcher',
-		component: Switcher
+		title: 'Form/Switcher'
 	});
 </script>