/
button.stories.ts
70 lines (64 loc) · 2.24 KB
/
button.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
68
69
70
import type { Meta, StoryObj } from '@storybook/html';
import { withXD } from 'storybook-addon-xd-designs';
import { html, when } from '@microsoft/fast-element';
import { ButtonAppearance } from '../types';
import '../index';
import '../../icons/access-control';
import { createRenderer } from '../../utilities/tests/storybook';
interface ButtonArgs {
label: string;
appearance: string;
disabled: boolean;
icon: boolean;
}
const overviewText = `Per [W3C](https://w3c.github.io/aria-practices/#button) - A button is a widget that
enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an
action, or performing a delete operation. A common convention for informing users that a button launches
a dialog is to append "…" (ellipsis) to the button label, e.g., "Save as…".`;
const metadata: Meta<ButtonArgs> = {
title: 'Button',
decorators: [withXD],
parameters: {
docs: {
description: {
component: overviewText
}
},
design: {
artboardUrl:
'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/42001df1-2969-438e-b353-4327d7a15102/specs/'
},
actions: {
handles: ['click']
}
},
argTypes: {
appearance: {
options: Object.values(ButtonAppearance),
control: { type: 'radio' }
}
},
// prettier-ignore
render: createRenderer(html`
<nimble-button ?disabled="${x => x.disabled}" appearance="${x => x.appearance}">
${when(x => x.icon, html`<nimble-access-control-icon></nimble-access-control-icon>`)}
${x => x.label}
</nimble-button>
`),
args: {
label: 'Ghost Button',
appearance: 'ghost',
icon: false,
disabled: false
}
};
export default metadata;
export const outlineButton: StoryObj<ButtonArgs> = {
args: { label: 'Outline Button', appearance: ButtonAppearance.Outline }
};
export const ghostButton: StoryObj<ButtonArgs> = {
args: { label: 'Ghost Button', appearance: ButtonAppearance.Ghost }
};
export const blockButton: StoryObj<ButtonArgs> = {
args: { label: 'Block Button', appearance: ButtonAppearance.Block }
};