-
Notifications
You must be signed in to change notification settings - Fork 8
/
select.stories.ts
67 lines (62 loc) · 1.99 KB
/
select.stories.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import type { Meta } from '@storybook/html';
import { withXD } from 'storybook-addon-xd-designs';
import '../index';
import '../../listbox-option/index';
import { html, repeat } from '@microsoft/fast-element';
import { createRenderer } from '../../utilities/tests/storybook';
interface SelectArgs {
disabled: boolean;
dropDownPosition: string;
options: OptionArgs[];
}
interface OptionArgs {
label: string;
value: string;
disabled: boolean;
}
const metadata: Meta<SelectArgs> = {
title: 'Select',
decorators: [withXD],
parameters: {
docs: {
description: {
component:
'Select is a list in which the current value is displayed in the element. Upon clicking on the element, the other options are visible. The user cannot manually enter values.'
}
},
design: {
artboardUrl:
'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/6ec70d21-9a59-40cd-a8f4-45cfeed9e01e/specs'
},
actions: {
handles: ['change']
}
},
// prettier-ignore
render: createRenderer(html`
<nimble-select ?disabled="${x => x.disabled}" position="${x => x.dropDownPosition}">
${repeat(x => x.options, html<OptionArgs>`
<nimble-listbox-option value="${x => x.value}" ?disabled="${x => x.disabled}">
${x => x.label}
</nimble-listbox-option>
`)}
</nimble-select>
`),
argTypes: {
dropDownPosition: {
options: ['above', 'below'],
control: { type: 'select' }
}
},
args: {
disabled: false,
dropDownPosition: 'below',
options: [
{ label: 'Option 1', value: '1', disabled: false },
{ label: 'Option 2', value: '2', disabled: true },
{ label: 'Option 3', value: '3', disabled: false }
]
}
};
export default metadata;
export const select = {};