@swr-data-lab/components 1.0.9 → 1.0.11

package/src/Container/Container.svelte

@@ -0,0 +1,12 @@
+<div>
+	<slot />
+</div>
+
+<style lang="scss">
+	@import '../styles/base.scss';
+	:host {
+		--swr-sans: #{$swr-sans};
+		--swr-text: #{$swr-text};
+		--orange: #{$orange};
+	}
+</style>

package/src/Container/index.js

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

package/src/Input/Input.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let label: string = '';
+	export let name: string = '';
+	export let placeholder: string = '';
+	export let value: string = '';
+</script>
+
+<div class="container">
+	<label for={name}>{label}</label>
+	<input {name} type="text" {placeholder} bind:value />
+</div>
+
+<style lang="scss">
+	@import '../styles/base.scss';
+
+	label {
+		@extend %form-label;
+	}
+	input {
+		@extend %form-input;
+	}
+</style>

package/src/Input/index.js

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

package/src/Switcher/Switcher.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
+	export let label: string = '';
 
-  // The options available in the switcher.
-  export let options: string[] = [];
-  
-  // Machine-readable name for the form field. Should be unique to other fields in the form.
-  export let groupName: string = "";
-    
-  // The currently selected option
-  export let value : string = options[0];
-      
-  function optionToID(o:string) {
-    // TODO: This should use $id() when it comes out, so
-    // input IDs are guaranteed unique across the app
-    // See: https://github.com/sveltejs/svelte/issues/13108
-    return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
-  }
+	// The options available in the switcher.
+	export let options: string[] = [];
+
+	// Machine-readable name for the form field. Should be unique to other fields in the form.
+	export let groupName: string = '';
+
+	// The currently selected option
+	export let value: string = options[0];
+
+	function optionToID(o: string) {
+		// TODO: This should use $id() when it comes out, so
+		// input IDs are guaranteed unique across the app
+		// See: https://github.com/sveltejs/svelte/issues/13108
+		return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
+	}
 </script>
 
 <!--
@@ -22,89 +23,98 @@ Radio-like form component to choose exactly one of a given set of options.
 @component
 -->
 
-<ol class="container">
-  {#each options as o (o)}
-    <li class:is-selected={o === value}>
-      <label for={optionToID(o)}>
-        {o}
-        <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M19.7054 6.29119C20.0969 6.68077 20.0984 7.31393 19.7088 7.7054L9.75697 17.7054C9.56928 17.894 9.31416 18 9.04809 18C8.78201 18 8.52691 17.8939 8.33925 17.7053L4.2911 13.6365C3.90157 13.245 3.90318 12.6118 4.2947 12.2223C4.68621 11.8327 5.31938 11.8344 5.7089 12.2259L9.04825 15.5823L18.2912 6.2946C18.6808 5.90314 19.3139 5.90161 19.7054 6.29119Z"
-            fill="currentColor"
-          />
-        </svg>
-      </label>
-      <input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
-    </li>
-  {/each}
-</ol>
+<fieldset class="container">
+	<legend>{label}</legend>
+	<ul>
+		{#each options as o (o)}
+			<li class:is-selected={o === value}>
+				<label for={optionToID(o)}>
+					{o}
+					<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<path
+							d="M19.7054 6.29119C20.0969 6.68077 20.0984 7.31393 19.7088 7.7054L9.75697 17.7054C9.56928 17.894 9.31416 18 9.04809 18C8.78201 18 8.52691 17.8939 8.33925 17.7053L4.2911 13.6365C3.90157 13.245 3.90318 12.6118 4.2947 12.2223C4.68621 11.8327 5.31938 11.8344 5.7089 12.2259L9.04825 15.5823L18.2912 6.2946C18.6808 5.90314 19.3139 5.90161 19.7054 6.29119Z"
+							fill="currentColor"
+						/>
+					</svg>
+				</label>
+				<input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
+			</li>
+		{/each}
+	</ul>
+</fieldset>
 
 <style lang="scss">
-  @import "../styles/scss/base.scss";
+	@import '../styles/base.scss';
+
+	fieldset {
+		border: 0;
+	}
+
+	legend {
+		@extend %form-label;
+	}
 
-  .container {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    border-radius: $border-radius-input;
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    border: 1px solid black;
-    outline-offset: 2px;
+	ul {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		border-radius: $border-radius-input;
+		overflow: hidden;
+		padding: 0;
+		margin: 0;
+		overflow: hidden;
+		border: 1px solid currentColor;
 
-    &:focus-within,
-    &:active {
-      outline: 2px solid lightgray;
-    }
-  }
-  li {
-    display: contents;
-    &:last-child label {
-      border-right: 0;
-    }
-  }
-  input {
-    position: absolute;
-    left: -999px;
-  }
-  label {
-    @extend %copy;
-    line-height: 1;
-    padding-top: 0.1em;
-    height: $input-height;
-    cursor: pointer;
-    margin: 0;
-    flex-basis: 0;
-    flex-grow: 1;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    color: black;
-    position: relative;
-    transition: $transition-fast;
-    text-underline-offset: 0.1em;
-    border-right: 1px solid black;
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
-    svg {
-      position: absolute;
-      left: 0.65em;
-      width: 1em;
-      height: auto;
-      opacity: 0;
-      transition: $transition-fast;
-      display: block;
-    }
-    .is-selected & {
-      background: black;
-      color: white;
-      svg {
-        opacity: 1;
-      }
-    }
-  }
+		&:focus-within,
+		&:active {
+			outline: 3px solid rgba(white, 0.5);
+		}
+	}
+	li {
+		display: contents;
+		&:last-child label {
+			border-right: 0;
+		}
+	}
+	input {
+		position: absolute;
+		left: -999px;
+	}
+	label {
+		@extend %copy;
+		line-height: 1;
+		height: $input-height;
+		cursor: pointer;
+		margin: 0;
+		flex-basis: 0;
+		flex-grow: 1;
+		align-items: center;
+		display: flex;
+		justify-content: center;
+		color: currentColor;
+		position: relative;
+		transition: $transition-fast;
+		text-underline-offset: 0.1em;
+		border-right: 1px solid currentColor;
+		&:hover,
+		&:focus-visible {
+			text-decoration: underline;
+		}
+		svg {
+			position: absolute;
+			left: 0.65em;
+			width: 1em;
+			height: auto;
+			opacity: 0;
+			transition: $transition-fast;
+			display: block;
+		}
+		.is-selected & {
+			background: white;
+			color: black;
+			svg {
+				opacity: 1;
+			}
+		}
+	}
 </style>

package/src/assets/times-circle-solid.svg.svelte

@@ -0,0 +1,14 @@
+<svg
+	aria-hidden="true"
+	focusable="false"
+	data-prefix="fas"
+	data-icon="times-circle"
+	class="svg-inline--fa fa-times-circle fa-w-16"
+	role="img"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 512 512"
+	><path
+		fill="currentColor"
+		d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+	></path></svg
+>

package/src/index.js

@@ -0,0 +1,6 @@
+export { default as Card } from './Card/Card.svelte';
+export { default as Container } from './Container/Container.svelte';
+export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
+export { default as Switcher } from './Switcher/Switcher.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as Button } from './Button/Button.svelte';

package/src/styles/_typography.scss

@@ -0,0 +1,49 @@
+%caption {
+	font-family: $swr-sans;
+	font-size: 0.9rem;
+	line-height: 1;
+	letter-spacing: 0.0045em;
+}
+
+%caption-bold {
+	@extend %caption;
+	font-weight: 600;
+}
+
+%form-label {
+	@extend %caption;
+	display: block;
+	margin-bottom: 0.5em;
+}
+
+%copy {
+	font-family: $swr-sans;
+	font-size: 1.1rem;
+	line-height: 1.45;
+	letter-spacing: 0.0045em;
+}
+
+%copy-bold {
+	@extend %copy;
+	font-weight: 600;
+}
+
+%form-input {
+	@extend %copy;
+	height: $input-height;
+	width: 100%;
+	border: 1px solid currentColor;
+	border-radius: $border-radius-input;
+	background: transparent;
+	padding: 0 0.5em;
+	padding-top: 0.1em;
+	color: currentColor;
+	height: $input-height;
+	margin: 0;
+	display: block;
+	width: 100%;
+	text-size-adjust: none;
+	&:focus-visible {
+		outline: 4px solid rgba(white, 0.4);
+	}
+}

package/src/styles/_vars.scss

@@ -0,0 +1,31 @@
+$reanimation-black: #0c0c0c;
+$reanimation-violetblue: #1d0b40;
+$reanimation-violetblue-hover: #2d155d;
+$reanimation-violet: #5920c0;
+$reanimation-blue: #3053d9;
+$reanimation-warmgrey: #dbd5cd;
+$reanimation-activeorange: #ff3300;
+$orange: #ff3300;
+
+$border-radius-container: 8px;
+$border-radius-input: 4px;
+$input-height: 2.5rem;
+$app-max-width: 40rem;
+
+$swr-sans: 'SWR-VAR-Sans', serif;
+$swr-text: 'SWR-VAR-Text', serif;
+
+$transition-fast: 150ms;
+
+// Breakpoints
+$break-phone: 510px;
+$break-tablet: 992px;
+$break-desktop-small: 1200px;
+$break-desktop-large: 1400px;
+$break-desktop-xl: 1400px;
+
+@mixin bp($point) {
+	@media (min-width: $point) {
+		@content;
+	}
+}

package/src/styles/base.scss

@@ -0,0 +1,8 @@
+@import 'vars';
+@import 'typography';
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}

package/src/assets/icons/times-circle-solid.svg.svelte

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>

package/src/styles/css/colors.css

@@ -1,77 +0,0 @@
-body {
-  --petrol--1: #00677f;
-  --eisblau--1: #00dbd7;
-  --türkisblau--1: #007e8f;
-  --dunkelblau--1: #0a1e3c;
-  --orange--1: #ff4e3c;
-  --purpur--1: #5c267e;
-  --rosarot--1: #ff003c;
-  --pink--1: #ff0096;
-}
-
-body[data-stationid="swraktuell"] {
-  --swrdata-color-primary: var(--petrol--1);
-  --swrdata-color-highlight: var(--orange--1);
-}
-
-body[data-stationid="swr3"] {
-  --swrdata-color-primary: var(--rosarot--1);
-  --swrdata-color-highlight: var(--pink--1);
-}
-
-/* load fonts for swr3 */
-
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-3_Light.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-3_Light.woff) format("woff");
-  font-weight: 300;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-4_SemiLight.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-4_SemiLight.woff) format("woff");
-  font-weight: 400;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-5_Plain.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-5_Plain.woff) format("woff");
-  font-weight: 500;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-6_SemiBold.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-6_SemiBold.woff) format("woff");
-  font-weight: 600;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-7_Bold.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-7_Bold.woff) format("woff");
-  font-weight: 700;
-  font-display: swap;
-  font-style: normal;
-}
-@font-face {
-  font-family: TheMix;
-  src:
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-8_ExtraBold.woff2) format("woff2"),
-    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-8_ExtraBold.woff) format("woff");
-  font-weight: 800;
-  font-display: swap;
-  font-style: normal;
-}

package/src/styles/scss/_colors.scss

@@ -1,87 +0,0 @@
-// swr main colors
-$petrol--1: #05556a;
-$eisblau--1: #00dbd7;
-$dunkelblau--1: #0a1e3c;
-$orange--1: #ff4e3c;
-$purpur--1: #5c267e;
-$rosarot--1: #ff003c;
-
-// impfungen
-$erst: #929292;
-$voll: rgb(0, 150, 160);
-$boost: #05556a;
-
-// min max
-$inzidenz--max: #05556a;
-$inzidenz--min: transparentize($inzidenz--max, 0.1);
-
-// scale with 10 options
-$inzidenz--10: rgb(4, 52, 58);
-$inzidenz--9: rgb(5, 70, 84);
-$inzidenz--8: rgb(5, 92, 112);
-$inzidenz--7: rgb(4, 128, 142);
-$inzidenz--6: rgb(1, 165, 172);
-$inzidenz--5: rgb(1, 203, 203);
-$inzidenz--4: rgb(103, 229, 228);
-$inzidenz--3: rgb(177, 245, 250);
-$inzidenz--2: rgb(203, 245, 250);
-$inzidenz--1: rgb(218, 241, 244);
-
-$inzidenz-1--8: rgb(4, 52, 58);
-$inzidenz-1--7: rgb(5, 69, 82);
-$inzidenz-1--6: rgb(5, 86, 107);
-$inzidenz-1--5: rgb(2, 122, 137);
-$inzidenz-1--4: rgb(0, 150, 160);
-$inzidenz-1--3: rgb(0, 218, 214);
-$inzidenz-1--2: rgb(194, 247, 254);
-$inzidenz-1--1: rgb(218, 241, 244);
-
-// Spritpreise
-$diesel-min: #f9ebb7;
-$diesel-max: #b7950d;
-$e5-min: #d0f0f1;
-$e5-max: #05556a;
-$e10-min: #ebd9e1;
-$e10-max: #7e2d41;
-
-// extra colors
-$hellgrau--1: #b8b8b8;
-$hellgrau--2: #929292;
-$hellgrau--3: #7b7b7b;
-$hellgrau--4: #494949;
-$schwarzgrau--1: #383838;
-$schwarzgrau--4: #161616;
-
-$schatten-grau: #eeeeee;
-$hintergrund-grau: #f5f5f5;
-
-body {
-  --petrol--1: #00677f;
-  --eisblau--1: #00dbd7;
-  --türkisblau--1: #007e8f;
-  --dunkelblau--1: #0a1e3c;
-  --orange--1: #ff4e3c;
-  --purpur--1: #5c267e;
-
-  --rosarot--1: #ff003c;
-  --pink--1: #ff0096;
-}
-
-body[stationid='swraktuell'] {
-  --swrdata-color-primary: var(--petrol--1);
-  --swrdata-color-highlight: var(--orange--1);
-}
-
-body[stationid='swr3'] {
-  --swrdata-color-primary: var(--rosarot--1);
-  --swrdata-color-highlight: var;
-}
-
-:export {
-  dieselMin: $diesel-min;
-  dieselMax: $diesel-max;
-  e5Min: $e5-min;
-  e5Max: $e5-max;
-  e10Min: $e10-min;
-  e10Max: $e10-max;
-}

package/src/styles/scss/_constants.scss

@@ -1,43 +0,0 @@
-$swr-inner-container-width-m: 490px;
-$swr-inner-container-width-l: 730px;
-$swr-inner-container-width-xl: 976px;
-$swr-padding-removal: 20px;
-$reanimation-width: 1440px;
-$reanimation-max-width: 1440px;
-$reanimation-max-text-width: 864px;
-$reanimation-ff-text: "SWR-VAR-Text";
-$reanimation-ff-sans: "SWR-VAR-Sans";
-$reanimation-ff-slab: "SWR-VAR-Slab";
-$transition-fast: 150ms;
-
-// Padding
-$reanimation-padding-s: 16px;
-$reanimation-padding-m: 32px;
-$reanimation-padding-l: 48px;
-$reanimation-padding-xl: 64px;
-$reanimation-padding-xxl: 96px;
-$reanimation-padding-xxxl: 112px;
-
-// Breakpoints
-$break-phone: 510px;
-$break-tablet: 992px;
-$break-desktop-small: 1200px;
-$break-desktop-large: 1400px;
-$break-desktop-xl: 1400px;
-
-// Colors
-$reanimation-black: #0c0c0c;
-$reanimation-violetblue: #1d0b40;
-$reanimation-violetblue-hover: #2d155d;
-$reanimation-violet: #5920c0;
-$reanimation-blue: #3053d9;
-$reanimation-warmgrey: #dbd5cd;
-$reanimation-activeorange: #ff3300;
-
-// Breakout radius
-$border-radius-box: 8px;
-$border-radius-input: 4px;
-
-// max container width
-$app-max-width: 650px !default;
-$input-height: 2.35em;

package/src/styles/scss/_functions.scss

@@ -1,30 +0,0 @@
-@mixin flex-center {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin respond-min($width) {
-  @media screen and (min-width: $width) {
-    @content;
-  }
-}
-
-@mixin respond-max($width) {
-  @media screen and (max-width: $width) {
-    @content;
-  }
-}
-
-@mixin hover {
-  @media (hover: hover) {
-    &:hover {
-      @content;
-    }
-  }
-  &:active {
-    // &:focus {
-    @content;
-  }
-}

package/src/styles/scss/_typography.scss

@@ -1,49 +0,0 @@
-@use 'sass:math';
-
-@font-face {
-  font-family: 'SWR-VAR-Sans';
-  font-weight: 400 600 700;
-  font-display: swap;
-  src:
-    local('SWR-VAR-Sans'),
-    url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2') format('woff2');
-}
-@font-face {
-  font-family: 'SWR-VAR-Text';
-  font-weight: 400 600 700;
-  font-display: swap;
-  src:
-    local('SWR-VAR-Text'),
-    url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2') format('woff2');
-}
-
-$sans: 'SWR-VAR-Sans', sans-serif;
-$text: 'SWR-VAR-Text', sans-serif;
-
-%caption {
-  font-size: 0.9rem;
-  line-height: 1;
-  letter-spacing: 0.0045em;
-}
-%caption-bold {
-  @extend %caption;
-  font-weight: 700;
-}
-%copy {
-  font-family: $text;
-  font-size: 1.1rem;
-  line-height: 1.45;
-  letter-spacing: 0.0045em;
-}
-%copy-bold {
-  @extend %copy;
-  font-weight: 700;
-}
-%h3 {
-  @extend %copy;
-  font-family: $sans;
-  font-size: 2.2rem;
-  line-height: 1.15;
-  font-weight: 600;
-  letter-spacing: 0.0025em;
-}

package/src/styles/scss/base.scss

@@ -1,10 +0,0 @@
-@import "constants";
-@import "typography";
-@import "functions";
-@import "colors";
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}