@swr-data-lab/components 1.0.9 → 1.0.11

package/package.json

@@ -1,59 +1,64 @@
 {
-  "name": "@swr-data-lab/components",
-  "description": "SWR Data Lab component library",
-  "author": "SWR Data Lab",
-  "publishConfig": {
-    "access": "restricted"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "storybook": "storybook dev -p 6006",
-    "start": "storybook dev -p 6006",
-    "build-storybook": "storybook build --disable-telemetry",
-    "test-storybook": "test-storybook --browsers chromium firefox",
-    "test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
-    "semantic-release": "semantic-release"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
-    "@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-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/test-runner": "^0.19.1",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "concurrently": "^9.0.1",
-    "http-server": "^14.1.1",
-    "sass-embedded": "^1.78.0",
-    "semantic-release": "^24.1.2",
-    "storybook": "^8.3.0",
-    "svelte": "^4.2.7",
-    "svelte-check": "^4.0.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.3",
-    "wait-on": "^8.0.1"
-  },
-  "type": "module",
-  "release": {
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/npm"
-    ]
-  },
-  "version": "1.0.9"
+	"name": "@swr-data-lab/components",
+	"description": "SWR Data Lab component library",
+	"author": "SWR Data Lab",
+	"publishConfig": {
+		"access": "restricted"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"storybook": "storybook dev -p 6006",
+		"start": "storybook dev -p 6006",
+		"build-storybook": "storybook build --disable-telemetry",
+		"test-storybook": "test-storybook --browsers chromium firefox",
+		"test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
+		"semantic-release": "semantic-release"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^2.0.2",
+		"@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-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/test-runner": "^0.19.1",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"concurrently": "^9.0.1",
+		"http-server": "^14.1.1",
+		"sass-embedded": "^1.78.0",
+		"semantic-release": "^24.1.2",
+		"storybook": "^8.3.0",
+		"svelte": "^4.2.7",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3",
+		"wait-on": "^8.0.1"
+	},
+	"type": "module",
+	"release": {
+		"plugins": [
+			"@semantic-release/commit-analyzer",
+			"@semantic-release/release-notes-generator",
+			"@semantic-release/npm"
+		]
+	},
+	"exports": {
+		".": {
+			"svelte": "./src/index.js"
+		}
+	},
+	"version": "1.0.11"
 }

package/src/Autocomplete/Autocomplete.svelte

@@ -1,86 +1,90 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import Circle from '../assets/icons/times-circle-solid.svg.svelte';
-
-  export let data = [];
-  export let query = '';
-  export let placeholder = 'Platzhalter';
-  
-  
-  const sortData = (a, b) => {
-    return a.value.localeCompare(b.value);
-  }
-  
-  let listRef;
-  let controlsRef;
-  let inputRef;
-  const dispatch = createEventDispatcher();
-
-  let highlightedItemIndex = -1;
-  $: suggestions = data.sort(sortData).slice(0, 50);
-  $: isActive = false;
-
-  // Insert clicked item into search input,
-  // dispatch it as select event and close the dropdown
-  const handleItemClick = (index) => {
-    highlightedItemIndex = index;
-    setSelectedItem(suggestions[highlightedItemIndex]);
-  };
-
-  const setSelectedItem = (item) => {
-    query = item.value;
-    isActive = false;
-    dispatch('select', { item });
-  };
-
-  // Register keyboard events
-  const handleKeyDown = (e) => {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      highlightedItemIndex =
-        highlightedItemIndex < suggestions.length - 1 ? highlightedItemIndex + 1 : 0;
-      const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-      target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      highlightedItemIndex =
-        highlightedItemIndex > 0 ? highlightedItemIndex - 1 : suggestions.length - 1;
-      const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
-      target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    } else if (e.key === 'Enter') {
-      if (highlightedItemIndex > -1){
-        setSelectedItem(suggestions[highlightedItemIndex]);
-        isActive = false;
-      }
-    }
-  };
-
-  const handleClear = (e) => {
-    query = '';
-    inputRef.focus()
-    setSuggestions()
-    dispatch('select', {
-      item: null
-    });
-  };
-
-
-  const setSuggestions  = () => {
-    suggestions = data.filter((el) =>{
-        return el.value.toLowerCase().startsWith(query.toLowerCase())
-      }).sort(sortData);
-  }
-
-  // update dropdown list if input value changes
-  const handleInput = () => {
-    isActive = true;
-    if (query.length === 0){
-      suggestions = data
-    } else {
-      setSuggestions()
-      highlightedItemIndex = -1;
-    }
-  }
+	import { createEventDispatcher } from 'svelte';
+	import Circle from '../assets/times-circle-solid.svg.svelte';
+
+	export let data = [];
+	export let query: string = '';
+	export let placeholder: string = 'Platzhalter';
+	export let label: string;
+	export let name: string;
+
+	const sortData = (a, b) => {
+		return a.value.localeCompare(b.value);
+	};
+
+	let listRef;
+	let inputRef;
+	let controlsRef;
+	const dispatch = createEventDispatcher();
+	const maxSuggestions = 100;
+
+	let highlightedItemIndex = -1;
+	$: suggestions = data.sort(sortData).slice(0, maxSuggestions);
+	$: isActive = false;
+
+	// Insert clicked item into search input,
+	// dispatch it as select event and close the dropdown
+	const handleItemClick = (index) => {
+		highlightedItemIndex = index;
+		setSelectedItem(suggestions[highlightedItemIndex]);
+	};
+
+	const setSelectedItem = (item) => {
+		query = item.value;
+		isActive = false;
+		dispatch('select', { item });
+	};
+
+	// Register keyboard events
+	const handleKeyDown = (e) => {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			highlightedItemIndex =
+				highlightedItemIndex < suggestions.length - 1 ? highlightedItemIndex + 1 : 0;
+			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
+			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlightedItemIndex =
+				highlightedItemIndex > 0 ? highlightedItemIndex - 1 : suggestions.length - 1;
+			const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
+			target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+		} else if (e.key === 'Enter') {
+			if (highlightedItemIndex > -1) {
+				setSelectedItem(suggestions[highlightedItemIndex]);
+				isActive = false;
+			}
+		}
+	};
+
+	const handleClear = () => {
+		query = '';
+		inputRef.focus();
+		setSuggestions();
+		dispatch('select', {
+			item: null
+		});
+	};
+
+	const setSuggestions = () => {
+		suggestions = data
+			.filter((el) => {
+				return el.value.toLowerCase().startsWith(query.toLowerCase());
+			})
+			.slice(0, maxSuggestions)
+			.sort(sortData);
+	};
+
+	// update dropdown list if input value changes
+	const handleInput = () => {
+		isActive = true;
+		if (query.length === 0) {
+			suggestions = data;
+		} else {
+			setSuggestions();
+			highlightedItemIndex = -1;
+		}
+	};
 </script>
 
 <!--
@@ -93,140 +97,140 @@ Data should be provided as array of objects. Each object contains the informatio
 @component
 -->
 
-<div class="autocomplete">
-  <input
-    type="text"
-    {placeholder}
-    autocomplete="off"
-    autocorrect="off"
-    autocapitalize="off"
-    data-testid="autocomplete-input"
-    bind:this={inputRef}
-    on:keydown={handleKeyDown}
-    bind:value={query}
-    on:input={handleInput}
-    on:focus={() => {
-      isActive = true;
-    }}
-    on:blur={(e) => {
-      if (listRef.contains(e.relatedTarget)){
-        window.setTimeout(()=>{
-          isActive = false;
-        }, 100)
-      } else if (!controlsRef.contains(e.relatedTarget)){
-        isActive = false
-      }
-    }}
-  />
-
-  <ul tabindex="-1" bind:this={listRef} class:active={isActive}>
-    {#each suggestions as item, i (item.value)}
-      <li>
-        <button
-          class={`item ${i === highlightedItemIndex ? 'active' : ''}`}
-          tabindex="-1"
-          type="button"
-          on:click={(e) => {
-            e.preventDefault();
-            handleItemClick(i);
-          }}
-        >
-          {item.label}
-        </button>
-      </li>
-    {/each}
-  </ul>
-  <div class="controls" bind:this={controlsRef}>
-    <button type="button" on:click={handleClear} class="clear" class:active={query.length > 0}>
-      <Circle />
-    </button>
-  </div>
+<div class="autocomplete" class:active={isActive}>
+	<label for={name}>{label}</label>
+	<input
+		type="text"
+		{name}
+		{placeholder}
+		autocomplete="off"
+		autocorrect="off"
+		autocapitalize="off"
+		data-testid="autocomplete-input"
+		bind:this={inputRef}
+		on:keydown={handleKeyDown}
+		bind:value={query}
+		on:input={handleInput}
+		on:focus={() => {
+			isActive = true;
+		}}
+		on:blur={(e) => {
+			if (listRef.contains(e.relatedTarget)) {
+				window.setTimeout(() => {
+					isActive = false;
+				}, 100);
+			} else if (!controlsRef.contains(e.relatedTarget)) {
+				isActive = false;
+			}
+		}}
+	/>
+
+	<ul tabindex="-1" bind:this={listRef}>
+		{#each suggestions as item, i (item.value)}
+			<li>
+				<button
+					class={`item ${i === highlightedItemIndex ? 'active' : ''}`}
+					tabindex="-1"
+					type="button"
+					on:click={(e) => {
+						e.preventDefault();
+						handleItemClick(i);
+					}}
+				>
+					{item.label}
+				</button>
+			</li>
+		{/each}
+	</ul>
+	<div class="controls" bind:this={controlsRef}>
+		<button type="button" on:click={handleClear} class="clear" class:active={query.length > 0}>
+			<Circle />
+		</button>
+	</div>
 </div>
 
 <style lang="scss">
-  @import '../styles/scss/base.scss';
-
-  .autocomplete {
-    position: relative;
-    display: block;
-    color: white;
-
-    input {
-      @extend %copy;
-      border: 1px solid black;
-      border-radius: $border-radius-input;
-      background: transparent;
-      padding: 0 0.5em;
-      height: $input-height;
-      margin: 0;
-      display: block;
-      width: 100%;
-      &:focus-visible {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-    input[type='text'] {
-      text-size-adjust: none;
-    }
-
-    ul {
-      position: absolute;
-      top: 100%;
-      border: 1px solid black;
-      border-bottom-left-radius: $border-radius-input;
-      border-bottom-right-radius: $border-radius-input;
-      border-top: 0;
-      left: 0;
-      right: 0;
-      max-height: 10rem;
-      overflow-y: scroll;
-      z-index: 1000;
-      opacity: 0;
-      transition: 100ms;
-      pointer-events: none;
-      &:empty {
-        box-shadow: none;
-      }
-      &.active {
-        opacity: 1;
-        pointer-events: all;
-      }
-
-      .item {
-        @extend %caption;
-        padding: 0.5em;
-        width: 100%;
-        background: transparent;
-        border: 0;
-        text-align: left;
-        border-bottom: 1px solid rgba(black, 0.5);
-        cursor: pointer;
-        &.active, &:hover {
-          text-decoration: underline;
-          background-color: rgba(black, .1);
-        }
-      }
-    }
-
-    .clear {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      right: 0.75rem;
-      width: 1.2rem;
-      height: 1.2rem;
-      background: transparent;
-      border: 0;
-      display: none;
-      &.active {
-        display: block;
-      }
-      &:hover,
-      &:focus {
-        color: $orange--1;
-        cursor: pointer;
-      }
-    }
-  }
+	@import '../styles/base.scss';
+
+	.autocomplete {
+		position: relative;
+		display: block;
+		color: white;
+
+		label {
+			@extend %form-label;
+		}
+
+		input {
+			@extend %form-input;
+		}
+
+		ul {
+			position: absolute;
+			top: 100%;
+			border: 1px solid currentColor;
+			background: $reanimation-violetblue;
+			border-bottom-left-radius: $border-radius-input;
+			border-bottom-right-radius: $border-radius-input;
+			border-top: 0;
+			left: 0;
+			right: 0;
+			max-height: 10rem;
+			overflow-y: scroll;
+			z-index: 1000;
+			opacity: 0;
+			transition: 100ms;
+			pointer-events: none;
+			&:empty {
+				box-shadow: none;
+			}
+
+			.item {
+				@extend %caption;
+				padding: 0.5em;
+				width: 100%;
+				background: transparent;
+				border: 0;
+				text-align: left;
+				color: currentColor;
+				border-bottom: 1px solid rgba(white, 0.25);
+				cursor: pointer;
+				&.active,
+				&:hover {
+					text-decoration: underline;
+					background-color: rgba(white, 0.05);
+				}
+			}
+		}
+
+		.clear {
+			position: absolute;
+			top: 50%;
+			right: 0.75rem;
+			width: 1.2rem;
+			height: 1.2rem;
+			background: transparent;
+			border: 0;
+			display: none;
+			color: white;
+			&.active {
+				display: block;
+			}
+			&:hover,
+			&:focus {
+				color: $orange;
+				cursor: pointer;
+			}
+		}
+		&.active {
+			ul {
+				opacity: 1;
+				pointer-events: all;
+			}
+			input {
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+		}
+	}
 </style>

package/src/Autocomplete/index.js

@@ -1,2 +1,2 @@
-import AutoComplete from "./Autocomplete.svelte"
-export default AutoComplete
+import Autocomplete from './Autocomplete.svelte';
+export default Autocomplete;

package/src/Button/Button.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	export let as: string = 'button';
+	export let label: string = '';
+	export let href: string = '';
+	export let disabled: boolean = false;
+</script>
+
+{#if as === 'a'}
+	<a class="button" class:disabled {href}>{label}</a>
+{:else}
+	<button class="button" on:click {disabled}>{label}</button>
+{/if}
+
+<style lang="scss">
+	@import '../styles/base.scss';
+	.button {
+		@extend %copy-bold;
+		background: $reanimation-violet;
+		display: inline-flex;
+		align-items: center;
+		justify-self: flex-start;
+		padding: 0.25em 1.25em;
+		padding-bottom: 0.35em;
+		color: white;
+		border: 1px solid rgba(white, 0.1);
+		box-shadow: 0px 0px 10px rgba(black, 0.05);
+		border-radius: $border-radius-input;
+		text-shadow: 0px 0px 5px rgba(black, 0.05);
+		font-size: 1.2rem;
+		text-decoration: none;
+		@include bp($break-tablet) {
+			font-size: 1.4rem;
+		}
+		&:hover,
+		&:focus-visible {
+			text-decoration: underline;
+			text-underline-offset: 0.15em;
+		}
+		&.disabled,
+		&:disabled {
+			opacity: 0.5;
+			/* pointer-events: none; */
+		}
+	}
+</style>

package/src/Button/index.js

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

package/src/Card/Card.svelte

@@ -0,0 +1,19 @@
+<div class="card">
+	<slot />
+</div>
+
+<style lang="scss">
+	@import '../styles/base.scss';
+	.card {
+		width: auto;
+		max-width: $app-max-width;
+		color: white;
+		background: $reanimation-violetblue;
+		border-radius: $border-radius-container;
+		margin: 0 1rem;
+		padding: 1.5rem;
+		@include bp($break-tablet) {
+			padding: 2.5rem;
+		}
+	}
+</style>

package/src/Card/index.js

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