@momentum-design/components 0.0.27 → 0.0.29
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 +18 -16
- package/dist/browser/index.js.map +3 -3
- package/dist/components/avatar/avatar.component.d.ts +1 -1
- package/dist/components/avatar/avatar.component.js +5 -5
- package/dist/components/avatar/avatar.constants.d.ts +1 -1
- package/dist/components/avatar/avatar.constants.js +1 -1
- package/dist/components/badge/badge.component.d.ts +1 -1
- package/dist/components/badge/badge.component.js +6 -5
- package/dist/components/badge/badge.constants.d.ts +2 -2
- package/dist/components/badge/badge.constants.js +1 -1
- package/dist/components/badge/badge.styles.js +2 -0
- package/dist/components/icon/icon.component.d.ts +8 -6
- package/dist/components/icon/icon.component.js +20 -11
- package/dist/components/icon/icon.constants.d.ts +1 -1
- package/dist/components/icon/icon.constants.js +1 -1
- package/dist/components/iconprovider/iconprovider.component.d.ts +6 -1
- package/dist/components/iconprovider/iconprovider.component.js +15 -2
- package/dist/components/iconprovider/iconprovider.constants.d.ts +3 -1
- package/dist/components/iconprovider/iconprovider.constants.js +8 -1
- package/dist/components/iconprovider/iconprovider.context.d.ts +2 -1
- package/dist/components/iconprovider/iconprovider.stories.utils.d.ts +1 -2
- package/dist/components/iconprovider/iconprovider.stories.utils.js +4 -3
- package/dist/components/text/text.utils.d.ts +1 -1
- package/dist/components/text/text.utils.js +1 -1
- package/dist/custom-elements.json +166 -131
- package/dist/react/icon/index.d.ts +2 -2
- package/dist/react/icon/index.js +2 -2
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
@@ -22,21 +22,21 @@ class Avatar extends models_1.Component {
|
|
22
22
|
/**
|
23
23
|
* Scale of the avatar
|
24
24
|
*/
|
25
|
-
this.
|
25
|
+
this.size = avatar_constants_1.DEFAULTS.SIZE;
|
26
26
|
}
|
27
27
|
/**
|
28
28
|
* Updates the size by setting the width and height
|
29
29
|
*/
|
30
30
|
updateSize() {
|
31
|
-
if (this.
|
32
|
-
const value = `${this.
|
31
|
+
if (this.size) {
|
32
|
+
const value = `${this.size}${avatar_constants_1.LENGTH_UNIT}`;
|
33
33
|
this.style.width = value;
|
34
34
|
this.style.height = value;
|
35
35
|
}
|
36
36
|
}
|
37
37
|
updated(changedProperties) {
|
38
38
|
super.updated(changedProperties);
|
39
|
-
if (changedProperties.has('
|
39
|
+
if (changedProperties.has('size')) {
|
40
40
|
this.updateSize();
|
41
41
|
}
|
42
42
|
}
|
@@ -75,5 +75,5 @@ tslib_1.__decorate([
|
|
75
75
|
tslib_1.__decorate([
|
76
76
|
(0, decorators_js_1.property)({ type: Number }),
|
77
77
|
tslib_1.__metadata("design:type", Number)
|
78
|
-
], Avatar.prototype, "
|
78
|
+
], Avatar.prototype, "size", void 0);
|
79
79
|
exports.default = Avatar;
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
4
4
|
const lit_1 = require("lit");
|
5
5
|
const decorators_js_1 = require("lit/decorators.js");
|
6
|
+
const if_defined_js_1 = require("lit/directives/if-defined.js");
|
6
7
|
const style_map_js_1 = require("lit/directives/style-map.js");
|
7
8
|
const models_1 = require("../../models");
|
8
9
|
const badge_constants_1 = require("./badge.constants");
|
@@ -30,7 +31,7 @@ class Badge extends models_1.Component {
|
|
30
31
|
*
|
31
32
|
* Default: `1`
|
32
33
|
*/
|
33
|
-
this.
|
34
|
+
this.size = badge_constants_1.DEFAULTS.SIZE;
|
34
35
|
/**
|
35
36
|
* Length unit attribute for scale
|
36
37
|
*
|
@@ -49,13 +50,13 @@ class Badge extends models_1.Component {
|
|
49
50
|
}
|
50
51
|
updated(changedProperties) {
|
51
52
|
super.updated(changedProperties);
|
52
|
-
if (changedProperties.has('
|
53
|
+
if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
|
53
54
|
this.updateSize();
|
54
55
|
}
|
55
56
|
}
|
56
57
|
iconTemplate() {
|
57
58
|
return (0, lit_1.html) `<div class="mdc-badge-icon-container">
|
58
|
-
<mdc-icon name
|
59
|
+
<mdc-icon name=${(0, if_defined_js_1.ifDefined)(this.iconName)} size="100" length-unit="%"></mdc-icon>
|
59
60
|
</div>`;
|
60
61
|
}
|
61
62
|
textTemplate() {
|
@@ -66,7 +67,7 @@ class Badge extends models_1.Component {
|
|
66
67
|
}
|
67
68
|
render() {
|
68
69
|
let content;
|
69
|
-
const size = `${this.
|
70
|
+
const size = `${this.size}${this.lengthUnit}`;
|
70
71
|
let sizeStyles = { width: size, height: size };
|
71
72
|
switch (this.type) {
|
72
73
|
case 'regular':
|
@@ -98,7 +99,7 @@ tslib_1.__decorate([
|
|
98
99
|
tslib_1.__decorate([
|
99
100
|
(0, decorators_js_1.property)({ type: Number }),
|
100
101
|
tslib_1.__metadata("design:type", Number)
|
101
|
-
], Badge.prototype, "
|
102
|
+
], Badge.prototype, "size", void 0);
|
102
103
|
tslib_1.__decorate([
|
103
104
|
(0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
|
104
105
|
tslib_1.__metadata("design:type", String)
|
@@ -2,7 +2,7 @@ declare const TAG_NAME: "mdc-badge";
|
|
2
2
|
declare const WARNING_ICON_NAME = "warning-badge-filled";
|
3
3
|
declare const DEFAULTS: {
|
4
4
|
TYPE: "regular";
|
5
|
-
|
5
|
+
SIZE: number;
|
6
6
|
LENGTH_UNIT: string;
|
7
7
|
};
|
8
|
-
export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME };
|
8
|
+
export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME, };
|
@@ -7,6 +7,7 @@ const styles = [
|
|
7
7
|
(0, lit_1.css) `
|
8
8
|
:host {
|
9
9
|
--mdc-badge-icon-background-color: var(--mds-color-theme-background-accent-normal);
|
10
|
+
--mdc-badge-icon-color: var(--mds-color-theme-common-text-primary-normal);
|
10
11
|
}
|
11
12
|
|
12
13
|
.mdc-badge-container {
|
@@ -15,6 +16,7 @@ const styles = [
|
|
15
16
|
align-items: center;
|
16
17
|
border-radius: 9999px;
|
17
18
|
background-color: var(--mdc-badge-icon-background-color);
|
19
|
+
color: var(--mdc-badge-icon-color);
|
18
20
|
}
|
19
21
|
|
20
22
|
.mdc-badge-icon-container {
|
@@ -10,10 +10,10 @@ import { Component } from '../../models';
|
|
10
10
|
* Once fetched, the icon will be mounted. If fetching wasn't successful,
|
11
11
|
* nothing will be shown.
|
12
12
|
*
|
13
|
-
* The `
|
13
|
+
* The `size` attribute allows sizing the icon based on the provided
|
14
14
|
* `length-unit` attribute (which will either come from the IconProvider or
|
15
15
|
* could be overridden per icon). For example:
|
16
|
-
* if `
|
16
|
+
* if `size = 1` and `length-unit = 'em'`, the size of the icon will be
|
17
17
|
* `width: 1em; height: 1em`.
|
18
18
|
*
|
19
19
|
* For accessibility the `role` and `aria-label` of the icon can be set.
|
@@ -24,16 +24,17 @@ import { Component } from '../../models';
|
|
24
24
|
declare class Icon extends Component {
|
25
25
|
private iconData?;
|
26
26
|
private lengthUnitFromContext?;
|
27
|
+
private sizeFromContext?;
|
27
28
|
/**
|
28
29
|
* Name of the icon (= filename)
|
29
30
|
*/
|
30
31
|
name?: string;
|
31
32
|
/**
|
32
|
-
*
|
33
|
+
* Size of the icon (works in combination with length unit)
|
33
34
|
*/
|
34
|
-
|
35
|
+
size?: number;
|
35
36
|
/**
|
36
|
-
* Length unit attribute for
|
37
|
+
* Length unit attribute for overriding length-unit from `IconProvider`
|
37
38
|
*/
|
38
39
|
lengthUnit?: string;
|
39
40
|
/**
|
@@ -44,7 +45,7 @@ declare class Icon extends Component {
|
|
44
45
|
* Aria-label attribute to be set for accessibility
|
45
46
|
*/
|
46
47
|
ariaLabel: string | null;
|
47
|
-
private iconProviderContext;
|
48
|
+
private readonly iconProviderContext;
|
48
49
|
/**
|
49
50
|
* Get Icon Data function which will fetch the icon (currently only svg)
|
50
51
|
* and sets state and attributes once fetched successfully
|
@@ -56,6 +57,7 @@ declare class Icon extends Component {
|
|
56
57
|
private updateSize;
|
57
58
|
private setRoleOnIcon;
|
58
59
|
private setAriaLabelOnIcon;
|
60
|
+
private get computedIconSize();
|
59
61
|
updated(changedProperties: Map<string, any>): void;
|
60
62
|
render(): import("lit-html").TemplateResult<1>;
|
61
63
|
static styles: import("lit").CSSResult[];
|
@@ -20,10 +20,10 @@ const icon_constants_1 = require("./icon.constants");
|
|
20
20
|
* Once fetched, the icon will be mounted. If fetching wasn't successful,
|
21
21
|
* nothing will be shown.
|
22
22
|
*
|
23
|
-
* The `
|
23
|
+
* The `size` attribute allows sizing the icon based on the provided
|
24
24
|
* `length-unit` attribute (which will either come from the IconProvider or
|
25
25
|
* could be overridden per icon). For example:
|
26
|
-
* if `
|
26
|
+
* if `size = 1` and `length-unit = 'em'`, the size of the icon will be
|
27
27
|
* `width: 1em; height: 1em`.
|
28
28
|
*
|
29
29
|
* For accessibility the `role` and `aria-label` of the icon can be set.
|
@@ -38,10 +38,6 @@ class Icon extends models_1.Component {
|
|
38
38
|
* Name of the icon (= filename)
|
39
39
|
*/
|
40
40
|
this.name = icon_constants_1.DEFAULTS.NAME;
|
41
|
-
/**
|
42
|
-
* Scale of the icon (works in combination with length unit)
|
43
|
-
*/
|
44
|
-
this.scale = icon_constants_1.DEFAULTS.SCALE;
|
45
41
|
/**
|
46
42
|
* Role attribute to be set for accessibility
|
47
43
|
*/
|
@@ -73,8 +69,9 @@ class Icon extends models_1.Component {
|
|
73
69
|
* Updates the size by setting the width and height
|
74
70
|
*/
|
75
71
|
updateSize() {
|
76
|
-
|
77
|
-
|
72
|
+
var _a;
|
73
|
+
if (this.computedIconSize && (this.lengthUnit || this.lengthUnitFromContext)) {
|
74
|
+
const value = `${this.computedIconSize}${(_a = this.lengthUnit) !== null && _a !== void 0 ? _a : this.lengthUnitFromContext}`;
|
78
75
|
this.style.width = value;
|
79
76
|
this.style.height = value;
|
80
77
|
}
|
@@ -99,8 +96,12 @@ class Icon extends models_1.Component {
|
|
99
96
|
(_b = this.iconData) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-label');
|
100
97
|
}
|
101
98
|
}
|
102
|
-
|
99
|
+
get computedIconSize() {
|
103
100
|
var _a, _b;
|
101
|
+
return (_b = (_a = this.size) !== null && _a !== void 0 ? _a : this.sizeFromContext) !== null && _b !== void 0 ? _b : icon_constants_1.DEFAULTS.SIZE;
|
102
|
+
}
|
103
|
+
updated(changedProperties) {
|
104
|
+
var _a, _b, _c, _d;
|
104
105
|
super.updated(changedProperties);
|
105
106
|
if (changedProperties.has('name')) {
|
106
107
|
// fetch icon data if name changes:
|
@@ -114,13 +115,17 @@ class Icon extends models_1.Component {
|
|
114
115
|
if (changedProperties.has('ariaLabel')) {
|
115
116
|
this.setAriaLabelOnIcon();
|
116
117
|
}
|
117
|
-
if (changedProperties.has('
|
118
|
+
if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
|
118
119
|
this.updateSize();
|
119
120
|
}
|
120
121
|
if (this.lengthUnitFromContext !== ((_a = this.iconProviderContext.value) === null || _a === void 0 ? void 0 : _a.lengthUnit)) {
|
121
122
|
this.lengthUnitFromContext = (_b = this.iconProviderContext.value) === null || _b === void 0 ? void 0 : _b.lengthUnit;
|
122
123
|
this.updateSize();
|
123
124
|
}
|
125
|
+
if (this.sizeFromContext !== ((_c = this.iconProviderContext.value) === null || _c === void 0 ? void 0 : _c.size)) {
|
126
|
+
this.sizeFromContext = (_d = this.iconProviderContext.value) === null || _d === void 0 ? void 0 : _d.size;
|
127
|
+
this.updateSize();
|
128
|
+
}
|
124
129
|
}
|
125
130
|
render() {
|
126
131
|
return (0, lit_1.html) ` ${this.iconData} `;
|
@@ -135,6 +140,10 @@ tslib_1.__decorate([
|
|
135
140
|
(0, decorators_js_1.state)(),
|
136
141
|
tslib_1.__metadata("design:type", String)
|
137
142
|
], Icon.prototype, "lengthUnitFromContext", void 0);
|
143
|
+
tslib_1.__decorate([
|
144
|
+
(0, decorators_js_1.state)(),
|
145
|
+
tslib_1.__metadata("design:type", Number)
|
146
|
+
], Icon.prototype, "sizeFromContext", void 0);
|
138
147
|
tslib_1.__decorate([
|
139
148
|
(0, decorators_js_1.property)({ type: String, reflect: true }),
|
140
149
|
tslib_1.__metadata("design:type", String)
|
@@ -142,7 +151,7 @@ tslib_1.__decorate([
|
|
142
151
|
tslib_1.__decorate([
|
143
152
|
(0, decorators_js_1.property)({ type: Number }),
|
144
153
|
tslib_1.__metadata("design:type", Number)
|
145
|
-
], Icon.prototype, "
|
154
|
+
], Icon.prototype, "size", void 0);
|
146
155
|
tslib_1.__decorate([
|
147
156
|
(0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
|
148
157
|
tslib_1.__metadata("design:type", String)
|
@@ -27,7 +27,12 @@ declare class IconProvider extends Provider<IconProviderContext> {
|
|
27
27
|
/**
|
28
28
|
* Length unit used for sizing of icons, default: 'em'
|
29
29
|
*/
|
30
|
-
lengthUnit
|
30
|
+
lengthUnit: string;
|
31
|
+
/**
|
32
|
+
* The default size of the icon.
|
33
|
+
* If not set, it falls back to the size defined by the length unit.
|
34
|
+
*/
|
35
|
+
size?: number;
|
31
36
|
private updateValuesInContext;
|
32
37
|
protected updateContext(): void;
|
33
38
|
}
|
@@ -31,6 +31,11 @@ class IconProvider extends models_1.Provider {
|
|
31
31
|
* Length unit used for sizing of icons, default: 'em'
|
32
32
|
*/
|
33
33
|
this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
|
34
|
+
/**
|
35
|
+
* The default size of the icon.
|
36
|
+
* If not set, it falls back to the size defined by the length unit.
|
37
|
+
*/
|
38
|
+
this.size = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT_SIZE[iconprovider_constants_1.DEFAULTS.LENGTH_UNIT];
|
34
39
|
}
|
35
40
|
static get Context() {
|
36
41
|
return iconprovider_context_1.default.context;
|
@@ -41,13 +46,17 @@ class IconProvider extends models_1.Provider {
|
|
41
46
|
this.context.value.fileExtension = this.fileExtension;
|
42
47
|
}
|
43
48
|
this.context.value.url = this.url;
|
44
|
-
this.
|
49
|
+
if (this.lengthUnit && iconprovider_constants_1.ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
|
50
|
+
this.context.value.lengthUnit = this.lengthUnit;
|
51
|
+
}
|
52
|
+
this.context.value.size = this.size;
|
45
53
|
}
|
46
54
|
updateContext() {
|
47
55
|
let shouldUpdateConsumers = false;
|
48
56
|
if (this.context.value.fileExtension !== this.fileExtension
|
49
57
|
|| this.context.value.url !== this.url
|
50
|
-
|| this.context.value.lengthUnit !== this.lengthUnit
|
58
|
+
|| this.context.value.lengthUnit !== this.lengthUnit
|
59
|
+
|| this.context.value.size !== this.size) {
|
51
60
|
this.updateValuesInContext();
|
52
61
|
shouldUpdateConsumers = true;
|
53
62
|
}
|
@@ -68,4 +77,8 @@ tslib_1.__decorate([
|
|
68
77
|
(0, decorators_js_1.property)({ type: String, attribute: 'length-unit', reflect: true }),
|
69
78
|
tslib_1.__metadata("design:type", String)
|
70
79
|
], IconProvider.prototype, "lengthUnit", void 0);
|
80
|
+
tslib_1.__decorate([
|
81
|
+
(0, decorators_js_1.property)({ type: Number, reflect: true }),
|
82
|
+
tslib_1.__metadata("design:type", Number)
|
83
|
+
], IconProvider.prototype, "size", void 0);
|
71
84
|
exports.default = IconProvider;
|
@@ -1,7 +1,9 @@
|
|
1
1
|
declare const TAG_NAME: "mdc-iconprovider";
|
2
2
|
declare const ALLOWED_FILE_EXTENSIONS: string[];
|
3
|
+
declare const ALLOWED_LENGTH_UNITS: string[];
|
3
4
|
declare const DEFAULTS: {
|
4
5
|
FILE_EXTENSION: string;
|
5
6
|
LENGTH_UNIT: string;
|
7
|
+
LENGTH_UNIT_SIZE: Record<string, number>;
|
6
8
|
};
|
7
|
-
export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };
|
9
|
+
export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };
|
@@ -1,14 +1,21 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.ALLOWED_FILE_EXTENSIONS = exports.DEFAULTS = exports.TAG_NAME = void 0;
|
3
|
+
exports.ALLOWED_LENGTH_UNITS = exports.ALLOWED_FILE_EXTENSIONS = exports.DEFAULTS = exports.TAG_NAME = void 0;
|
4
4
|
const tslib_1 = require("tslib");
|
5
5
|
const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
|
6
6
|
const TAG_NAME = tag_name_1.default.constructTagName('iconprovider');
|
7
7
|
exports.TAG_NAME = TAG_NAME;
|
8
8
|
const ALLOWED_FILE_EXTENSIONS = ['svg'];
|
9
9
|
exports.ALLOWED_FILE_EXTENSIONS = ALLOWED_FILE_EXTENSIONS;
|
10
|
+
const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
|
11
|
+
exports.ALLOWED_LENGTH_UNITS = ALLOWED_LENGTH_UNITS;
|
10
12
|
const DEFAULTS = {
|
11
13
|
FILE_EXTENSION: 'svg',
|
12
14
|
LENGTH_UNIT: 'em',
|
15
|
+
LENGTH_UNIT_SIZE: {
|
16
|
+
px: 16,
|
17
|
+
em: 1,
|
18
|
+
rem: 1,
|
19
|
+
},
|
13
20
|
};
|
14
21
|
exports.DEFAULTS = DEFAULTS;
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import { Component } from '../../models';
|
2
2
|
declare class SubComponentIconProvider extends Component {
|
3
|
-
|
4
|
-
private iconProviderContext;
|
3
|
+
private readonly iconProviderContext;
|
5
4
|
render(): import("lit-html").TemplateResult<1>;
|
6
5
|
}
|
7
6
|
declare global {
|
@@ -5,19 +5,20 @@ const lit_1 = require("lit");
|
|
5
5
|
const models_1 = require("../../models");
|
6
6
|
const iconprovider_component_1 = tslib_1.__importDefault(require("./iconprovider.component"));
|
7
7
|
const provider_1 = tslib_1.__importDefault(require("../../utils/provider"));
|
8
|
-
//
|
9
|
-
//
|
8
|
+
// SubComponent to be rendered in storybook, to showcase that the
|
9
|
+
// icon provider can be consumed as a sub component
|
10
10
|
class SubComponentIconProvider extends models_1.Component {
|
11
11
|
constructor() {
|
12
12
|
super(...arguments);
|
13
13
|
this.iconProviderContext = provider_1.default.consume({ host: this, context: iconprovider_component_1.default.Context });
|
14
14
|
}
|
15
15
|
render() {
|
16
|
-
var _a, _b, _c;
|
16
|
+
var _a, _b, _c, _d;
|
17
17
|
return (0, lit_1.html) `
|
18
18
|
<p>URL: ${(_a = this.iconProviderContext.value) === null || _a === void 0 ? void 0 : _a.url}</p>
|
19
19
|
<p>File Extension: ${(_b = this.iconProviderContext.value) === null || _b === void 0 ? void 0 : _b.fileExtension}</p>
|
20
20
|
<p>Length Unit: ${(_c = this.iconProviderContext.value) === null || _c === void 0 ? void 0 : _c.lengthUnit}</p>
|
21
|
+
<p>Default Size: ${(_d = this.iconProviderContext.value) === null || _d === void 0 ? void 0 : _d.size}</p>
|
21
22
|
`;
|
22
23
|
}
|
23
24
|
}
|
@@ -13,7 +13,7 @@ declare const isHeading: (type: FontType) => boolean;
|
|
13
13
|
declare const getRole: (type?: FontType) => "heading" | "paragraph" | null;
|
14
14
|
/**
|
15
15
|
* Get corresponding aria-level to type
|
16
|
-
* @param type type to find corresponding level for
|
16
|
+
* @param type - type to find corresponding level for
|
17
17
|
* @returns aria-level (has to be a number)
|
18
18
|
*/
|
19
19
|
declare const getAriaLevel: (type?: FontType) => string | null;
|
@@ -35,7 +35,7 @@ const getRole = (type) => {
|
|
35
35
|
exports.getRole = getRole;
|
36
36
|
/**
|
37
37
|
* Get corresponding aria-level to type
|
38
|
-
* @param type type to find corresponding level for
|
38
|
+
* @param type - type to find corresponding level for
|
39
39
|
* @returns aria-level (has to be a number)
|
40
40
|
*/
|
41
41
|
const getAriaLevel = (type) => {
|