@swr-data-lab/components 1.13.1 → 1.13.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "1.13.1",
+	"version": "1.13.2",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",
@@ -81,9 +81,7 @@
 		]
 	},
 	"files": [
-		"./dist",
-		"!./dist/**/*.test.*",
-		"!./dist/**/*.stories.*"
+		"dist/"
 	],
 	"sideEffects": [
 		"**/*.css"

package/dist/Autocomplete/Autocomplete.stories.svelte

@@ -1,61 +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 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"
-	asChild
-	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/dist/Autocomplete/Autocomplete.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Autocomplete;
-type Autocomplete = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Autocomplete: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Autocomplete from './Autocomplete.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/Button/Button.stories.svelte

@@ -1,19 +0,0 @@
-<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',
-    component: Button
-});
-</script>
-
-<Story name="Basic" asChild>
-	<DesignTokens>
-		<Button label="This is a button label"></Button>
-	</DesignTokens>
-</Story>
-<Story name="Disabled" asChild>
-	<DesignTokens>
-		<Button disabled label="This button is disabled"></Button>
-	</DesignTokens>
-</Story>

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

@@ -1,19 +0,0 @@
-import Button from './Button.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 Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Button = InstanceType<typeof Button>;
-export default Button;

package/dist/Caption/Caption.stories.svelte

@@ -1,24 +0,0 @@
-<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',
-		component: Caption
-	});
-</script>
-
-<Story name="Default" asChild>
-	<DesignTokens>
-		<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
-	</DesignTokens>
-</Story>
-<Story name="Bold" asChild>
-	<DesignTokens>
-		<Caption weight="bold">
-			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
-		</Caption>
-	</DesignTokens>
-</Story>

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

@@ -1,27 +0,0 @@
-export default Caption;
-type Caption = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Caption: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Caption from './Caption.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/Card/Card.stories.svelte

@@ -1,17 +0,0 @@
-<script context="module" lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Card from './Card.svelte';
-import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-const { Story } = defineMeta({
-    title: 'Display/Card/Base',
-    component: Card
-});
-</script>
-
-<Story name="Basic card" asChild>
-	<DesignTokens>
-		<Card>
-			<h1>Any content</h1>
-			<p>can be added to a basic <code>Card</code> component.</p>
-		</Card>
-	</DesignTokens>
-</Story>

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

@@ -1,19 +0,0 @@
-import Card from './Card.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 Card: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Card = InstanceType<typeof Card>;
-export default Card;

package/dist/ChartFooter/ChartFooter.stories.svelte

@@ -1,32 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	import ChartFooter from './ChartFooter.svelte';
-	import Middot from '../Middot/Middot.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Chart/ChartFooter',
-		component: ChartFooter
-	});
-</script>
-
-<Story name="One-up" asChild>
-	<DesignTokens>
-		<ChartFooter layout="one-up">
-			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.
-		</ChartFooter>
-	</DesignTokens>
-</Story>
-
-<Story name="Two-up" asChild>
-	<DesignTokens>
-		<ChartFooter layout="two-up">
-			Daten: <a href="#1">Zensus 2022</a>
-			(Durchschnittsmieten und Einwohnerzahlen)
-		</ChartFooter>
-	</DesignTokens>
-</Story>

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

@@ -1,27 +0,0 @@
-export default ChartFooter;
-type ChartFooter = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ChartFooter: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import ChartFooter from './ChartFooter.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/ChartHeader/ChartHeader.stories.svelte

@@ -1,31 +0,0 @@
-<script context="module">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { expect } from 'storybook/test';
-	import ChartHeader from './ChartHeader.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Chart/ChartHeader',
-		component: ChartHeader
-	});
-</script>
-
-<Story
-	name="Default"
-	asChild
-	play={async ({ step }) => {
-		await step('Container has ID attribute derived from title prop', async () => {
-			const containerEl = document.querySelector('#mehr-uber-60-jahrige-in-allen-berufen');
-			expect(containerEl).toBeTruthy();
-		});
-	}}
->
-	<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/dist/ChartHeader/ChartHeader.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default ChartHeader;
-type ChartHeader = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ChartHeader: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import ChartHeader from './ChartHeader.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/ChartList/ChartList.stories.svelte

@@ -1,48 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { within, expect } from 'storybook/test';
-
-	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
-	import ChartList from './ChartList.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Meta/ChartList',
-		component: ChartList
-	});
-
-	const testCharts = [
-		{ title: 'Baden-Württemberg Loosers', slug: 'bw-loosers' },
-		{ title: 'Baden-Württemberg Winners', slug: 'bw-winners' },
-		{ title: 'Rheinland-Pfalz Loosers', slug: 'rp-loosers' },
-		{ title: 'Rheinland-Pfalz Winners', slug: 'rp-winners' }
-	];
-</script>
-
-<Story
-	name="Default"
-	asChild
-	play={async ({ canvasElement, step }) => {
-		const canvas = within(canvasElement);
-
-		await step('Project title renders', async () => {
-			const titleEl = canvas.getByTestId('chartlist-project-title');
-			expect(titleEl).toHaveTextContent('Grafiken für p110: Wie sieht der Wald von morgen aus?');
-		});
-
-		await step('All chart list items render', async () => {
-			testCharts.forEach((c) => {
-				const el = canvas.getByText(c.title);
-				expect(el).toBeTruthy();
-			});
-		});
-	}}
->
-	<DesignTokens>
-		<ChartList
-			baseUrl="https://static.datenhub.net/apps/p110_wald-klimawandel/main"
-			charts={testCharts}
-			project="p110: Wie sieht der Wald von morgen aus?"
-		/>
-	</DesignTokens>
-</Story>

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

@@ -1,27 +0,0 @@
-export default ChartList;
-type ChartList = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ChartList: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import ChartList from './ChartList.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/Copy/Copy.stories.svelte

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

@@ -1,27 +0,0 @@
-export default Copy;
-type Copy = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Copy: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Copy from './Copy.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/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;
-}