@warp-ds/elements 2.2.0-next.24 → 2.2.0-next.25
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/dist/custom-elements.json +2 -2
- package/dist/packages/expandable/expandable.stories.js +0 -1
- package/dist/packages/expandable/index.js +2 -2
- package/dist/packages/expandable/index.js.map +2 -2
- package/dist/packages/expandable/styles.js +1 -1
- package/dist/packages/modal/modal.stories.js +1 -0
- package/dist/packages/select/index.js +23 -16
- package/dist/packages/select/index.js.map +3 -3
- package/dist/packages/select/select.stories.d.ts +7 -0
- package/dist/packages/select/select.stories.js +71 -2
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
|
@@ -8,3 +8,10 @@ declare const meta: Meta<typeof args>;
|
|
|
8
8
|
export default meta;
|
|
9
9
|
type Story = StoryObj<typeof args>;
|
|
10
10
|
export declare const Default: Story;
|
|
11
|
+
export declare const Hint: Story;
|
|
12
|
+
export declare const Invalid: Story;
|
|
13
|
+
export declare const Disabled: Story;
|
|
14
|
+
export declare const ReadOnly: Story;
|
|
15
|
+
export declare const NoLabel: Story;
|
|
16
|
+
export declare const Optional: Story;
|
|
17
|
+
export declare const Placeholder: Story;
|
|
@@ -9,8 +9,8 @@ const meta = {
|
|
|
9
9
|
render(args) {
|
|
10
10
|
return html `
|
|
11
11
|
<w-select ${spread(prespread(args))}>
|
|
12
|
-
<
|
|
13
|
-
<option value="
|
|
12
|
+
<option value="raspberries">Raspberries</option>
|
|
13
|
+
<option value="strawberries" selected>Strawberries</option>
|
|
14
14
|
<option value="cloudberries">Cloudberries</option>
|
|
15
15
|
</w-select>
|
|
16
16
|
`;
|
|
@@ -29,3 +29,72 @@ export const Default = {
|
|
|
29
29
|
label: 'Berries',
|
|
30
30
|
},
|
|
31
31
|
};
|
|
32
|
+
export const Hint = {
|
|
33
|
+
args: {
|
|
34
|
+
label: 'Berries',
|
|
35
|
+
always: true,
|
|
36
|
+
hint: 'We assume this is your jam preference'
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
export const Invalid = {
|
|
40
|
+
args: {
|
|
41
|
+
label: 'Berries',
|
|
42
|
+
invalid: true,
|
|
43
|
+
hint: 'Wrong choice'
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
export const Disabled = {
|
|
47
|
+
args: {
|
|
48
|
+
label: 'Berries',
|
|
49
|
+
disabled: true,
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
export const ReadOnly = {
|
|
53
|
+
args: {
|
|
54
|
+
label: 'Berries',
|
|
55
|
+
'read-only': true,
|
|
56
|
+
},
|
|
57
|
+
};
|
|
58
|
+
export const NoLabel = {
|
|
59
|
+
render(args) {
|
|
60
|
+
return html `
|
|
61
|
+
<div style="display: flex; flex-direction: column; gap: 32px;">
|
|
62
|
+
<w-select ${spread(prespread(args))} aria-label="Your selection is berry nice!">
|
|
63
|
+
<option value="raspberries">Raspberries</option>
|
|
64
|
+
<option value="strawberries" selected>Strawberries</option>
|
|
65
|
+
<option value="cloudberries">Cloudberries</option>
|
|
66
|
+
</w-select>
|
|
67
|
+
|
|
68
|
+
<label id="select-label" htmlFor="warp-aria-labelledby-example">
|
|
69
|
+
You're berry good at selecting!
|
|
70
|
+
</label>
|
|
71
|
+
<w-select ${spread(prespread(args))} id="warp-aria-labelledby-example">
|
|
72
|
+
<option value="raspberries">Raspberries</option>
|
|
73
|
+
<option value="strawberries" selected>Strawberries</option>
|
|
74
|
+
<option value="cloudberries">Cloudberries</option>
|
|
75
|
+
</w-select>
|
|
76
|
+
</div>
|
|
77
|
+
`;
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
export const Optional = {
|
|
81
|
+
args: {
|
|
82
|
+
label: 'Berries',
|
|
83
|
+
optional: true,
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
export const Placeholder = {
|
|
87
|
+
args: {
|
|
88
|
+
label: 'Berries',
|
|
89
|
+
},
|
|
90
|
+
render(args) {
|
|
91
|
+
return html `
|
|
92
|
+
<w-select ${spread(prespread(args))}>
|
|
93
|
+
<option value="">Select an option</option>
|
|
94
|
+
<option value="raspberries">Raspberries</option>
|
|
95
|
+
<option value="strawberries">Strawberries</option>
|
|
96
|
+
<option value="cloudberries">Cloudberries</option>
|
|
97
|
+
</w-select>
|
|
98
|
+
`;
|
|
99
|
+
},
|
|
100
|
+
};
|
package/dist/web-types.json
CHANGED