@swr-data-lab/components 1.6.0 → 1.8.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

@@ -1,55 +1,43 @@
 <script context="module">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
+	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: 'Input Components/Switcher',
-    argTypes: {
-      size: {control: "text"}
-    },
-    tags: ['autodocs'],
-  })
+	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"
-    />
+		<Switcher options={['Option A', 'Option B']} 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()
-  })
-  }}>
+<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"
-  />
+		<Switcher
+			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
+			value="Oranges"
+			label="Label"
+			size="small"
+		/>
 	</DesignTokens>
 </Story>

package/src/Switcher/Switcher.svelte

@@ -1,44 +1,40 @@
 <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
+		 */
+		label: string;
+		/**
+		 * Available options
+		 */
+		options: string[];
+		/**
+		 * Display size
+		 */
+		size?: 'default' | 'small';
+		/**
+		 * The currently-selected option
+		 */
+		value: string | null;
+	}
 
-	// Type size
-	export let size: string = 'default';
+	let { label, options, size = 'default', value = $bindable(null) }: SwitcherProps = $props();
 
-	// The currently selected option
-	export let value: string = options[0];
+	const groupId = $props.id();
+	const groupName = 'select-' + groupId;
 
 	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>
 
-<!--
-Radio-like form component to choose exactly one of a given set of options.
-@component
--->
-
-<fieldset class="container" class:small={size === "small"}>
+<fieldset class="container" class:small={size === 'small'}>
 	<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>
@@ -47,6 +43,8 @@ Radio-like form component to choose exactly one of a given set of options.
 </fieldset>
 
 <style lang="scss">
+	@use '../styles/base.scss';
+
 	fieldset {
 		border: 0;
 		font-family: var(--swr-sans);
@@ -54,29 +52,34 @@ Radio-like form component to choose exactly one of a given set of options.
 
 	legend {
 		font-size: var(--fs-small-2);
-		margin-bottom: .25em;
+		font-weight: 500;
+		margin-bottom: 0.35em;
 	}
 
 	ul {
 		width: 100%;
 		display: flex;
-		flex-direction: row;
-		border-radius: var(--br-small);
+		flex-direction: column;
 		overflow: hidden;
 		padding: 0;
 		margin: 0;
-		overflow: hidden;
 		border: 1px solid currentColor;
+		border-radius: var(--br-small);
+
+		@media (min-width: base.$break-phone) {
+			flex-flow: row;
+		}
 
 		&:focus-within,
 		&:active {
-			outline: 3px solid rgba(white, 0.5);
+			outline: 2px solid var(--blue-light-2);
 		}
 	}
 	li {
 		display: contents;
 		&:last-child label {
 			border-right: 0;
+			border-bottom: 0;
 		}
 	}
 	input {
@@ -84,42 +87,46 @@ Radio-like form component to choose exactly one of a given set of options.
 		left: -999px;
 	}
 	.small label {
-		font-size: var(--fs-small-1)
+		font-size: var(--fs-small-1);
+		height: 2.25em;
+		padding: 0 0.65em;
 	}
 	label {
 		font-size: var(--fs-base);
-		height: 2.5em;
 		line-height: 1;
+		white-space: nowrap;
+		padding: 0 1em;
 		cursor: pointer;
 		margin: 0;
-		flex-basis: 0;
-		flex-grow: 1;
 		align-items: center;
 		display: flex;
-		justify-content: center;
 		color: currentColor;
 		position: relative;
 		transition: var(--fast);
-		text-underline-offset: 0.1em;
-		border-right: 1px solid currentColor;
+		text-underline-offset: 0.2em;
+		border-bottom: 1px solid currentColor;
+		height: 2.25em;
+		@media (min-width: base.$break-phone) {
+			justify-content: center;
+			padding: 0 1em;
+			flex-basis: 0;
+			flex-grow: 1;
+			border-right: 1px solid currentColor;
+			border-bottom: 0;
+		}
+		@media (min-width: base.$break-tablet) {
+			height: 2.5em;
+		}
 		&:hover,
 		&:focus-visible {
 			text-decoration: underline;
 		}
-		svg {
-			position: absolute;
-			left: 0.65em;
-			width: 1em;
-			height: auto;
-			opacity: 0;
-			transition: var(--fast);
-			display: block;
-		}
 		.is-selected & {
-			background: white;
-			color: black;
-			svg {
-				opacity: 1;
+			background: rgb(247, 247, 247);
+			font-weight: 700;
+			box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
+			@media (min-width: base.$break-phone) {
+				box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
 			}
 		}
 	}

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/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;
-	}
-}