@momentum-design/components 0.7.7 → 0.7.8
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 +17 -17
- package/dist/browser/index.js.map +3 -3
- package/dist/components/badge/badge.component.d.ts +4 -0
- package/dist/components/badge/badge.component.js +4 -0
- package/dist/components/iconprovider/iconprovider.component.d.ts +5 -2
- package/dist/components/iconprovider/iconprovider.component.js +6 -3
- package/dist/components/iconprovider/iconprovider.constants.d.ts +3 -2
- package/dist/components/iconprovider/iconprovider.constants.js +7 -6
- package/dist/components/presence/presence.component.d.ts +2 -2
- package/dist/components/presence/presence.component.js +2 -2
- package/dist/components/text/text.component.d.ts +1 -0
- package/dist/components/text/text.component.js +1 -0
- package/dist/custom-elements.json +192 -178
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
@@ -37,6 +37,7 @@ declare class Badge extends Component {
|
|
37
37
|
/**
|
38
38
|
* Type of the variant can be `primary` or `secondary`.
|
39
39
|
* It defines the background and foreground color of the icon.
|
40
|
+
* @default primary
|
40
41
|
*/
|
41
42
|
variant: string;
|
42
43
|
/**
|
@@ -46,16 +47,19 @@ declare class Badge extends Component {
|
|
46
47
|
/**
|
47
48
|
* The maximum number can be set up to 999, anything above that will be rendered as _999+_.
|
48
49
|
* The max counter can be `9`, `99` or `999`.
|
50
|
+
* @default 99
|
49
51
|
*/
|
50
52
|
maxCounter: number;
|
51
53
|
/**
|
52
54
|
* Overlay is to add a thin outline to the badge.
|
53
55
|
* This will help distinguish between the badge and the button,
|
54
56
|
* where the badge will be layered on top of a button.
|
57
|
+
* @default false
|
55
58
|
*/
|
56
59
|
overlay: boolean;
|
57
60
|
/**
|
58
61
|
* Aria-label attribute to be set for accessibility
|
62
|
+
* @default null
|
59
63
|
*/
|
60
64
|
ariaLabel: string | null;
|
61
65
|
/**
|
@@ -43,21 +43,25 @@ class Badge extends Component {
|
|
43
43
|
/**
|
44
44
|
* Type of the variant can be `primary` or `secondary`.
|
45
45
|
* It defines the background and foreground color of the icon.
|
46
|
+
* @default primary
|
46
47
|
*/
|
47
48
|
this.variant = DEFAULTS.VARIANT;
|
48
49
|
/**
|
49
50
|
* The maximum number can be set up to 999, anything above that will be rendered as _999+_.
|
50
51
|
* The max counter can be `9`, `99` or `999`.
|
52
|
+
* @default 99
|
51
53
|
*/
|
52
54
|
this.maxCounter = DEFAULTS.MAX_COUNTER;
|
53
55
|
/**
|
54
56
|
* Overlay is to add a thin outline to the badge.
|
55
57
|
* This will help distinguish between the badge and the button,
|
56
58
|
* where the badge will be layered on top of a button.
|
59
|
+
* @default false
|
57
60
|
*/
|
58
61
|
this.overlay = false;
|
59
62
|
/**
|
60
63
|
* Aria-label attribute to be set for accessibility
|
64
|
+
* @default null
|
61
65
|
*/
|
62
66
|
this.ariaLabel = null;
|
63
67
|
}
|
@@ -25,16 +25,19 @@ declare class IconProvider extends Provider<IconProviderContext> {
|
|
25
25
|
*/
|
26
26
|
url?: string;
|
27
27
|
/**
|
28
|
-
* File extension of icons
|
28
|
+
* File extension of icons
|
29
|
+
* @default svg
|
29
30
|
*/
|
30
31
|
fileExtension?: string;
|
31
32
|
/**
|
32
|
-
* Length unit used for sizing of icons
|
33
|
+
* Length unit used for sizing of icons
|
34
|
+
* @default em
|
33
35
|
*/
|
34
36
|
lengthUnit: string;
|
35
37
|
/**
|
36
38
|
* The default size of the icon.
|
37
39
|
* If not set, it falls back to the size defined by the length unit.
|
40
|
+
* @default 1
|
38
41
|
*/
|
39
42
|
size?: number;
|
40
43
|
private updateValuesInContext;
|
@@ -31,18 +31,21 @@ class IconProvider extends Provider {
|
|
31
31
|
initialValue: new IconProviderContext(),
|
32
32
|
});
|
33
33
|
/**
|
34
|
-
* File extension of icons
|
34
|
+
* File extension of icons
|
35
|
+
* @default svg
|
35
36
|
*/
|
36
37
|
this.fileExtension = DEFAULTS.FILE_EXTENSION;
|
37
38
|
/**
|
38
|
-
* Length unit used for sizing of icons
|
39
|
+
* Length unit used for sizing of icons
|
40
|
+
* @default em
|
39
41
|
*/
|
40
42
|
this.lengthUnit = DEFAULTS.LENGTH_UNIT;
|
41
43
|
/**
|
42
44
|
* The default size of the icon.
|
43
45
|
* If not set, it falls back to the size defined by the length unit.
|
46
|
+
* @default 1
|
44
47
|
*/
|
45
|
-
this.size = DEFAULTS.
|
48
|
+
this.size = DEFAULTS.SIZE;
|
46
49
|
}
|
47
50
|
/**
|
48
51
|
* Context object of the IconProvider, to be consumed by child components
|
@@ -1,9 +1,10 @@
|
|
1
1
|
declare const TAG_NAME: "mdc-iconprovider";
|
2
2
|
declare const ALLOWED_FILE_EXTENSIONS: string[];
|
3
3
|
declare const ALLOWED_LENGTH_UNITS: string[];
|
4
|
+
declare const LENGTH_UNIT_SIZE: Record<string, number>;
|
4
5
|
declare const DEFAULTS: {
|
5
6
|
FILE_EXTENSION: string;
|
6
7
|
LENGTH_UNIT: string;
|
7
|
-
|
8
|
+
SIZE: number;
|
8
9
|
};
|
9
|
-
export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };
|
10
|
+
export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };
|
@@ -2,13 +2,14 @@ import utils from '../../utils/tag-name';
|
|
2
2
|
const TAG_NAME = utils.constructTagName('iconprovider');
|
3
3
|
const ALLOWED_FILE_EXTENSIONS = ['svg'];
|
4
4
|
const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
|
5
|
+
const LENGTH_UNIT_SIZE = {
|
6
|
+
px: 16,
|
7
|
+
em: 1,
|
8
|
+
rem: 1,
|
9
|
+
};
|
5
10
|
const DEFAULTS = {
|
6
11
|
FILE_EXTENSION: 'svg',
|
7
12
|
LENGTH_UNIT: 'em',
|
8
|
-
|
9
|
-
px: 16,
|
10
|
-
em: 1,
|
11
|
-
rem: 1,
|
12
|
-
},
|
13
|
+
SIZE: LENGTH_UNIT_SIZE.em,
|
13
14
|
};
|
14
|
-
export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };
|
15
|
+
export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };
|
@@ -28,7 +28,7 @@ declare class Presence extends Component {
|
|
28
28
|
* - `presenting`
|
29
29
|
* - `quiet`
|
30
30
|
* - `scheduled`
|
31
|
-
*
|
31
|
+
* @default active
|
32
32
|
*/
|
33
33
|
type: string;
|
34
34
|
/**
|
@@ -40,7 +40,7 @@ declare class Presence extends Component {
|
|
40
40
|
* - LARGE
|
41
41
|
* - X_LARGE
|
42
42
|
* - XX_LARGE
|
43
|
-
*
|
43
|
+
* @default small
|
44
44
|
*/
|
45
45
|
size: string;
|
46
46
|
/**
|
@@ -42,7 +42,7 @@ class Presence extends Component {
|
|
42
42
|
* - `presenting`
|
43
43
|
* - `quiet`
|
44
44
|
* - `scheduled`
|
45
|
-
*
|
45
|
+
* @default active
|
46
46
|
*/
|
47
47
|
this.type = DEFAULTS.TYPE;
|
48
48
|
/**
|
@@ -54,7 +54,7 @@ class Presence extends Component {
|
|
54
54
|
* - LARGE
|
55
55
|
* - X_LARGE
|
56
56
|
* - XX_LARGE
|
57
|
-
*
|
57
|
+
* @default small
|
58
58
|
*/
|
59
59
|
this.size = DEFAULTS.SIZE;
|
60
60
|
}
|