@fluentui/web-components 3.0.0-alpha.3 → 3.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +24 -1
- package/CHANGELOG.md +11 -2
- package/dist/esm/badge/badge.definition.js +1 -0
- package/dist/esm/badge/badge.definition.js.map +1 -0
- package/dist/esm/badge/badge.js +1 -0
- package/dist/esm/badge/badge.js.map +1 -0
- package/dist/esm/badge/badge.options.js +1 -0
- package/dist/esm/badge/badge.options.js.map +1 -0
- package/dist/esm/badge/badge.styles.js +1 -0
- package/dist/esm/badge/badge.styles.js.map +1 -0
- package/dist/esm/badge/badge.template.js +1 -0
- package/dist/esm/badge/badge.template.js.map +1 -0
- package/dist/esm/badge/define.js +1 -0
- package/dist/esm/badge/define.js.map +1 -0
- package/dist/esm/badge/index.js +1 -0
- package/dist/esm/badge/index.js.map +1 -0
- package/dist/esm/counter-badge/counter-badge.definition.js +1 -0
- package/dist/esm/counter-badge/counter-badge.definition.js.map +1 -0
- package/dist/esm/counter-badge/counter-badge.js +1 -0
- package/dist/esm/counter-badge/counter-badge.js.map +1 -0
- package/dist/esm/counter-badge/counter-badge.options.js +1 -0
- package/dist/esm/counter-badge/counter-badge.options.js.map +1 -0
- package/dist/esm/counter-badge/counter-badge.styles.js +1 -0
- package/dist/esm/counter-badge/counter-badge.styles.js.map +1 -0
- package/dist/esm/counter-badge/counter-badge.template.js +1 -0
- package/dist/esm/counter-badge/counter-badge.template.js.map +1 -0
- package/dist/esm/counter-badge/define.js +1 -0
- package/dist/esm/counter-badge/define.js.map +1 -0
- package/dist/esm/counter-badge/index.js +1 -0
- package/dist/esm/counter-badge/index.js.map +1 -0
- package/dist/esm/fluent-design-system.js +1 -0
- package/dist/esm/fluent-design-system.js.map +1 -0
- package/dist/esm/index-rollup.js +1 -0
- package/dist/esm/index-rollup.js.map +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/progress-bar/define.js +1 -0
- package/dist/esm/progress-bar/define.js.map +1 -0
- package/dist/esm/progress-bar/index.js +1 -0
- package/dist/esm/progress-bar/index.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.definition.js +1 -0
- package/dist/esm/progress-bar/progress-bar.definition.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.js +1 -0
- package/dist/esm/progress-bar/progress-bar.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.options.js +1 -0
- package/dist/esm/progress-bar/progress-bar.options.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.styles.js +1 -0
- package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -0
- package/dist/esm/progress-bar/progress-bar.template.js +1 -0
- package/dist/esm/progress-bar/progress-bar.template.js.map +1 -0
- package/dist/esm/spinner/define.js +1 -0
- package/dist/esm/spinner/define.js.map +1 -0
- package/dist/esm/spinner/index.js +1 -0
- package/dist/esm/spinner/index.js.map +1 -0
- package/dist/esm/spinner/spinner.definition.js +1 -0
- package/dist/esm/spinner/spinner.definition.js.map +1 -0
- package/dist/esm/spinner/spinner.js +1 -0
- package/dist/esm/spinner/spinner.js.map +1 -0
- package/dist/esm/spinner/spinner.options.js +1 -0
- package/dist/esm/spinner/spinner.options.js.map +1 -0
- package/dist/esm/spinner/spinner.styles.js +1 -0
- package/dist/esm/spinner/spinner.styles.js.map +1 -0
- package/dist/esm/spinner/spinner.template.js +1 -0
- package/dist/esm/spinner/spinner.template.js.map +1 -0
- package/dist/esm/styles/index.js +1 -0
- package/dist/esm/styles/index.js.map +1 -0
- package/dist/esm/styles/partials/badge.partials.js +1 -0
- package/dist/esm/styles/partials/badge.partials.js.map +1 -0
- package/dist/esm/styles/partials/index.js +1 -0
- package/dist/esm/styles/partials/index.js.map +1 -0
- package/dist/esm/text/define.js +1 -0
- package/dist/esm/text/define.js.map +1 -0
- package/dist/esm/text/index.js +1 -0
- package/dist/esm/text/index.js.map +1 -0
- package/dist/esm/text/text.definition.js +1 -0
- package/dist/esm/text/text.definition.js.map +1 -0
- package/dist/esm/text/text.js +1 -0
- package/dist/esm/text/text.js.map +1 -0
- package/dist/esm/text/text.options.js +1 -0
- package/dist/esm/text/text.options.js.map +1 -0
- package/dist/esm/text/text.styles.js +1 -0
- package/dist/esm/text/text.styles.js.map +1 -0
- package/dist/esm/text/text.template.js +1 -0
- package/dist/esm/text/text.template.js.map +1 -0
- package/dist/esm/theme/design-tokens.js +1 -0
- package/dist/esm/theme/design-tokens.js.map +1 -0
- package/dist/esm/theme/index.js +1 -0
- package/dist/esm/theme/index.js.map +1 -0
- package/dist/esm/theme/set-theme.js +1 -0
- package/dist/esm/theme/set-theme.js.map +1 -0
- package/dist/fluent-web-components.api.json +7 -7
- package/dist/web-components.d.ts +4 -3
- package/docs/api-report.md +4 -3
- package/package.json +7 -10
- package/.eslintrc.json +0 -62
- package/build/clean.cjs +0 -29
- package/build/transform-fragments.js +0 -29
- package/dist/dts/badge/badge.stories.d.ts +0 -12
- package/dist/dts/counter-badge/counter-badge.stories.d.ts +0 -14
- package/dist/dts/progress-bar/progress-bar.stories.d.ts +0 -9
- package/dist/dts/spinner/spinner.stories.d.ts +0 -8
- package/dist/dts/text/text.stories.d.ts +0 -8
- package/dist/dts/theme/theme.stories.d.ts +0 -5
- package/dist/esm/badge/badge.stories.js +0 -108
- package/dist/esm/counter-badge/counter-badge.stories.js +0 -102
- package/dist/esm/progress-bar/progress-bar.stories.js +0 -60
- package/dist/esm/spinner/spinner.stories.js +0 -45
- package/dist/esm/text/text.stories.js +0 -111
- package/dist/esm/theme/theme.stories.js +0 -21
- package/public/SegoeUI-VF.ttf +0 -0
- package/public/favicon.ico +0 -0
- package/public/favicon.png +0 -0
- package/public/theme-switch.ts +0 -13
- package/rollup.config.js +0 -58
- package/storybook-typings.d.ts +0 -4
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import { html } from '@microsoft/fast-element';
|
|
2
|
-
import { renderComponent } from '../__test__/helpers.js';
|
|
3
|
-
import './define.js';
|
|
4
|
-
import { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
|
|
5
|
-
/**
|
|
6
|
-
* Used to generate slotted content for stories
|
|
7
|
-
* @param as - the element to generate
|
|
8
|
-
* @param content - the content for the element
|
|
9
|
-
* @returns ViewTemplate
|
|
10
|
-
*/
|
|
11
|
-
const generateSemanticElementTemplate = (as, content) => {
|
|
12
|
-
switch (as) {
|
|
13
|
-
case 'h1':
|
|
14
|
-
return html `<h1>${content}</h1>`;
|
|
15
|
-
case 'h2':
|
|
16
|
-
return html `<h2>${content}</h2>`;
|
|
17
|
-
case 'h3':
|
|
18
|
-
return html `<h3>${content}</h3>`;
|
|
19
|
-
case 'h4':
|
|
20
|
-
return html `<h4>${content}</h4>`;
|
|
21
|
-
case 'h5':
|
|
22
|
-
return html `<h5>${content}</h5>`;
|
|
23
|
-
case 'h6':
|
|
24
|
-
return html `<h6>${content}</h6>`;
|
|
25
|
-
case 'p':
|
|
26
|
-
return html `<p>${content}</p>`;
|
|
27
|
-
case 'pre':
|
|
28
|
-
return html `<pre>${content}</pre>`;
|
|
29
|
-
case 'span':
|
|
30
|
-
default:
|
|
31
|
-
return html `<span>${content}</span>`;
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
const storyTemplate = html `
|
|
35
|
-
<fluent-text
|
|
36
|
-
align=${x => x.align}
|
|
37
|
-
font=${x => x.font}
|
|
38
|
-
size=${x => x.size}
|
|
39
|
-
weight=${x => x.weight}
|
|
40
|
-
?nowrap=${x => x.nowrap}
|
|
41
|
-
?truncate=${x => x.truncate}
|
|
42
|
-
?italic=${x => x.italic}
|
|
43
|
-
?underline=${x => x.underline}
|
|
44
|
-
?strikethrough=${x => x.strikethrough}
|
|
45
|
-
?block=${x => x.block}
|
|
46
|
-
>${x => generateSemanticElementTemplate(x.as, x.content)}</fluent-text
|
|
47
|
-
>
|
|
48
|
-
`;
|
|
49
|
-
export default {
|
|
50
|
-
title: 'Components/Text',
|
|
51
|
-
args: {
|
|
52
|
-
content: 'Text',
|
|
53
|
-
nowrap: false,
|
|
54
|
-
truncate: false,
|
|
55
|
-
italic: false,
|
|
56
|
-
underline: false,
|
|
57
|
-
strikethrough: false,
|
|
58
|
-
block: false,
|
|
59
|
-
},
|
|
60
|
-
argTypes: {
|
|
61
|
-
as: {
|
|
62
|
-
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'span'],
|
|
63
|
-
control: {
|
|
64
|
-
type: 'select',
|
|
65
|
-
},
|
|
66
|
-
},
|
|
67
|
-
size: {
|
|
68
|
-
options: Object.values(TextSize),
|
|
69
|
-
control: {
|
|
70
|
-
type: 'select',
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
weight: {
|
|
74
|
-
options: Object.keys(TextWeight),
|
|
75
|
-
control: {
|
|
76
|
-
type: 'select',
|
|
77
|
-
},
|
|
78
|
-
},
|
|
79
|
-
align: {
|
|
80
|
-
options: Object.keys(TextAlign),
|
|
81
|
-
control: {
|
|
82
|
-
type: 'select',
|
|
83
|
-
},
|
|
84
|
-
},
|
|
85
|
-
font: {
|
|
86
|
-
options: Object.keys(TextFont),
|
|
87
|
-
control: {
|
|
88
|
-
type: 'select',
|
|
89
|
-
},
|
|
90
|
-
},
|
|
91
|
-
nowrap: {
|
|
92
|
-
control: 'boolean',
|
|
93
|
-
},
|
|
94
|
-
truncate: {
|
|
95
|
-
control: 'boolean',
|
|
96
|
-
},
|
|
97
|
-
italic: {
|
|
98
|
-
control: 'boolean',
|
|
99
|
-
},
|
|
100
|
-
underline: {
|
|
101
|
-
control: 'boolean',
|
|
102
|
-
},
|
|
103
|
-
strikethrough: {
|
|
104
|
-
control: 'boolean',
|
|
105
|
-
},
|
|
106
|
-
block: {
|
|
107
|
-
control: 'boolean',
|
|
108
|
-
},
|
|
109
|
-
},
|
|
110
|
-
};
|
|
111
|
-
export const Text = renderComponent(storyTemplate).bind({});
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { DesignToken } from '@microsoft/fast-foundation';
|
|
2
|
-
import * as tokens from '../theme/design-tokens.js';
|
|
3
|
-
DesignToken.registerDefaultStyleTarget();
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Theme/Tokens',
|
|
6
|
-
};
|
|
7
|
-
export const Tokens = () => `
|
|
8
|
-
<div>
|
|
9
|
-
<h3>Theme Tokens</h3>
|
|
10
|
-
<p>Debug story which uses theme tokens to style the element below.</p>
|
|
11
|
-
<div style="
|
|
12
|
-
font-family: ${tokens.fontFamilyBase.createCSS()};
|
|
13
|
-
font-size: ${tokens.fontSizeBase300.createCSS()};
|
|
14
|
-
background: var(${tokens.colorBrandBackground.cssCustomProperty});
|
|
15
|
-
color: ${tokens.colorNeutralForegroundOnBrand.createCSS()};
|
|
16
|
-
border: ${tokens.strokeWidthThicker.createCSS()} solid ${tokens.colorNeutralStroke1.createCSS()};
|
|
17
|
-
padding: ${tokens.spacingVerticalS.createCSS()} ${tokens.spacingHorizontalM.createCSS()};
|
|
18
|
-
box-shadow: ${tokens.shadow28.createCSS()};
|
|
19
|
-
">colorNeutralForegroundOnBrand on colorBrandBackground with shadow28</div>
|
|
20
|
-
</div>
|
|
21
|
-
`;
|
package/public/SegoeUI-VF.ttf
DELETED
|
Binary file
|
package/public/favicon.ico
DELETED
|
Binary file
|
package/public/favicon.png
DELETED
|
Binary file
|
package/public/theme-switch.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
|
|
2
|
-
import { setTheme } from '../src/theme';
|
|
3
|
-
|
|
4
|
-
const themes = {
|
|
5
|
-
'web-light': webLightTheme,
|
|
6
|
-
'web-dark': webDarkTheme,
|
|
7
|
-
'teams-light': teamsLightTheme,
|
|
8
|
-
'teams-dark': teamsDarkTheme,
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export function switchTheme(themeName: keyof typeof themes) {
|
|
12
|
-
setTheme(themes[themeName]);
|
|
13
|
-
}
|
package/rollup.config.js
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import commonJS from 'rollup-plugin-commonjs';
|
|
2
|
-
import filesize from 'rollup-plugin-filesize';
|
|
3
|
-
import resolve from 'rollup-plugin-node-resolve';
|
|
4
|
-
import { terser } from 'rollup-plugin-terser';
|
|
5
|
-
import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template';
|
|
6
|
-
import typescript from 'rollup-plugin-typescript2';
|
|
7
|
-
import { transformCSSFragment, transformHTMLFragment } from './build/transform-fragments';
|
|
8
|
-
|
|
9
|
-
// eslint-disable-next-line no-undef
|
|
10
|
-
const tsBin = require.resolve('typescript');
|
|
11
|
-
|
|
12
|
-
const parserOptions = {
|
|
13
|
-
sourceType: 'module',
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export default [
|
|
17
|
-
{
|
|
18
|
-
input: 'src/index-rollup.ts',
|
|
19
|
-
output: [
|
|
20
|
-
{
|
|
21
|
-
file: 'dist/web-components.js',
|
|
22
|
-
format: 'esm',
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
file: 'dist/web-components.min.js',
|
|
26
|
-
format: 'esm',
|
|
27
|
-
plugins: [terser()],
|
|
28
|
-
},
|
|
29
|
-
],
|
|
30
|
-
plugins: [
|
|
31
|
-
resolve(),
|
|
32
|
-
commonJS(),
|
|
33
|
-
typescript({
|
|
34
|
-
// eslint-disable-next-line no-undef
|
|
35
|
-
typescript: require(tsBin),
|
|
36
|
-
tsconfigOverride: {
|
|
37
|
-
compilerOptions: {
|
|
38
|
-
declaration: false,
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
}),
|
|
42
|
-
transformTaggedTemplate({
|
|
43
|
-
tagsToProcess: ['css'],
|
|
44
|
-
transformer: transformCSSFragment,
|
|
45
|
-
parserOptions,
|
|
46
|
-
}),
|
|
47
|
-
transformTaggedTemplate({
|
|
48
|
-
tagsToProcess: ['html'],
|
|
49
|
-
transformer: transformHTMLFragment,
|
|
50
|
-
parserOptions,
|
|
51
|
-
}),
|
|
52
|
-
filesize({
|
|
53
|
-
showMinifiedSize: false,
|
|
54
|
-
showBrotliSize: true,
|
|
55
|
-
}),
|
|
56
|
-
],
|
|
57
|
-
},
|
|
58
|
-
];
|
package/storybook-typings.d.ts
DELETED