@momentum-design/components 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/.eslintrc.js +16 -0
- package/CONTRIBUTING.md +5 -0
- package/README.md +39 -0
- package/SCRIPTS.md +15 -0
- package/TESTING.md +38 -0
- package/config/api-extractor.json +33 -0
- package/config/custom-elements-manifest.config.js +28 -0
- package/config/esbuild/configs/browser.js +21 -0
- package/config/esbuild/configs/e2e.js +10 -0
- package/config/esbuild/esbuild-e2e.config.js +22 -0
- package/config/esbuild/esbuild.config.js +9 -0
- package/config/playwright/playwright.config.ts +107 -0
- package/config/playwright/public/index.css +43 -0
- package/config/playwright/public/index.html +26 -0
- package/config/playwright/setup/Components.page.ts +163 -0
- package/config/playwright/setup/constants.ts +27 -0
- package/config/playwright/setup/index.ts +42 -0
- package/config/playwright/setup/steps/accessibility.ts +9 -0
- package/config/playwright/setup/types.ts +5 -0
- package/config/playwright/setup/utils/accessibility.ts +70 -0
- package/config/playwright/setup/utils/visual-regression.ts +35 -0
- package/config/plop/actions/AddComponent.ts +21 -0
- package/config/plop/actions/AddToComponentExports.ts +16 -0
- package/config/plop/actions/AddToComponentImports.ts +16 -0
- package/config/plop/constants/index.ts +31 -0
- package/config/plop/esbuild.config.plop.js +4 -0
- package/config/plop/generators/component/index.ts +25 -0
- package/config/plop/plopfile.ts +6 -0
- package/config/plop/prompts/index.ts +8 -0
- package/config/plop/templates/add/component/index.ts.hbs +12 -0
- package/config/plop/templates/add/component/{{componentName}}.component.ts.hbs +22 -0
- package/config/plop/templates/add/component/{{componentName}}.constants.ts.hbs +5 -0
- package/config/plop/templates/add/component/{{componentName}}.e2e-test.ts.hbs +67 -0
- package/config/plop/templates/add/component/{{componentName}}.fixtures.ts.hbs +13 -0
- package/config/plop/templates/add/component/{{componentName}}.stories.ts.hbs +18 -0
- package/config/plop/templates/add/component/{{componentName}}.styles.ts.hbs +8 -0
- package/config/plop/tsconfig.plop.json +11 -0
- package/config/storybook/MomentumStorybookTheme.js +41 -0
- package/config/storybook/main.js +21 -0
- package/config/storybook/manager.js +17 -0
- package/config/storybook/preview.js +63 -0
- package/config/storybook/provider/iconProvider.js +8 -0
- package/config/storybook/provider/themeProvider.js +31 -0
- package/config/storybook/public/background-graphic.png +0 -0
- package/config/storybook/public/fonts/Inter.var.woff2 +0 -0
- package/config/storybook/public/momentum-logo.png +0 -0
- package/config/storybook/themes/index.js +14 -0
- package/config/storybook/themes/themes.css +15 -0
- package/data/custom-elements.json +677 -0
- package/dist/browser/index.js +366 -0
- package/dist/browser/index.js.map +7 -0
- package/dist/components/avatar/avatar.component.d.ts +28 -0
- package/dist/components/avatar/avatar.component.js +79 -0
- package/dist/components/avatar/avatar.constants.d.ts +7 -0
- package/dist/components/avatar/avatar.constants.js +14 -0
- package/dist/components/avatar/avatar.styles.d.ts +2 -0
- package/dist/components/avatar/avatar.styles.js +20 -0
- package/dist/components/avatar/avatar.types.d.ts +1 -0
- package/dist/components/avatar/avatar.types.js +2 -0
- package/dist/components/avatar/index.d.ts +7 -0
- package/dist/components/avatar/index.js +7 -0
- package/dist/components/badge/badge.component.d.ts +51 -0
- package/dist/components/badge/badge.component.js +114 -0
- package/dist/components/badge/badge.constants.d.ts +8 -0
- package/dist/components/badge/badge.constants.js +15 -0
- package/dist/components/badge/badge.styles.d.ts +2 -0
- package/dist/components/badge/badge.styles.js +26 -0
- package/dist/components/badge/badge.types.d.ts +1 -0
- package/dist/components/badge/badge.types.js +2 -0
- package/dist/components/badge/index.d.ts +7 -0
- package/dist/components/badge/index.js +7 -0
- package/dist/components/icon/icon.component.d.ts +63 -0
- package/dist/components/icon/icon.component.js +158 -0
- package/dist/components/icon/icon.constants.d.ts +6 -0
- package/dist/components/icon/icon.constants.js +12 -0
- package/dist/components/icon/icon.styles.d.ts +2 -0
- package/dist/components/icon/icon.styles.js +15 -0
- package/dist/components/icon/icon.utils.d.ts +2 -0
- package/dist/components/icon/icon.utils.js +13 -0
- package/dist/components/icon/index.d.ts +7 -0
- package/dist/components/icon/index.js +7 -0
- package/dist/components/iconprovider/iconprovider.component.d.ts +34 -0
- package/dist/components/iconprovider/iconprovider.component.js +71 -0
- package/dist/components/iconprovider/iconprovider.constants.d.ts +7 -0
- package/dist/components/iconprovider/iconprovider.constants.js +14 -0
- package/dist/components/iconprovider/iconprovider.context.d.ts +9 -0
- package/dist/components/iconprovider/iconprovider.context.js +9 -0
- package/dist/components/iconprovider/index.d.ts +7 -0
- package/dist/components/iconprovider/index.js +7 -0
- package/dist/components/text/fonts.styles.d.ts +1 -0
- package/dist/components/text/fonts.styles.js +100 -0
- package/dist/components/text/index.d.ts +7 -0
- package/dist/components/text/index.js +7 -0
- package/dist/components/text/text.component.d.ts +29 -0
- package/dist/components/text/text.component.js +41 -0
- package/dist/components/text/text.constants.d.ts +9 -0
- package/dist/components/text/text.constants.js +28 -0
- package/dist/components/text/text.styles.d.ts +2 -0
- package/dist/components/text/text.styles.js +17 -0
- package/dist/components/text/text.types.d.ts +1 -0
- package/dist/components/text/text.types.js +2 -0
- package/dist/components/text/text.utils.d.ts +20 -0
- package/dist/components/text/text.utils.js +50 -0
- package/dist/components/themeprovider/index.d.ts +7 -0
- package/dist/components/themeprovider/index.js +7 -0
- package/dist/components/themeprovider/themeprovider.component.d.ts +48 -0
- package/dist/components/themeprovider/themeprovider.component.js +86 -0
- package/dist/components/themeprovider/themeprovider.constants.d.ts +10 -0
- package/dist/components/themeprovider/themeprovider.constants.js +31 -0
- package/dist/components/themeprovider/themeprovider.context.d.ts +9 -0
- package/dist/components/themeprovider/themeprovider.context.js +13 -0
- package/dist/components/themeprovider/themeprovider.styles.d.ts +2 -0
- package/dist/components/themeprovider/themeprovider.styles.js +13 -0
- package/dist/components/themeprovider/themeprovider.types.d.ts +5 -0
- package/dist/components/themeprovider/themeprovider.types.js +2 -0
- package/dist/components/themeprovider/themeprovider.utils.d.ts +9 -0
- package/dist/components/themeprovider/themeprovider.utils.js +10 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +19 -0
- package/dist/models/component/component.component.d.ts +38 -0
- package/dist/models/component/component.component.js +45 -0
- package/dist/models/component/component.types.d.ts +15 -0
- package/dist/models/component/component.types.js +2 -0
- package/dist/models/component/index.d.ts +3 -0
- package/dist/models/component/index.js +5 -0
- package/dist/models/index.d.ts +4 -0
- package/dist/models/index.js +8 -0
- package/dist/models/provider/index.d.ts +2 -0
- package/dist/models/provider/index.js +5 -0
- package/dist/models/provider/provider.component.d.ts +70 -0
- package/dist/models/provider/provider.component.js +56 -0
- package/dist/models/provider/provider.styles.d.ts +2 -0
- package/dist/models/provider/provider.styles.js +14 -0
- package/dist/utils/provider/index.d.ts +13 -0
- package/dist/utils/provider/index.js +14 -0
- package/dist/utils/styles/index.d.ts +2 -0
- package/dist/utils/styles/index.js +14 -0
- package/dist/utils/tag-name/constants.d.ts +7 -0
- package/dist/utils/tag-name/constants.js +10 -0
- package/dist/utils/tag-name/index.d.ts +4 -0
- package/dist/utils/tag-name/index.js +10 -0
- package/dist/utils/types.d.ts +1 -0
- package/dist/utils/types.js +2 -0
- package/jest.config.js +3 -0
- package/package.json +78 -0
- package/scripts/copyFonts.js +31 -0
- package/scripts/copyIcons.js +31 -0
- package/scripts/copyTokens.js +24 -0
- package/src/components/avatar/__screenshots__/mdc-avatar.png +0 -0
- package/src/components/avatar/avatar.component.ts +74 -0
- package/src/components/avatar/avatar.constants.ts +12 -0
- package/src/components/avatar/avatar.e2e-test.ts +70 -0
- package/src/components/avatar/avatar.stories.ts +25 -0
- package/src/components/avatar/avatar.styles.ts +20 -0
- package/src/components/avatar/avatar.types.ts +1 -0
- package/src/components/avatar/index.ts +12 -0
- package/src/components/badge/__screenshots__/mdc-badge.png +0 -0
- package/src/components/badge/badge.component.ts +121 -0
- package/src/components/badge/badge.constants.ts +13 -0
- package/src/components/badge/badge.e2e-test.ts +68 -0
- package/src/components/badge/badge.stories.ts +33 -0
- package/src/components/badge/badge.styles.ts +26 -0
- package/src/components/badge/badge.types.ts +1 -0
- package/src/components/badge/index.ts +12 -0
- package/src/components/icon/__screenshots__/mdc-icon-default.png +0 -0
- package/src/components/icon/__screenshots__/mdc-icon-scale.png +0 -0
- package/src/components/icon/icon.component.ts +155 -0
- package/src/components/icon/icon.constants.ts +10 -0
- package/src/components/icon/icon.e2e-test.ts +101 -0
- package/src/components/icon/icon.stories.ts +34 -0
- package/src/components/icon/icon.styles.ts +15 -0
- package/src/components/icon/icon.utils.ts +13 -0
- package/src/components/icon/index.ts +12 -0
- package/src/components/iconprovider/__screenshots__/mdc-iconprovider.png +0 -0
- package/src/components/iconprovider/iconprovider.component.ts +76 -0
- package/src/components/iconprovider/iconprovider.constants.ts +12 -0
- package/src/components/iconprovider/iconprovider.context.ts +16 -0
- package/src/components/iconprovider/iconprovider.e2e-test.ts +65 -0
- package/src/components/iconprovider/iconprovider.stories.ts +27 -0
- package/src/components/iconprovider/iconprovider.stories.utils.ts +27 -0
- package/src/components/iconprovider/index.ts +12 -0
- package/src/components/text/__screenshots__/mdc-text-body-large.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-body-regular.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-body-small.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-heading-1.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-heading-2.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-heading-3.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-heading-4.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-heading-5.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-heading-6.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-heading-7.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-image-title.png +0 -0
- package/src/components/text/__screenshots__/mdc-text-label.png +0 -0
- package/src/components/text/fonts.styles.ts +99 -0
- package/src/components/text/index.ts +12 -0
- package/src/components/text/text.component.ts +51 -0
- package/src/components/text/text.constants.ts +27 -0
- package/src/components/text/text.e2e-test.ts +76 -0
- package/src/components/text/text.stories.ts +29 -0
- package/src/components/text/text.styles.ts +17 -0
- package/src/components/text/text.types.ts +13 -0
- package/src/components/text/text.utils.ts +51 -0
- package/src/components/themeprovider/__screenshots__/mdc-themeprovider-darkWebex.png +0 -0
- package/src/components/themeprovider/__screenshots__/mdc-themeprovider-lightWebex.png +0 -0
- package/src/components/themeprovider/index.ts +12 -0
- package/src/components/themeprovider/themeprovider.component.ts +91 -0
- package/src/components/themeprovider/themeprovider.constants.ts +32 -0
- package/src/components/themeprovider/themeprovider.context.ts +18 -0
- package/src/components/themeprovider/themeprovider.e2e-test.ts +89 -0
- package/src/components/themeprovider/themeprovider.stories.styles.css +22 -0
- package/src/components/themeprovider/themeprovider.stories.ts +38 -0
- package/src/components/themeprovider/themeprovider.stories.utils.ts +23 -0
- package/src/components/themeprovider/themeprovider.styles.ts +13 -0
- package/src/components/themeprovider/themeprovider.types.ts +7 -0
- package/src/components/themeprovider/themeprovider.utils.ts +16 -0
- package/src/index.ts +22 -0
- package/src/models/component/component.component.ts +46 -0
- package/src/models/component/component.types.ts +16 -0
- package/src/models/component/index.ts +7 -0
- package/src/models/index.ts +11 -0
- package/src/models/provider/index.ts +3 -0
- package/src/models/provider/provider.component.ts +87 -0
- package/src/models/provider/provider.styles.ts +14 -0
- package/src/stories/colors.mdx +32 -0
- package/src/stories/icons.mdx +13 -0
- package/src/stories/typography.mdx +20 -0
- package/src/utils/mixins/DisabledMixin.ts +19 -0
- package/src/utils/mixins/TabIndexMixin.ts +19 -0
- package/src/utils/provider/index.ts +21 -0
- package/src/utils/styles/index.ts +13 -0
- package/src/utils/tag-name/constants.ts +10 -0
- package/src/utils/tag-name/index.ts +15 -0
- package/src/utils/types.ts +1 -0
- package/tsconfig.json +45 -0
- 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,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
|
+
"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,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
|
+
"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
|
+
"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
|
+
"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,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,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,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
|
+
"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;
|