@swr-data-lab/components 1.13.0 → 1.13.2

package/src/Autocomplete/Autocomplete.svelte

@@ -1,237 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import Circle from '../assets/times-circle-solid.svg.svelte';
-	import Caption from '../Caption/Caption.svelte';
-
-	export let data = [];
-	export let query: string = '';
-	export let placeholder: string = 'Platzhalter';
-	export let label: string;
-	export let name: string;
-
-	const sortData = (a, b) => {
-		return a.value.localeCompare(b.value);
-	};
-
-	let listRef;
-	let inputRef;
-	let controlsRef;
-	const dispatch = createEventDispatcher();
-	const maxSuggestions = 100;
-
-	let highlightedItemIndex = -1;
-	$: suggestions = data.sort(sortData).slice(0, maxSuggestions);
-	$: isActive = false;
-
-	// Insert clicked item into search input,
-	// dispatch it as select event and close the dropdown
-	const handleItemClick = (index) => {
-		highlightedItemIndex = index;
-		setSelectedItem(suggestions[highlightedItemIndex]);
-	};
-
-	const setSelectedItem = (item) => {
-		query = item.value;
-		isActive = false;
-		dispatch('select', { item });
-	};
-
-	// Register keyboard events
-	const handleKeyDown = (e) => {
-		if (e.key === 'ArrowDown') {
-			e.preventDefault();
-			highlightedItemIndex =
-				highlightedItemIndex < suggestions.length - 1 ? highlightedItemIndex + 1 : 0;
-			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault();
-			highlightedItemIndex =
-				highlightedItemIndex > 0 ? highlightedItemIndex - 1 : suggestions.length - 1;
-			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-		} else if (e.key === 'Enter') {
-			if (highlightedItemIndex > -1) {
-				setSelectedItem(suggestions[highlightedItemIndex]);
-				isActive = false;
-			}
-		}
-	};
-
-	const handleClear = () => {
-		query = '';
-		inputRef.focus();
-		setSuggestions();
-		dispatch('select', {
-			item: null
-		});
-	};
-
-	const setSuggestions = () => {
-		suggestions = data
-			.filter((el) => {
-				return el.value.toLowerCase().startsWith(query.toLowerCase());
-			})
-			.slice(0, maxSuggestions)
-			.sort(sortData);
-	};
-
-	// update dropdown list if input value changes
-	const handleInput = () => {
-		isActive = true;
-		if (query.length === 0) {
-			suggestions = data;
-		} else {
-			setSuggestions();
-			highlightedItemIndex = -1;
-		}
-	};
-</script>
-
-<!--
-This component is used to display a list of suggestions for a given query. If an item is clicked or the enter key is pressed, the selected item will be returned by a custom select event.
-
-Data should be provided as array of objects. Each object contains the information for a dropdown entry:
-    - **value** *string* the text that is displayed in the input. Has to be unique!
-    - **label** *string* | *svelte component* | *array of svelte component and props object* text, html or component displayed in the dropdown list
-    - **details** *object* extra data needed by selection handler
-@component
--->
-
-<div class="autocomplete" class:active={isActive}>
-	<label for={name}>{label}</label>
-	<input
-		type="text"
-		{name}
-		{placeholder}
-		autocomplete="off"
-		autocorrect="off"
-		autocapitalize="off"
-		data-testid="autocomplete-input"
-		bind:this={inputRef}
-		bind:value={query}
-		on:keydown={handleKeyDown}
-		on:input={handleInput}
-		on:focus={() => {
-			isActive = true;
-		}}
-		on:blur={(e) => {
-			if (listRef.contains(e.relatedTarget)) {
-				window.setTimeout(() => {
-					isActive = false;
-				}, 100);
-			} else if (!controlsRef.contains(e.relatedTarget)) {
-				isActive = false;
-			}
-		}}
-	/>
-
-	<ul tabindex="-1" bind:this={listRef}>
-		{#each suggestions as item, i (item.value)}
-			<li>
-				<button
-					class={`item ${i === highlightedItemIndex ? 'active' : ''}`}
-					tabindex="-1"
-					type="button"
-					on:click={(e) => {
-						e.preventDefault();
-						handleItemClick(i);
-					}}
-				>
-					<Caption>
-						{item.label}
-					</Caption>
-				</button>
-			</li>
-		{/each}
-	</ul>
-	<div class="controls" bind:this={controlsRef}>
-		<button type="button" on:click={handleClear} class="clear" class:active={query.length > 0}>
-			<Circle />
-		</button>
-	</div>
-</div>
-
-<style lang="scss">
-	@use '../styles/base.scss';
-
-	.autocomplete {
-		position: relative;
-		display: block;
-		color: white;
-		display: flex;
-		flex-flow: column;
-
-		input {
-			@extend %form-input;
-			width: auto;
-		}
-
-		ul {
-			position: absolute;
-			top: 100%;
-			border: 1px solid currentColor;
-			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;
-			max-height: 10rem;
-			overflow-y: scroll;
-			z-index: 1000;
-			opacity: 0;
-			transition: 100ms;
-			pointer-events: none;
-			&:empty {
-				box-shadow: none;
-			}
-
-			.item {
-				padding: 0.5em;
-				width: 100%;
-				background: transparent;
-				border: 0;
-				text-align: left;
-				color: currentColor;
-				border-bottom: 1px solid rgba(white, 0.25);
-				cursor: pointer;
-				&.active,
-				&:hover {
-					text-decoration: underline;
-					background-color: rgba(white, 0.05);
-				}
-			}
-		}
-
-		.clear {
-			position: absolute;
-			top: 50%;
-			right: 0.75rem;
-			width: 1.2rem;
-			height: 1.2rem;
-			background: transparent;
-			border: 0;
-			display: none;
-			color: white;
-			&.active {
-				display: block;
-			}
-			&:hover,
-			&:focus {
-				color: var(--red-base);
-				cursor: pointer;
-			}
-		}
-		&.active {
-			ul {
-				opacity: 1;
-				pointer-events: all;
-			}
-			input {
-				border-bottom-right-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-		}
-	}
-</style>

package/src/Button/Button.stories.svelte

@@ -1,21 +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/src/Button/Button.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import Copy from '../Copy/Copy.svelte';
-
-	interface ButtonProps {
-		label: string;
-		as?: 'button' | 'a';
-		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}>
-		<Copy weight="bold">
-			{label}
-		</Copy>
-	</a>
-{:else}
-	<button class="button" {onclick} {disabled}>
-		<Copy weight="bold">
-			{label}
-		</Copy>
-	</button>
-{/if}
-
-<style lang="scss">
-	.button {
-		background: var(--violet-dark-3);
-		display: inline-flex;
-		align-items: center;
-		justify-self: flex-start;
-		padding: 0.45em 1.25em;
-		color: white;
-		border: 1px solid rgba(white, 0.1);
-		box-shadow: 0px 0px 10px rgba(black, 0.05);
-		border-radius: var(--br-small);
-		text-shadow: 0px 0px 5px rgba(black, 0.05);
-		text-decoration: none;
-		&:hover,
-		&:focus-visible {
-			text-decoration: underline;
-			text-underline-offset: 0.15em;
-		}
-		&.disabled,
-		&:disabled {
-			opacity: 0.5;
-		}
-	}
-</style>

package/src/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/src/Caption/Caption.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface CaptionProps {
-		weight?: 'regular' | 'bold';
-		children?: Snippet;
-	}
-	let { weight = 'regular', children }: CaptionProps = $props();
-</script>
-
-<div class={['container', weight]}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-
-<style lang="scss">
-	.container {
-		font-family: var(--swr-sans);
-		font-size: var(--fs-small-2);
-		line-height: 1;
-		letter-spacing: 0.0045em;
-	}
-
-	.bold {
-		font-weight: 585;
-		letter-spacing: 0;
-	}
-</style>

package/src/Card/Card.stories.svelte

@@ -1,19 +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/src/Card/Card.svelte

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

package/src/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/src/ChartFooter/ChartFooter.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import Logotype from '../Logotype/Logotype.svelte';
-	import Note from '../Note/Note.svelte';
-
-	interface ChartFooterProps {
-		layout: 'one-up' | 'two-up';
-		children?: Snippet;
-	}
-
-	let { layout = 'one-up', children }: ChartFooterProps = $props();
-</script>
-
-<footer class={`container ${layout}`}>
-	{#if children}
-		<Note>
-			{@render children()}
-		</Note>
-	{/if}
-	<Logotype />
-</footer>
-
-<style lang="scss">
-	@use '../styles/base.scss';
-
-	.container {
-		gap: 0.5rem;
-		:global(div) {
-			width: 100%;
-		}
-	}
-	.one-up {
-		display: flex;
-		flex-flow: column;
-		align-items: flex-start;
-	}
-	.two-up {
-		display: grid;
-		grid-template-columns: 1fr;
-		@media (min-width: base.$bp-s) {
-			grid-template-columns: 2.5fr 1fr;
-			align-items: last baseline;
-			justify-items: flex-end;
-		}
-	}
-</style>

package/src/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/src/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/src/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/src/Copy/Copy.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface CopyProps {
-		weight?: 'regular' | 'bold';
-		children?: Snippet;
-	}
-	let { weight = 'regular', children }: CopyProps = $props();
-</script>
-
-<div class={['container', weight]}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-
-<style lang="scss">
-	.container {
-		font-family: var(--swr-sans);
-		font-size: var(--fs-base);
-		letter-spacing: 0.005em;
-		line-height: 1.475;
-	}
-
-	.bold {
-		font-weight: 585;
-		letter-spacing: 0;
-	}
-</style>