@swr-data-lab/components 1.6.0 → 1.7.0

package/src/DesignTokens/DesignTokens.svelte

@@ -16,12 +16,13 @@
 		'display: contents',
 		'--fast: 150ms',
 		'--slow: 300ms',
+		'--app-max-width: 40rem',
 		'--br-large: 8px',
 		'--br-small: 4px',
-		'--ratio: 1.15',
 		'--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))',

package/src/DesignTokens/index.js

@@ -1,2 +1,9 @@
 import DesignTokens from './DesignTokens.svelte';
-export default DesignTokens;
+import { shades, scales } from './Tokens';
+
+const tokens = {
+	shades,
+	scales
+};
+
+export { DesignTokens, tokens };

package/src/HighlightCard/HighlightCard.stories.svelte

@@ -1,26 +1,12 @@
-<script context="module">
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import HighlightCard from './HighlightCard.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
-	export const meta = {
-		title: 'Input Components/HighlightCard',
+	const { Story } = defineMeta({
+		title: 'Display/Card/HighlightCard',
 		component: HighlightCard
-	};
-</script>
-
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
-	import {
-		userEvent,
-		within,
-		expect,
-		getByTestId,
-		getAllByLabelText,
-		getByText
-	} from '@storybook/test';
-	import { hasContext } from 'svelte';
-
-	let component;
+	});
 </script>
 
 <Story name="Basic HighlightCard">
@@ -63,7 +49,6 @@
 
 	:global(.highlight-cards > *) {
 		margin: 1rem 0;
-
 		@media (min-width: 900px) {
 			margin: 2rem 1rem;
 			flex: 1;

package/src/HighlightCard/HighlightCard.svelte

@@ -1,10 +1,14 @@
-<script>
+<script lang="ts">
 	import Card from '../Card/Card.svelte';
 
-	export let topline = '';
-	export let value = '';
-	export let unit = '';
-	export let subline = '';
+	interface HighlightCardProps {
+		topline?: string;
+		value?: string;
+		unit?: string;
+		subline?: string;
+	}
+
+	let { topline, value, unit, subline }: HighlightCardProps = $props();
 </script>
 
 <Card>
@@ -20,15 +24,15 @@
 			</span>
 			{unit}
 		</div>
-		<div class="bottom">
-			{@html subline}
-		</div>
+		{#if subline}
+			<div class="bottom">
+				{@html subline}
+			</div>
+		{/if}
 	</div>
 </Card>
 
 <style lang="scss">
-	@import '../styles/base.scss';
-
 	.card-wrapper {
 		display: flex;
 		flex-direction: column;
@@ -43,7 +47,7 @@
 	}
 
 	.middle {
-		font-family: $swr-sans;
+		font-family: var(--swr-sans);
 		font-size: 54px;
 		font-weight: 700;
 		padding-bottom: 0.2em;

package/src/Input/Input.svelte

@@ -11,7 +11,7 @@
 </div>
 
 <style lang="scss">
-	@import '../styles/base.scss';
+	@use '../styles/base.scss';
 
 	label {
 		@extend %form-label;

package/src/Intro.mdx

@@ -2,6 +2,6 @@ import { Meta } from "@storybook/blocks";
 
 <Meta title="About" />
 
-# SWR Components
+# SWR Data Lab Components
 
-Experimental component library for SWR Data interactives.
+Experimental component library for SWR Data Lab interactives.

package/src/Logotype/Logotype.stories.svelte

@@ -0,0 +1,16 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Logotype from './Logotype.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Chart/Logotype',
+		component: Logotype
+	});
+</script>
+
+<Story name="Basic">
+	<DesignTokens>
+		<Logotype></Logotype>
+	</DesignTokens>
+</Story>

package/src/Logotype/Logotype.svelte

@@ -1,4 +1,5 @@
 <svg viewBox="0 0 127 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<title>SWR Data Lab</title>
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"

package/src/Middot/Middot.stories.svelte

@@ -0,0 +1,16 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Middot from './Middot.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Chart/Middot',
+		component: Middot
+	});
+</script>
+
+<Story name="Basic">
+	<DesignTokens>
+		<Middot></Middot>
+	</DesignTokens>
+</Story>

package/src/Select/Select.mdx

@@ -0,0 +1,25 @@
+import { Story,  Meta, Primary, Controls, Stories} from '@storybook/blocks';
+ 
+import * as SelectStories from './Select.stories.svelte';
+
+<Meta of={SelectStories}/>
+
+# Select
+
+This component is a select input with a search feature and various options such as grouped items, multi-select etc. based on [svelte-select](https://github.com/rob-balfre/svelte-select).
+
+Select items passed to the `items` prop must be of type `SelectItem`:
+
+```ts
+interface SelectItem {
+    value: string;
+    label: string;
+    group?: string;
+    details?: any;
+}
+```
+
+<Controls/>
+
+<Stories/>
+

package/src/Select/Select.stories.svelte

@@ -1,91 +1,23 @@
-<script context="module">
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Select from './Select.svelte';
+	import StoryTemplate from './SelectStoriesTemplate.svelte';
 	import jobsData from './mock_data/jobs.json';
 
-	export const meta = {
-		title: 'Input Components/Select',
-		component: Select,
-
-		// FIXME: remove this manual documentation when autodocs are fixed
-		parameters: {
-			docs: {
-				description: {
-					component:
-						'This component is a select input with a search feature and various options such as grouped items, multi-select etc. based on https://github.com/rob-balfre/svelte-select'
-				}
-			}
-		},
-		argTypes: {
-			inputId: {
-				description: "The input field's ID",
-				control: 'text',
-				type: { name: 'string', required: false },
-				defaultValue: 'select'
-			},
-			placeholder: {
-				description: "The input field's placeholder text",
-				control: 'text',
-				type: { name: 'string', required: false },
-				defaultValue: 'Bitte auswählen'
-			},
-			groupHeaderSelectable: {
-				description: 'Whether the group names should be selectable as well',
-				type: { name: 'boolean', required: false },
-				defaultValue: 'false'
-			},
-			clearable: {
-				description: 'Show a button to clear the input',
-				type: { name: 'boolean', required: false },
-				defaultValue: 'false'
-			},
-			value: {
-				description: 'The currently selected option',
-				type: { name: 'any', required: false }
-			}
-		}
-	};
+	const { Story } = defineMeta({
+		title: 'Form/Select',
+		component: Select
+	});
 </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 selectedItem;
-	let component;
+<script lang="ts">
+	import { userEvent, within, expect } from '@storybook/test';
+	import { type SelectItem } from './Select.types';
+	let selectedItem: SelectItem | undefined = undefined;
 </script>
 
-<Template let:args>
-	<label for={args.inputId}>Select</label>
-
-	<Select {...args} bind:this={component} bind:value={selectedItem} />
-
-	{#if selectedItem}
-		<code class="output">
-			{JSON.stringify(selectedItem)}
-		</code>
-	{/if}
-</Template>
-
 <Story
 	name="Simple"
-	args={{
-		inputId: 'select',
-		clearable: true,
-		items: [
-			{ value: 'chocolate', label: 'Chocolate' },
-			{ value: 'cake', label: 'Cake' },
-			{ value: 'ice-cream', label: 'Ice Cream' }
-		]
-	}}
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		const select = canvas.getByLabelText('Select');
@@ -112,35 +44,38 @@
 			expect(selectedItem).toEqual(undefined);
 		});
 	}}
-/>
+>
+	<StoryTemplate
+		bind:selectedItem
+		args={{
+			inputId: 'select',
+			clearable: true,
+			items: [
+				{ value: 'chocolate', label: 'Chocolate' },
+				{ value: 'cake', label: 'Cake' },
+				{ value: 'ice-cream', label: 'Ice Cream' }
+			]
+		}}
+	/>
+</Story>
 
-<Story
-	name="Grouped"
-	args={{
-		items: [
-			{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
-			{ value: 'pizza', label: 'Pizza', group: 'Savory' },
-			{ value: 'cake', label: 'Cake', group: 'Sweet' },
-			{ value: 'chips', label: 'Chips', group: 'Savory' },
-			{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
-		]
-	}}
-/>
+<Story name="Grouped">
+	<StoryTemplate
+		bind:selectedItem
+		args={{
+			items: [
+				{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
+				{ value: 'pizza', label: 'Pizza', group: 'Savory' },
+				{ value: 'cake', label: 'Cake', group: 'Sweet' },
+				{ value: 'chips', label: 'Chips', group: 'Savory' },
+				{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
+			]
+		}}
+	/>
+</Story>
 
 <Story
 	name="Grouped (group header selectable)"
-	args={{
-		inputId: 'job-select',
-		placeholder: 'Ihr Beruf',
-		groupHeaderSelectable: true,
-		items: [
-			{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
-			{ value: 'pizza', label: 'Pizza', group: 'Savory' },
-			{ value: 'cake', label: 'Cake', group: 'Sweet' },
-			{ value: 'chips', label: 'Chips', group: 'Savory' },
-			{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
-		]
-	}}
 	play={async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		const select = canvas.getByLabelText('Select');
@@ -168,7 +103,23 @@
 			});
 		});
 	}}
-/>
+>
+	<StoryTemplate
+		bind:selectedItem
+		args={{
+			inputId: 'job-select',
+			placeholder: 'Ihr Beruf',
+			groupHeaderSelectable: true,
+			items: [
+				{ value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
+				{ value: 'pizza', label: 'Pizza', group: 'Savory' },
+				{ value: 'cake', label: 'Cake', group: 'Sweet' },
+				{ value: 'chips', label: 'Chips', group: 'Savory' },
+				{ value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' }
+			]
+		}}
+	/>
+</Story>
 
 <Story
 	name="Custom items"
@@ -195,52 +146,41 @@
 		});
 	}}
 >
-	<label for="job-select">Berufe</label>
-
-	<Select
-		bind:value={selectedItem}
-		inputId="job-select"
-		placeholder="z.B. Taxifahrer/in"
-		items={jobsData
-			.sort((a, b) => a.label.localeCompare(b.label))
-			.map((item) => ({
-				value: item.value,
-				label: `${item.label}: ${item.add_on}`, // used for filtering
-				details: {
-					title: item.label, // used for display
-					addon: item.add_on // used for display
-				}
-			}))}
-		groupHeaderSelectable={false}
-	>
-		<div slot="item" let:item class="custom-item">
-			<h4 class="custom-item-title" data-testid="custom-item-title">
-				{item.details.title}
-			</h4>
-			<p class="custom-item-addon" data-testid="custom-item-addon">{item.details.addon}</p>
-		</div>
-		<div slot="selection" let:selection class="selection">
-			{selection.details.title}
-		</div>
-	</Select>
-
-	{#if selectedItem}
-		<code class="output">
-			{JSON.stringify(selectedItem)}
-		</code>
-	{/if}
+	<StoryTemplate>
+		{#snippet demoComponent()}
+			<label for="job-select">Berufe</label>
+			<Select
+				bind:value={selectedItem}
+				inputId="job-select"
+				placeholder="z.B. Taxifahrer/in"
+				items={jobsData
+					.sort((a, b) => a.label.localeCompare(b.label))
+					.map((item) => ({
+						value: item.value,
+						label: `${item.label}: ${item.add_on}`, // used for filtering
+						details: {
+							title: item.label, // used for display
+							addon: item.add_on // used for display
+						}
+					}))}
+				groupHeaderSelectable={false}
+			>
+				<div slot="item" let:item class="custom-item">
+					<h4 class="custom-item-title" data-testid="custom-item-title">
+						{item.details.title}
+					</h4>
+					<p class="custom-item-addon" data-testid="custom-item-addon">{item.details.addon}</p>
+				</div>
+				<div slot="selection" let:selection class="selection">
+					{selection.details.title}
+				</div>
+			</Select>
+		{/snippet}
+	</StoryTemplate>
 </Story>
 
 <style>
-	.output {
-		display: block;
-		margin-top: 1rem;
-		padding: 1rem;
-		background: #dadada;
-	}
-
 	.custom-item {
-		font-family: sans-serif;
 		font-size: 0.9rem;
 		margin-top: 0.2rem;
 	}

package/src/Select/Select.svelte

@@ -1,84 +1,76 @@
 <script lang="ts">
 	import Select from 'svelte-select';
+	import { type SelectItem } from './Select.types';
 
-	// FUTURE: is it possible to highlight match in select options?
-
-	/** FIXME:
-	 * NOTE: Storybook autodocs are not working for this component
-	 * because of the Select import. Set the docs manually instead. */
-
-	/**
-	 * The interface for select options
-	 */
-	interface Option {
-		value: string;
-		label: string;
-		group?: string;
-		details?: any;
+	interface SelectProps {
+		/**
+		 * The input field's ID. Should be unique across the page.
+		 */
+		inputId: string;
+		/**
+		 * The input field's placeholder text
+		 */
+		placeholder: string;
+		/**
+		 * The list of select options
+		 */
+		items: SelectItem[];
+		/**
+		 * Define custom item groupings. By default items are grouped by their `group` key
+		 */
+		groupBy?: ((item: SelectItem) => string) | undefined;
+		/**
+		 * Whether group names should be selectable
+		 */
+		groupHeaderSelectable?: boolean;
+		clearable?: boolean;
+		value: SelectItem | undefined;
 	}
 
-	/**
-	 * The input field's ID
-	 */
-	export let inputId: string = 'select';
-
-	/**
-	 * The input field's placeholder text
-	 */
-	export let placeholder: string = 'Bitte auswählen';
-
-	/**
-	 * The list of select options
-	 */
-	export let items: Option[] = [];
-
-	let groupBy: ((item: Option) => string) | undefined;
-	$: groupBy =
-		items.length > 0 && items.every((item) => item.group)
-			? (item: Option) => item.group as string
-			: undefined;
-
-	/**
-	 * Whether the group names should be selectable as well
-	 */
-	export let groupHeaderSelectable: boolean = false;
+	let {
+		inputId = 'select',
+		placeholder = 'Bitte auswählen',
+		items = [],
+		groupBy,
+		groupHeaderSelectable = false,
+		clearable = true,
+		value = $bindable(undefined)
+	}: SelectProps = $props();
 
-	/**
-	 * Enable clearing the input
-	 */
-	export let clearable: boolean = true;
-
-	export let value: Option | undefined;
+	const groupByFn = groupBy || ((item: SelectItem) => item.group as string);
 </script>
 
-<!--
-This component is a select input with search feature 
-and various options such as grouped items, multi-select etc.
-based on https://github.com/rob-balfre/svelte-select
-@component
--->
-
-<Select {items} {groupBy} id={inputId} {placeholder} {groupHeaderSelectable} {clearable} bind:value>
-	<svelte:fragment slot="item" let:item>
-		<slot name="item" {item}>
-			{item.label}
-		</slot>
-	</svelte:fragment>
-	<svelte:fragment slot="selection" let:selection>
-		<slot name="selection" {selection}>
-			{selection.label}
-		</slot>
-	</svelte:fragment>
-</Select>
+<div class="container">
+	<Select
+		{items}
+		groupBy={items.length > 0 && items.every((item) => item.group) ? groupByFn : undefined}
+		id={inputId}
+		{placeholder}
+		{groupHeaderSelectable}
+		{clearable}
+		class="container"
+		bind:value
+	>
+		<div class="item" slot="item" let:item>
+			<slot name="item" {item}>
+				{item.label}
+			</slot>
+		</div>
+		<div class="selection" slot="selection" let:selection>
+			<slot name="selection" {selection}>
+				{selection.label}
+			</slot>
+		</div>
+	</Select>
+</div>
 
 <style lang="scss">
-	@import '../styles/base.scss';
-
-	// TODO: styling (font etc.)
-	// .svelte-select, .svelte-select-list {
-	//     @extend %copy;
-	// }
-	// 	--border: 3px solid blue;
-	// 	--border-radius: 10px;
-	// 	--placeholder-color: blue;
+	.item {
+		font-family: var(--swr-sans);
+		color: var(--violet-dark-5);
+	}
+	.selection {
+		font-family: var(--swr-sans);
+		color: var(--violet-dark-5);
+	}
 </style>

package/src/Select/Select.types.ts

@@ -0,0 +1,8 @@
+interface SelectItem {
+    value: string;
+    label: string;
+    group?: string;
+    details?: any;
+}
+
+export { type SelectItem }

package/src/Select/SelectStoriesTemplate.svelte

@@ -0,0 +1,35 @@
+<script>
+	import Select from './Select.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	let { args = null, selectedItem = $bindable(), demoComponent = null } = $props();
+</script>
+
+<DesignTokens>
+	{#if demoComponent}
+		{@render demoComponent()}
+	{:else}
+		<label for={args.inputId}>Select</label>
+		<Select {...args} bind:value={selectedItem} />
+	{/if}
+</DesignTokens>
+
+{#if selectedItem}
+	<pre class="output">
+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;
+		padding: 1rem;
+		background: #fcfaff;
+		color: rgb(18, 69, 139);
+	}
+</style>