@swr-data-lab/components 1.13.0 → 1.13.1

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/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.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>

package/src/Select/Select.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import Select from 'svelte-select';
-	import { type SelectItem } from './Select.types';
-
-	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;
-	}
-
-	let {
-		inputId = 'select',
-		placeholder = 'Bitte auswählen',
-		items = [],
-		groupBy,
-		groupHeaderSelectable = false,
-		clearable = true,
-		value = $bindable(undefined)
-	}: SelectProps = $props();
-
-	const groupByFn = groupBy || ((item: SelectItem) => item.group as string);
-</script>
-
-<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">
-	.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/Switcher/Switcher.svelte

@@ -1,130 +0,0 @@
-<script lang="ts">
-	import FormLabel from '../FormLabel/FormLabel.svelte';
-
-	interface SwitcherProps {
-		/**
-		 * Human-readable label
-		 */
-		label: string;
-		/**
-		 * Available options
-		 */
-		options: string[];
-		/**
-		 * Display size
-		 */
-		size?: 'default' | 'small';
-		/**
-		 * The currently-selected option
-		 */
-		value: string | null;
-	}
-
-	let { label, options, size = 'default', value = $bindable(null) }: SwitcherProps = $props();
-
-	const groupId = $props.id();
-	const groupName = 'select-' + groupId;
-
-	function optionToID(o: string) {
-		return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
-	}
-</script>
-
-<fieldset class="container" class:small={size === 'small'}>
-	<FormLabel as="legend">{label}</FormLabel>
-	<ul>
-		{#each options as o (o)}
-			<li class:is-selected={o === value}>
-				<label for={optionToID(o)}>
-					{o}
-				</label>
-				<input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
-			</li>
-		{/each}
-	</ul>
-</fieldset>
-
-<style lang="scss">
-	@use '../styles/base.scss';
-
-	fieldset {
-		border: 0;
-		font-family: var(--swr-sans);
-	}
-
-	ul {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-		padding: 0;
-		margin: 0;
-		border: 1px solid currentColor;
-		background: white;
-		border-radius: var(--br-small);
-
-		@media (min-width: base.$bp-s) {
-			flex-flow: row;
-		}
-
-		&:focus-within,
-		&:active {
-			outline: 2px solid var(--blue-light-2);
-		}
-	}
-	li {
-		display: contents;
-		&:last-child label {
-			border-right: 0;
-			border-bottom: 0;
-		}
-	}
-	input {
-		position: absolute;
-		left: -999px;
-	}
-	.small label {
-		font-size: var(--fs-small-1);
-		height: 2.25em;
-		padding: 0 0.65em;
-	}
-	label {
-		font-size: var(--fs-base);
-		line-height: 1;
-		white-space: nowrap;
-		padding: 0 1em;
-		cursor: pointer;
-		margin: 0;
-		align-items: center;
-		display: flex;
-		color: currentColor;
-		position: relative;
-		transition: var(--fast);
-		text-underline-offset: 0.2em;
-		border-bottom: 1px solid currentColor;
-		height: 2.25em;
-		@media (min-width: base.$bp-s) {
-			justify-content: center;
-			padding: 0 1em;
-			flex-basis: 0;
-			flex-grow: 1;
-			border-right: 1px solid currentColor;
-			border-bottom: 0;
-		}
-		@media (min-width: base.$bp-s) {
-			height: 2.5em;
-		}
-		&:hover,
-		&:focus-visible {
-			text-decoration: underline;
-		}
-		.is-selected & {
-			background: rgb(247, 247, 247);
-			font-weight: 600;
-			box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
-			@media (min-width: base.$bp-s) {
-				box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
-			}
-		}
-	}
-</style>

package/src/maplibre/AttributionControl/AttributionControl.stories.svelte

@@ -1,29 +0,0 @@
-<script context="module" lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import AttributionControl from './AttributionControl.svelte';
-	import DesignTokens from '../../DesignTokens/DesignTokens.svelte';
-	import Map from '../Map/Map.svelte';
-	import { SWRDataLabLight } from '../MapStyle';
-
-	const { Story } = defineMeta({
-		title: 'Maplibre/Control/AttributionControl',
-		component: AttributionControl
-	});
-</script>
-
-<Story asChild name="Default">
-	<DesignTokens>
-		<div class="container">
-			<Map style={SWRDataLabLight} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
-				<AttributionControl customAttribution="SWR Data Lab" position="bottom-left" />
-			</Map>
-		</div>
-	</DesignTokens>
-</Story>
-
-<style>
-	.container {
-		width: 500px;
-		height: 300px;
-	}
-</style>

package/src/maplibre/AttributionControl/AttributionControl.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import maplibre, { type ControlPosition } from 'maplibre-gl';
-	import MapControl from '../MapControl/MapControl.svelte';
-
-	interface AttributionControlProps {
-		position?: ControlPosition;
-		customAttribution?: string;
-	}
-	const { position = 'bottom-right', customAttribution }: AttributionControlProps = $props();
-</script>
-
-<MapControl
-	{position}
-	control={new maplibre.AttributionControl({
-		customAttribution,
-		compact: false
-	})}
-/>
-
-<style>
-	:global {
-		.maplibregl-ctrl.maplibregl-ctrl-attrib {
-			font-size: var(--fs-small-3);
-			letter-spacing: 0.005em;
-			word-spacing: 0.005em;
-			font-family: var(--swr-sans);
-		}
-		.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
-			display: block;
-		}
-		.maplibregl-ctrl-attrib-button {
-			display: none;
-		}
-
-		.maplibregl-ctrl-attrib a {
-			color: inherit;
-			text-decoration: none;
-			text-underline-offset: 0.2em;
-		}
-		.maplibregl-ctrl-attrib a:hover {
-			color: inherit;
-			text-decoration: underline;
-		}
-	}
-</style>