@momentum-design/components 0.7.6 → 0.7.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/dist/browser/index.js +26 -26
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/presence/presence.component.js +22 -22
  4. package/dist/custom-elements.json +172 -172
  5. package/dist/react/index.d.ts +1 -1
  6. package/dist/react/index.js +1 -1
  7. package/package.json +1 -1
package/dist/components/presence/presence.component.js CHANGED
@@ -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 } from './presence.constants';
13
+ import { DEFAULTS, PRESENCE_SIZE, PRESENCE_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 'midsize':
66
+ case PRESENCE_SIZE.MIDSIZE:
67
67
  return 1.16125;
68
- case 'large':
68
+ case PRESENCE_SIZE.LARGE:
69
69
  return 1.30625;
70
- case 'x_large':
70
+ case PRESENCE_SIZE.X_LARGE:
71
71
  return 1.596875;
72
- case 'xx_large':
72
+ case PRESENCE_SIZE.XX_LARGE:
73
73
  return 2.25;
74
- case 'xx_small':
75
- case 'x_small':
76
- case 'small':
74
+ case PRESENCE_SIZE.XX_SMALL:
75
+ case PRESENCE_SIZE.X_SMALL:
76
+ case PRESENCE_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 'away':
87
+ case PRESENCE_TYPE.AWAY:
88
88
  return 'recents-presence-badge-filled';
89
- case 'away-calling':
89
+ case PRESENCE_TYPE.AWAY_CALLING:
90
90
  return 'away-calling-presence-filled';
91
- case 'busy':
91
+ case PRESENCE_TYPE.BUSY:
92
92
  return 'busy-presence-bold';
93
- case 'dnd':
93
+ case PRESENCE_TYPE.DND:
94
94
  return 'dnd-presence-badge-filled';
95
- case 'meeting':
95
+ case PRESENCE_TYPE.MEETING:
96
96
  return 'camera-filled';
97
- case 'on-call':
97
+ case PRESENCE_TYPE.ON_CALL:
98
98
  return 'handset-filled';
99
- case 'on-device':
99
+ case PRESENCE_TYPE.ON_DEVICE:
100
100
  return 'generic-device-video-badge-filled';
101
- case 'on-mobile':
101
+ case PRESENCE_TYPE.ON_MOBILE:
102
102
  return 'phone-badge-filled';
103
- case 'pause':
103
+ case PRESENCE_TYPE.PAUSE:
104
104
  return 'pause-badge-filled';
105
- case 'pto':
105
+ case PRESENCE_TYPE.PTO:
106
106
  return 'pto-presence-filled';
107
- case 'presenting':
107
+ case PRESENCE_TYPE.PRESENTING:
108
108
  return 'share-screen-badge-filled';
109
- case 'quiet':
109
+ case PRESENCE_TYPE.QUIET:
110
110
  return 'quiet-hours-presence-filled';
111
- case 'scheduled':
111
+ case PRESENCE_TYPE.SCHEDULED:
112
112
  return 'meetings-presence-badge-filled';
113
- case 'active':
113
+ case PRESENCE_TYPE.ACTIVE:
114
114
  default:
115
115
  this.type = DEFAULTS.TYPE;
116
116
  return 'active-presence-small-filled';
package/dist/custom-elements.json CHANGED
@@ -114,6 +114,178 @@
114
114
  }
115
115
  ]
116
116
  },
117
+ {
118
+ "kind": "javascript-module",
119
+ "path": "components/icon/icon.component.js",
120
+ "declarations": [
121
+ {
122
+ "kind": "class",
123
+ "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.",
124
+ "name": "Icon",
125
+ "cssProperties": [
126
+ {
127
+ "description": "Allows customization of the default fill color.",
128
+ "name": "--mdc-icon-fill-color"
129
+ }
130
+ ],
131
+ "members": [
132
+ {
133
+ "kind": "field",
134
+ "name": "iconData",
135
+ "type": {
136
+ "text": "HTMLElement | undefined"
137
+ },
138
+ "privacy": "private"
139
+ },
140
+ {
141
+ "kind": "field",
142
+ "name": "lengthUnitFromContext",
143
+ "type": {
144
+ "text": "string | undefined"
145
+ },
146
+ "privacy": "private"
147
+ },
148
+ {
149
+ "kind": "field",
150
+ "name": "sizeFromContext",
151
+ "type": {
152
+ "text": "number | undefined"
153
+ },
154
+ "privacy": "private"
155
+ },
156
+ {
157
+ "kind": "field",
158
+ "name": "name",
159
+ "type": {
160
+ "text": "string | undefined"
161
+ },
162
+ "description": "Name of the icon (= filename)",
163
+ "attribute": "name",
164
+ "reflects": true
165
+ },
166
+ {
167
+ "kind": "field",
168
+ "name": "size",
169
+ "type": {
170
+ "text": "number | undefined"
171
+ },
172
+ "description": "Size of the icon (works in combination with length unit)",
173
+ "attribute": "size"
174
+ },
175
+ {
176
+ "kind": "field",
177
+ "name": "lengthUnit",
178
+ "type": {
179
+ "text": "string | undefined"
180
+ },
181
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
182
+ "attribute": "length-unit"
183
+ },
184
+ {
185
+ "kind": "field",
186
+ "name": "ariaLabel",
187
+ "type": {
188
+ "text": "string | null"
189
+ },
190
+ "default": "null",
191
+ "description": "Aria-label attribute to be set for accessibility",
192
+ "attribute": "aria-label"
193
+ },
194
+ {
195
+ "kind": "field",
196
+ "name": "iconProviderContext",
197
+ "privacy": "private",
198
+ "readonly": true
199
+ },
200
+ {
201
+ "kind": "method",
202
+ "name": "getIconData",
203
+ "privacy": "private",
204
+ "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
205
+ },
206
+ {
207
+ "kind": "method",
208
+ "name": "updateSize",
209
+ "privacy": "private",
210
+ "description": "Updates the size by setting the width and height"
211
+ },
212
+ {
213
+ "kind": "method",
214
+ "name": "setRoleOnIcon",
215
+ "privacy": "private"
216
+ },
217
+ {
218
+ "kind": "method",
219
+ "name": "setAriaHiddenOnIcon",
220
+ "privacy": "private"
221
+ },
222
+ {
223
+ "kind": "method",
224
+ "name": "setAriaLabelOnIcon",
225
+ "privacy": "private"
226
+ },
227
+ {
228
+ "kind": "field",
229
+ "name": "computedIconSize",
230
+ "privacy": "private",
231
+ "readonly": true
232
+ }
233
+ ],
234
+ "attributes": [
235
+ {
236
+ "name": "name",
237
+ "type": {
238
+ "text": "string | undefined"
239
+ },
240
+ "description": "Name of the icon (= filename)",
241
+ "fieldName": "name"
242
+ },
243
+ {
244
+ "name": "size",
245
+ "type": {
246
+ "text": "number | undefined"
247
+ },
248
+ "description": "Size of the icon (works in combination with length unit)",
249
+ "fieldName": "size"
250
+ },
251
+ {
252
+ "name": "length-unit",
253
+ "type": {
254
+ "text": "string | undefined"
255
+ },
256
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
257
+ "fieldName": "lengthUnit"
258
+ },
259
+ {
260
+ "name": "aria-label",
261
+ "type": {
262
+ "text": "string | null"
263
+ },
264
+ "default": "null",
265
+ "description": "Aria-label attribute to be set for accessibility",
266
+ "fieldName": "ariaLabel"
267
+ }
268
+ ],
269
+ "superclass": {
270
+ "name": "Component",
271
+ "module": "/src/models"
272
+ },
273
+ "tagName": "mdc-icon",
274
+ "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
275
+ "customElement": true
276
+ }
277
+ ],
278
+ "exports": [
279
+ {
280
+ "kind": "js",
281
+ "name": "default",
282
+ "declaration": {
283
+ "name": "Icon",
284
+ "module": "components/icon/icon.component.js"
285
+ }
286
+ }
287
+ ]
288
+ },
117
289
  {
118
290
  "kind": "javascript-module",
119
291
  "path": "components/badge/badge.component.js",
@@ -448,178 +620,6 @@
448
620
  }
449
621
  ]
450
622
  },
451
- {
452
- "kind": "javascript-module",
453
- "path": "components/icon/icon.component.js",
454
- "declarations": [
455
- {
456
- "kind": "class",
457
- "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.",
458
- "name": "Icon",
459
- "cssProperties": [
460
- {
461
- "description": "Allows customization of the default fill color.",
462
- "name": "--mdc-icon-fill-color"
463
- }
464
- ],
465
- "members": [
466
- {
467
- "kind": "field",
468
- "name": "iconData",
469
- "type": {
470
- "text": "HTMLElement | undefined"
471
- },
472
- "privacy": "private"
473
- },
474
- {
475
- "kind": "field",
476
- "name": "lengthUnitFromContext",
477
- "type": {
478
- "text": "string | undefined"
479
- },
480
- "privacy": "private"
481
- },
482
- {
483
- "kind": "field",
484
- "name": "sizeFromContext",
485
- "type": {
486
- "text": "number | undefined"
487
- },
488
- "privacy": "private"
489
- },
490
- {
491
- "kind": "field",
492
- "name": "name",
493
- "type": {
494
- "text": "string | undefined"
495
- },
496
- "description": "Name of the icon (= filename)",
497
- "attribute": "name",
498
- "reflects": true
499
- },
500
- {
501
- "kind": "field",
502
- "name": "size",
503
- "type": {
504
- "text": "number | undefined"
505
- },
506
- "description": "Size of the icon (works in combination with length unit)",
507
- "attribute": "size"
508
- },
509
- {
510
- "kind": "field",
511
- "name": "lengthUnit",
512
- "type": {
513
- "text": "string | undefined"
514
- },
515
- "description": "Length unit attribute for overriding length-unit from `IconProvider`",
516
- "attribute": "length-unit"
517
- },
518
- {
519
- "kind": "field",
520
- "name": "ariaLabel",
521
- "type": {
522
- "text": "string | null"
523
- },
524
- "default": "null",
525
- "description": "Aria-label attribute to be set for accessibility",
526
- "attribute": "aria-label"
527
- },
528
- {
529
- "kind": "field",
530
- "name": "iconProviderContext",
531
- "privacy": "private",
532
- "readonly": true
533
- },
534
- {
535
- "kind": "method",
536
- "name": "getIconData",
537
- "privacy": "private",
538
- "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
539
- },
540
- {
541
- "kind": "method",
542
- "name": "updateSize",
543
- "privacy": "private",
544
- "description": "Updates the size by setting the width and height"
545
- },
546
- {
547
- "kind": "method",
548
- "name": "setRoleOnIcon",
549
- "privacy": "private"
550
- },
551
- {
552
- "kind": "method",
553
- "name": "setAriaHiddenOnIcon",
554
- "privacy": "private"
555
- },
556
- {
557
- "kind": "method",
558
- "name": "setAriaLabelOnIcon",
559
- "privacy": "private"
560
- },
561
- {
562
- "kind": "field",
563
- "name": "computedIconSize",
564
- "privacy": "private",
565
- "readonly": true
566
- }
567
- ],
568
- "attributes": [
569
- {
570
- "name": "name",
571
- "type": {
572
- "text": "string | undefined"
573
- },
574
- "description": "Name of the icon (= filename)",
575
- "fieldName": "name"
576
- },
577
- {
578
- "name": "size",
579
- "type": {
580
- "text": "number | undefined"
581
- },
582
- "description": "Size of the icon (works in combination with length unit)",
583
- "fieldName": "size"
584
- },
585
- {
586
- "name": "length-unit",
587
- "type": {
588
- "text": "string | undefined"
589
- },
590
- "description": "Length unit attribute for overriding length-unit from `IconProvider`",
591
- "fieldName": "lengthUnit"
592
- },
593
- {
594
- "name": "aria-label",
595
- "type": {
596
- "text": "string | null"
597
- },
598
- "default": "null",
599
- "description": "Aria-label attribute to be set for accessibility",
600
- "fieldName": "ariaLabel"
601
- }
602
- ],
603
- "superclass": {
604
- "name": "Component",
605
- "module": "/src/models"
606
- },
607
- "tagName": "mdc-icon",
608
- "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
609
- "customElement": true
610
- }
611
- ],
612
- "exports": [
613
- {
614
- "kind": "js",
615
- "name": "default",
616
- "declaration": {
617
- "name": "Icon",
618
- "module": "components/icon/icon.component.js"
619
- }
620
- }
621
- ]
622
- },
623
623
  {
624
624
  "kind": "javascript-module",
625
625
  "path": "components/iconprovider/iconprovider.component.js",
package/dist/react/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { default as Avatar } from './avatar';
2
- export { default as Badge } from './badge';
3
2
  export { default as Icon } from './icon';
3
+ export { default as Badge } from './badge';
4
4
  export { default as IconProvider } from './iconprovider';
5
5
  export { default as Presence } from './presence';
6
6
  export { default as Text } from './text';
package/dist/react/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export { default as Avatar } from './avatar';
2
- export { default as Badge } from './badge';
3
2
  export { default as Icon } from './icon';
3
+ export { default as Badge } from './badge';
4
4
  export { default as IconProvider } from './iconprovider';
5
5
  export { default as Presence } from './presence';
6
6
  export { default as Text } from './text';
package/package.json CHANGED
@@ -37,5 +37,5 @@
37
37
  "@momentum-design/icons": "*",
38
38
  "@momentum-design/tokens": "*"
39
39
  },
40
- "version": "0.7.6"
40
+ "version": "0.7.7"
41
41
  }