@swr-data-lab/components 1.1.0 → 1.3.0

package/.storybook/preview-head.html

@@ -0,0 +1,13 @@
+<style>
+	/* Load SWR.de fonts for preview:  */
+	@font-face {
+		font-family: 'SWR-VAR-Text';
+		src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2')
+			format('woff2');
+	}
+	@font-face {
+		font-family: 'SWR-VAR-Sans';
+		src: url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2')
+			format('woff2');
+	}
+</style>

package/.storybook/preview.ts

@@ -9,7 +9,7 @@ const preview: Preview = {
       },
     },
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
 };
 
 export default preview;

package/package.json

@@ -23,15 +23,15 @@
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/npm": "^12.0.1",
-		"@storybook/addon-essentials": "^8.3.0",
-		"@storybook/addon-interactions": "^8.3.0",
-		"@storybook/addon-links": "^8.3.0",
+		"@storybook/addon-essentials": "^8.4.5",
+		"@storybook/addon-interactions": "^8.4.5",
+		"@storybook/addon-links": "^8.4.5",
 		"@storybook/addon-svelte-csf": "^4.1.7",
-		"@storybook/blocks": "^8.3.0",
-		"@storybook/builder-vite": "^8.3.0",
-		"@storybook/svelte": "^8.3.0",
-		"@storybook/sveltekit": "^8.3.0",
-		"@storybook/test": "^8.3.0",
+		"@storybook/blocks": "^8.4.5",
+		"@storybook/builder-vite": "^8.4.5",
+		"@storybook/svelte": "^8.4.5",
+		"@storybook/sveltekit": "^8.4.5",
+		"@storybook/test": "^8.4.5",
 		"@storybook/test-runner": "^0.19.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
@@ -40,7 +40,7 @@
 		"http-server": "^14.1.1",
 		"sass-embedded": "^1.78.0",
 		"semantic-release": "^24.1.2",
-		"storybook": "^8.3.0",
+		"storybook": "^8.4.5",
 		"svelte": "^4.2.7",
 		"svelte-check": "^4.0.0",
 		"svelte-select": "^5.8.3",
@@ -61,5 +61,5 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.1.0"
+	"version": "1.3.0"
 }

package/src/Autocomplete/Autocomplete.svelte

@@ -169,7 +169,7 @@ Data should be provided as array of objects. Each object contains the informatio
 			position: absolute;
 			top: 100%;
 			border: 1px solid currentColor;
-			background: $reanimation-violetblue;
+			background: $color-violetblue;
 			border-bottom-left-radius: $border-radius-input;
 			border-bottom-right-radius: $border-radius-input;
 			border-top: 0;
@@ -218,7 +218,7 @@ Data should be provided as array of objects. Each object contains the informatio
 			}
 			&:hover,
 			&:focus {
-				color: $orange;
+				color: $color-activeorange;
 				cursor: pointer;
 			}
 		}

package/src/Button/Button.svelte

@@ -15,7 +15,7 @@
 	@import '../styles/base.scss';
 	.button {
 		@extend %copy-bold;
-		background: $reanimation-violet;
+		background: $color-violet;
 		display: inline-flex;
 		align-items: center;
 		justify-self: flex-start;

package/src/Card/Card.stories.svelte

@@ -0,0 +1,31 @@
+<script context="module">
+	import Card from './Card.svelte';
+
+	export const meta = {
+		title: 'Input Components/Card',
+		component: Card
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+	import {
+		userEvent,
+		within,
+		expect,
+		getByTestId,
+		getAllByLabelText,
+		getByText
+	} from '@storybook/test';
+	import { hasContext } from 'svelte';
+	import Input from '../Input/Input.svelte';
+
+	let component;
+</script>
+
+<Story name="Basic card">
+	<Card>
+		<h1>Any content</h1>
+		<p>can be added to a basic <code>Card</code> component.</p>
+	</Card>
+</Story>

package/src/Card/Card.svelte

@@ -5,10 +5,11 @@
 <style lang="scss">
 	@import '../styles/base.scss';
 	.card {
+		@extend %copy;
 		width: auto;
 		max-width: $app-max-width;
 		color: white;
-		background: $reanimation-violetblue;
+		background: $color-violetblue;
 		border-radius: $border-radius-container;
 		margin: 0 1rem;
 		padding: 1.5rem;

package/src/Container/Container.svelte

@@ -7,6 +7,6 @@
 	:host {
 		--swr-sans: #{$swr-sans};
 		--swr-text: #{$swr-text};
-		--orange: #{$orange};
+		--orange: #{$color-activeorange};
 	}
 </style>

package/src/HighlightCard/HighlightCard.stories.svelte

@@ -0,0 +1,60 @@
+<script context="module">
+	import HighlightCard from './HighlightCard.svelte';
+
+	export const meta = {
+		title: 'Input Components/HighlightCard',
+		component: HighlightCard
+	};
+</script>
+
+<script>
+	import { Story, Template } from '@storybook/addon-svelte-csf';
+	import {
+		userEvent,
+		within,
+		expect,
+		getByTestId,
+		getAllByLabelText,
+		getByText
+	} from '@storybook/test';
+	import { hasContext } from 'svelte';
+
+	let component;
+</script>
+
+<Story name="Basic HighlightCard">
+	<HighlightCard
+		topline="Die letzte Großspende liegt bei"
+		highlight="375.000"
+		highlightSecondary="Euro"
+		subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
+	/>
+</Story>
+
+<Story name="Basic HighlightCard">
+	<div class="columns">
+		<HighlightCard
+			topline="Im aktuellen Jahr wurden bisher"
+			highlight="375.000"
+			highlightSecondary="€"
+			subline="an Parteien gespendet."
+		/>
+		<HighlightCard
+			topline="Die letzte Großspende liegt bei"
+			highlight="37.500"
+			highlightSecondary="€"
+			subline="Der Betrag ging am 7. Januar von Dr. Kim Musterperson ein."
+		/>
+	</div>
+</Story>
+
+<style>
+	.columns {
+		display: flex;
+		margin-top: 2rem;
+	}
+
+	:global(.columns > *) {
+		flex: 1;
+	}
+</style>

package/src/HighlightCard/HighlightCard.svelte

@@ -0,0 +1,64 @@
+<script>
+	import Card from '../Card/Card.svelte';
+
+	export let topline = '';
+	export let highlight = '';
+	export let highlightSecondary = '';
+	export let subline = '';
+	export let alignCards = true;
+	export let maxWidth = '500px';
+</script>
+
+<Card>
+	<div class="card-wrapper">
+		{#if topline}
+			<div class="top">
+				{@html topline}
+			</div>
+		{/if}
+		<div class="middle">
+			<span class="underline">
+				{highlight}
+			</span>
+			{highlightSecondary}
+		</div>
+		<div class="bottom">
+			{@html subline}
+		</div>
+	</div>
+</Card>
+
+<style lang="scss">
+	@import '../styles/base.scss';
+
+	.card-wrapper {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 200px;
+	}
+
+	.top {
+		display: flex;
+		align-items: flex-end;
+		flex: 1;
+	}
+
+	.middle {
+		font-family: $swr-sans;
+		font-size: 60px;
+		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%, $color-activeorange 90%);
+	}
+</style>

package/src/HighlightCard/index.js

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

package/src/Select/Select.stories.svelte

@@ -33,6 +33,11 @@
 				type: { name: 'boolean', required: false },
 				defaultValue: 'false'
 			},
+			clearable: {
+				description: 'Show a button to clear the input',
+				type: { name: 'boolean', required: false },
+				defaultValue: 'false'
+			},
 			value: {
 				description: 'The currently selected option',
 				type: { name: 'any', required: false }
@@ -74,6 +79,7 @@
 	name="Simple"
 	args={{
 		inputId: 'select',
+		clearable: true,
 		items: [
 			{ value: 'chocolate', label: 'Chocolate' },
 			{ value: 'cake', label: 'Cake' },
@@ -99,6 +105,12 @@
 			await userEvent.type(select, 'Ice{enter}');
 			expect(selectedItem).toEqual({ value: 'ice-cream', label: 'Ice Cream' });
 		});
+
+		await step('Tapping the clear button clears the input', async () => {
+			const clearButton = document.querySelector('.clear-select');
+			await userEvent.click(clearButton);
+			expect(selectedItem).toEqual(undefined);
+		});
 	}}
 />
 

package/src/Select/Select.svelte

@@ -43,6 +43,11 @@
 	 */
 	export let groupHeaderSelectable: boolean = false;
 
+	/**
+	 * Enable clearing the input
+	 */
+	export let clearable: boolean = true;
+
 	export let value: Option | undefined;
 </script>
 
@@ -53,7 +58,7 @@ based on https://github.com/rob-balfre/svelte-select
 @component
 -->
 
-<Select {items} {groupBy} id={inputId} {placeholder} {groupHeaderSelectable} bind:value>
+<Select {items} {groupBy} id={inputId} {placeholder} {groupHeaderSelectable} {clearable} bind:value>
 	<svelte:fragment slot="item" let:item>
 		<slot name="item" {item}>
 			{item.label}

package/src/styles/_vars.scss

@@ -1,11 +1,10 @@
-$reanimation-black: #0c0c0c;
-$reanimation-violetblue: #1d0b40;
-$reanimation-violetblue-hover: #2d155d;
-$reanimation-violet: #5920c0;
-$reanimation-blue: #3053d9;
-$reanimation-warmgrey: #dbd5cd;
-$reanimation-activeorange: #ff3300;
-$orange: #ff3300;
+$color-black: #0c0c0c;
+$color-violetblue: #1d0b40;
+$color-violetblue-hover: #2d155d;
+$color-violet: #5920c0;
+$color-blue: #3053d9;
+$color-warmgrey: #dbd5cd;
+$color-activeorange: #ff3300;
 
 $border-radius-container: 8px;
 $border-radius-input: 4px;