@momentum-design/components 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (235) hide show
  1. package/.eslintrc.js +16 -0
  2. package/CONTRIBUTING.md +5 -0
  3. package/README.md +39 -0
  4. package/SCRIPTS.md +15 -0
  5. package/TESTING.md +38 -0
  6. package/config/api-extractor.json +33 -0
  7. package/config/custom-elements-manifest.config.js +28 -0
  8. package/config/esbuild/configs/browser.js +21 -0
  9. package/config/esbuild/configs/e2e.js +10 -0
  10. package/config/esbuild/esbuild-e2e.config.js +22 -0
  11. package/config/esbuild/esbuild.config.js +9 -0
  12. package/config/playwright/playwright.config.ts +107 -0
  13. package/config/playwright/public/index.css +43 -0
  14. package/config/playwright/public/index.html +26 -0
  15. package/config/playwright/setup/Components.page.ts +163 -0
  16. package/config/playwright/setup/constants.ts +27 -0
  17. package/config/playwright/setup/index.ts +42 -0
  18. package/config/playwright/setup/steps/accessibility.ts +9 -0
  19. package/config/playwright/setup/types.ts +5 -0
  20. package/config/playwright/setup/utils/accessibility.ts +70 -0
  21. package/config/playwright/setup/utils/visual-regression.ts +35 -0
  22. package/config/plop/actions/AddComponent.ts +21 -0
  23. package/config/plop/actions/AddToComponentExports.ts +16 -0
  24. package/config/plop/actions/AddToComponentImports.ts +16 -0
  25. package/config/plop/constants/index.ts +31 -0
  26. package/config/plop/esbuild.config.plop.js +4 -0
  27. package/config/plop/generators/component/index.ts +25 -0
  28. package/config/plop/plopfile.ts +6 -0
  29. package/config/plop/prompts/index.ts +8 -0
  30. package/config/plop/templates/add/component/index.ts.hbs +12 -0
  31. package/config/plop/templates/add/component/{{componentName}}.component.ts.hbs +22 -0
  32. package/config/plop/templates/add/component/{{componentName}}.constants.ts.hbs +5 -0
  33. package/config/plop/templates/add/component/{{componentName}}.e2e-test.ts.hbs +67 -0
  34. package/config/plop/templates/add/component/{{componentName}}.fixtures.ts.hbs +13 -0
  35. package/config/plop/templates/add/component/{{componentName}}.stories.ts.hbs +18 -0
  36. package/config/plop/templates/add/component/{{componentName}}.styles.ts.hbs +8 -0
  37. package/config/plop/tsconfig.plop.json +11 -0
  38. package/config/storybook/MomentumStorybookTheme.js +41 -0
  39. package/config/storybook/main.js +21 -0
  40. package/config/storybook/manager.js +17 -0
  41. package/config/storybook/preview.js +63 -0
  42. package/config/storybook/provider/iconProvider.js +8 -0
  43. package/config/storybook/provider/themeProvider.js +31 -0
  44. package/config/storybook/public/background-graphic.png +0 -0
  45. package/config/storybook/public/fonts/Inter.var.woff2 +0 -0
  46. package/config/storybook/public/momentum-logo.png +0 -0
  47. package/config/storybook/themes/index.js +14 -0
  48. package/config/storybook/themes/themes.css +15 -0
  49. package/data/custom-elements.json +677 -0
  50. package/dist/browser/index.js +366 -0
  51. package/dist/browser/index.js.map +7 -0
  52. package/dist/components/avatar/avatar.component.d.ts +28 -0
  53. package/dist/components/avatar/avatar.component.js +79 -0
  54. package/dist/components/avatar/avatar.constants.d.ts +7 -0
  55. package/dist/components/avatar/avatar.constants.js +14 -0
  56. package/dist/components/avatar/avatar.styles.d.ts +2 -0
  57. package/dist/components/avatar/avatar.styles.js +20 -0
  58. package/dist/components/avatar/avatar.types.d.ts +1 -0
  59. package/dist/components/avatar/avatar.types.js +2 -0
  60. package/dist/components/avatar/index.d.ts +7 -0
  61. package/dist/components/avatar/index.js +7 -0
  62. package/dist/components/badge/badge.component.d.ts +51 -0
  63. package/dist/components/badge/badge.component.js +114 -0
  64. package/dist/components/badge/badge.constants.d.ts +8 -0
  65. package/dist/components/badge/badge.constants.js +15 -0
  66. package/dist/components/badge/badge.styles.d.ts +2 -0
  67. package/dist/components/badge/badge.styles.js +26 -0
  68. package/dist/components/badge/badge.types.d.ts +1 -0
  69. package/dist/components/badge/badge.types.js +2 -0
  70. package/dist/components/badge/index.d.ts +7 -0
  71. package/dist/components/badge/index.js +7 -0
  72. package/dist/components/icon/icon.component.d.ts +63 -0
  73. package/dist/components/icon/icon.component.js +158 -0
  74. package/dist/components/icon/icon.constants.d.ts +6 -0
  75. package/dist/components/icon/icon.constants.js +12 -0
  76. package/dist/components/icon/icon.styles.d.ts +2 -0
  77. package/dist/components/icon/icon.styles.js +15 -0
  78. package/dist/components/icon/icon.utils.d.ts +2 -0
  79. package/dist/components/icon/icon.utils.js +13 -0
  80. package/dist/components/icon/index.d.ts +7 -0
  81. package/dist/components/icon/index.js +7 -0
  82. package/dist/components/iconprovider/iconprovider.component.d.ts +34 -0
  83. package/dist/components/iconprovider/iconprovider.component.js +71 -0
  84. package/dist/components/iconprovider/iconprovider.constants.d.ts +7 -0
  85. package/dist/components/iconprovider/iconprovider.constants.js +14 -0
  86. package/dist/components/iconprovider/iconprovider.context.d.ts +9 -0
  87. package/dist/components/iconprovider/iconprovider.context.js +9 -0
  88. package/dist/components/iconprovider/index.d.ts +7 -0
  89. package/dist/components/iconprovider/index.js +7 -0
  90. package/dist/components/text/fonts.styles.d.ts +1 -0
  91. package/dist/components/text/fonts.styles.js +100 -0
  92. package/dist/components/text/index.d.ts +7 -0
  93. package/dist/components/text/index.js +7 -0
  94. package/dist/components/text/text.component.d.ts +29 -0
  95. package/dist/components/text/text.component.js +41 -0
  96. package/dist/components/text/text.constants.d.ts +9 -0
  97. package/dist/components/text/text.constants.js +28 -0
  98. package/dist/components/text/text.styles.d.ts +2 -0
  99. package/dist/components/text/text.styles.js +17 -0
  100. package/dist/components/text/text.types.d.ts +1 -0
  101. package/dist/components/text/text.types.js +2 -0
  102. package/dist/components/text/text.utils.d.ts +20 -0
  103. package/dist/components/text/text.utils.js +50 -0
  104. package/dist/components/themeprovider/index.d.ts +7 -0
  105. package/dist/components/themeprovider/index.js +7 -0
  106. package/dist/components/themeprovider/themeprovider.component.d.ts +48 -0
  107. package/dist/components/themeprovider/themeprovider.component.js +86 -0
  108. package/dist/components/themeprovider/themeprovider.constants.d.ts +10 -0
  109. package/dist/components/themeprovider/themeprovider.constants.js +31 -0
  110. package/dist/components/themeprovider/themeprovider.context.d.ts +9 -0
  111. package/dist/components/themeprovider/themeprovider.context.js +13 -0
  112. package/dist/components/themeprovider/themeprovider.styles.d.ts +2 -0
  113. package/dist/components/themeprovider/themeprovider.styles.js +13 -0
  114. package/dist/components/themeprovider/themeprovider.types.d.ts +5 -0
  115. package/dist/components/themeprovider/themeprovider.types.js +2 -0
  116. package/dist/components/themeprovider/themeprovider.utils.d.ts +9 -0
  117. package/dist/components/themeprovider/themeprovider.utils.js +10 -0
  118. package/dist/index.d.ts +8 -0
  119. package/dist/index.js +19 -0
  120. package/dist/models/component/component.component.d.ts +38 -0
  121. package/dist/models/component/component.component.js +45 -0
  122. package/dist/models/component/component.types.d.ts +15 -0
  123. package/dist/models/component/component.types.js +2 -0
  124. package/dist/models/component/index.d.ts +3 -0
  125. package/dist/models/component/index.js +5 -0
  126. package/dist/models/index.d.ts +4 -0
  127. package/dist/models/index.js +8 -0
  128. package/dist/models/provider/index.d.ts +2 -0
  129. package/dist/models/provider/index.js +5 -0
  130. package/dist/models/provider/provider.component.d.ts +70 -0
  131. package/dist/models/provider/provider.component.js +56 -0
  132. package/dist/models/provider/provider.styles.d.ts +2 -0
  133. package/dist/models/provider/provider.styles.js +14 -0
  134. package/dist/utils/provider/index.d.ts +13 -0
  135. package/dist/utils/provider/index.js +14 -0
  136. package/dist/utils/styles/index.d.ts +2 -0
  137. package/dist/utils/styles/index.js +14 -0
  138. package/dist/utils/tag-name/constants.d.ts +7 -0
  139. package/dist/utils/tag-name/constants.js +10 -0
  140. package/dist/utils/tag-name/index.d.ts +4 -0
  141. package/dist/utils/tag-name/index.js +10 -0
  142. package/dist/utils/types.d.ts +1 -0
  143. package/dist/utils/types.js +2 -0
  144. package/jest.config.js +3 -0
  145. package/package.json +78 -0
  146. package/scripts/copyFonts.js +31 -0
  147. package/scripts/copyIcons.js +31 -0
  148. package/scripts/copyTokens.js +24 -0
  149. package/src/components/avatar/__screenshots__/mdc-avatar.png +0 -0
  150. package/src/components/avatar/avatar.component.ts +74 -0
  151. package/src/components/avatar/avatar.constants.ts +12 -0
  152. package/src/components/avatar/avatar.e2e-test.ts +70 -0
  153. package/src/components/avatar/avatar.stories.ts +25 -0
  154. package/src/components/avatar/avatar.styles.ts +20 -0
  155. package/src/components/avatar/avatar.types.ts +1 -0
  156. package/src/components/avatar/index.ts +12 -0
  157. package/src/components/badge/__screenshots__/mdc-badge.png +0 -0
  158. package/src/components/badge/badge.component.ts +121 -0
  159. package/src/components/badge/badge.constants.ts +13 -0
  160. package/src/components/badge/badge.e2e-test.ts +68 -0
  161. package/src/components/badge/badge.stories.ts +33 -0
  162. package/src/components/badge/badge.styles.ts +26 -0
  163. package/src/components/badge/badge.types.ts +1 -0
  164. package/src/components/badge/index.ts +12 -0
  165. package/src/components/icon/__screenshots__/mdc-icon-default.png +0 -0
  166. package/src/components/icon/__screenshots__/mdc-icon-scale.png +0 -0
  167. package/src/components/icon/icon.component.ts +155 -0
  168. package/src/components/icon/icon.constants.ts +10 -0
  169. package/src/components/icon/icon.e2e-test.ts +101 -0
  170. package/src/components/icon/icon.stories.ts +34 -0
  171. package/src/components/icon/icon.styles.ts +15 -0
  172. package/src/components/icon/icon.utils.ts +13 -0
  173. package/src/components/icon/index.ts +12 -0
  174. package/src/components/iconprovider/__screenshots__/mdc-iconprovider.png +0 -0
  175. package/src/components/iconprovider/iconprovider.component.ts +76 -0
  176. package/src/components/iconprovider/iconprovider.constants.ts +12 -0
  177. package/src/components/iconprovider/iconprovider.context.ts +16 -0
  178. package/src/components/iconprovider/iconprovider.e2e-test.ts +65 -0
  179. package/src/components/iconprovider/iconprovider.stories.ts +27 -0
  180. package/src/components/iconprovider/iconprovider.stories.utils.ts +27 -0
  181. package/src/components/iconprovider/index.ts +12 -0
  182. package/src/components/text/__screenshots__/mdc-text-body-large.png +0 -0
  183. package/src/components/text/__screenshots__/mdc-text-body-regular.png +0 -0
  184. package/src/components/text/__screenshots__/mdc-text-body-small.png +0 -0
  185. package/src/components/text/__screenshots__/mdc-text-heading-1.png +0 -0
  186. package/src/components/text/__screenshots__/mdc-text-heading-2.png +0 -0
  187. package/src/components/text/__screenshots__/mdc-text-heading-3.png +0 -0
  188. package/src/components/text/__screenshots__/mdc-text-heading-4.png +0 -0
  189. package/src/components/text/__screenshots__/mdc-text-heading-5.png +0 -0
  190. package/src/components/text/__screenshots__/mdc-text-heading-6.png +0 -0
  191. package/src/components/text/__screenshots__/mdc-text-heading-7.png +0 -0
  192. package/src/components/text/__screenshots__/mdc-text-image-title.png +0 -0
  193. package/src/components/text/__screenshots__/mdc-text-label.png +0 -0
  194. package/src/components/text/fonts.styles.ts +99 -0
  195. package/src/components/text/index.ts +12 -0
  196. package/src/components/text/text.component.ts +51 -0
  197. package/src/components/text/text.constants.ts +27 -0
  198. package/src/components/text/text.e2e-test.ts +76 -0
  199. package/src/components/text/text.stories.ts +29 -0
  200. package/src/components/text/text.styles.ts +17 -0
  201. package/src/components/text/text.types.ts +13 -0
  202. package/src/components/text/text.utils.ts +51 -0
  203. package/src/components/themeprovider/__screenshots__/mdc-themeprovider-darkWebex.png +0 -0
  204. package/src/components/themeprovider/__screenshots__/mdc-themeprovider-lightWebex.png +0 -0
  205. package/src/components/themeprovider/index.ts +12 -0
  206. package/src/components/themeprovider/themeprovider.component.ts +91 -0
  207. package/src/components/themeprovider/themeprovider.constants.ts +32 -0
  208. package/src/components/themeprovider/themeprovider.context.ts +18 -0
  209. package/src/components/themeprovider/themeprovider.e2e-test.ts +89 -0
  210. package/src/components/themeprovider/themeprovider.stories.styles.css +22 -0
  211. package/src/components/themeprovider/themeprovider.stories.ts +38 -0
  212. package/src/components/themeprovider/themeprovider.stories.utils.ts +23 -0
  213. package/src/components/themeprovider/themeprovider.styles.ts +13 -0
  214. package/src/components/themeprovider/themeprovider.types.ts +7 -0
  215. package/src/components/themeprovider/themeprovider.utils.ts +16 -0
  216. package/src/index.ts +22 -0
  217. package/src/models/component/component.component.ts +46 -0
  218. package/src/models/component/component.types.ts +16 -0
  219. package/src/models/component/index.ts +7 -0
  220. package/src/models/index.ts +11 -0
  221. package/src/models/provider/index.ts +3 -0
  222. package/src/models/provider/provider.component.ts +87 -0
  223. package/src/models/provider/provider.styles.ts +14 -0
  224. package/src/stories/colors.mdx +32 -0
  225. package/src/stories/icons.mdx +13 -0
  226. package/src/stories/typography.mdx +20 -0
  227. package/src/utils/mixins/DisabledMixin.ts +19 -0
  228. package/src/utils/mixins/TabIndexMixin.ts +19 -0
  229. package/src/utils/provider/index.ts +21 -0
  230. package/src/utils/styles/index.ts +13 -0
  231. package/src/utils/tag-name/constants.ts +10 -0
  232. package/src/utils/tag-name/index.ts +15 -0
  233. package/src/utils/types.ts +1 -0
  234. package/tsconfig.json +45 -0
  235. package/tsconfig.module.json +47 -0
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const lit_1 = require("lit");
4
+ const styles_1 = require("../../utils/styles");
5
+ const styles = [
6
+ styles_1.hostFitContentStyles,
7
+ (0, lit_1.css) `
8
+ svg {
9
+ height: 100%;
10
+ width: 100%;
11
+ fill: currentColor;
12
+ }
13
+ `,
14
+ ];
15
+ exports.default = styles;
@@ -0,0 +1,2 @@
1
+ declare const dynamicSVGImport: (url: string, name: string, fileExtension: string) => Promise<Element>;
2
+ export { dynamicSVGImport };
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ /* eslint-disable implicit-arrow-linebreak */
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.dynamicSVGImport = void 0;
5
+ const dynamicSVGImport = async (url, name, fileExtension) => fetch(`${url}/${name}.${fileExtension}`)
6
+ .then((response) => {
7
+ if (!response.ok) {
8
+ throw new Error('There was a problem while fetching the icon!');
9
+ }
10
+ return response.text();
11
+ })
12
+ .then((iconResponse) => new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0]);
13
+ exports.dynamicSVGImport = dynamicSVGImport;
@@ -0,0 +1,7 @@
1
+ import Icon from './icon.component';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ ['mdc-icon']: Icon;
5
+ }
6
+ }
7
+ export default Icon;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const icon_component_1 = tslib_1.__importDefault(require("./icon.component"));
5
+ const icon_constants_1 = require("./icon.constants");
6
+ icon_component_1.default.register(icon_constants_1.TAG_NAME);
7
+ exports.default = icon_component_1.default;
@@ -0,0 +1,34 @@
1
+ import { Provider } from '../../models';
2
+ import IconProviderContext from './iconprovider.context';
3
+ /**
4
+ * IconProvider component, which allows to be consumed from sub components
5
+ * (see `providerUtils.consume` for how to consume)
6
+ *
7
+ * Bundling icons will be up to the consumer of this component, such
8
+ * that only a url has to be passed in from which the icons will be
9
+ * fetched.
10
+ *
11
+ * @tag mdc-iconprovider
12
+ * @tagname mdc-iconprovider
13
+ */
14
+ declare class IconProvider extends Provider<IconProviderContext> {
15
+ constructor();
16
+ static get Context(): {
17
+ __context__: IconProviderContext;
18
+ };
19
+ /**
20
+ * Url of where icons will be fetched from
21
+ */
22
+ url?: string;
23
+ /**
24
+ * File extension of icons, default: 'svg'
25
+ */
26
+ fileExtension?: string;
27
+ /**
28
+ * Length unit used for sizing of icons, default: 'em'
29
+ */
30
+ lengthUnit?: string;
31
+ private updateValuesInContext;
32
+ protected updateContext(): void;
33
+ }
34
+ export default IconProvider;
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const decorators_js_1 = require("lit/decorators.js");
5
+ const models_1 = require("../../models");
6
+ const iconprovider_context_1 = tslib_1.__importDefault(require("./iconprovider.context"));
7
+ const iconprovider_constants_1 = require("./iconprovider.constants");
8
+ /**
9
+ * IconProvider component, which allows to be consumed from sub components
10
+ * (see `providerUtils.consume` for how to consume)
11
+ *
12
+ * Bundling icons will be up to the consumer of this component, such
13
+ * that only a url has to be passed in from which the icons will be
14
+ * fetched.
15
+ *
16
+ * @tag mdc-iconprovider
17
+ * @tagname mdc-iconprovider
18
+ */
19
+ class IconProvider extends models_1.Provider {
20
+ constructor() {
21
+ // initialise the context by running the Provider constructor:
22
+ super({
23
+ context: iconprovider_context_1.default.context,
24
+ initialValue: new iconprovider_context_1.default(),
25
+ });
26
+ /**
27
+ * File extension of icons, default: 'svg'
28
+ */
29
+ this.fileExtension = iconprovider_constants_1.DEFAULTS.FILE_EXTENSION;
30
+ /**
31
+ * Length unit used for sizing of icons, default: 'em'
32
+ */
33
+ this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
34
+ }
35
+ static get Context() {
36
+ return iconprovider_context_1.default.context;
37
+ }
38
+ updateValuesInContext() {
39
+ // only update fileExtension on context if its an allowed fileExtension
40
+ if (this.fileExtension && iconprovider_constants_1.ALLOWED_FILE_EXTENSIONS.includes(this.fileExtension)) {
41
+ this.context.value.fileExtension = this.fileExtension;
42
+ }
43
+ this.context.value.url = this.url;
44
+ this.context.value.lengthUnit = this.lengthUnit;
45
+ }
46
+ updateContext() {
47
+ let shouldUpdateConsumers = false;
48
+ if (this.context.value.fileExtension !== this.fileExtension
49
+ || this.context.value.url !== this.url
50
+ || this.context.value.lengthUnit !== this.lengthUnit) {
51
+ this.updateValuesInContext();
52
+ shouldUpdateConsumers = true;
53
+ }
54
+ if (shouldUpdateConsumers) {
55
+ this.context.updateObservers();
56
+ }
57
+ }
58
+ }
59
+ tslib_1.__decorate([
60
+ (0, decorators_js_1.property)({ type: String }),
61
+ tslib_1.__metadata("design:type", String)
62
+ ], IconProvider.prototype, "url", void 0);
63
+ tslib_1.__decorate([
64
+ (0, decorators_js_1.property)({ type: String, attribute: 'file-extension', reflect: true }),
65
+ tslib_1.__metadata("design:type", String)
66
+ ], IconProvider.prototype, "fileExtension", void 0);
67
+ tslib_1.__decorate([
68
+ (0, decorators_js_1.property)({ type: String, attribute: 'length-unit', reflect: true }),
69
+ tslib_1.__metadata("design:type", String)
70
+ ], IconProvider.prototype, "lengthUnit", void 0);
71
+ exports.default = IconProvider;
@@ -0,0 +1,7 @@
1
+ declare const TAG_NAME: "mdc-iconprovider";
2
+ declare const ALLOWED_FILE_EXTENSIONS: string[];
3
+ declare const DEFAULTS: {
4
+ FILE_EXTENSION: string;
5
+ LENGTH_UNIT: string;
6
+ };
7
+ export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ALLOWED_FILE_EXTENSIONS = exports.DEFAULTS = exports.TAG_NAME = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
6
+ const TAG_NAME = tag_name_1.default.constructTagName('iconprovider');
7
+ exports.TAG_NAME = TAG_NAME;
8
+ const ALLOWED_FILE_EXTENSIONS = ['svg'];
9
+ exports.ALLOWED_FILE_EXTENSIONS = ALLOWED_FILE_EXTENSIONS;
10
+ const DEFAULTS = {
11
+ FILE_EXTENSION: 'svg',
12
+ LENGTH_UNIT: 'em',
13
+ };
14
+ exports.DEFAULTS = DEFAULTS;
@@ -0,0 +1,9 @@
1
+ declare class IconProviderContext {
2
+ fileExtension?: string;
3
+ url?: string;
4
+ lengthUnit?: string;
5
+ static context: {
6
+ __context__: IconProviderContext;
7
+ };
8
+ }
9
+ export default IconProviderContext;
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const context_1 = require("@lit-labs/context");
4
+ const iconprovider_constants_1 = require("./iconprovider.constants");
5
+ class IconProviderContext {
6
+ }
7
+ // create typed lit context as part of the IconProviderContext
8
+ IconProviderContext.context = (0, context_1.createContext)(iconprovider_constants_1.TAG_NAME);
9
+ exports.default = IconProviderContext;
@@ -0,0 +1,7 @@
1
+ import IconProvider from './iconprovider.component';
2
+ export default IconProvider;
3
+ declare global {
4
+ interface HTMLElementTagNameMap {
5
+ ['mdc-iconprovider']: IconProvider;
6
+ }
7
+ }
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const iconprovider_component_1 = tslib_1.__importDefault(require("./iconprovider.component"));
5
+ const iconprovider_constants_1 = require("./iconprovider.constants");
6
+ iconprovider_component_1.default.register(iconprovider_constants_1.TAG_NAME);
7
+ exports.default = iconprovider_component_1.default;
@@ -0,0 +1 @@
1
+ export declare const fontsStyles: import("lit").CSSResult;
@@ -0,0 +1,100 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.fontsStyles = void 0;
4
+ const lit_1 = require("lit");
5
+ // todo: change definition to tokens once available
6
+ exports.fontsStyles = (0, lit_1.css) `
7
+ :host([type="heading-1"]) {
8
+ font-size: 7.5rem;
9
+ font-style: normal;
10
+ font-weight: 700;
11
+ line-height: 125%; /* 9.375rem */
12
+ text-transform: capitalize;
13
+ }
14
+
15
+ :host([type="heading-2"]) {
16
+ font-size: 6rem;
17
+ font-style: normal;
18
+ font-weight: 700;
19
+ line-height: 125%; /* 7.5rem */
20
+ text-transform: capitalize;
21
+ }
22
+
23
+ :host([type="heading-3"]) {
24
+ font-size: 3rem;
25
+ font-style: normal;
26
+ font-weight: 700;
27
+ line-height: 125%; /* 3.75rem */
28
+ }
29
+
30
+ :host([type="heading-4"]) {
31
+ font-size: 2.5rem;
32
+ font-style: normal;
33
+ font-weight: 700;
34
+ line-height: 125%; /* 3.125rem */
35
+ }
36
+
37
+ :host([type="heading-5"]) {
38
+ font-size: 2rem;
39
+ font-style: normal;
40
+ font-weight: 700;
41
+ line-height: 125%; /* 2.5rem */
42
+ letter-spacing: 0.5rem;
43
+ text-transform: uppercase;
44
+ }
45
+
46
+ :host([type="heading-6"]) {
47
+ font-size: 1.75rem;
48
+ font-style: normal;
49
+ font-weight: 700;
50
+ line-height: 3rem; /* 171.429% */
51
+ }
52
+
53
+ :host([type="heading-7"]) {
54
+ font-size: 1.5rem;
55
+ font-style: normal;
56
+ font-weight: 700;
57
+ line-height: 140%; /* 2.1rem */
58
+ }
59
+
60
+ :host([type="body-large"]) {
61
+ font-size: 2rem;
62
+ font-style: normal;
63
+ font-weight: 400;
64
+ line-height: 150%; /* 3rem */
65
+ margin-block-end: 1.875em; /* paragraph spacing, 30px */
66
+ }
67
+
68
+ :host([type="body-regular"]) {
69
+ font-size: 1.5rem;
70
+ font-style: normal;
71
+ font-weight: 400;
72
+ line-height: 150%; /* 2.25rem */
73
+ margin-block-end: 1.5em; /* paragraph spacing, 24px */
74
+ }
75
+
76
+ :host([type="body-small"]) {
77
+ font-size: 1.25rem;
78
+ font-style: normal;
79
+ font-weight: 400;
80
+ line-height: 150%; /* 1.875rem */
81
+ margin-block-end: 0.125rem; /* paragraph spacing, 2px */
82
+ }
83
+
84
+ :host([type="image-title"]) {
85
+ font-size: 1rem;
86
+ font-style: normal;
87
+ font-weight: 700;
88
+ line-height: 150%; /* 1.5rem */
89
+ letter-spacing: 0.04rem;
90
+ text-transform: uppercase;
91
+ }
92
+
93
+ :host([type="label"]) {
94
+ font-size: 1rem;
95
+ font-style: normal;
96
+ font-weight: 700;
97
+ line-height: 150%; /* 1.5rem */
98
+ letter-spacing: 0.02rem;
99
+ }
100
+ `;
@@ -0,0 +1,7 @@
1
+ import Text from './text.component';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ ['mdc-text']: Text;
5
+ }
6
+ }
7
+ export default Text;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const text_component_1 = tslib_1.__importDefault(require("./text.component"));
5
+ const text_constants_1 = require("./text.constants");
6
+ text_component_1.default.register(text_constants_1.TAG_NAME);
7
+ exports.default = text_component_1.default;
@@ -0,0 +1,29 @@
1
+ import { Component } from '../../models';
2
+ import type { FontType } from './text.types';
3
+ /**
4
+ * Text component, which helps creating a text element aligning with
5
+ * styling.
6
+ *
7
+ * The `type` attribute allows changing the type of text, like `heading-1`, etc.
8
+ *
9
+ * For accessibility the `role` and `aria-level` on the component are going to be set
10
+ * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
11
+ *
12
+ * @tag mdc-text
13
+ * @tagname mdc-text
14
+ */
15
+ declare class Text extends Component {
16
+ /**
17
+ * Text Type - defines how the text should be rendered
18
+ *
19
+ * Possible values: `heading-1` | `heading-2` | `heading-3` | `heading-4`
20
+ | `heading-5` | `heading-6` | `heading-7` | `body-large` | `body-regular`
21
+ | `body-small` | `image-title` | `label`;
22
+ */
23
+ type?: FontType;
24
+ protected handleTypeChanged(): void;
25
+ protected updated(changedProperties: Map<string, any>): void;
26
+ render(): import("lit-html").TemplateResult<1>;
27
+ static styles: import("lit").CSSResult[];
28
+ }
29
+ export default Text;
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const lit_1 = require("lit");
5
+ const decorators_js_1 = require("lit/decorators.js");
6
+ const text_styles_1 = tslib_1.__importDefault(require("./text.styles"));
7
+ const models_1 = require("../../models");
8
+ const text_utils_1 = require("./text.utils");
9
+ /**
10
+ * Text component, which helps creating a text element aligning with
11
+ * styling.
12
+ *
13
+ * The `type` attribute allows changing the type of text, like `heading-1`, etc.
14
+ *
15
+ * For accessibility the `role` and `aria-level` on the component are going to be set
16
+ * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
17
+ *
18
+ * @tag mdc-text
19
+ * @tagname mdc-text
20
+ */
21
+ class Text extends models_1.Component {
22
+ handleTypeChanged() {
23
+ this.role = (0, text_utils_1.getRole)(this.type);
24
+ this.ariaLevel = (0, text_utils_1.getAriaLevel)(this.type);
25
+ }
26
+ updated(changedProperties) {
27
+ super.updated(changedProperties);
28
+ if (changedProperties.has('type')) {
29
+ this.handleTypeChanged();
30
+ }
31
+ }
32
+ render() {
33
+ return (0, lit_1.html) `<slot></slot>`;
34
+ }
35
+ }
36
+ Text.styles = text_styles_1.default;
37
+ tslib_1.__decorate([
38
+ (0, decorators_js_1.property)({ attribute: 'type', reflect: true, type: String }),
39
+ tslib_1.__metadata("design:type", String)
40
+ ], Text.prototype, "type", void 0);
41
+ exports.default = Text;
@@ -0,0 +1,9 @@
1
+ import type { FontType } from './text.types';
2
+ declare const TAG_NAME: "mdc-text";
3
+ declare const DEFAULTS: {
4
+ TYPE: "body-regular";
5
+ };
6
+ declare const VALUES: {
7
+ TYPE: Array<FontType>;
8
+ };
9
+ export { TAG_NAME, DEFAULTS, VALUES };
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.VALUES = exports.DEFAULTS = exports.TAG_NAME = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
6
+ const TAG_NAME = tag_name_1.default.constructTagName('text');
7
+ exports.TAG_NAME = TAG_NAME;
8
+ const DEFAULTS = {
9
+ TYPE: 'body-regular',
10
+ };
11
+ exports.DEFAULTS = DEFAULTS;
12
+ const VALUES = {
13
+ TYPE: [
14
+ 'heading-1',
15
+ 'heading-2',
16
+ 'heading-3',
17
+ 'heading-4',
18
+ 'heading-5',
19
+ 'heading-6',
20
+ 'heading-7',
21
+ 'body-large',
22
+ 'body-regular',
23
+ 'body-small',
24
+ 'image-title',
25
+ 'label',
26
+ ],
27
+ };
28
+ exports.VALUES = VALUES;
@@ -0,0 +1,2 @@
1
+ declare const styles: import("lit").CSSResult[];
2
+ export default styles;
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const lit_1 = require("lit");
4
+ const fonts_styles_1 = require("./fonts.styles");
5
+ const styles = [
6
+ (0, lit_1.css) `
7
+ :host {
8
+ --mdc-text-font-family: var(--mdc-themeprovider-font-family);
9
+
10
+ display: block;
11
+ font-family: var(--mdc-text-font-family);
12
+ }
13
+ `,
14
+ // type specific font styles:
15
+ fonts_styles_1.fontsStyles,
16
+ ];
17
+ exports.default = styles;
@@ -0,0 +1 @@
1
+ export type FontType = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6' | 'heading-7' | 'body-large' | 'body-regular' | 'body-small' | 'image-title' | 'label';
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,20 @@
1
+ import { FontType } from './text.types';
2
+ /**
3
+ * Check if passed in type is a heading
4
+ * @param type - type to check
5
+ * @returns boolean, true if it is a heading
6
+ */
7
+ declare const isHeading: (type: FontType) => boolean;
8
+ /**
9
+ * Get corresponding aria-role to type
10
+ * @param type - type to find corresponding role for
11
+ * @returns role
12
+ */
13
+ declare const getRole: (type?: FontType) => "heading" | "paragraph" | null;
14
+ /**
15
+ * Get corresponding aria-level to type
16
+ * @param type type to find corresponding level for
17
+ * @returns aria-level (has to be a number)
18
+ */
19
+ declare const getAriaLevel: (type?: FontType) => string | null;
20
+ export { isHeading, getAriaLevel, getRole };
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getRole = exports.getAriaLevel = exports.isHeading = void 0;
4
+ /**
5
+ * Split the passed in type and return the parts
6
+ */
7
+ const getTypeParts = (type) => {
8
+ const parts = type.split('-');
9
+ return { firstPart: parts[0], secondPart: parts[1] };
10
+ };
11
+ /**
12
+ * Check if passed in type is a heading
13
+ * @param type - type to check
14
+ * @returns boolean, true if it is a heading
15
+ */
16
+ const isHeading = (type) => {
17
+ const { firstPart, secondPart } = getTypeParts(type);
18
+ return firstPart === 'heading' && +secondPart > 0 && +secondPart < 7;
19
+ };
20
+ exports.isHeading = isHeading;
21
+ /**
22
+ * Get corresponding aria-role to type
23
+ * @param type - type to find corresponding role for
24
+ * @returns role
25
+ */
26
+ const getRole = (type) => {
27
+ if (type) {
28
+ if (isHeading(type)) {
29
+ return 'heading';
30
+ }
31
+ return 'paragraph';
32
+ }
33
+ return null;
34
+ };
35
+ exports.getRole = getRole;
36
+ /**
37
+ * Get corresponding aria-level to type
38
+ * @param type type to find corresponding level for
39
+ * @returns aria-level (has to be a number)
40
+ */
41
+ const getAriaLevel = (type) => {
42
+ if (type) {
43
+ if (isHeading(type)) {
44
+ const { secondPart } = getTypeParts(type);
45
+ return secondPart;
46
+ }
47
+ }
48
+ return null;
49
+ };
50
+ exports.getAriaLevel = getAriaLevel;
@@ -0,0 +1,7 @@
1
+ import ThemeProvider from './themeprovider.component';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ ['mdc-themeprovider']: ThemeProvider;
5
+ }
6
+ }
7
+ export default ThemeProvider;
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const themeprovider_component_1 = tslib_1.__importDefault(require("./themeprovider.component"));
5
+ const themeprovider_constants_1 = require("./themeprovider.constants");
6
+ themeprovider_component_1.default.register(themeprovider_constants_1.TAG_NAME);
7
+ exports.default = themeprovider_component_1.default;
@@ -0,0 +1,48 @@
1
+ import { Provider } from '../../models';
2
+ import ThemeProviderContext from './themeprovider.context';
3
+ import type { Theme } from './themeprovider.types';
4
+ /**
5
+ * ThemeProvider component, which sets the theme css variables
6
+ * for the child dom nodes and allows to be consumed from sub components
7
+ * (see providerUtils.consume for how to consume)
8
+ *
9
+ * ThemeProvider also includes the different font faces available
10
+ * for Text components.
11
+ *
12
+ * @tag mdc-themeprovider
13
+ * @tagname mdc-themeprovider
14
+ */
15
+ declare class ThemeProvider extends Provider<ThemeProviderContext> {
16
+ constructor();
17
+ static get Context(): {
18
+ __context__: ThemeProviderContext;
19
+ };
20
+ /**
21
+ * Available themes to switch to
22
+ *
23
+ * Has to be a space separated string, like className
24
+ * e.g.: `mds-theme-stable-darkWebex mds-theme-stable-lightWebex`
25
+ */
26
+ themes: string;
27
+ /**
28
+ * Current theme attribute
29
+ *
30
+ * Has to be fully qualified, such that
31
+ * the theme name matches the className of the respective
32
+ * theme stylesheet
33
+ */
34
+ theme: Theme;
35
+ protected updated(changedProperties: Map<string, any>): void;
36
+ /**
37
+ * Update all observing components of this
38
+ * provider to update the theme
39
+ */
40
+ protected updateContext(): void;
41
+ /**
42
+ * Function to update the active theme classname to update the theme tokens
43
+ * as CSS variables on the web component.
44
+ */
45
+ private updateActiveThemeClass;
46
+ static styles: import("lit").CSSResult;
47
+ }
48
+ export default ThemeProvider;