@momentum-design/components 0.104.10 → 0.104.11

package/dist/components/avatar/avatar.styles.js

@@ -79,6 +79,34 @@ const styles = [
       bottom: 0;
       right: 0;
     }
+
+    :host([size='124'])::part(presence) {
+      bottom: -0.25rem;
+      right: -0.21875rem;
+    }
+
+    :host([size='88'])::part(presence),
+    :host([size='72'])::part(presence),
+    :host([size='64'])::part(presence) {
+      bottom: -0.09375rem;
+      right: -0.09375rem;
+    }
+
+    :host([size='48'])::part(presence) {
+      bottom: -0.03125rem;
+      right: -0.03125rem;
+    }
+
+    :host([size='32'])::part(presence) {
+      bottom: -0.15625rem;
+      right: -0.15625rem;
+    }
+
+    :host([size='24'])::part(presence) {
+      bottom: -0.1875rem;
+      right: -0.1875rem;
+    }
+
     :host::part(loading-wrapper) {
       position: absolute;
       border-radius: 100vh;

package/dist/components/avatar/avatar.utils.js

@@ -1,17 +1,17 @@
-import { SIZE as PRESENCE_SIZE } from '../presence/presence.constants';
+import { PRESENCE_SIZE } from '../presence/presence.constants';
 import { TYPE as FONT_TYPE } from '../text/text.constants';
 import { AVATAR_SIZE } from './avatar.constants';
 const getPresenceSize = (size) => {
     const avatarPresenceSizeMap = {
-        [AVATAR_SIZE[124]]: PRESENCE_SIZE.XX_LARGE,
-        [AVATAR_SIZE[88]]: PRESENCE_SIZE.X_LARGE,
-        [AVATAR_SIZE[72]]: PRESENCE_SIZE.LARGE,
-        [AVATAR_SIZE[64]]: PRESENCE_SIZE.MIDSIZE,
-        [AVATAR_SIZE[48]]: PRESENCE_SIZE.SMALL,
-        [AVATAR_SIZE[32]]: PRESENCE_SIZE.X_SMALL,
-        [AVATAR_SIZE[24]]: PRESENCE_SIZE.XX_SMALL,
+        [AVATAR_SIZE[124]]: PRESENCE_SIZE[124],
+        [AVATAR_SIZE[88]]: PRESENCE_SIZE[88],
+        [AVATAR_SIZE[72]]: PRESENCE_SIZE[72],
+        [AVATAR_SIZE[64]]: PRESENCE_SIZE[64],
+        [AVATAR_SIZE[48]]: PRESENCE_SIZE[48],
+        [AVATAR_SIZE[32]]: PRESENCE_SIZE[32],
+        [AVATAR_SIZE[24]]: PRESENCE_SIZE[24],
     };
-    return avatarPresenceSizeMap[size] || PRESENCE_SIZE.X_SMALL; // default size of presence
+    return avatarPresenceSizeMap[size] || PRESENCE_SIZE[32]; // default size of presence
 };
 const getAvatarIconSize = (size) => {
     const avatarIconSizeMap = {

package/dist/components/presence/presence.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { PresenceType, PresenceSize } from './presence.types';
 /**
@@ -49,18 +49,18 @@ declare class Presence extends Component {
      */
     type: PresenceType;
     /**
-     * Acceptable values include:
-     * - XX_SMALL
-     * - X_SMALL
-     * - SMALL
-     * - MIDSIZE
-     * - LARGE
-     * - X_LARGE
-     * - XX_LARGE
+     * Acceptable numeric values include:
+     * - 24
+     * - 32
+     * - 48
+     * - 64
+     * - 72
+     * - 88
+     * - 124
      *
-     * Presence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence
-     * icons will be no smaller than 14px.
-     * @default small
+     * Presence icons are minimum 14px in size, meaning 24, 32, and 48 presence
+     * icons will be no smaller than 14px (for sizes 24, 32, 48).
+     * @default 32
      */
     size: PresenceSize;
     /**
@@ -68,10 +68,8 @@ declare class Presence extends Component {
      * State to track the current icon type (previous type until the new icon is loaded)
      */
     private currentIconType;
-    /**
-     * Get the size of the presence icon based on the given size type
-     */
-    private get iconSize();
+    update(changedProperties: PropertyValues): void;
+    private setSize;
     /**
      * Get the icon name based on the presence type
      */

package/dist/components/presence/presence.component.js

@@ -10,9 +10,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { DEFAULTS, SIZE } from './presence.constants';
+import { DEFAULTS, PRESENCE_SIZE } from './presence.constants';
 import styles from './presence.styles';
-import { getIconValue } from './presence.utils';
+import { getIconValue, getPresenceIconSize } from './presence.utils';
 /**
  * The `mdc-presence` component is a versatile UI element used to
  * display the presence status of a user or entity within an avatar component.
@@ -63,18 +63,18 @@ class Presence extends Component {
          */
         this.type = DEFAULTS.TYPE;
         /**
-         * Acceptable values include:
-         * - XX_SMALL
-         * - X_SMALL
-         * - SMALL
-         * - MIDSIZE
-         * - LARGE
-         * - X_LARGE
-         * - XX_LARGE
+         * Acceptable numeric values include:
+         * - 24
+         * - 32
+         * - 48
+         * - 64
+         * - 72
+         * - 88
+         * - 124
          *
-         * Presence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence
-         * icons will be no smaller than 14px.
-         * @default small
+         * Presence icons are minimum 14px in size, meaning 24, 32, and 48 presence
+         * icons will be no smaller than 14px (for sizes 24, 32, 48).
+         * @default 32
          */
         this.size = DEFAULTS.SIZE;
         /**
@@ -83,27 +83,15 @@ class Presence extends Component {
          */
         this.currentIconType = DEFAULTS.TYPE;
     }
-    /**
-     * Get the size of the presence icon based on the given size type
-     */
-    get iconSize() {
-        switch (this.size) {
-            case SIZE.MIDSIZE:
-                return 1.16125;
-            case SIZE.LARGE:
-                return 1.30625;
-            case SIZE.X_LARGE:
-                return 1.596875;
-            case SIZE.XX_LARGE:
-                return 2.25;
-            case SIZE.XX_SMALL:
-            case SIZE.X_SMALL:
-            case SIZE.SMALL:
-            default:
-                this.size = DEFAULTS.SIZE;
-                return 0.875;
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('size')) {
+            this.setSize(this.size);
         }
     }
+    setSize(size) {
+        this.setAttribute('size', Object.values(PRESENCE_SIZE).includes(size) ? `${size}` : DEFAULTS.SIZE.toString());
+    }
     /**
      * Get the icon name based on the presence type
      */
@@ -131,11 +119,11 @@ class Presence extends Component {
     }
     render() {
         return html `
-      <div class="mdc-presence mdc-presence__${this.size}">
+      <div part="presence-content">
         <mdc-icon
           class="mdc-presence-icon mdc-presence-icon__${this.currentIconType}"
           name="${this.icon}"
-          size="${this.iconSize}"
+          size="${getPresenceIconSize(this.size)}"
           @load="${this.handleOnLoad}"
           @error="${this.handleOnError}"
         ></mdc-icon>
@@ -149,8 +137,8 @@ __decorate([
     __metadata("design:type", String)
 ], Presence.prototype, "type", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
 ], Presence.prototype, "size", void 0);
 __decorate([
     state(),

package/dist/components/presence/presence.constants.d.ts

@@ -1,5 +1,5 @@
 declare const TAG_NAME: "mdc-presence";
-declare const TYPE: {
+declare const PRESENCE_TYPE: {
     readonly ACTIVE: "active";
     readonly AWAY: "away";
     readonly AWAY_CALLING: "away-calling";
@@ -15,17 +15,17 @@ declare const TYPE: {
     readonly QUIET: "quiet";
     readonly SCHEDULED: "scheduled";
 };
-declare const SIZE: {
-    readonly XX_SMALL: "xx_small";
-    readonly X_SMALL: "x_small";
-    readonly SMALL: "small";
-    readonly MIDSIZE: "midsize";
-    readonly LARGE: "large";
-    readonly X_LARGE: "x_large";
-    readonly XX_LARGE: "xx_large";
+declare const PRESENCE_SIZE: {
+    readonly 24: 24;
+    readonly 32: 32;
+    readonly 48: 48;
+    readonly 64: 64;
+    readonly 72: 72;
+    readonly 88: 88;
+    readonly 124: 124;
 };
 declare const DEFAULTS: {
     readonly TYPE: "active";
-    readonly SIZE: "small";
+    readonly SIZE: 32;
 };
-export { TAG_NAME, DEFAULTS, TYPE, SIZE };
+export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };

package/dist/components/presence/presence.constants.js

@@ -1,6 +1,6 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('presence');
-const TYPE = {
+const PRESENCE_TYPE = {
     ACTIVE: 'active',
     AWAY: 'away',
     AWAY_CALLING: 'away-calling',
@@ -16,17 +16,17 @@ const TYPE = {
     QUIET: 'quiet',
     SCHEDULED: 'scheduled',
 };
-const SIZE = {
-    XX_SMALL: 'xx_small',
-    X_SMALL: 'x_small',
-    SMALL: 'small',
-    MIDSIZE: 'midsize',
-    LARGE: 'large',
-    X_LARGE: 'x_large',
-    XX_LARGE: 'xx_large',
+const PRESENCE_SIZE = {
+    24: 24,
+    32: 32,
+    48: 48,
+    64: 64,
+    72: 72,
+    88: 88,
+    124: 124,
 };
 const DEFAULTS = {
-    TYPE: TYPE.ACTIVE,
-    SIZE: SIZE.SMALL,
+    TYPE: PRESENCE_TYPE.ACTIVE,
+    SIZE: PRESENCE_SIZE[32],
 };
-export { TAG_NAME, DEFAULTS, TYPE, SIZE };
+export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };

package/dist/components/presence/presence.styles.js

@@ -21,32 +21,32 @@ const styles = [
       --mdc-presence-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
     }
 
-    .mdc-presence {
+    :host::part(presence-content) {
       border-radius: 50%;
       background-color: var(--mdc-presence-overlay-background-color);
       display: flex;
       justify-content: center;
       align-items: center;
     }
-    .mdc-presence__xx_small,
-    .mdc-presence__x_small,
-    .mdc-presence__small {
-      width: 1.0625rem;
-      height: 1.0625rem;
+    :host([size='24'])::part(presence-content),
+    :host([size='32'])::part(presence-content),
+    :host([size='48'])::part(presence-content) {
+      width: 1.125rem;
+      height: 1.125rem;
     }
-    .mdc-presence__midsize {
-      width: 1.419375rem;
-      height: 1.419375rem;
+    :host([size='64'])::part(presence-content) {
+      width: 1.5625rem;
+      height: 1.5625rem;
     }
-    .mdc-presence__large {
-      width: 1.596875rem;
-      height: 1.596875rem;
+    :host([size='72'])::part(presence-content) {
+      width: 1.75rem;
+      height: 1.75rem;
     }
-    .mdc-presence__x_large {
-      width: 1.951875rem;
-      height: 1.951875rem;
+    :host([size='88'])::part(presence-content) {
+      width: 2.125rem;
+      height: 2.125rem;
     }
-    .mdc-presence__xx_large {
+    :host([size='124'])::part(presence-content) {
       width: 2.75rem;
       height: 2.75rem;
     }

package/dist/components/presence/presence.types.d.ts

@@ -1,5 +1,5 @@
 import type { ValueOf } from '../../utils/types';
-import { TYPE, SIZE } from './presence.constants';
-type PresenceType = ValueOf<typeof TYPE>;
-type PresenceSize = ValueOf<typeof SIZE>;
+import { PRESENCE_TYPE, PRESENCE_SIZE } from './presence.constants';
+type PresenceType = ValueOf<typeof PRESENCE_TYPE>;
+type PresenceSize = ValueOf<typeof PRESENCE_SIZE>;
 export type { PresenceType, PresenceSize };

package/dist/components/presence/presence.utils.d.ts

@@ -1,2 +1,3 @@
-import type { PresenceType } from './presence.types';
+import type { PresenceSize, PresenceType } from './presence.types';
 export declare const getIconValue: (type: PresenceType) => "active-presence-small-filled" | "away-calling-presence-filled" | "busy-presence-bold" | "camera-filled" | "dnd-presence-badge-filled" | "generic-device-video-badge-filled" | "handset-filled" | "meetings-presence-badge-filled" | "pause-badge-filled" | "phone-badge-filled" | "pto-presence-filled" | "quiet-hours-presence-filled" | "recents-presence-badge-filled" | "share-screen-badge-filled";
+export declare const getPresenceIconSize: (size: PresenceSize) => number;

package/dist/components/presence/presence.utils.js

@@ -1,34 +1,46 @@
-import { TYPE } from './presence.constants';
+import { PRESENCE_TYPE, PRESENCE_SIZE } from './presence.constants';
 export const getIconValue = (type) => {
     switch (type) {
-        case TYPE.AWAY:
+        case PRESENCE_TYPE.AWAY:
             return 'recents-presence-badge-filled';
-        case TYPE.AWAY_CALLING:
+        case PRESENCE_TYPE.AWAY_CALLING:
             return 'away-calling-presence-filled';
-        case TYPE.BUSY:
+        case PRESENCE_TYPE.BUSY:
             return 'busy-presence-bold';
-        case TYPE.DND:
+        case PRESENCE_TYPE.DND:
             return 'dnd-presence-badge-filled';
-        case TYPE.MEETING:
+        case PRESENCE_TYPE.MEETING:
             return 'camera-filled';
-        case TYPE.ON_CALL:
+        case PRESENCE_TYPE.ON_CALL:
             return 'handset-filled';
-        case TYPE.ON_DEVICE:
+        case PRESENCE_TYPE.ON_DEVICE:
             return 'generic-device-video-badge-filled';
-        case TYPE.ON_MOBILE:
+        case PRESENCE_TYPE.ON_MOBILE:
             return 'phone-badge-filled';
-        case TYPE.PAUSE:
+        case PRESENCE_TYPE.PAUSE:
             return 'pause-badge-filled';
-        case TYPE.PTO:
+        case PRESENCE_TYPE.PTO:
             return 'pto-presence-filled';
-        case TYPE.PRESENTING:
+        case PRESENCE_TYPE.PRESENTING:
             return 'share-screen-badge-filled';
-        case TYPE.QUIET:
+        case PRESENCE_TYPE.QUIET:
             return 'quiet-hours-presence-filled';
-        case TYPE.SCHEDULED:
+        case PRESENCE_TYPE.SCHEDULED:
             return 'meetings-presence-badge-filled';
-        case TYPE.ACTIVE:
+        case PRESENCE_TYPE.ACTIVE:
         default:
             return 'active-presence-small-filled';
     }
 };
+export const getPresenceIconSize = (size) => {
+    const presenceIconSizeMap = {
+        [PRESENCE_SIZE[124]]: 2.25,
+        [PRESENCE_SIZE[88]]: 1.625,
+        [PRESENCE_SIZE[72]]: 1.3125,
+        [PRESENCE_SIZE[64]]: 1.1875,
+        [PRESENCE_SIZE[48]]: 0.875,
+        [PRESENCE_SIZE[32]]: 0.875,
+        [PRESENCE_SIZE[24]]: 0.875,
+    };
+    return presenceIconSizeMap[size] || 0.875; // default size of icon
+};

package/dist/custom-elements.json

@@ -28413,17 +28413,28 @@
               "type": {
                 "text": "PresenceSize"
               },
-              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE\n\nPresence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence\nicons will be no smaller than 14px.",
-              "default": "small",
+              "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
+              "default": "32",
               "attribute": "size",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "iconSize",
+              "kind": "method",
+              "name": "setSize",
               "privacy": "private",
-              "description": "Get the size of the presence icon based on the given size type",
-              "readonly": true
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "PresenceSize"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -28470,8 +28481,8 @@
               "type": {
                 "text": "PresenceSize"
               },
-              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE\n\nPresence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence\nicons will be no smaller than 14px.",
-              "default": "small",
+              "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
+              "default": "32",
               "fieldName": "size"
             }
           ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.104.10",
+  "version": "0.104.11",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"