@momentum-design/components 0.7.14 → 0.7.15
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.js +13 -13
- package/dist/browser/index.js.map +3 -3
- package/dist/components/badge/badge.component.js +2 -2
- package/dist/components/badge/badge.constants.d.ts +2 -2
- package/dist/components/badge/badge.constants.js +3 -3
- package/dist/components/badge/badge.types.d.ts +2 -2
- package/dist/components/presence/presence.component.js +22 -22
- package/dist/components/presence/presence.constants.d.ts +3 -3
- package/dist/components/presence/presence.constants.js +5 -5
- package/dist/components/presence/presence.types.d.ts +3 -3
- package/dist/components/text/text.component.d.ts +2 -2
- package/dist/components/text/text.constants.d.ts +2 -2
- package/dist/components/text/text.constants.js +3 -3
- package/dist/components/text/text.types.d.ts +2 -2
- package/dist/custom-elements.json +2 -2
- package/dist/index.d.ts +2 -0
- package/package.json +1 -1
@@ -12,8 +12,8 @@ import { classMap } from 'lit-html/directives/class-map.js';
|
|
12
12
|
import { property } from 'lit/decorators.js';
|
13
13
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
14
14
|
import { Component } from '../../models';
|
15
|
-
import { FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
|
16
|
-
import { BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
|
15
|
+
import { TYPE as FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
|
16
|
+
import { TYPE as BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
|
17
17
|
import styles from './badge.styles';
|
18
18
|
/**
|
19
19
|
* The `mdc-badge` component is a versatile UI element used to
|
@@ -1,5 +1,5 @@
|
|
1
1
|
declare const TAG_NAME: "mdc-badge";
|
2
|
-
declare const
|
2
|
+
declare const TYPE: {
|
3
3
|
readonly DOT: "dot";
|
4
4
|
readonly ICON: "icon";
|
5
5
|
readonly COUNTER: "counter";
|
@@ -35,4 +35,4 @@ declare const DEFAULTS: {
|
|
35
35
|
readonly VARIANT: "primary";
|
36
36
|
readonly ICON_SIZE: 1;
|
37
37
|
};
|
38
|
-
export { TAG_NAME, DEFAULTS,
|
38
|
+
export { TAG_NAME, DEFAULTS, TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, BACKGROUND_STYLES };
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import utils from '../../utils/tag-name';
|
2
2
|
const TAG_NAME = utils.constructTagName('badge');
|
3
|
-
const
|
3
|
+
const TYPE = {
|
4
4
|
DOT: 'dot',
|
5
5
|
ICON: 'icon',
|
6
6
|
COUNTER: 'counter',
|
@@ -27,10 +27,10 @@ const BACKGROUND_STYLES = {
|
|
27
27
|
...ICON_STATE,
|
28
28
|
};
|
29
29
|
const DEFAULTS = {
|
30
|
-
TYPE:
|
30
|
+
TYPE: TYPE.DOT,
|
31
31
|
MAX_COUNTER: 99,
|
32
32
|
MAX_COUNTER_LIMIT: 999,
|
33
33
|
VARIANT: ICON_VARIANT.PRIMARY,
|
34
34
|
ICON_SIZE: 1,
|
35
35
|
};
|
36
|
-
export { TAG_NAME, DEFAULTS,
|
36
|
+
export { TAG_NAME, DEFAULTS, TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, BACKGROUND_STYLES };
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import type { ValueOf } from '../../utils/types';
|
2
|
-
import {
|
2
|
+
import { TYPE, ICON_VARIANT } from './badge.constants';
|
3
3
|
export type IconVariant = ValueOf<typeof ICON_VARIANT>;
|
4
|
-
export type BadgeType = ValueOf<typeof
|
4
|
+
export type BadgeType = ValueOf<typeof TYPE>;
|
@@ -10,7 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
|
10
10
|
import { html } from 'lit';
|
11
11
|
import { property } from 'lit/decorators.js';
|
12
12
|
import { Component } from '../../models';
|
13
|
-
import { DEFAULTS,
|
13
|
+
import { DEFAULTS, SIZE, TYPE } from './presence.constants';
|
14
14
|
import styles from './presence.styles';
|
15
15
|
/**
|
16
16
|
* The `mdc-presence` component is a versatile UI element used to
|
@@ -63,17 +63,17 @@ class Presence extends Component {
|
|
63
63
|
*/
|
64
64
|
get iconSize() {
|
65
65
|
switch (this.size) {
|
66
|
-
case
|
66
|
+
case SIZE.MIDSIZE:
|
67
67
|
return 1.16125;
|
68
|
-
case
|
68
|
+
case SIZE.LARGE:
|
69
69
|
return 1.30625;
|
70
|
-
case
|
70
|
+
case SIZE.X_LARGE:
|
71
71
|
return 1.596875;
|
72
|
-
case
|
72
|
+
case SIZE.XX_LARGE:
|
73
73
|
return 2.25;
|
74
|
-
case
|
75
|
-
case
|
76
|
-
case
|
74
|
+
case SIZE.XX_SMALL:
|
75
|
+
case SIZE.X_SMALL:
|
76
|
+
case SIZE.SMALL:
|
77
77
|
default:
|
78
78
|
this.size = DEFAULTS.SIZE;
|
79
79
|
return 0.875;
|
@@ -84,33 +84,33 @@ class Presence extends Component {
|
|
84
84
|
*/
|
85
85
|
get icon() {
|
86
86
|
switch (this.type) {
|
87
|
-
case
|
87
|
+
case TYPE.AWAY:
|
88
88
|
return 'recents-presence-badge-filled';
|
89
|
-
case
|
89
|
+
case TYPE.AWAY_CALLING:
|
90
90
|
return 'away-calling-presence-filled';
|
91
|
-
case
|
91
|
+
case TYPE.BUSY:
|
92
92
|
return 'busy-presence-bold';
|
93
|
-
case
|
93
|
+
case TYPE.DND:
|
94
94
|
return 'dnd-presence-badge-filled';
|
95
|
-
case
|
95
|
+
case TYPE.MEETING:
|
96
96
|
return 'camera-filled';
|
97
|
-
case
|
97
|
+
case TYPE.ON_CALL:
|
98
98
|
return 'handset-filled';
|
99
|
-
case
|
99
|
+
case TYPE.ON_DEVICE:
|
100
100
|
return 'generic-device-video-badge-filled';
|
101
|
-
case
|
101
|
+
case TYPE.ON_MOBILE:
|
102
102
|
return 'phone-badge-filled';
|
103
|
-
case
|
103
|
+
case TYPE.PAUSE:
|
104
104
|
return 'pause-badge-filled';
|
105
|
-
case
|
105
|
+
case TYPE.PTO:
|
106
106
|
return 'pto-presence-filled';
|
107
|
-
case
|
107
|
+
case TYPE.PRESENTING:
|
108
108
|
return 'share-screen-badge-filled';
|
109
|
-
case
|
109
|
+
case TYPE.QUIET:
|
110
110
|
return 'quiet-hours-presence-filled';
|
111
|
-
case
|
111
|
+
case TYPE.SCHEDULED:
|
112
112
|
return 'meetings-presence-badge-filled';
|
113
|
-
case
|
113
|
+
case TYPE.ACTIVE:
|
114
114
|
default:
|
115
115
|
this.type = DEFAULTS.TYPE;
|
116
116
|
return 'active-presence-small-filled';
|
@@ -1,5 +1,5 @@
|
|
1
1
|
declare const TAG_NAME: "mdc-presence";
|
2
|
-
declare const
|
2
|
+
declare const TYPE: {
|
3
3
|
readonly ACTIVE: "active";
|
4
4
|
readonly AWAY: "away";
|
5
5
|
readonly AWAY_CALLING: "away-calling";
|
@@ -15,7 +15,7 @@ declare const PRESENCE_TYPE: {
|
|
15
15
|
readonly QUIET: "quiet";
|
16
16
|
readonly SCHEDULED: "scheduled";
|
17
17
|
};
|
18
|
-
declare const
|
18
|
+
declare const SIZE: {
|
19
19
|
readonly XX_SMALL: "xx_small";
|
20
20
|
readonly X_SMALL: "x_small";
|
21
21
|
readonly SMALL: "small";
|
@@ -28,4 +28,4 @@ declare const DEFAULTS: {
|
|
28
28
|
readonly TYPE: "active";
|
29
29
|
readonly SIZE: "small";
|
30
30
|
};
|
31
|
-
export { TAG_NAME, DEFAULTS,
|
31
|
+
export { TAG_NAME, DEFAULTS, TYPE, SIZE };
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import utils from '../../utils/tag-name';
|
2
2
|
const TAG_NAME = utils.constructTagName('presence');
|
3
|
-
const
|
3
|
+
const TYPE = {
|
4
4
|
ACTIVE: 'active',
|
5
5
|
AWAY: 'away',
|
6
6
|
AWAY_CALLING: 'away-calling',
|
@@ -16,7 +16,7 @@ const PRESENCE_TYPE = {
|
|
16
16
|
QUIET: 'quiet',
|
17
17
|
SCHEDULED: 'scheduled',
|
18
18
|
};
|
19
|
-
const
|
19
|
+
const SIZE = {
|
20
20
|
XX_SMALL: 'xx_small',
|
21
21
|
X_SMALL: 'x_small',
|
22
22
|
SMALL: 'small',
|
@@ -26,7 +26,7 @@ const PRESENCE_SIZE = {
|
|
26
26
|
XX_LARGE: 'xx_large',
|
27
27
|
};
|
28
28
|
const DEFAULTS = {
|
29
|
-
TYPE:
|
30
|
-
SIZE:
|
29
|
+
TYPE: TYPE.ACTIVE,
|
30
|
+
SIZE: SIZE.SMALL,
|
31
31
|
};
|
32
|
-
export { TAG_NAME, DEFAULTS,
|
32
|
+
export { TAG_NAME, DEFAULTS, TYPE, SIZE };
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import type { ValueOf } from '../../utils/types';
|
2
|
-
import {
|
3
|
-
export type PresenceType = ValueOf<typeof
|
4
|
-
export type PresenceSize = ValueOf<typeof
|
2
|
+
import { TYPE, SIZE } from './presence.constants';
|
3
|
+
export type PresenceType = ValueOf<typeof TYPE>;
|
4
|
+
export type PresenceSize = ValueOf<typeof SIZE>;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { CSSResult } from 'lit';
|
2
2
|
import { Component } from '../../models';
|
3
|
-
import type {
|
3
|
+
import type { TextType, TagName } from './text.types';
|
4
4
|
/**
|
5
5
|
* Text component for creating styled text elements.
|
6
6
|
* It has to be mounted within the ThemeProvider to access color and font tokens.
|
@@ -56,7 +56,7 @@ declare class Text extends Component {
|
|
56
56
|
* - 'headline-small-regular'
|
57
57
|
* @default body-large-regular
|
58
58
|
*/
|
59
|
-
type:
|
59
|
+
type: TextType;
|
60
60
|
/**
|
61
61
|
* Specifies the HTML tag name for the text element. The default tag name is `p`.
|
62
62
|
* This attribute is optional. When set, it changes the tag name of the text element.
|
@@ -1,5 +1,5 @@
|
|
1
1
|
declare const TAG_NAME: "mdc-text";
|
2
|
-
declare const
|
2
|
+
declare const TYPE: {
|
3
3
|
readonly BODY_SMALL_REGULAR: "body-small-regular";
|
4
4
|
readonly BODY_SMALL_MEDIUM: "body-small-medium";
|
5
5
|
readonly BODY_SMALL_BOLD: "body-small-bold";
|
@@ -48,4 +48,4 @@ declare const DEFAULTS: {
|
|
48
48
|
readonly CSS_PART_TEXT: "text";
|
49
49
|
readonly CHILDREN: "The quick brown fox jumps over the lazy dog";
|
50
50
|
};
|
51
|
-
export { TAG_NAME, DEFAULTS,
|
51
|
+
export { TAG_NAME, DEFAULTS, TYPE, VALID_TEXT_TAGS };
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import utils from '../../utils/tag-name';
|
2
2
|
const TAG_NAME = utils.constructTagName('text');
|
3
|
-
const
|
3
|
+
const TYPE = {
|
4
4
|
BODY_SMALL_REGULAR: 'body-small-regular',
|
5
5
|
BODY_SMALL_MEDIUM: 'body-small-medium',
|
6
6
|
BODY_SMALL_BOLD: 'body-small-bold',
|
@@ -44,9 +44,9 @@ const VALID_TEXT_TAGS = {
|
|
44
44
|
DIV: 'div',
|
45
45
|
};
|
46
46
|
const DEFAULTS = {
|
47
|
-
TYPE:
|
47
|
+
TYPE: TYPE.BODY_LARGE_REGULAR,
|
48
48
|
TEXT_ELEMENT_TAGNAME: VALID_TEXT_TAGS.P,
|
49
49
|
CSS_PART_TEXT: 'text',
|
50
50
|
CHILDREN: 'The quick brown fox jumps over the lazy dog',
|
51
51
|
};
|
52
|
-
export { TAG_NAME, DEFAULTS,
|
52
|
+
export { TAG_NAME, DEFAULTS, TYPE, VALID_TEXT_TAGS };
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import { TYPE, VALID_TEXT_TAGS } from './text.constants';
|
2
2
|
import type { ValueOf } from '../../utils/types';
|
3
|
-
export type
|
3
|
+
export type TextType = ValueOf<typeof TYPE>;
|
4
4
|
export type TagName = ValueOf<typeof VALID_TEXT_TAGS>;
|
@@ -796,7 +796,7 @@
|
|
796
796
|
"kind": "field",
|
797
797
|
"name": "type",
|
798
798
|
"type": {
|
799
|
-
"text": "
|
799
|
+
"text": "TextType"
|
800
800
|
},
|
801
801
|
"privacy": "public",
|
802
802
|
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
@@ -820,7 +820,7 @@
|
|
820
820
|
{
|
821
821
|
"name": "type",
|
822
822
|
"type": {
|
823
|
-
"text": "
|
823
|
+
"text": "TextType"
|
824
824
|
},
|
825
825
|
"description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
|
826
826
|
"default": "body-large-regular",
|
package/dist/index.d.ts
CHANGED
@@ -5,4 +5,6 @@ import Avatar from './components/avatar';
|
|
5
5
|
import Badge from './components/badge';
|
6
6
|
import Presence from './components/presence';
|
7
7
|
import Text from './components/text';
|
8
|
+
import type { TextType } from './components/text/text.types';
|
8
9
|
export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, };
|
10
|
+
export type { TextType, };
|
package/package.json
CHANGED