@momentum-design/components 0.1.7 → 0.1.9
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/dist/browser/index.js +16 -18
- package/dist/browser/index.js.map +2 -2
- package/dist/components/icon/icon.component.d.ts +29 -16
- package/dist/components/icon/icon.component.js +37 -31
- package/dist/components/icon/icon.styles.js +4 -1
- package/dist/components/icon/icon.utils.d.ts +10 -0
- package/dist/components/icon/icon.utils.js +15 -5
- package/dist/components/themeprovider/themeprovider.component.d.ts +2 -1
- package/dist/components/themeprovider/themeprovider.component.js +1 -1
- package/dist/custom-elements.json +126 -134
- package/dist/models/provider/provider.component.d.ts +1 -1
- package/dist/models/provider/provider.component.js +1 -1
- package/dist/models/provider/provider.styles.js +1 -6
- package/dist/react/icon/index.d.ts +28 -12
- package/dist/react/icon/index.js +28 -12
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
@@ -1,24 +1,40 @@
|
|
1
1
|
import { Component } from '../../models';
|
2
2
|
/**
|
3
|
-
* Icon component
|
4
|
-
* component.
|
3
|
+
* Icon component that dynamically displays SVG icons based on a valid name.
|
5
4
|
*
|
6
|
-
*
|
7
|
-
* This `Icon` component accepts the `name` attribute, which will be
|
8
|
-
* the file name of the icon to be loaded from the given `url`.
|
5
|
+
* This component must be mounted within an `IconProvider` component.
|
9
6
|
*
|
10
|
-
*
|
11
|
-
*
|
7
|
+
* The `IconProvider` defines the source URL from which icons are consumed.
|
8
|
+
* The `Icon` component accepts a `name` attribute, which corresponds to
|
9
|
+
* the file name of the icon to be loaded from the specified URL.
|
12
10
|
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
11
|
+
* Once fetched, the icon will be rendered. If the fetching process is unsuccessful,
|
12
|
+
* no icon will be displayed.
|
13
|
+
*
|
14
|
+
* The `size` attribute allows for dynamic sizing of the icon based on the provided
|
15
|
+
* `length-unit` attribute. This unit can either come from the `IconProvider`
|
16
|
+
* or can be overridden for each individual icon. For example:
|
17
|
+
* if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
|
17
18
|
* `width: 1em; height: 1em`.
|
18
19
|
*
|
19
|
-
*
|
20
|
+
* Regarding accessibility, there are two types of icons: decorative and informative.
|
21
|
+
*
|
22
|
+
* ### Decorative Icons
|
23
|
+
* - Decorative icons do not convey any essential information to the content of a page.
|
24
|
+
* - They should be hidden from screen readers (SR) to prevent confusion for users.
|
25
|
+
* - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.
|
26
|
+
*
|
27
|
+
* ### Informative Icons
|
28
|
+
* - Informative icons convey important information that is not adequately represented
|
29
|
+
* by surrounding text or components.
|
30
|
+
* - They provide valuable context and must be announced by assistive technologies.
|
31
|
+
* - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
|
32
|
+
* - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
|
33
|
+
* the role will be unset.
|
20
34
|
*
|
21
35
|
* @tagname mdc-icon
|
36
|
+
*
|
37
|
+
* @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
|
22
38
|
*/
|
23
39
|
declare class Icon extends Component {
|
24
40
|
private iconData?;
|
@@ -36,10 +52,6 @@ declare class Icon extends Component {
|
|
36
52
|
* Length unit attribute for overriding length-unit from `IconProvider`
|
37
53
|
*/
|
38
54
|
lengthUnit?: string;
|
39
|
-
/**
|
40
|
-
* Role attribute to be set for accessibility
|
41
|
-
*/
|
42
|
-
role: string | null;
|
43
55
|
/**
|
44
56
|
* Aria-label attribute to be set for accessibility
|
45
57
|
*/
|
@@ -55,6 +67,7 @@ declare class Icon extends Component {
|
|
55
67
|
*/
|
56
68
|
private updateSize;
|
57
69
|
private setRoleOnIcon;
|
70
|
+
private setAriaHiddenOnIcon;
|
58
71
|
private setAriaLabelOnIcon;
|
59
72
|
private get computedIconSize();
|
60
73
|
updated(changedProperties: Map<string, any>): void;
|
@@ -10,25 +10,41 @@ const iconprovider_component_1 = tslib_1.__importDefault(require("../iconprovide
|
|
10
10
|
const icon_utils_1 = require("./icon.utils");
|
11
11
|
const icon_constants_1 = require("./icon.constants");
|
12
12
|
/**
|
13
|
-
* Icon component
|
14
|
-
* component.
|
13
|
+
* Icon component that dynamically displays SVG icons based on a valid name.
|
15
14
|
*
|
16
|
-
*
|
17
|
-
* This `Icon` component accepts the `name` attribute, which will be
|
18
|
-
* the file name of the icon to be loaded from the given `url`.
|
15
|
+
* This component must be mounted within an `IconProvider` component.
|
19
16
|
*
|
20
|
-
*
|
21
|
-
*
|
17
|
+
* The `IconProvider` defines the source URL from which icons are consumed.
|
18
|
+
* The `Icon` component accepts a `name` attribute, which corresponds to
|
19
|
+
* the file name of the icon to be loaded from the specified URL.
|
22
20
|
*
|
23
|
-
*
|
24
|
-
*
|
25
|
-
*
|
26
|
-
*
|
21
|
+
* Once fetched, the icon will be rendered. If the fetching process is unsuccessful,
|
22
|
+
* no icon will be displayed.
|
23
|
+
*
|
24
|
+
* The `size` attribute allows for dynamic sizing of the icon based on the provided
|
25
|
+
* `length-unit` attribute. This unit can either come from the `IconProvider`
|
26
|
+
* or can be overridden for each individual icon. For example:
|
27
|
+
* if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
|
27
28
|
* `width: 1em; height: 1em`.
|
28
29
|
*
|
29
|
-
*
|
30
|
+
* Regarding accessibility, there are two types of icons: decorative and informative.
|
31
|
+
*
|
32
|
+
* ### Decorative Icons
|
33
|
+
* - Decorative icons do not convey any essential information to the content of a page.
|
34
|
+
* - They should be hidden from screen readers (SR) to prevent confusion for users.
|
35
|
+
* - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.
|
36
|
+
*
|
37
|
+
* ### Informative Icons
|
38
|
+
* - Informative icons convey important information that is not adequately represented
|
39
|
+
* by surrounding text or components.
|
40
|
+
* - They provide valuable context and must be announced by assistive technologies.
|
41
|
+
* - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
|
42
|
+
* - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
|
43
|
+
* the role will be unset.
|
30
44
|
*
|
31
45
|
* @tagname mdc-icon
|
46
|
+
*
|
47
|
+
* @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
|
32
48
|
*/
|
33
49
|
class Icon extends models_1.Component {
|
34
50
|
constructor() {
|
@@ -37,10 +53,6 @@ class Icon extends models_1.Component {
|
|
37
53
|
* Name of the icon (= filename)
|
38
54
|
*/
|
39
55
|
this.name = icon_constants_1.DEFAULTS.NAME;
|
40
|
-
/**
|
41
|
-
* Role attribute to be set for accessibility
|
42
|
-
*/
|
43
|
-
this.role = null;
|
44
56
|
/**
|
45
57
|
* Aria-label attribute to be set for accessibility
|
46
58
|
*/
|
@@ -61,6 +73,7 @@ class Icon extends models_1.Component {
|
|
61
73
|
// when icon got fetched, set role and aria-label:
|
62
74
|
this.setRoleOnIcon();
|
63
75
|
this.setAriaLabelOnIcon();
|
76
|
+
this.setAriaHiddenOnIcon();
|
64
77
|
}
|
65
78
|
}
|
66
79
|
}
|
@@ -76,14 +89,12 @@ class Icon extends models_1.Component {
|
|
76
89
|
}
|
77
90
|
}
|
78
91
|
setRoleOnIcon() {
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
(_b = this.iconData) === null || _b === void 0 ? void 0 : _b.removeAttribute('role');
|
86
|
-
}
|
92
|
+
this.role = this.ariaLabel ? 'img' : null;
|
93
|
+
}
|
94
|
+
setAriaHiddenOnIcon() {
|
95
|
+
var _a;
|
96
|
+
// set aria-hidden=true for SVG to avoid screen readers
|
97
|
+
(_a = this.iconData) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
|
87
98
|
}
|
88
99
|
setAriaLabelOnIcon() {
|
89
100
|
var _a, _b;
|
@@ -105,13 +116,12 @@ class Icon extends models_1.Component {
|
|
105
116
|
if (changedProperties.has('name')) {
|
106
117
|
// fetch icon data if name changes:
|
107
118
|
this.getIconData().catch((err) => {
|
119
|
+
// eslint-disable-next-line no-console
|
108
120
|
console.error(err);
|
109
121
|
});
|
110
122
|
}
|
111
|
-
if (changedProperties.has('role')) {
|
112
|
-
this.setRoleOnIcon();
|
113
|
-
}
|
114
123
|
if (changedProperties.has('ariaLabel')) {
|
124
|
+
this.setRoleOnIcon();
|
115
125
|
this.setAriaLabelOnIcon();
|
116
126
|
}
|
117
127
|
if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
|
@@ -155,10 +165,6 @@ tslib_1.__decorate([
|
|
155
165
|
(0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
|
156
166
|
tslib_1.__metadata("design:type", String)
|
157
167
|
], Icon.prototype, "lengthUnit", void 0);
|
158
|
-
tslib_1.__decorate([
|
159
|
-
(0, decorators_js_1.property)({ type: String }),
|
160
|
-
tslib_1.__metadata("design:type", Object)
|
161
|
-
], Icon.prototype, "role", void 0);
|
162
168
|
tslib_1.__decorate([
|
163
169
|
(0, decorators_js_1.property)({ type: String, attribute: 'aria-label' }),
|
164
170
|
tslib_1.__metadata("design:type", Object)
|
@@ -5,10 +5,13 @@ const styles_1 = require("../../utils/styles");
|
|
5
5
|
const styles = [
|
6
6
|
styles_1.hostFitContentStyles,
|
7
7
|
(0, lit_1.css) `
|
8
|
+
:host {
|
9
|
+
--mdc-icon-fill-color: currentColor;
|
10
|
+
}
|
8
11
|
svg {
|
9
12
|
height: 100%;
|
10
13
|
width: 100%;
|
11
|
-
fill:
|
14
|
+
fill: var(--mdc-icon-fill-color);
|
12
15
|
}
|
13
16
|
`,
|
14
17
|
];
|
@@ -1,2 +1,12 @@
|
|
1
|
+
/**
|
2
|
+
* Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
|
3
|
+
* It will throw an error if the response is not ok.
|
4
|
+
*
|
5
|
+
* @param url - The base url of the icon
|
6
|
+
* @param name - The name of the icon
|
7
|
+
* @param fileExtension - The file extension of the icon
|
8
|
+
* @returns The valid icon element
|
9
|
+
* @throws Error if the response is not ok
|
10
|
+
*/
|
1
11
|
declare const dynamicSVGImport: (url: string, name: string, fileExtension: string) => Promise<Element>;
|
2
12
|
export { dynamicSVGImport };
|
@@ -2,12 +2,22 @@
|
|
2
2
|
/* eslint-disable implicit-arrow-linebreak */
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
4
4
|
exports.dynamicSVGImport = void 0;
|
5
|
-
|
6
|
-
|
5
|
+
/**
|
6
|
+
* Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
|
7
|
+
* It will throw an error if the response is not ok.
|
8
|
+
*
|
9
|
+
* @param url - The base url of the icon
|
10
|
+
* @param name - The name of the icon
|
11
|
+
* @param fileExtension - The file extension of the icon
|
12
|
+
* @returns The valid icon element
|
13
|
+
* @throws Error if the response is not ok
|
14
|
+
*/
|
15
|
+
const dynamicSVGImport = async (url, name, fileExtension) => {
|
16
|
+
const response = await fetch(`${url}/${name}.${fileExtension}`);
|
7
17
|
if (!response.ok) {
|
8
18
|
throw new Error('There was a problem while fetching the icon!');
|
9
19
|
}
|
10
|
-
|
11
|
-
|
12
|
-
|
20
|
+
const iconResponse = await response.text();
|
21
|
+
return new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
|
22
|
+
};
|
13
23
|
exports.dynamicSVGImport = dynamicSVGImport;
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { CSSResult } from 'lit';
|
1
2
|
import { Provider } from '../../models';
|
2
3
|
import ThemeProviderContext from './themeprovider.context';
|
3
4
|
/**
|
@@ -55,6 +56,6 @@ declare class ThemeProvider extends Provider<ThemeProviderContext> {
|
|
55
56
|
* as CSS variables on the web component.
|
56
57
|
*/
|
57
58
|
private setThemeInClassList;
|
58
|
-
static styles:
|
59
|
+
static styles: Array<CSSResult>;
|
59
60
|
}
|
60
61
|
export default ThemeProvider;
|
@@ -83,7 +83,7 @@ class ThemeProvider extends models_1.Provider {
|
|
83
83
|
}
|
84
84
|
}
|
85
85
|
}
|
86
|
-
ThemeProvider.styles = themeprovider_styles_1.default;
|
86
|
+
ThemeProvider.styles = [...models_1.Provider.styles, themeprovider_styles_1.default];
|
87
87
|
tslib_1.__decorate([
|
88
88
|
(0, decorators_js_1.state)(),
|
89
89
|
tslib_1.__metadata("design:type", String)
|