@swr-data-lab/components 1.12.5 → 1.13.1

package/dist/ChartHeader/index.d.ts

@@ -0,0 +1,2 @@
+export default ChartHeader;
+import ChartHeader from './ChartHeader.svelte';

package/dist/ChartList/ChartList.mdx

@@ -0,0 +1,13 @@
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
+
+import * as ChartListStories from './ChartList.stories.svelte';
+
+<Meta of={ChartListStories} />
+
+# Chart List
+
+Utility component for displaying a list of charts with associated embed URLs during development (typically on the `/` route of your Svelte project).
+
+<Stories />
+
+<Controls />

package/dist/ChartList/ChartList.stories.svelte

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

@@ -0,0 +1,27 @@
+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/ChartList/ChartList.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">import { dev } from '$app/environment';
+let { project, charts, baseUrl } = $props();
+</script>
+
+<main>
+	<div class="inner">
+		<h1 data-testid="chartlist-project-title">Grafiken für {project}</h1>
+		{#if charts}
+			<table>
+				<thead>
+					<tr>
+						<th>Title</th>
+						{#if baseUrl}
+							<th>Embed URL</th>
+						{/if}
+					</tr>
+				</thead>
+				<tbody>
+					{#each charts as chart}
+						<tr>
+							<td>
+								<a href="./{chart.slug}{dev ? '' : '.html'}">{chart.title}</a>
+							</td>
+							{#if baseUrl}
+								<td>
+									<input type="text" value={`${baseUrl}/${chart.slug}.html`} />
+								</td>
+							{/if}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</div>
+</main>
+
+<style>
+	:global(*) {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+		color: inherit;
+	}
+	main {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-flow: column;
+		font-family: var(--swr-sans);
+		font-size: var(--fs-small-1);
+		max-width: 60rem;
+		margin: 0 auto;
+	}
+	.inner {
+		width: 100%;
+		border: 1px solid rgb(0, 0, 0);
+	}
+	h1 {
+		font-size: var(--fs-small-1);
+		width: 100%;
+		border-bottom: 1px solid black;
+		padding-bottom: 0.2em;
+		background-color: rgb(233, 238, 245);
+	}
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+	}
+	a {
+		display: block;
+		text-decoration: none;
+	}
+	th,
+	td,
+	h1 {
+		padding: 0.2em 0.4em;
+		text-align: left;
+	}
+	th {
+		border-bottom: 1px solid black;
+	}
+	tr {
+		border-bottom: 1px solid black;
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	input {
+		display: block;
+		width: 100%;
+		padding: 0.1em 0.3em;
+	}
+
+	a:hover,
+	a:focus-visible {
+		text-decoration: underline;
+	}
+	a:last-child {
+		border-bottom: 0;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+type ProjectPrefix = 'p' | 't';
+type ProjectIdentifier = `${ProjectPrefix}${number}: ${string}`;
+interface ChartSpec {
+    title: string;
+    slug: string;
+}
+interface ChartListProps {
+    project?: ProjectIdentifier;
+    charts?: ChartSpec[];
+    baseUrl?: string;
+}
+declare const ChartList: import("svelte").Component<ChartListProps, {}, "">;
+type ChartList = ReturnType<typeof ChartList>;
+export default ChartList;

package/dist/ChartList/index.d.ts

@@ -0,0 +1,2 @@
+import ChartList from './ChartList.svelte';
+export default ChartList;

package/dist/ChartList/index.js

@@ -0,0 +1,2 @@
+import ChartList from './ChartList.svelte';
+export default ChartList;

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

@@ -0,0 +1,27 @@
+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/Copy/Copy.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">let { weight = 'regular', children } = $props();
+export {};
+</script>
+
+<div class={['container', weight]}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>.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>

package/dist/Copy/Copy.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface CopyProps {
+    weight?: 'regular' | 'bold';
+    children?: Snippet;
+}
+declare const Copy: import("svelte").Component<CopyProps, {}, "">;
+type Copy = ReturnType<typeof Copy>;
+export default Copy;

package/dist/Copy/index.js

@@ -0,0 +1,2 @@
+import Copy from './Copy.svelte';
+export default Copy;

package/dist/DesignTokens/DesignTokens.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import { shades } from './Tokens';
+let { children } = $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>: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;
+  --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: 768px) {
+  .container {
+    --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/dist/DesignTokens/DesignTokens.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface DesignTokensProps {
+    children?: Snippet;
+}
+declare const DesignTokens: import("svelte").Component<DesignTokensProps, {}, "">;
+type DesignTokens = ReturnType<typeof DesignTokens>;
+export default DesignTokens;

package/dist/DesignTokens/Tokens.d.ts

@@ -0,0 +1,26 @@
+interface ColourMap {
+    [index: string]: ColourPalette | ColourList;
+}
+interface ColourPalette {
+    [index: string]: string;
+}
+interface ColourList {
+    [index: number]: string;
+}
+declare const shades: ColourMap;
+declare const scales: ColourMap;
+declare const typography: {
+    wide: {
+        sizes: {
+            'fs-small-3': string;
+            'fs-small-2': string;
+            'fs-small-1': string;
+            'fs-base': string;
+            'fs-large-1': string;
+            'fs-large-2': string;
+            'fs-large-3': string;
+            'fs-large-4': string;
+        };
+    };
+};
+export { shades, scales, typography };

package/dist/DesignTokens/Tokens.js

@@ -0,0 +1,171 @@
+const shades = {
+    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 = {
+    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/dist/DesignTokens/index.d.ts

@@ -0,0 +1,8 @@
+import DesignTokens from './DesignTokens.svelte';
+export namespace tokens {
+    export { shades };
+    export { scales };
+}
+import { shades } from './Tokens';
+import { scales } from './Tokens';
+export { DesignTokens };

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

@@ -0,0 +1,27 @@
+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/{src → dist}/FormLabel/FormLabel.svelte

@@ -1,12 +1,5 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface FormLabelProps {
-		as?: string;
-		htmlFor?: string;
-		children?: Snippet;
-	}
-	let { as = 'label', htmlFor, children }: FormLabelProps = $props();
+<script lang="ts">let { as = 'label', htmlFor, children } = $props();
+export {};
 </script>
 
 {#if as == 'legend'}

package/dist/FormLabel/FormLabel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface FormLabelProps {
+    as?: string;
+    htmlFor?: string;
+    children?: Snippet;
+}
+declare const FormLabel: import("svelte").Component<FormLabelProps, {}, "">;
+type FormLabel = ReturnType<typeof FormLabel>;
+export default FormLabel;

package/dist/FormLabel/index.js

@@ -0,0 +1,2 @@
+import FormLabel from './FormLabel.svelte';
+export default FormLabel;

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

@@ -0,0 +1,27 @@
+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/{src → dist}/Headline/Headline.svelte

@@ -1,10 +1,5 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface HeadlineProps {
-		children?: Snippet;
-	}
-	let { children }: HeadlineProps = $props();
+<script lang="ts">let { children } = $props();
+export {};
 </script>
 
 <h2 class="container">

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

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface HeadlineProps {
+    children?: Snippet;
+}
+declare const Headline: import("svelte").Component<HeadlineProps, {}, "">;
+type Headline = ReturnType<typeof Headline>;
+export default Headline;

package/dist/Headline/index.js

@@ -0,0 +1,2 @@
+import Headline from './Headline.svelte';
+export default Headline;