@swr-data-lab/components 1.5.3 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<script context="module">
|
|
2
|
+
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
+
import Switcher from './Switcher.svelte';
|
|
4
|
+
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
|
|
5
|
+
import {
|
|
6
|
+
userEvent,
|
|
7
|
+
within,
|
|
8
|
+
expect,
|
|
9
|
+
} from '@storybook/test';
|
|
10
|
+
|
|
11
|
+
const { Story } = defineMeta({
|
|
12
|
+
title: 'Input Components/Switcher',
|
|
13
|
+
argTypes: {
|
|
14
|
+
size: {control: "text"}
|
|
15
|
+
},
|
|
16
|
+
tags: ['autodocs'],
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<Story name="Two Options">
|
|
22
|
+
<DesignTokens>
|
|
23
|
+
<Switcher
|
|
24
|
+
options={["Option A", "Option B"]}
|
|
25
|
+
groupName="two-options"
|
|
26
|
+
value="Option A"
|
|
27
|
+
size="default"
|
|
28
|
+
label="Label"
|
|
29
|
+
/>
|
|
30
|
+
</DesignTokens>
|
|
31
|
+
</Story>
|
|
32
|
+
|
|
33
|
+
<Story name="Four Options" play={async ({ canvasElement, step }) => {
|
|
34
|
+
const canvas = within(canvasElement)
|
|
35
|
+
await step("Clicking selects the expected option", async () => {
|
|
36
|
+
const optionA = canvas.getByLabelText("Apples")
|
|
37
|
+
const optionB = canvas.getByLabelText("Bananas")
|
|
38
|
+
await userEvent.click(optionA)
|
|
39
|
+
expect(optionA).toBeChecked()
|
|
40
|
+
expect(optionB).not.toBeChecked()
|
|
41
|
+
await userEvent.click(optionB)
|
|
42
|
+
expect(optionB).toBeChecked()
|
|
43
|
+
expect(optionA).not.toBeChecked()
|
|
44
|
+
})
|
|
45
|
+
}}>
|
|
46
|
+
<DesignTokens>
|
|
47
|
+
<Switcher
|
|
48
|
+
options={["Apples", "Oranges", "Bananas", "Peaches"]}
|
|
49
|
+
groupName="four-options"
|
|
50
|
+
value="Oranges"
|
|
51
|
+
label="Label"
|
|
52
|
+
size="small"
|
|
53
|
+
/>
|
|
54
|
+
</DesignTokens>
|
|
55
|
+
</Story>
|
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
// Machine-readable name for the form field. Should be unique to other fields in the form.
|
|
8
8
|
export let groupName: string = '';
|
|
9
9
|
|
|
10
|
+
// Type size
|
|
11
|
+
export let size: string = 'default';
|
|
12
|
+
|
|
10
13
|
// The currently selected option
|
|
11
14
|
export let value: string = options[0];
|
|
12
15
|
|
|
@@ -23,7 +26,7 @@ Radio-like form component to choose exactly one of a given set of options.
|
|
|
23
26
|
@component
|
|
24
27
|
-->
|
|
25
28
|
|
|
26
|
-
<fieldset class="container">
|
|
29
|
+
<fieldset class="container" class:small={size === "small"}>
|
|
27
30
|
<legend>{label}</legend>
|
|
28
31
|
<ul>
|
|
29
32
|
{#each options as o (o)}
|
|
@@ -44,21 +47,21 @@ Radio-like form component to choose exactly one of a given set of options.
|
|
|
44
47
|
</fieldset>
|
|
45
48
|
|
|
46
49
|
<style lang="scss">
|
|
47
|
-
@import '../styles/base.scss';
|
|
48
|
-
|
|
49
50
|
fieldset {
|
|
50
51
|
border: 0;
|
|
52
|
+
font-family: var(--swr-sans);
|
|
51
53
|
}
|
|
52
54
|
|
|
53
55
|
legend {
|
|
54
|
-
|
|
56
|
+
font-size: var(--fs-small-2);
|
|
57
|
+
margin-bottom: .25em;
|
|
55
58
|
}
|
|
56
59
|
|
|
57
60
|
ul {
|
|
58
61
|
width: 100%;
|
|
59
62
|
display: flex;
|
|
60
63
|
flex-direction: row;
|
|
61
|
-
border-radius:
|
|
64
|
+
border-radius: var(--br-small);
|
|
62
65
|
overflow: hidden;
|
|
63
66
|
padding: 0;
|
|
64
67
|
margin: 0;
|
|
@@ -80,10 +83,13 @@ Radio-like form component to choose exactly one of a given set of options.
|
|
|
80
83
|
position: absolute;
|
|
81
84
|
left: -999px;
|
|
82
85
|
}
|
|
86
|
+
.small label {
|
|
87
|
+
font-size: var(--fs-small-1)
|
|
88
|
+
}
|
|
83
89
|
label {
|
|
84
|
-
|
|
90
|
+
font-size: var(--fs-base);
|
|
91
|
+
height: 2.5em;
|
|
85
92
|
line-height: 1;
|
|
86
|
-
height: $input-height;
|
|
87
93
|
cursor: pointer;
|
|
88
94
|
margin: 0;
|
|
89
95
|
flex-basis: 0;
|
|
@@ -93,7 +99,7 @@ Radio-like form component to choose exactly one of a given set of options.
|
|
|
93
99
|
justify-content: center;
|
|
94
100
|
color: currentColor;
|
|
95
101
|
position: relative;
|
|
96
|
-
transition:
|
|
102
|
+
transition: var(--fast);
|
|
97
103
|
text-underline-offset: 0.1em;
|
|
98
104
|
border-right: 1px solid currentColor;
|
|
99
105
|
&:hover,
|
|
@@ -106,7 +112,7 @@ Radio-like form component to choose exactly one of a given set of options.
|
|
|
106
112
|
width: 1em;
|
|
107
113
|
height: auto;
|
|
108
114
|
opacity: 0;
|
|
109
|
-
transition:
|
|
115
|
+
transition: var(--fast);
|
|
110
116
|
display: block;
|
|
111
117
|
}
|
|
112
118
|
.is-selected & {
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { userEvent, within, expect } from "@storybook/test"
|
|
2
|
-
import Switcher from "."
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: "Example/Switcher",
|
|
6
|
-
tags: ["autodocs"],
|
|
7
|
-
component: Switcher,
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const TwoOptions = {
|
|
11
|
-
args: {
|
|
12
|
-
options: ["Option A", "Option B"],
|
|
13
|
-
groupName: "two-options",
|
|
14
|
-
value: "Option A",
|
|
15
|
-
},
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export const FourOptions = {
|
|
19
|
-
args: {
|
|
20
|
-
options: ["Apples", "Oranges", "Bananas", "Peaches"],
|
|
21
|
-
groupName: "four-options",
|
|
22
|
-
value: "Oranges",
|
|
23
|
-
},
|
|
24
|
-
play: async ({ canvasElement, step }) => {
|
|
25
|
-
const canvas = within(canvasElement)
|
|
26
|
-
|
|
27
|
-
await step("Clicking selects the expected option", async () => {
|
|
28
|
-
const optionA = canvas.getByLabelText("Apples")
|
|
29
|
-
const optionB = canvas.getByLabelText("Bananas")
|
|
30
|
-
await userEvent.click(optionA)
|
|
31
|
-
expect(optionA).toBeChecked()
|
|
32
|
-
expect(optionB).not.toBeChecked()
|
|
33
|
-
await userEvent.click(optionB)
|
|
34
|
-
expect(optionB).toBeChecked()
|
|
35
|
-
expect(optionA).not.toBeChecked()
|
|
36
|
-
})
|
|
37
|
-
},
|
|
38
|
-
}
|