@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.
@@ -0,0 +1,8 @@
1
+ import Presence from './presence.component';
2
+ import '../icon';
3
+ declare global {
4
+ interface HTMLElementTagNameMap {
5
+ ['mdc-presence']: Presence;
6
+ }
7
+ }
8
+ export default Presence;
@@ -0,0 +1,5 @@
1
+ import Presence from './presence.component';
2
+ import { TAG_NAME } from './presence.constants';
3
+ import '../icon';
4
+ Presence.register(TAG_NAME);
5
+ export default Presence;
@@ -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,2 @@
1
+ declare const styles: import("lit").CSSResult[];
2
+ export default styles;
@@ -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, };
@@ -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';
@@ -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
@@ -37,5 +37,5 @@
37
37
  "@momentum-design/icons": "*",
38
38
  "@momentum-design/tokens": "*"
39
39
  },
40
- "version": "0.5.1"
40
+ "version": "0.5.2"
41
41
  }