@swr-data-lab/components 1.13.1 → 1.13.3

package/dist/FormLabel/FormLabel.mdx

@@ -1,13 +0,0 @@
-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/dist/FormLabel/FormLabel.stories.svelte

@@ -1,52 +0,0 @@
-<script 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',
-		component: FormLabel
-	});
-</script>
-
-<Story name="Default" asChild>
-	<DesignTokens>
-		<FormLabel htmlFor="">Deine Gemeinde</FormLabel>
-	</DesignTokens>
-</Story>
-
-<Story
-	name="With Select"
-	asChild
-	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/dist/FormLabel/FormLabel.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default FormLabel;
-type FormLabel = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const FormLabel: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import FormLabel from './FormLabel.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/Headline/Headline.stories.svelte

@@ -1,17 +0,0 @@
-<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',
-		component: Headline
-	});
-</script>
-
-<Story name="Default" asChild>
-	<DesignTokens>
-		<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
-	</DesignTokens>
-</Story>

package/dist/Headline/Headline.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Headline;
-type Headline = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Headline: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Headline from './Headline.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/HighlightCard/HighlightCard.stories.svelte

@@ -1,55 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import HighlightCard from './HighlightCard.svelte';
-import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-const { Story } = defineMeta({
-    title: 'Display/Card/HighlightCard',
-    component: HighlightCard
-});
-</script>
-
-<Story name="Basic HighlightCard" asChild>
-	<DesignTokens>
-		<HighlightCard
-			topline="Die letzte Großspende liegt bei"
-			value="375.000"
-			unit="Euro"
-			subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
-		/>
-	</DesignTokens>
-</Story>
-
-<Story name="Multiple HighlightCards" asChild>
-	<DesignTokens>
-		<div class="highlight-cards">
-			<HighlightCard
-				topline="Im aktuellen Jahr wurden bisher"
-				value="375.000"
-				unit="€"
-				subline="an Parteien gespendet."
-			/>
-			<HighlightCard
-				topline="Die letzte Großspende liegt bei"
-				value="37.500"
-				unit="€"
-				subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
-			/>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.highlight-cards {
-		@media (min-width: 900px) {
-			margin: 0 -1rem;
-			display: flex;
-		}
-	}
-
-	:global(.highlight-cards > *) {
-		margin: 1rem 0;
-		@media (min-width: 900px) {
-			margin: 2rem 1rem;
-			flex: 1;
-		}
-	}
-</style>

package/dist/HighlightCard/HighlightCard.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import HighlightCard from './HighlightCard.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const HighlightCard: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type HighlightCard = InstanceType<typeof HighlightCard>;
-export default HighlightCard;

package/dist/Intro.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="About" />
-
-# SWR Data Lab Components
-
-Experimental component library for SWR Data Lab interactives.

package/dist/Logotype/Logotype.stories.svelte

@@ -1,14 +0,0 @@
-<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" asChild>
-	<DesignTokens>
-		<Logotype></Logotype>
-	</DesignTokens>
-</Story>

package/dist/Logotype/Logotype.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Logotype from './Logotype.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Logotype: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Logotype = InstanceType<typeof Logotype>;
-export default Logotype;

package/dist/Middot/Middot.stories.svelte

@@ -1,14 +0,0 @@
-<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" asChild>
-	<DesignTokens>
-		<Middot></Middot>
-	</DesignTokens>
-</Story>

package/dist/Middot/Middot.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Middot from './Middot.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Middot: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Middot = InstanceType<typeof Middot>;
-export default Middot;

package/dist/Note/Note.stories.svelte

@@ -1,23 +0,0 @@
-<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',
-		component: Note
-	});
-</script>
-
-<Story name="Default" asChild>
-	<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/dist/Note/Note.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Note;
-type Note = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Note: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Note from './Note.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/Select/Select.mdx

@@ -1,25 +0,0 @@
-import { Story,  Meta, Primary, Controls, Stories} from '@storybook/addon-docs/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/dist/Select/Select.stories.svelte

@@ -1,202 +0,0 @@
-<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
-});
-</script>
-
-<script lang="ts">import { userEvent, within, expect } from 'storybook/test';
-import {} from './Select.types';
-let selectedItem = undefined;
-</script>
-
-<Story
-	name="Simple"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Select');
-
-		await step('Clicking an option selects that item', async () => {
-			await userEvent.click(select);
-			await userEvent.click(canvas.getByText('Cake'));
-			expect(selectedItem).toEqual({ value: 'cake', label: 'Cake' });
-		});
-
-		await step('Entering a complete label selects that item', async () => {
-			await userEvent.type(select, 'Chocolate{enter}');
-			expect(selectedItem).toEqual({ value: 'chocolate', label: 'Chocolate' });
-		});
-
-		await step('Entering a unique part of a label selects the matching item', async () => {
-			await userEvent.type(select, 'Ice{enter}');
-			expect(selectedItem).toEqual({ value: 'ice-cream', label: 'Ice Cream' });
-		});
-
-		await step('Tapping the clear button clears the input', async () => {
-			const clearButton = document.querySelector('.clear-select');
-			await userEvent.click(clearButton);
-			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" asChild>
-	<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)"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Select');
-
-		await step('Clicking an option header selects that header item', async () => {
-			await userEvent.click(select);
-			await userEvent.click(canvas.getByText('Savory'));
-			expect(selectedItem).toEqual({
-				groupHeader: true,
-				id: 'Savory',
-				label: 'Savory',
-				selectable: true,
-				value: 'Savory'
-			});
-		});
-
-		await step('Entering a label text selects its group header', async () => {
-			await userEvent.type(select, 'Chocolate{enter}');
-			expect(selectedItem).toEqual({
-				groupHeader: true,
-				id: 'Sweet',
-				label: 'Sweet',
-				selectable: true,
-				value: 'Sweet'
-			});
-		});
-	}}
->
-	<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"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-		const select = canvas.getByLabelText('Berufe');
-
-		await step('Render custom list item with the supplied data', async () => {
-			await userEvent.type(select, 'Journalismus');
-			expect(canvas.getByTestId('custom-item-title').innerText).toEqual('Journalismus');
-			expect(canvas.getByTestId('custom-item-addon').innerText).toContain('Redakteur/in');
-			await userEvent.type(select, '{enter}');
-			expect(selectedItem?.details.title).toEqual('Journalismus');
-		});
-
-		await step('Entering an item\'s "title" selects that item', async () => {
-			await userEvent.type(select, 'Tierpflege{enter}');
-			expect(selectedItem?.details.title).toEqual('Tierpflege');
-		});
-
-		await step('Entering an item\'s "addon" selects that item', async () => {
-			await userEvent.type(select, 'Zirkuskünstler{enter}');
-			expect(selectedItem?.details.title).toEqual('Schauspiel und Tanz');
-		});
-	}}
->
-	<StoryTemplate>
-		{#snippet demoComponent()}
-			<FormLabel htmlFor="job-select">Berufe</FormLabel>
-			<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>
-	.custom-item {
-		font-size: 0.9rem;
-		margin-top: 0.2rem;
-	}
-
-	.custom-item-title {
-		margin: 0 0 0 -0.8rem;
-		padding: 0;
-		line-height: 1.4;
-	}
-
-	.custom-item-addon {
-		margin: 0 0 0 -0.8rem;
-		padding: 0;
-		line-height: 1;
-		opacity: 0.6;
-		font-size: 0.8rem;
-	}
-</style>

package/dist/Select/Select.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Select from './Select.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Select: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Select = InstanceType<typeof Select>;
-export default Select;

package/dist/Select/SelectStoriesTemplate.svelte

@@ -1,31 +0,0 @@
-<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();
-</script>
-
-<DesignTokens>
-	{#if demoComponent}
-		{@render demoComponent()}
-	{:else}
-		<FormLabel htmlFor={args.inputId}>Select</FormLabel>
-		<Select {...args} bind:value={selectedItem} />
-	{/if}
-</DesignTokens>
-
-{#if selectedItem}
-	<pre class="output">
-value = {JSON.stringify(selectedItem, null, ' ')}</pre>
-{/if}
-
-<style>
-	.output {
-		display: block;
-		margin-top: 1rem;
-		padding: 1rem;
-		background: #fcfaff;
-		color: rgb(18, 69, 139);
-	}
-</style>

package/dist/Select/SelectStoriesTemplate.svelte.d.ts

@@ -1,15 +0,0 @@
-export default SelectStoriesTemplate;
-type SelectStoriesTemplate = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const SelectStoriesTemplate: import("svelte").Component<{
-    args?: any;
-    selectedItem?: any;
-    demoComponent?: any;
-}, {}, "selectedItem">;
-type $$ComponentProps = {
-    args?: any;
-    selectedItem?: any;
-    demoComponent?: any;
-};

package/dist/Switcher/Switcher.mdx

@@ -1,13 +0,0 @@
-import { Story,  Meta, Primary, Controls, Stories} from '@storybook/addon-docs/blocks';
- 
-import * as SwictherStories from './Switcher.stories.svelte';
-
-<Meta of={SwictherStories}/>
-
-# Switcher
-
-Radio-like form component to choose exactly one of a given set of options.
-
-<Controls/>
-
-<Stories/>