/
checkbox-matrix.stories.ts
52 lines (46 loc) · 1.47 KB
/
checkbox-matrix.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
import type { Meta, Story } from '@storybook/html';
import { withXD } from 'storybook-addon-xd-designs';
import { html, ViewTemplate } from '@microsoft/fast-element';
import {
disabledStates,
DisabledState,
createMatrix,
themeWrapper
} from '../../utilities/tests/matrix';
import { createRenderer } from '../../utilities/tests/storybook';
import '../index';
import { hiddenWrapper } from '../../utilities/tests/hidden';
const metadata: Meta = {
title: 'Tests/Checkbox',
decorators: [withXD],
parameters: {
design: {
artboardUrl:
'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/3698340b-8162-4e5d-bf7a-20194612b3a7/specs'
},
controls: { hideNoControlsWarning: true }
}
};
export default metadata;
type CheckedState = [string, boolean];
const checkedStates: CheckedState[] = [
['Checked', true],
['Unchecked', false]
];
const component = (
[disabledName, disabled]: DisabledState,
[checkedName, checked]: CheckedState
): ViewTemplate => html`<nimble-checkbox
?checked="${() => checked}"
?disabled="${() => disabled}"
>
${checkedName} ${disabledName}
</nimble-checkbox>`;
export const checkboxThemeMatrix: Story = createRenderer(
themeWrapper(createMatrix(component, [disabledStates, checkedStates]))
);
export const hiddenCheckbox: Story = createRenderer(
hiddenWrapper(
html`<nimble-checkbox hidden>Hidden Checkbox</nimble-checkbox>`
)
);