@swr-data-lab/components 1.2.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/package.json

@@ -61,5 +61,5 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.2.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/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;