@swr-data-lab/components 1.5.2 → 1.6.0

package/package.json

@@ -64,5 +64,5 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.5.2"
+	"version": "1.6.0"
 }

package/src/DesignTokens/DesignTokens.svelte

@@ -19,6 +19,7 @@
 		'--br-large: 8px',
 		'--br-small: 4px',
 		'--ratio: 1.15',
+		'--input-height: 2.5rem',
 		'--swr-sans: "SWR-VAR-Sans", sans-serif',
 		'--swr-text: "SWR-VAR-Text", sans-serif',
 		'--fs-small-3: calc(var(--fs-small-2) / var(--ratio))',

package/src/Switcher/Switcher.stories.svelte

@@ -0,0 +1,55 @@
+<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: 'Input Components/Switcher',
+    argTypes: {
+      size: {control: "text"}
+    },
+    tags: ['autodocs'],
+  })
+
+</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

@@ -7,6 +7,9 @@
 	// Machine-readable name for the form field. Should be unique to other fields in the form.
 	export let groupName: string = '';
 
+	// Type size
+	export let size: string = 'default';
+
 	// The currently selected option
 	export let value: string = options[0];
 
@@ -23,7 +26,7 @@ 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 +47,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: .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 +83,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 +99,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 +112,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

@@ -8,3 +8,4 @@ export { default as Select } from './Select/Select.svelte';
 export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
 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/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()
-    })
-  },
-}