-
Notifications
You must be signed in to change notification settings - Fork 8
/
icons.stories.ts
102 lines (92 loc) · 2.85 KB
/
icons.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import type { Meta } from '@storybook/html';
import * as nimbleIconsMap from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
import { withXD } from 'storybook-addon-xd-designs';
import type { NimbleIcon } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
import { html, repeat } from '@microsoft/fast-element';
import { DesignSystem } from '@microsoft/fast-foundation';
import * as nimbleIconComponentsMap from '../../icons/all-icons';
import { IconStatus } from './types';
import { createRenderer } from '../../utilities/tests/storybook';
import type { Icon } from '..';
const nimbleIcons = Object.values(nimbleIconsMap);
const nimbleIconComponents = Object.values(nimbleIconComponentsMap);
interface IconArgs {
status: IconStatus;
}
const styleMarkup = `
<style>
.container {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.icon {
box-sizing: border-box;
width: 60px;
height: 60px;
padding: 20px;
}
.icon svg {
height: 32px;
width: 32px;
fill: var(--content-font-color);
}
</style>
`;
const metadata: Meta<IconArgs> = {
title: 'Icons',
decorators: [withXD]
};
export default metadata;
// prettier-ignore
export const rawIcons = {
parameters: {
controls: { hideNoControlsWarning: true }
},
render: createRenderer(html`
${styleMarkup}
<div class="container">
${repeat(() => nimbleIcons, html<NimbleIcon>`
<div
class="icon"
title="${x => x.name}"
:innerHTML="${x => x.data}"
></div>
`)}
</div>
`)
};
type IconClass = typeof Icon;
// The binding in this template generates a new template on the fly
// which is not a recommended practice by FAST. This is done because
// bindings can't be used for the element tag name, i.e.:
// static string interpolation works: html`<${tagName}></${tagName}>`
// dynamic template binding doesn't work: html`<${() => tagName}></${() => tagName}>`
const iconTemplate = html<IconClass, IconArgs>`
${(x, c) => html`
<${DesignSystem.tagFor(x)}
class="${c.parent.status}"
title=${DesignSystem.tagFor(x)}
style="padding: 5px;"
>
</${DesignSystem.tagFor(x)}>
`}
`;
// prettier-ignore
export const componentIcons = {
args: { status: IconStatus.Regular },
argTypes: {
status: {
options: Object.values(IconStatus),
control: { type: 'radio' }
}
},
render: createRenderer(html`
<div class="container">
${repeat(() => nimbleIconComponents, iconTemplate)}
</div>
`)
};