@swr-data-lab/components 1.5.3 → 1.7.0

package/src/Switcher/Switcher.mdx

@@ -0,0 +1,13 @@
+import { Story,  Meta, Primary, Controls, Stories} from '@storybook/blocks';
+ 
+import * as SwictherStories from './Switcher.stories.svelte';
+
+<Meta of={SwictherStories}/>
+
+# Switcher
+
+Radio-like form component to choose exactly one of a given set of options.
+
+<Controls/>
+
+<Stories/>

package/src/Switcher/Switcher.stories.svelte

@@ -0,0 +1,50 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Switcher from './Switcher.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import { userEvent, within, expect } from '@storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Form/Switcher',
+		component: Switcher
+	});
+</script>
+
+<Story name="Two Options">
+	<DesignTokens>
+		<Switcher
+			options={['Option A', 'Option B']}
+			groupName="two-options"
+			value="Option A"
+			size="default"
+			label="Label"
+		/>
+	</DesignTokens>
+</Story>
+
+<Story
+	name="Four Options"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		await step('Clicking selects the expected option', async () => {
+			const optionA = canvas.getByLabelText('Apples');
+			const optionB = canvas.getByLabelText('Bananas');
+			await userEvent.click(optionA);
+			expect(optionA).toBeChecked();
+			expect(optionB).not.toBeChecked();
+			await userEvent.click(optionB);
+			expect(optionB).toBeChecked();
+			expect(optionA).not.toBeChecked();
+		});
+	}}
+>
+	<DesignTokens>
+		<Switcher
+			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
+			groupName="four-options"
+			value="Oranges"
+			label="Label"
+			size="small"
+		/>
+	</DesignTokens>
+</Story>

package/src/Switcher/Switcher.svelte

@@ -1,14 +1,31 @@
 <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 = '';
+	interface SwitcherProps {
+		/**
+		 * Human-readable label for the input.
+		 */
+		label: string;
+		options: string[];
+		/**
+		 * Machine-readable name for the input. Should be unique across the document.
+		 */
+		groupName: string;
+		/**
+		 * Type size
+		 */
+		size?: 'default' | 'small';
+		/**
+		 * The currently-selected option
+		 */
+		value: string | null;
+	}
 
-	// The currently selected option
-	export let value: string = options[0];
+	let {
+		label,
+		options,
+		groupName,
+		size = 'default',
+		value = $bindable(null)
+	}: SwitcherProps = $props();
 
 	function optionToID(o: string) {
 		// TODO: This should use $id() when it comes out, so
@@ -18,12 +35,7 @@
 	}
 </script>
 
-<!--
-Radio-like form component to choose exactly one of a given set of options.
-@component
--->
-
-<fieldset class="container">
+<fieldset class="container" class:small={size === 'small'}>
 	<legend>{label}</legend>
 	<ul>
 		{#each options as o (o)}
@@ -44,21 +56,21 @@ Radio-like form component to choose exactly one of a given set of options.
 </fieldset>
 
 <style lang="scss">
-	@import '../styles/base.scss';
-
 	fieldset {
 		border: 0;
+		font-family: var(--swr-sans);
 	}
 
 	legend {
-		@extend %form-label;
+		font-size: var(--fs-small-2);
+		margin-bottom: 0.25em;
 	}
 
 	ul {
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		border-radius: $border-radius-input;
+		border-radius: var(--br-small);
 		overflow: hidden;
 		padding: 0;
 		margin: 0;
@@ -80,10 +92,13 @@ Radio-like form component to choose exactly one of a given set of options.
 		position: absolute;
 		left: -999px;
 	}
+	.small label {
+		font-size: var(--fs-small-1);
+	}
 	label {
-		@extend %copy;
+		font-size: var(--fs-base);
+		height: 2.5em;
 		line-height: 1;
-		height: $input-height;
 		cursor: pointer;
 		margin: 0;
 		flex-basis: 0;
@@ -93,7 +108,7 @@ Radio-like form component to choose exactly one of a given set of options.
 		justify-content: center;
 		color: currentColor;
 		position: relative;
-		transition: $transition-fast;
+		transition: var(--fast);
 		text-underline-offset: 0.1em;
 		border-right: 1px solid currentColor;
 		&:hover,
@@ -106,7 +121,7 @@ Radio-like form component to choose exactly one of a given set of options.
 			width: 1em;
 			height: auto;
 			opacity: 0;
-			transition: $transition-fast;
+			transition: var(--fast);
 			display: block;
 		}
 		.is-selected & {

package/src/index.js

@@ -6,6 +6,7 @@ export { default as Input } from './Input/Input.svelte';
 export { default as Button } from './Button/Button.svelte';
 export { default as Select } from './Select/Select.svelte';
 export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
+export { tokens as tokens } from './DesignTokens/index.js';
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';
 export { default as ChartFooter } from './ChartFooter/ChartFooter.svelte';
 export { default as Middot } from './Middot/Middot.svelte';

package/src/styles/base.scss

@@ -1,8 +1,55 @@
-@import 'vars';
-@import 'typography';
+$break-phone: 510px;
+$break-tablet: 992px;
+$break-desktop-small: 1200px;
+$break-desktop-large: 1400px;
+$break-desktop-xl: 1400px;
 
-* {
+// TODO drop everything below
+
+%caption {
+	font-family: var(--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: var(--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: 2.5em;
+	width: 100%;
+	border: 1px solid currentColor;
+	border-radius: var(--br-small);
+	background: transparent;
+	padding: 0 0.5em;
+	padding-top: 0.1em;
+	color: currentColor;
 	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
+	display: block;
+	text-size-adjust: none;
+	&:focus-visible {
+		outline: 4px solid rgba(white, 0.4);
+	}
 }

package/vitest.workspace.ts

@@ -0,0 +1,32 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineWorkspace } from 'vitest/config';
+
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+
+const dirname =
+	typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export default defineWorkspace([
+	'vite.config.ts',
+	{
+		extends: 'vite.config.ts',
+		plugins: [
+			// The plugin will run tests for the stories defined in your Storybook config
+			// See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+			storybookTest({ configDir: path.join(dirname, '.storybook') })
+		],
+		test: {
+			name: 'storybook',
+			browser: {
+				enabled: true,
+				headless: true,
+				name: 'chromium',
+				provider: 'playwright'
+			},
+			setupFiles: ['.storybook/vitest.setup.ts']
+		}
+	}
+]);

package/src/Autocomplete/Autocomplete.stories.js

@@ -1,61 +0,0 @@
-import { userEvent, within, expect, fn } from "@storybook/test"
-import AutoComplete from "./index.js"
-
-export default {
-  title: "Example/Autocomplete",
-  tags: ["autodocs"],
-  component: AutoComplete,
-}
-
-const testData = ["Apples", "Oranges", "Pears", "Peaches", "Bananas"].map((el) => {
-  return {
-    value: el,
-    label: el,
-    details: {},
-  }
-})
-
-export const Basic = {
-  args: {
-    data: testData,
-    query: "",
-    placeholder: "Select a fruit",
-  },
-}
-
-export const Test = {
-  parameters: {
-    docs: {
-      story: {
-        autoplay: true,
-      },
-    },
-  },
-  args: {
-    data: testData,
-    query: "",
-    placeholder: "Select a fruit",
-  },
-  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)
-  },
-}

package/src/Container/Container.svelte

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

package/src/Container/index.js

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

package/src/Switcher/Switcher.stories.js

@@ -1,38 +0,0 @@
-import { userEvent, within, expect } from "@storybook/test"
-import Switcher from "."
-
-export default {
-  title: "Example/Switcher",
-  tags: ["autodocs"],
-  component: Switcher,
-}
-
-export const TwoOptions = {
-  args: {
-    options: ["Option A", "Option B"],
-    groupName: "two-options",
-    value: "Option A",
-  },
-}
-
-export const FourOptions = {
-  args: {
-    options: ["Apples", "Oranges", "Bananas", "Peaches"],
-    groupName: "four-options",
-    value: "Oranges",
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
-
-    await step("Clicking selects the expected option", async () => {
-      const optionA = canvas.getByLabelText("Apples")
-      const optionB = canvas.getByLabelText("Bananas")
-      await userEvent.click(optionA)
-      expect(optionA).toBeChecked()
-      expect(optionB).not.toBeChecked()
-      await userEvent.click(optionB)
-      expect(optionB).toBeChecked()
-      expect(optionA).not.toBeChecked()
-    })
-  },
-}

package/src/styles/_typography.scss

@@ -1,49 +0,0 @@
-%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

@@ -1,30 +0,0 @@
-$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;
-$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;
-	}
-}