Migrate to DesignTokens

components/.storybook/main.ts

@@ -1,14 +1,14 @@
-import { dirname, join } from "path";
-import type { StorybookConfig } from "@storybook/sveltekit";
+import { dirname, join } from 'path';
+import type { StorybookConfig } from '@storybook/sveltekit';
 
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(join(value, 'package.json')));
 }
 
 const config: StorybookConfig = {
   stories: [
-    "../src/**/*.stories.@(js|ts|svelte)",
-    "../src/**/*.mdx",
+    '../src/**/*.stories.@(js|ts|svelte)',
+    '../src/**/*.mdx'
   ],
 
   addons: [
@@ -18,20 +18,17 @@ const config: StorybookConfig = {
         legacyTemplate: true
       }
     },
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
-    getAbsolutePath("@storybook/addon-mdx-gfm")
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/experimental-addon-test')
   ],
   framework: {
-    name: getAbsolutePath("@storybook/sveltekit"),
-    options: {},
+    name: '@storybook/sveltekit',
+    options: {}
   },
 
-  docs: {
-    autodocs: true
-  }
+  docs: {}
 };
 
-export default config;
+export default config;

components/.storybook/preview.ts

@@ -2,6 +2,9 @@ import type { Preview } from "@storybook/svelte";
 
 const preview: Preview = {
   parameters: {
+    options: {
+      storySort: { order: ['About', 'Design Tokens', "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

components/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/sveltekit';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

components/package.json

@@ -14,7 +14,7 @@
 		"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": "vitest run --project=storybook",
 		"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"
 	},
@@ -27,28 +27,31 @@
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/npm": "^12.0.1",
 		"@storybook/addon-essentials": "^8.6.4",
-		"@storybook/addon-interactions": "^8.6.4",
 		"@storybook/addon-links": "^8.6.4",
-		"@storybook/addon-mdx-gfm": "^8.6.4",
 		"@storybook/addon-svelte-csf": "^5.0.0-next.27",
 		"@storybook/blocks": "^8.6.4",
 		"@storybook/docs-tools": "^8.6.4",
+		"@storybook/experimental-addon-test": "^8.6.12",
 		"@storybook/svelte": "^8.6.4",
 		"@storybook/sveltekit": "^8.6.4",
 		"@storybook/test": "^8.6.4",
-		"@storybook/test-runner": "^0.19.1",
+		"@storybook/test-runner": "^0.22.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@vitest/browser": "^3.1.1",
+		"@vitest/coverage-v8": "^3.1.1",
 		"concurrently": "^9.0.1",
 		"http-server": "^14.1.1",
+		"playwright": "^1.51.1",
 		"sass-embedded": "^1.78.0",
 		"semantic-release": "^24.1.2",
 		"storybook": "^8.6.4",
 		"svelte": "^5.23.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0",
+		"vitest": "^3.1.1",
 		"wait-on": "^8.0.1"
 	},
 	"type": "module",
@@ -65,4 +68,4 @@
 		}
 	},
 	"version": "1.0.6"
-}
+}

components/src/Autocomplete/Autocomplete.stories.svelte

@@ -0,0 +1,61 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { userEvent, within, expect } from '@storybook/test';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import Autocomplete from './Autocomplete.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Deprecated/Autocomplete',
+		component: Autocomplete
+	});
+
+	const testData = ['Apples', 'Oranges', 'Pears', 'Peaches', 'Bananas'].map((el) => {
+		return {
+			value: el,
+			label: el,
+			details: {}
+		};
+	});
+</script>
+
+<Story
+	name="Basic"
+	tags={['autodocs']}
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const input = canvas.getByTestId('autocomplete-input');
+		await step('Select using the mouse', async () => {
+			await userEvent.click(input);
+			expect(input).toHaveFocus();
+			await userEvent.keyboard('ba');
+			const bananasOption = canvas.getByText('Bananas');
+			await userEvent.click(bananasOption);
+			expect(input).toHaveValue('Bananas');
+		});
+		await userEvent.clear(input);
+		await step('Select using the keyboard', async () => {
+			await userEvent.click(input);
+			expect(input).toHaveFocus();
+			await userEvent.keyboard('ap');
+			await userEvent.keyboard('{ArrowDown}');
+			await userEvent.keyboard('{Enter}');
+			expect(input).toHaveValue('Apples');
+		});
+		await userEvent.clear(input);
+	}}
+>
+	<DesignTokens>
+		<div class="container">
+			<Autocomplete label="" name="test" data={testData} query="" placeholder="Select a fruit"
+			></Autocomplete>
+		</div>
+	</DesignTokens>
+</Story>
+
+<style>
+	.container {
+		background: var(--violet-dark-5);
+		padding: 5%;
+	}
+</style>

components/src/Autocomplete/Autocomplete.svelte

@@ -108,8 +108,8 @@ Data should be provided as array of objects. Each object contains the informatio
 		autocapitalize="off"
 		data-testid="autocomplete-input"
 		bind:this={inputRef}
-		on:keydown={handleKeyDown}
 		bind:value={query}
+		on:keydown={handleKeyDown}
 		on:input={handleInput}
 		on:focus={() => {
 			isActive = true;
@@ -150,28 +150,30 @@ Data should be provided as array of objects. Each object contains the informatio
 </div>
 
 <style lang="scss">
-	@import '../styles/base.scss';
+	@use '../styles/base.scss';
 
 	.autocomplete {
 		position: relative;
 		display: block;
 		color: white;
-
+		display: flex;
+		flex-flow: column;
 		label {
 			@extend %form-label;
 		}
 
 		input {
 			@extend %form-input;
+			width: auto;
 		}
 
 		ul {
 			position: absolute;
 			top: 100%;
 			border: 1px solid currentColor;
-			background: $color-violetblue;
-			border-bottom-left-radius: $border-radius-input;
-			border-bottom-right-radius: $border-radius-input;
+			background: var(--violet-dark-3);
+			border-bottom-left-radius: var(--br-small);
+			border-bottom-right-radius: var(--br-small);
 			border-top: 0;
 			left: 0;
 			right: 0;
@@ -218,7 +220,7 @@ Data should be provided as array of objects. Each object contains the informatio
 			}
 			&:hover,
 			&:focus {
-				color: $color-activeorange;
+				color: var(--red-base);
 				cursor: pointer;
 			}
 		}

components/src/Button/Button.svelte

@@ -1,21 +1,26 @@
 <script lang="ts">
-	export let as: string = 'button';
-	export let label: string = '';
-	export let href: string = '';
-	export let disabled: boolean = false;
+	interface ButtonProps {
+		as: 'button' | 'a';
+		label: string;
+		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}>{label}</a>
 {:else}
-	<button class="button" on:click {disabled}>{label}</button>
+	<button class="button" {onclick} {disabled}>{label}</button>
 {/if}
 
 <style lang="scss">
-	@import '../styles/base.scss';
+	@use '../styles/base.scss';
 	.button {
 		@extend %copy-bold;
-		background: $color-violet;
+		background: var(--violet-dark-3);
 		display: inline-flex;
 		align-items: center;
 		justify-self: flex-start;
@@ -24,11 +29,11 @@
 		color: white;
 		border: 1px solid rgba(white, 0.1);
 		box-shadow: 0px 0px 10px rgba(black, 0.05);
-		border-radius: $border-radius-input;
+		border-radius: var(--br-small);
 		text-shadow: 0px 0px 5px rgba(black, 0.05);
 		font-size: 1.2rem;
 		text-decoration: none;
-		@include bp($break-tablet) {
+		@media (min-width: base.$break-tablet) {
 			font-size: 1.4rem;
 		}
 		&:hover,
@@ -39,7 +44,6 @@
 		&.disabled,
 		&:disabled {
 			opacity: 0.5;
-			/* pointer-events: none; */
 		}
 	}
 </style>

components/src/Card/Card.stories.svelte

@@ -1,27 +1,12 @@
-<script context="module">
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Card from './Card.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
 
-	export const meta = {
-		title: 'Input Components/Card',
+	const { Story } = defineMeta({
+		title: 'Display/Card/Base',
 		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">