-
Notifications
You must be signed in to change notification settings - Fork 8
/
icon-matrix.stories.ts
43 lines (36 loc) · 1.37 KB
/
icon-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
import type { Story, Meta } from '@storybook/html';
import { withXD } from 'storybook-addon-xd-designs';
import { html, ViewTemplate } from '@microsoft/fast-element';
import { createMatrix, themeWrapper } from '../../utilities/tests/matrix';
import '../../icons/check';
import { createRenderer } from '../../utilities/tests/storybook';
import { IconStatus } from './types';
import { contentFontColor } from '../../theme-provider/design-tokens';
import { hiddenWrapper } from '../../utilities/tests/hidden';
const metadata: Meta = {
title: 'Tests/Icon',
decorators: [withXD],
parameters: {
controls: { hideNoControlsWarning: true }
}
};
export default metadata;
const iconStatusStates = [
['Pass', IconStatus.Pass],
['Fail', IconStatus.Fail],
['Warning', IconStatus.Warning],
['Regular', IconStatus.Regular]
];
type IconStatusState = typeof iconStatusStates[number];
const component = ([stateName, state]: IconStatusState): ViewTemplate => html`
<span style="color: ${contentFontColor.createCSS()};">${stateName}</span>
<nimble-check-icon class="${state}"></nimble-check-icon>
`;
export const iconThemeMatrix: Story = createRenderer(
themeWrapper(createMatrix(component, [iconStatusStates]))
);
export const hiddenIcon: Story = createRenderer(
hiddenWrapper(
html`<nimble-check-icon class="pass" hidden></nimble-check-icon>`
)
);