@swr-data-lab/components 1.13.0 → 1.13.2

package/src/DesignTokens/DesignTokens.svelte

@@ -1,71 +0,0 @@
-<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])
-				.map(([shade, value]) => {
-					const [ldb, index] = shade.split(/(\d+)/);
-					return ldb === 'base'
-						? `--${key}-${ldb}: ${value}`
-						: `--${key}-${ldb}-${index}: ${value}`;
-				})
-				.join(';');
-		})
-	];
-</script>
-
-<div class="container" style={rules.join(';')}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-
-<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.ts

@@ -1,186 +0,0 @@
-interface ColourMap {
-	[index: string]: ColourPalette | ColourList;
-}
-interface ColourPalette {
-	[index: string]: string;
-}
-interface ColourList {
-	[index: number]: string;
-}
-
-const shades: ColourMap = {
-	violet: {
-		light5: '#f3eefa',
-		light4: '#e5dbf5',
-		light3: '#d4c5ee',
-		light2: '#bba4e5',
-		light1: '#9670db',
-		base: '#8257D1',
-		dark1: '#7f4cdf',
-		dark2: '#6830cf',
-		dark3: '#441993',
-		dark4: '#301268',
-		dark5: '#1D0B40'
-	},
-	red: {
-		light5: '#ffcfcc',
-		light4: '#FFB9A8',
-		light3: '#FF9B82',
-		light2: '#FF7957',
-		light1: '#FF4D20',
-		base: '#E92F02',
-		dark1: '#C52A04',
-		dark2: '#A22406',
-		dark3: '#801F09',
-		dark4: '#5F1A0B',
-		dark5: '#3F150D'
-	},
-	teal: {
-		light5: '#E5FBFF',
-		light4: '#B9EDF6',
-		light3: '#8CDEEC',
-		light2: '#5BCFE1',
-		light1: '#26BED6',
-		base: '#07ABC5',
-		dark1: '#0698B0',
-		dark2: '#04859C',
-		dark3: '#037389',
-		dark4: '#016275',
-		dark5: '#005163'
-	},
-	yellow: {
-		light1: '#FFFDB2',
-		light2: '#FEF67C',
-		light3: '#FDEF3E',
-		light4: '#FAE617',
-		light5: '#F5DF13',
-		base: '#EFD710',
-		dark1: '#E3CA0D',
-		dark2: '#DCC10A',
-		dark3: '#D1B406',
-		dark4: '#C9AC03',
-		dark5: '#C2A300'
-	},
-	forest: {
-		light5: '#EFFBE9',
-		light4: '#CEE9D1',
-		light3: '#ADD6BA',
-		light2: '#8CC4A3',
-		light1: '#6BB28B',
-		base: '#499F73',
-		dark1: '#278D5B',
-		dark2: '#137848',
-		dark3: '#0C643A',
-		dark4: '#06502D',
-		dark5: '#003D20'
-	},
-	pink: {
-		light5: '#FFCCF5',
-		light4: '#FFADE7',
-		light3: '#FF8CD7',
-		light2: '#FF66C6',
-		light1: '#FF30AC',
-		base: '#E9028D',
-		dark1: '#C7047F',
-		dark2: '#A50771',
-		dark3: '#830963',
-		dark4: '#620B55',
-		dark5: '#400E47'
-	},
-
-	orange: {
-		light5: '#FFEECC',
-		light4: '#FFD584',
-		light3: '#FFBA35',
-		light2: '#F4A101',
-		light1: '#DA8F03',
-		base: '#C17D05',
-		dark1: '#A86C07',
-		dark2: '#905B09',
-		dark3: '#794B0B',
-		dark4: '#623B0D',
-		dark5: '#4C2C0F'
-	},
-
-	plum: {
-		light5: '#F1CCFF',
-		light4: '#E9AEFF',
-		light3: '#E08EFF',
-		light2: '#D76CFF',
-		light1: '#CB42FF',
-		base: '#B600FB',
-		dark1: '#9903D4',
-		dark2: '#7C05AE',
-		dark3: '#610889',
-		dark4: '#450A65',
-		dark5: '#400E47'
-	},
-	apple: {
-		light5: '#EFFBEA',
-		light4: '#C5F0B1',
-		light3: '#98E472',
-		light2: '#65D62B',
-		light1: '#5BC128',
-		base: '#53AD26',
-		dark1: '#4A9825',
-		dark2: '#438523',
-		dark3: '#3B7122',
-		dark4: '#335E20',
-		dark5: '#2C4C1F'
-	},
-	blue: {
-		light5: '#CCDCFF',
-		light4: '#B1C5F9',
-		light3: '#97AEF2',
-		light2: '#7D97EC',
-		light1: '#6280E5',
-		base: '#4768DF',
-		dark1: '#2F51D2',
-		dark2: '#2A3FAC',
-		dark3: '#262D87',
-		dark4: '#211C64',
-		dark5: '#1D0B40'
-	},
-	gray: {
-		light5: 'hsl(225, 2%, 95%)',
-		light3: 'hsl(225, 2%, 77%)',
-		base: 'hsl(227, 2%, 50%)',
-		dark2: 'hsl(236, 2%, 38%)',
-		dark3: 'hsl(236, 2%, 32%)',
-		dark4: 'hsl(236, 2%, 22%)',
-		dark5: 'hsl(236, 2%, 5%)'
-	}
-};
-
-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 = {
-	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.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/src/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/src/HighlightCard/HighlightCard.stories.svelte

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

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import Card from '../Card/Card.svelte';
-
-	interface HighlightCardProps {
-		topline?: string;
-		value?: string;
-		unit?: string;
-		subline?: string;
-	}
-
-	let { topline, value, unit, subline }: HighlightCardProps = $props();
-</script>
-
-<Card>
-	<div class="card-wrapper">
-		{#if topline}
-			<div class="top">
-				{@html topline}
-			</div>
-		{/if}
-		<div class="middle">
-			<span class="underline">
-				{value}
-			</span>
-			{unit}
-		</div>
-		{#if subline}
-			<div class="bottom">
-				{@html subline}
-			</div>
-		{/if}
-	</div>
-</Card>
-
-<style lang="scss">
-	.card-wrapper {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		min-height: 200px;
-	}
-
-	.top {
-		display: flex;
-		align-items: flex-end;
-		flex: 1;
-	}
-
-	.middle {
-		font-size: var(--fs-large-4);
-		font-weight: 700;
-		padding-bottom: 0.2em;
-	}
-
-	.bottom {
-		display: flex;
-		align-items: flex-start;
-		flex: 1;
-	}
-
-	.underline {
-		width: fit-content;
-		background: linear-gradient(to bottom, transparent 90%, var(--red-base) 90%);
-	}
-</style>

package/src/Input/Input.svelte

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

package/src/Logotype/Logotype.stories.svelte

@@ -1,16 +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/src/Middot/Middot.stories.svelte

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

@@ -1,38 +0,0 @@
-<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>