@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.
Files changed (115) hide show
  1. package/CHANGELOG.json +24 -1
  2. package/CHANGELOG.md +11 -2
  3. package/dist/esm/badge/badge.definition.js +1 -0
  4. package/dist/esm/badge/badge.definition.js.map +1 -0
  5. package/dist/esm/badge/badge.js +1 -0
  6. package/dist/esm/badge/badge.js.map +1 -0
  7. package/dist/esm/badge/badge.options.js +1 -0
  8. package/dist/esm/badge/badge.options.js.map +1 -0
  9. package/dist/esm/badge/badge.styles.js +1 -0
  10. package/dist/esm/badge/badge.styles.js.map +1 -0
  11. package/dist/esm/badge/badge.template.js +1 -0
  12. package/dist/esm/badge/badge.template.js.map +1 -0
  13. package/dist/esm/badge/define.js +1 -0
  14. package/dist/esm/badge/define.js.map +1 -0
  15. package/dist/esm/badge/index.js +1 -0
  16. package/dist/esm/badge/index.js.map +1 -0
  17. package/dist/esm/counter-badge/counter-badge.definition.js +1 -0
  18. package/dist/esm/counter-badge/counter-badge.definition.js.map +1 -0
  19. package/dist/esm/counter-badge/counter-badge.js +1 -0
  20. package/dist/esm/counter-badge/counter-badge.js.map +1 -0
  21. package/dist/esm/counter-badge/counter-badge.options.js +1 -0
  22. package/dist/esm/counter-badge/counter-badge.options.js.map +1 -0
  23. package/dist/esm/counter-badge/counter-badge.styles.js +1 -0
  24. package/dist/esm/counter-badge/counter-badge.styles.js.map +1 -0
  25. package/dist/esm/counter-badge/counter-badge.template.js +1 -0
  26. package/dist/esm/counter-badge/counter-badge.template.js.map +1 -0
  27. package/dist/esm/counter-badge/define.js +1 -0
  28. package/dist/esm/counter-badge/define.js.map +1 -0
  29. package/dist/esm/counter-badge/index.js +1 -0
  30. package/dist/esm/counter-badge/index.js.map +1 -0
  31. package/dist/esm/fluent-design-system.js +1 -0
  32. package/dist/esm/fluent-design-system.js.map +1 -0
  33. package/dist/esm/index-rollup.js +1 -0
  34. package/dist/esm/index-rollup.js.map +1 -0
  35. package/dist/esm/index.js +1 -0
  36. package/dist/esm/index.js.map +1 -0
  37. package/dist/esm/progress-bar/define.js +1 -0
  38. package/dist/esm/progress-bar/define.js.map +1 -0
  39. package/dist/esm/progress-bar/index.js +1 -0
  40. package/dist/esm/progress-bar/index.js.map +1 -0
  41. package/dist/esm/progress-bar/progress-bar.definition.js +1 -0
  42. package/dist/esm/progress-bar/progress-bar.definition.js.map +1 -0
  43. package/dist/esm/progress-bar/progress-bar.js +1 -0
  44. package/dist/esm/progress-bar/progress-bar.js.map +1 -0
  45. package/dist/esm/progress-bar/progress-bar.options.js +1 -0
  46. package/dist/esm/progress-bar/progress-bar.options.js.map +1 -0
  47. package/dist/esm/progress-bar/progress-bar.styles.js +1 -0
  48. package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -0
  49. package/dist/esm/progress-bar/progress-bar.template.js +1 -0
  50. package/dist/esm/progress-bar/progress-bar.template.js.map +1 -0
  51. package/dist/esm/spinner/define.js +1 -0
  52. package/dist/esm/spinner/define.js.map +1 -0
  53. package/dist/esm/spinner/index.js +1 -0
  54. package/dist/esm/spinner/index.js.map +1 -0
  55. package/dist/esm/spinner/spinner.definition.js +1 -0
  56. package/dist/esm/spinner/spinner.definition.js.map +1 -0
  57. package/dist/esm/spinner/spinner.js +1 -0
  58. package/dist/esm/spinner/spinner.js.map +1 -0
  59. package/dist/esm/spinner/spinner.options.js +1 -0
  60. package/dist/esm/spinner/spinner.options.js.map +1 -0
  61. package/dist/esm/spinner/spinner.styles.js +1 -0
  62. package/dist/esm/spinner/spinner.styles.js.map +1 -0
  63. package/dist/esm/spinner/spinner.template.js +1 -0
  64. package/dist/esm/spinner/spinner.template.js.map +1 -0
  65. package/dist/esm/styles/index.js +1 -0
  66. package/dist/esm/styles/index.js.map +1 -0
  67. package/dist/esm/styles/partials/badge.partials.js +1 -0
  68. package/dist/esm/styles/partials/badge.partials.js.map +1 -0
  69. package/dist/esm/styles/partials/index.js +1 -0
  70. package/dist/esm/styles/partials/index.js.map +1 -0
  71. package/dist/esm/text/define.js +1 -0
  72. package/dist/esm/text/define.js.map +1 -0
  73. package/dist/esm/text/index.js +1 -0
  74. package/dist/esm/text/index.js.map +1 -0
  75. package/dist/esm/text/text.definition.js +1 -0
  76. package/dist/esm/text/text.definition.js.map +1 -0
  77. package/dist/esm/text/text.js +1 -0
  78. package/dist/esm/text/text.js.map +1 -0
  79. package/dist/esm/text/text.options.js +1 -0
  80. package/dist/esm/text/text.options.js.map +1 -0
  81. package/dist/esm/text/text.styles.js +1 -0
  82. package/dist/esm/text/text.styles.js.map +1 -0
  83. package/dist/esm/text/text.template.js +1 -0
  84. package/dist/esm/text/text.template.js.map +1 -0
  85. package/dist/esm/theme/design-tokens.js +1 -0
  86. package/dist/esm/theme/design-tokens.js.map +1 -0
  87. package/dist/esm/theme/index.js +1 -0
  88. package/dist/esm/theme/index.js.map +1 -0
  89. package/dist/esm/theme/set-theme.js +1 -0
  90. package/dist/esm/theme/set-theme.js.map +1 -0
  91. package/dist/fluent-web-components.api.json +7 -7
  92. package/dist/web-components.d.ts +4 -3
  93. package/docs/api-report.md +4 -3
  94. package/package.json +7 -10
  95. package/.eslintrc.json +0 -62
  96. package/build/clean.cjs +0 -29
  97. package/build/transform-fragments.js +0 -29
  98. package/dist/dts/badge/badge.stories.d.ts +0 -12
  99. package/dist/dts/counter-badge/counter-badge.stories.d.ts +0 -14
  100. package/dist/dts/progress-bar/progress-bar.stories.d.ts +0 -9
  101. package/dist/dts/spinner/spinner.stories.d.ts +0 -8
  102. package/dist/dts/text/text.stories.d.ts +0 -8
  103. package/dist/dts/theme/theme.stories.d.ts +0 -5
  104. package/dist/esm/badge/badge.stories.js +0 -108
  105. package/dist/esm/counter-badge/counter-badge.stories.js +0 -102
  106. package/dist/esm/progress-bar/progress-bar.stories.js +0 -60
  107. package/dist/esm/spinner/spinner.stories.js +0 -45
  108. package/dist/esm/text/text.stories.js +0 -111
  109. package/dist/esm/theme/theme.stories.js +0 -21
  110. package/public/SegoeUI-VF.ttf +0 -0
  111. package/public/favicon.ico +0 -0
  112. package/public/favicon.png +0 -0
  113. package/public/theme-switch.ts +0 -13
  114. package/rollup.config.js +0 -58
  115. 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
- `;
Binary file
Binary file
Binary file
@@ -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
- ];
@@ -1,4 +0,0 @@
1
- declare module '*.html' {
2
- const value: string;
3
- export default value;
4
- }