@swr-data-lab/components 1.12.5 → 1.13.1

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

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

@@ -1,7 +0,0 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-<Meta title="About" />
-
-# SWR Data Lab Components
-
-Experimental component library for SWR Data Lab interactives.

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>