@momentum-design/components 0.5.1 → 0.5.2
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 +140 -24
- package/dist/browser/index.js.map +4 -4
- package/dist/components/presence/index.d.ts +8 -0
- package/dist/components/presence/index.js +5 -0
- package/dist/components/presence/presence.component.d.ts +57 -0
- package/dist/components/presence/presence.component.js +138 -0
- package/dist/components/presence/presence.constants.d.ts +31 -0
- package/dist/components/presence/presence.constants.js +32 -0
- package/dist/components/presence/presence.styles.d.ts +2 -0
- package/dist/components/presence/presence.styles.js +115 -0
- package/dist/custom-elements.json +70 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.js +1 -0
- package/dist/react/presence/index.d.ts +14 -0
- package/dist/react/presence/index.js +23 -0
- package/package.json +1 -1
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { CSSResult } from 'lit';
|
|
2
|
+
import { Component } from '../../models';
|
|
3
|
+
/**
|
|
4
|
+
* The `mdc-presence` component is a versatile UI element used to
|
|
5
|
+
* display the presence status of a user or entity within an avatar component.
|
|
6
|
+
*
|
|
7
|
+
* This component is ideal for use within avatar UIs where the presence status
|
|
8
|
+
* needs to be visually represented.
|
|
9
|
+
*
|
|
10
|
+
* @dependency mdc-icon
|
|
11
|
+
*
|
|
12
|
+
* @tagname mdc-presence
|
|
13
|
+
*/
|
|
14
|
+
declare class Presence extends Component {
|
|
15
|
+
/**
|
|
16
|
+
* Supported presence types:
|
|
17
|
+
* - `active`
|
|
18
|
+
* - `away`
|
|
19
|
+
* - `away-calling`
|
|
20
|
+
* - `busy`
|
|
21
|
+
* - `dnd`
|
|
22
|
+
* - `meeting`
|
|
23
|
+
* - `on-call`
|
|
24
|
+
* - `on-device`
|
|
25
|
+
* - `on-mobile`
|
|
26
|
+
* - `pause`
|
|
27
|
+
* - `pto`
|
|
28
|
+
* - `presenting`
|
|
29
|
+
* - `quiet`
|
|
30
|
+
* - `scheduled`
|
|
31
|
+
*
|
|
32
|
+
*/
|
|
33
|
+
type: string;
|
|
34
|
+
/**
|
|
35
|
+
* Acceptable values include:
|
|
36
|
+
* - XX_SMALL
|
|
37
|
+
* - X_SMALL
|
|
38
|
+
* - SMALL
|
|
39
|
+
* - MIDSIZE
|
|
40
|
+
* - LARGE
|
|
41
|
+
* - X_LARGE
|
|
42
|
+
* - XX_LARGE
|
|
43
|
+
*
|
|
44
|
+
*/
|
|
45
|
+
size: string;
|
|
46
|
+
/**
|
|
47
|
+
* Get the size of the presence icon based on the given size type
|
|
48
|
+
*/
|
|
49
|
+
private get iconSize();
|
|
50
|
+
/**
|
|
51
|
+
* Get the icon name based on the presence type
|
|
52
|
+
*/
|
|
53
|
+
private get icon();
|
|
54
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
55
|
+
static styles: Array<CSSResult>;
|
|
56
|
+
}
|
|
57
|
+
export default Presence;
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
+
};
|
|
10
|
+
import { html } from 'lit';
|
|
11
|
+
import { property } from 'lit/decorators.js';
|
|
12
|
+
import { Component } from '../../models';
|
|
13
|
+
import { DEFAULTS } from './presence.constants';
|
|
14
|
+
import styles from './presence.styles';
|
|
15
|
+
/**
|
|
16
|
+
* The `mdc-presence` component is a versatile UI element used to
|
|
17
|
+
* display the presence status of a user or entity within an avatar component.
|
|
18
|
+
*
|
|
19
|
+
* This component is ideal for use within avatar UIs where the presence status
|
|
20
|
+
* needs to be visually represented.
|
|
21
|
+
*
|
|
22
|
+
* @dependency mdc-icon
|
|
23
|
+
*
|
|
24
|
+
* @tagname mdc-presence
|
|
25
|
+
*/
|
|
26
|
+
class Presence extends Component {
|
|
27
|
+
constructor() {
|
|
28
|
+
super(...arguments);
|
|
29
|
+
/**
|
|
30
|
+
* Supported presence types:
|
|
31
|
+
* - `active`
|
|
32
|
+
* - `away`
|
|
33
|
+
* - `away-calling`
|
|
34
|
+
* - `busy`
|
|
35
|
+
* - `dnd`
|
|
36
|
+
* - `meeting`
|
|
37
|
+
* - `on-call`
|
|
38
|
+
* - `on-device`
|
|
39
|
+
* - `on-mobile`
|
|
40
|
+
* - `pause`
|
|
41
|
+
* - `pto`
|
|
42
|
+
* - `presenting`
|
|
43
|
+
* - `quiet`
|
|
44
|
+
* - `scheduled`
|
|
45
|
+
*
|
|
46
|
+
*/
|
|
47
|
+
this.type = DEFAULTS.TYPE;
|
|
48
|
+
/**
|
|
49
|
+
* Acceptable values include:
|
|
50
|
+
* - XX_SMALL
|
|
51
|
+
* - X_SMALL
|
|
52
|
+
* - SMALL
|
|
53
|
+
* - MIDSIZE
|
|
54
|
+
* - LARGE
|
|
55
|
+
* - X_LARGE
|
|
56
|
+
* - XX_LARGE
|
|
57
|
+
*
|
|
58
|
+
*/
|
|
59
|
+
this.size = DEFAULTS.SIZE;
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Get the size of the presence icon based on the given size type
|
|
63
|
+
*/
|
|
64
|
+
get iconSize() {
|
|
65
|
+
switch (this.size) {
|
|
66
|
+
case 'midsize':
|
|
67
|
+
return 1.16125;
|
|
68
|
+
case 'large':
|
|
69
|
+
return 1.30625;
|
|
70
|
+
case 'x_large':
|
|
71
|
+
return 1.596875;
|
|
72
|
+
case 'xx_large':
|
|
73
|
+
return 2.25;
|
|
74
|
+
case 'xx_small':
|
|
75
|
+
case 'x_small':
|
|
76
|
+
case 'small':
|
|
77
|
+
default:
|
|
78
|
+
return 0.875;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Get the icon name based on the presence type
|
|
83
|
+
*/
|
|
84
|
+
get icon() {
|
|
85
|
+
switch (this.type) {
|
|
86
|
+
case 'away':
|
|
87
|
+
return 'recents-presence-badge-filled';
|
|
88
|
+
case 'away-calling':
|
|
89
|
+
return 'away-calling-presence-filled';
|
|
90
|
+
case 'busy':
|
|
91
|
+
return 'busy-presence-bold';
|
|
92
|
+
case 'dnd':
|
|
93
|
+
return 'dnd-presence-badge-filled';
|
|
94
|
+
case 'meeting':
|
|
95
|
+
return 'camera-filled';
|
|
96
|
+
case 'on-call':
|
|
97
|
+
return 'handset-filled';
|
|
98
|
+
case 'on-device':
|
|
99
|
+
return 'generic-device-video-badge-filled';
|
|
100
|
+
case 'on-mobile':
|
|
101
|
+
return 'phone-badge-filled';
|
|
102
|
+
case 'pause':
|
|
103
|
+
return 'pause-badge-filled';
|
|
104
|
+
case 'pto':
|
|
105
|
+
return 'pto-presence-filled';
|
|
106
|
+
case 'presenting':
|
|
107
|
+
return 'share-screen-badge-filled';
|
|
108
|
+
case 'quiet':
|
|
109
|
+
return 'quiet-hours-presence-filled';
|
|
110
|
+
case 'scheduled':
|
|
111
|
+
return 'meetings-presence-badge-filled';
|
|
112
|
+
case 'active':
|
|
113
|
+
default:
|
|
114
|
+
return 'active-presence-small-filled';
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
render() {
|
|
118
|
+
return html `
|
|
119
|
+
<div class="mdc-presence mdc-presence__${this.size}">
|
|
120
|
+
<mdc-icon
|
|
121
|
+
class="mdc-presence-icon mdc-presence-icon__${this.type}"
|
|
122
|
+
name="${this.icon}"
|
|
123
|
+
size="${this.iconSize}"
|
|
124
|
+
></mdc-icon>
|
|
125
|
+
</div>
|
|
126
|
+
`;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
Presence.styles = [...Component.styles, ...styles];
|
|
130
|
+
__decorate([
|
|
131
|
+
property({ type: String, reflect: true }),
|
|
132
|
+
__metadata("design:type", Object)
|
|
133
|
+
], Presence.prototype, "type", void 0);
|
|
134
|
+
__decorate([
|
|
135
|
+
property({ type: String, reflect: true }),
|
|
136
|
+
__metadata("design:type", Object)
|
|
137
|
+
], Presence.prototype, "size", void 0);
|
|
138
|
+
export default Presence;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
declare const TAG_NAME: "mdc-presence";
|
|
2
|
+
declare const PRESENCE_TYPE: {
|
|
3
|
+
ACTIVE: string;
|
|
4
|
+
AWAY: string;
|
|
5
|
+
AWAY_CALLING: string;
|
|
6
|
+
BUSY: string;
|
|
7
|
+
DND: string;
|
|
8
|
+
MEETING: string;
|
|
9
|
+
ON_CALL: string;
|
|
10
|
+
ON_DEVICE: string;
|
|
11
|
+
ON_MOBILE: string;
|
|
12
|
+
PAUSE: string;
|
|
13
|
+
PTO: string;
|
|
14
|
+
PRESENTING: string;
|
|
15
|
+
QUIET: string;
|
|
16
|
+
SCHEDULED: string;
|
|
17
|
+
};
|
|
18
|
+
declare const PRESENCE_SIZE: {
|
|
19
|
+
XX_SMALL: string;
|
|
20
|
+
X_SMALL: string;
|
|
21
|
+
SMALL: string;
|
|
22
|
+
MIDSIZE: string;
|
|
23
|
+
LARGE: string;
|
|
24
|
+
X_LARGE: string;
|
|
25
|
+
XX_LARGE: string;
|
|
26
|
+
};
|
|
27
|
+
declare const DEFAULTS: {
|
|
28
|
+
TYPE: string;
|
|
29
|
+
SIZE: string;
|
|
30
|
+
};
|
|
31
|
+
export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import utils from '../../utils/tag-name';
|
|
2
|
+
const TAG_NAME = utils.constructTagName('presence');
|
|
3
|
+
const PRESENCE_TYPE = {
|
|
4
|
+
ACTIVE: 'active',
|
|
5
|
+
AWAY: 'away',
|
|
6
|
+
AWAY_CALLING: 'away-calling',
|
|
7
|
+
BUSY: 'busy',
|
|
8
|
+
DND: 'dnd',
|
|
9
|
+
MEETING: 'meeting',
|
|
10
|
+
ON_CALL: 'on-call',
|
|
11
|
+
ON_DEVICE: 'on-device',
|
|
12
|
+
ON_MOBILE: 'on-mobile',
|
|
13
|
+
PAUSE: 'pause',
|
|
14
|
+
PTO: 'pto',
|
|
15
|
+
PRESENTING: 'presenting',
|
|
16
|
+
QUIET: 'quiet',
|
|
17
|
+
SCHEDULED: 'scheduled',
|
|
18
|
+
};
|
|
19
|
+
const PRESENCE_SIZE = {
|
|
20
|
+
XX_SMALL: 'xx_small',
|
|
21
|
+
X_SMALL: 'x_small',
|
|
22
|
+
SMALL: 'small',
|
|
23
|
+
MIDSIZE: 'midsize',
|
|
24
|
+
LARGE: 'large',
|
|
25
|
+
X_LARGE: 'x_large',
|
|
26
|
+
XX_LARGE: 'xx_large',
|
|
27
|
+
};
|
|
28
|
+
const DEFAULTS = {
|
|
29
|
+
TYPE: PRESENCE_TYPE.ACTIVE,
|
|
30
|
+
SIZE: PRESENCE_SIZE.SMALL,
|
|
31
|
+
};
|
|
32
|
+
export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
import { hostFitContentStyles } from '../../utils/styles';
|
|
3
|
+
const styles = [
|
|
4
|
+
hostFitContentStyles,
|
|
5
|
+
css `
|
|
6
|
+
:host {
|
|
7
|
+
--mdc-presence-active-background-color: var(--mds-color-theme-indicator-stable);
|
|
8
|
+
|
|
9
|
+
--mdc-presence-away-background-color: var(--mds-color-theme-indicator-locked);
|
|
10
|
+
|
|
11
|
+
--mdc-presence-away-calling-background-color: var(--mds-color-theme-indicator-locked);
|
|
12
|
+
|
|
13
|
+
--mdc-presence-busy-background-color: var(--mds-color-theme-indicator-unstable);
|
|
14
|
+
|
|
15
|
+
--mdc-presence-dnd-background-color: var(--mds-color-theme-indicator-attention);
|
|
16
|
+
|
|
17
|
+
--mdc-presence-meeting-background-color: var(--mds-color-theme-indicator-unstable);
|
|
18
|
+
|
|
19
|
+
--mdc-presence-on-call-background-color: var(--mds-color-theme-indicator-unstable);
|
|
20
|
+
|
|
21
|
+
--mdc-presence-on-device-background-color: var(--mds-color-theme-indicator-locked);
|
|
22
|
+
|
|
23
|
+
--mdc-presence-on-mobile-background-color: var(--mds-color-theme-indicator-locked);
|
|
24
|
+
|
|
25
|
+
--mdc-presence-pause-background-color: var(--mds-color-theme-indicator-locked);
|
|
26
|
+
|
|
27
|
+
--mdc-presence-pto-background-color: var(--mds-color-theme-indicator-locked);
|
|
28
|
+
|
|
29
|
+
--mdc-presence-presenting-background-color: var(--mds-color-theme-indicator-attention);
|
|
30
|
+
|
|
31
|
+
--mdc-presence-quiet-background-color: var(--mds-color-theme-indicator-locked);
|
|
32
|
+
|
|
33
|
+
--mdc-presence-scheduled-background-color: var(--mds-color-theme-indicator-unstable);
|
|
34
|
+
|
|
35
|
+
--mdc-presence-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.mdc-presence {
|
|
39
|
+
border-radius: 50%;
|
|
40
|
+
background-color: var(--mdc-presence-overlay-background-color);
|
|
41
|
+
display: flex;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
align-items: center;
|
|
44
|
+
}
|
|
45
|
+
.mdc-presence__xx_small,
|
|
46
|
+
.mdc-presence__x_small,
|
|
47
|
+
.mdc-presence__small {
|
|
48
|
+
width: 1.0625rem;
|
|
49
|
+
height: 1.0625rem;
|
|
50
|
+
}
|
|
51
|
+
.mdc-presence__midsize {
|
|
52
|
+
width: 1.419375rem;
|
|
53
|
+
height: 1.419375rem;
|
|
54
|
+
}
|
|
55
|
+
.mdc-presence__large {
|
|
56
|
+
width: 1.596875rem;
|
|
57
|
+
height: 1.596875rem;
|
|
58
|
+
}
|
|
59
|
+
.mdc-presence__x_large {
|
|
60
|
+
width: 1.951875rem;
|
|
61
|
+
height: 1.951875rem;
|
|
62
|
+
}
|
|
63
|
+
.mdc-presence__xx_large {
|
|
64
|
+
width: 2.75rem;
|
|
65
|
+
height: 2.75rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.mdc-presence-icon {
|
|
69
|
+
border-radius: 50%;
|
|
70
|
+
}
|
|
71
|
+
.mdc-presence-icon__active {
|
|
72
|
+
color: var(--mdc-presence-active-background-color);
|
|
73
|
+
}
|
|
74
|
+
.mdc-presence-icon__away {
|
|
75
|
+
color: var(--mdc-presence-away-background-color);
|
|
76
|
+
}
|
|
77
|
+
.mdc-presence-icon__away-calling {
|
|
78
|
+
color: var(--mdc-presence-away-calling-background-color);
|
|
79
|
+
}
|
|
80
|
+
.mdc-presence-icon__busy {
|
|
81
|
+
color: var(--mdc-presence-busy-background-color);
|
|
82
|
+
}
|
|
83
|
+
.mdc-presence-icon__dnd {
|
|
84
|
+
color: var(--mdc-presence-dnd-background-color);
|
|
85
|
+
}
|
|
86
|
+
.mdc-presence-icon__meeting {
|
|
87
|
+
color: var(--mdc-presence-meeting-background-color);
|
|
88
|
+
}
|
|
89
|
+
.mdc-presence-icon__on-call {
|
|
90
|
+
color: var(--mdc-presence-on-call-background-color);
|
|
91
|
+
}
|
|
92
|
+
.mdc-presence-icon__on-device {
|
|
93
|
+
color: var(--mdc-presence-on-device-background-color);
|
|
94
|
+
}
|
|
95
|
+
.mdc-presence-icon__on-mobile {
|
|
96
|
+
color: var(--mdc-presence-on-mobile-background-color);
|
|
97
|
+
}
|
|
98
|
+
.mdc-presence-icon__pause {
|
|
99
|
+
color: var(--mdc-presence-pause-background-color);
|
|
100
|
+
}
|
|
101
|
+
.mdc-presence-icon__pto {
|
|
102
|
+
color: var(--mdc-presence-pto-background-color);
|
|
103
|
+
}
|
|
104
|
+
.mdc-presence-icon__presenting {
|
|
105
|
+
color: var(--mdc-presence-presenting-background-color);
|
|
106
|
+
}
|
|
107
|
+
.mdc-presence-icon__quiet {
|
|
108
|
+
color: var(--mdc-presence-quiet-background-color);
|
|
109
|
+
}
|
|
110
|
+
.mdc-presence-icon__scheduled {
|
|
111
|
+
color: var(--mdc-presence-scheduled-background-color);
|
|
112
|
+
}
|
|
113
|
+
`,
|
|
114
|
+
];
|
|
115
|
+
export default styles;
|
|
@@ -754,6 +754,76 @@
|
|
|
754
754
|
}
|
|
755
755
|
]
|
|
756
756
|
},
|
|
757
|
+
{
|
|
758
|
+
"kind": "javascript-module",
|
|
759
|
+
"path": "components/presence/presence.component.js",
|
|
760
|
+
"declarations": [
|
|
761
|
+
{
|
|
762
|
+
"kind": "class",
|
|
763
|
+
"description": "The `mdc-presence` component is a versatile UI element used to\ndisplay the presence status of a user or entity within an avatar component.\n\nThis component is ideal for use within avatar UIs where the presence status\nneeds to be visually represented.",
|
|
764
|
+
"name": "Presence",
|
|
765
|
+
"members": [
|
|
766
|
+
{
|
|
767
|
+
"kind": "field",
|
|
768
|
+
"name": "type",
|
|
769
|
+
"description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
770
|
+
"attribute": "type",
|
|
771
|
+
"reflects": true
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
"kind": "field",
|
|
775
|
+
"name": "size",
|
|
776
|
+
"description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE",
|
|
777
|
+
"attribute": "size",
|
|
778
|
+
"reflects": true
|
|
779
|
+
},
|
|
780
|
+
{
|
|
781
|
+
"kind": "field",
|
|
782
|
+
"name": "iconSize",
|
|
783
|
+
"privacy": "private",
|
|
784
|
+
"description": "Get the size of the presence icon based on the given size type",
|
|
785
|
+
"readonly": true
|
|
786
|
+
},
|
|
787
|
+
{
|
|
788
|
+
"kind": "field",
|
|
789
|
+
"name": "icon",
|
|
790
|
+
"privacy": "private",
|
|
791
|
+
"description": "Get the icon name based on the presence type",
|
|
792
|
+
"readonly": true
|
|
793
|
+
}
|
|
794
|
+
],
|
|
795
|
+
"attributes": [
|
|
796
|
+
{
|
|
797
|
+
"name": "type",
|
|
798
|
+
"description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
799
|
+
"fieldName": "type"
|
|
800
|
+
},
|
|
801
|
+
{
|
|
802
|
+
"name": "size",
|
|
803
|
+
"description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE",
|
|
804
|
+
"fieldName": "size"
|
|
805
|
+
}
|
|
806
|
+
],
|
|
807
|
+
"superclass": {
|
|
808
|
+
"name": "Component",
|
|
809
|
+
"module": "/src/models"
|
|
810
|
+
},
|
|
811
|
+
"tagName": "mdc-presence",
|
|
812
|
+
"jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n */",
|
|
813
|
+
"customElement": true
|
|
814
|
+
}
|
|
815
|
+
],
|
|
816
|
+
"exports": [
|
|
817
|
+
{
|
|
818
|
+
"kind": "js",
|
|
819
|
+
"name": "default",
|
|
820
|
+
"declaration": {
|
|
821
|
+
"name": "Presence",
|
|
822
|
+
"module": "components/presence/presence.component.js"
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
]
|
|
826
|
+
},
|
|
757
827
|
{
|
|
758
828
|
"kind": "javascript-module",
|
|
759
829
|
"path": "components/text/text.component.js",
|
package/dist/index.d.ts
CHANGED
|
@@ -3,5 +3,6 @@ import Icon from './components/icon';
|
|
|
3
3
|
import IconProvider from './components/iconprovider';
|
|
4
4
|
import Avatar from './components/avatar';
|
|
5
5
|
import Badge from './components/badge';
|
|
6
|
+
import Presence from './components/presence';
|
|
6
7
|
import Text from './components/text';
|
|
7
|
-
export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };
|
|
8
|
+
export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, };
|
package/dist/index.js
CHANGED
|
@@ -3,5 +3,6 @@ import Icon from './components/icon';
|
|
|
3
3
|
import IconProvider from './components/iconprovider';
|
|
4
4
|
import Avatar from './components/avatar';
|
|
5
5
|
import Badge from './components/badge';
|
|
6
|
+
import Presence from './components/presence';
|
|
6
7
|
import Text from './components/text';
|
|
7
|
-
export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };
|
|
8
|
+
export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, };
|
package/dist/react/index.d.ts
CHANGED
|
@@ -2,5 +2,6 @@ export { default as Avatar } from './avatar';
|
|
|
2
2
|
export { default as Badge } from './badge';
|
|
3
3
|
export { default as Icon } from './icon';
|
|
4
4
|
export { default as IconProvider } from './iconprovider';
|
|
5
|
+
export { default as Presence } from './presence';
|
|
5
6
|
export { default as Text } from './text';
|
|
6
7
|
export { default as ThemeProvider } from './themeprovider';
|
package/dist/react/index.js
CHANGED
|
@@ -2,5 +2,6 @@ export { default as Avatar } from './avatar';
|
|
|
2
2
|
export { default as Badge } from './badge';
|
|
3
3
|
export { default as Icon } from './icon';
|
|
4
4
|
export { default as IconProvider } from './iconprovider';
|
|
5
|
+
export { default as Presence } from './presence';
|
|
5
6
|
export { default as Text } from './text';
|
|
6
7
|
export { default as ThemeProvider } from './themeprovider';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import Component from '../../components/presence';
|
|
2
|
+
/**
|
|
3
|
+
* The `mdc-presence` component is a versatile UI element used to
|
|
4
|
+
* display the presence status of a user or entity within an avatar component.
|
|
5
|
+
*
|
|
6
|
+
* This component is ideal for use within avatar UIs where the presence status
|
|
7
|
+
* needs to be visually represented.
|
|
8
|
+
*
|
|
9
|
+
* @dependency mdc-icon
|
|
10
|
+
*
|
|
11
|
+
* @tagname mdc-presence
|
|
12
|
+
*/
|
|
13
|
+
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
|
14
|
+
export default reactWrapper;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import Component from '../../components/presence';
|
|
4
|
+
import { TAG_NAME } from '../../components/presence/presence.constants';
|
|
5
|
+
/**
|
|
6
|
+
* The `mdc-presence` component is a versatile UI element used to
|
|
7
|
+
* display the presence status of a user or entity within an avatar component.
|
|
8
|
+
*
|
|
9
|
+
* This component is ideal for use within avatar UIs where the presence status
|
|
10
|
+
* needs to be visually represented.
|
|
11
|
+
*
|
|
12
|
+
* @dependency mdc-icon
|
|
13
|
+
*
|
|
14
|
+
* @tagname mdc-presence
|
|
15
|
+
*/
|
|
16
|
+
const reactWrapper = createComponent({
|
|
17
|
+
tagName: TAG_NAME,
|
|
18
|
+
elementClass: Component,
|
|
19
|
+
react: React,
|
|
20
|
+
events: {},
|
|
21
|
+
displayName: 'Presence',
|
|
22
|
+
});
|
|
23
|
+
export default reactWrapper;
|
package/package.json
CHANGED