@momentum-design/components 0.5.1 → 0.6.0

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

@@ -0,0 +1,8 @@
+import Presence from './presence.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-presence']: Presence;
+    }
+}
+export default Presence;

package/dist/components/presence/index.js

@@ -0,0 +1,5 @@
+import Presence from './presence.component';
+import { TAG_NAME } from './presence.constants';
+import '../icon';
+Presence.register(TAG_NAME);
+export default Presence;

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

@@ -0,0 +1,57 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+/**
+ * The `mdc-presence` component is a versatile UI element used to
+ * display the presence status of a user or entity within an avatar component.
+ *
+ * This component is ideal for use within avatar UIs where the presence status
+ * needs to be visually represented.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-presence
+ */
+declare class Presence extends Component {
+    /**
+     * Supported presence types:
+     * - `active`
+     * - `away`
+     * - `away-calling`
+     * - `busy`
+     * - `dnd`
+     * - `meeting`
+     * - `on-call`
+     * - `on-device`
+     * - `on-mobile`
+     * - `pause`
+     * - `pto`
+     * - `presenting`
+     * - `quiet`
+     * - `scheduled`
+     *
+     */
+    type: string;
+    /**
+     * Acceptable values include:
+     * - XX_SMALL
+     * - X_SMALL
+     * - SMALL
+     * - MIDSIZE
+     * - LARGE
+     * - X_LARGE
+     * - XX_LARGE
+     *
+     */
+    size: string;
+    /**
+     * Get the size of the presence icon based on the given size type
+     */
+    private get iconSize();
+    /**
+     * Get the icon name based on the presence type
+     */
+    private get icon();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Presence;

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

@@ -0,0 +1,138 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DEFAULTS } from './presence.constants';
+import styles from './presence.styles';
+/**
+ * The `mdc-presence` component is a versatile UI element used to
+ * display the presence status of a user or entity within an avatar component.
+ *
+ * This component is ideal for use within avatar UIs where the presence status
+ * needs to be visually represented.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-presence
+ */
+class Presence extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Supported presence types:
+         * - `active`
+         * - `away`
+         * - `away-calling`
+         * - `busy`
+         * - `dnd`
+         * - `meeting`
+         * - `on-call`
+         * - `on-device`
+         * - `on-mobile`
+         * - `pause`
+         * - `pto`
+         * - `presenting`
+         * - `quiet`
+         * - `scheduled`
+         *
+         */
+        this.type = DEFAULTS.TYPE;
+        /**
+         * Acceptable values include:
+         * - XX_SMALL
+         * - X_SMALL
+         * - SMALL
+         * - MIDSIZE
+         * - LARGE
+         * - X_LARGE
+         * - XX_LARGE
+         *
+         */
+        this.size = DEFAULTS.SIZE;
+    }
+    /**
+     * Get the size of the presence icon based on the given size type
+     */
+    get iconSize() {
+        switch (this.size) {
+            case 'midsize':
+                return 1.16125;
+            case 'large':
+                return 1.30625;
+            case 'x_large':
+                return 1.596875;
+            case 'xx_large':
+                return 2.25;
+            case 'xx_small':
+            case 'x_small':
+            case 'small':
+            default:
+                return 0.875;
+        }
+    }
+    /**
+     * Get the icon name based on the presence type
+     */
+    get icon() {
+        switch (this.type) {
+            case 'away':
+                return 'recents-presence-badge-filled';
+            case 'away-calling':
+                return 'away-calling-presence-filled';
+            case 'busy':
+                return 'busy-presence-bold';
+            case 'dnd':
+                return 'dnd-presence-badge-filled';
+            case 'meeting':
+                return 'camera-filled';
+            case 'on-call':
+                return 'handset-filled';
+            case 'on-device':
+                return 'generic-device-video-badge-filled';
+            case 'on-mobile':
+                return 'phone-badge-filled';
+            case 'pause':
+                return 'pause-badge-filled';
+            case 'pto':
+                return 'pto-presence-filled';
+            case 'presenting':
+                return 'share-screen-badge-filled';
+            case 'quiet':
+                return 'quiet-hours-presence-filled';
+            case 'scheduled':
+                return 'meetings-presence-badge-filled';
+            case 'active':
+            default:
+                return 'active-presence-small-filled';
+        }
+    }
+    render() {
+        return html `
+      <div class="mdc-presence mdc-presence__${this.size}">
+        <mdc-icon
+          class="mdc-presence-icon mdc-presence-icon__${this.type}"
+          name="${this.icon}"
+          size="${this.iconSize}"
+        ></mdc-icon>
+      </div>
+    `;
+    }
+}
+Presence.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Presence.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Presence.prototype, "size", void 0);
+export default Presence;

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

@@ -0,0 +1,31 @@
+declare const TAG_NAME: "mdc-presence";
+declare const PRESENCE_TYPE: {
+    ACTIVE: string;
+    AWAY: string;
+    AWAY_CALLING: string;
+    BUSY: string;
+    DND: string;
+    MEETING: string;
+    ON_CALL: string;
+    ON_DEVICE: string;
+    ON_MOBILE: string;
+    PAUSE: string;
+    PTO: string;
+    PRESENTING: string;
+    QUIET: string;
+    SCHEDULED: string;
+};
+declare const PRESENCE_SIZE: {
+    XX_SMALL: string;
+    X_SMALL: string;
+    SMALL: string;
+    MIDSIZE: string;
+    LARGE: string;
+    X_LARGE: string;
+    XX_LARGE: string;
+};
+declare const DEFAULTS: {
+    TYPE: string;
+    SIZE: string;
+};
+export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };

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

@@ -0,0 +1,32 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('presence');
+const PRESENCE_TYPE = {
+    ACTIVE: 'active',
+    AWAY: 'away',
+    AWAY_CALLING: 'away-calling',
+    BUSY: 'busy',
+    DND: 'dnd',
+    MEETING: 'meeting',
+    ON_CALL: 'on-call',
+    ON_DEVICE: 'on-device',
+    ON_MOBILE: 'on-mobile',
+    PAUSE: 'pause',
+    PTO: 'pto',
+    PRESENTING: 'presenting',
+    QUIET: 'quiet',
+    SCHEDULED: 'scheduled',
+};
+const PRESENCE_SIZE = {
+    XX_SMALL: 'xx_small',
+    X_SMALL: 'x_small',
+    SMALL: 'small',
+    MIDSIZE: 'midsize',
+    LARGE: 'large',
+    X_LARGE: 'x_large',
+    XX_LARGE: 'xx_large',
+};
+const DEFAULTS = {
+    TYPE: PRESENCE_TYPE.ACTIVE,
+    SIZE: PRESENCE_SIZE.SMALL,
+};
+export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };

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

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

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

@@ -0,0 +1,115 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-presence-active-background-color: var(--mds-color-theme-indicator-stable);
+      
+      --mdc-presence-away-background-color: var(--mds-color-theme-indicator-locked);
+      
+      --mdc-presence-away-calling-background-color: var(--mds-color-theme-indicator-locked);
+
+      --mdc-presence-busy-background-color: var(--mds-color-theme-indicator-unstable);
+      
+      --mdc-presence-dnd-background-color: var(--mds-color-theme-indicator-attention);
+      
+      --mdc-presence-meeting-background-color: var(--mds-color-theme-indicator-unstable);
+
+      --mdc-presence-on-call-background-color: var(--mds-color-theme-indicator-unstable);
+      
+      --mdc-presence-on-device-background-color: var(--mds-color-theme-indicator-locked);
+      
+      --mdc-presence-on-mobile-background-color: var(--mds-color-theme-indicator-locked);
+
+      --mdc-presence-pause-background-color: var(--mds-color-theme-indicator-locked);
+
+      --mdc-presence-pto-background-color: var(--mds-color-theme-indicator-locked);
+      
+      --mdc-presence-presenting-background-color: var(--mds-color-theme-indicator-attention);
+
+      --mdc-presence-quiet-background-color: var(--mds-color-theme-indicator-locked);
+
+      --mdc-presence-scheduled-background-color: var(--mds-color-theme-indicator-unstable);
+
+      --mdc-presence-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
+    }
+
+    .mdc-presence {
+      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;
+    }
+    .mdc-presence__midsize {
+      width: 1.419375rem;
+      height: 1.419375rem;
+    }
+    .mdc-presence__large {
+      width: 1.596875rem;
+      height: 1.596875rem;
+    }
+    .mdc-presence__x_large {
+      width: 1.951875rem;
+      height: 1.951875rem;
+    }
+    .mdc-presence__xx_large {
+      width: 2.75rem;
+      height: 2.75rem;
+    }
+
+    .mdc-presence-icon {
+      border-radius: 50%;
+    }
+    .mdc-presence-icon__active {
+      color: var(--mdc-presence-active-background-color);
+    }
+    .mdc-presence-icon__away {
+      color: var(--mdc-presence-away-background-color);
+    }
+    .mdc-presence-icon__away-calling {
+      color: var(--mdc-presence-away-calling-background-color);
+    }
+    .mdc-presence-icon__busy {
+      color: var(--mdc-presence-busy-background-color);
+    }
+    .mdc-presence-icon__dnd {
+      color: var(--mdc-presence-dnd-background-color);
+    }
+    .mdc-presence-icon__meeting {
+      color: var(--mdc-presence-meeting-background-color);
+    }
+    .mdc-presence-icon__on-call {
+      color: var(--mdc-presence-on-call-background-color);
+    }
+    .mdc-presence-icon__on-device {
+      color: var(--mdc-presence-on-device-background-color);
+    }
+    .mdc-presence-icon__on-mobile {
+      color: var(--mdc-presence-on-mobile-background-color);
+    }
+    .mdc-presence-icon__pause {
+      color: var(--mdc-presence-pause-background-color);
+    }
+    .mdc-presence-icon__pto {
+      color: var(--mdc-presence-pto-background-color);
+    }
+    .mdc-presence-icon__presenting {
+      color: var(--mdc-presence-presenting-background-color);
+    }
+    .mdc-presence-icon__quiet {
+      color: var(--mdc-presence-quiet-background-color);
+    }
+    .mdc-presence-icon__scheduled {
+      color: var(--mdc-presence-scheduled-background-color);
+    }
+  `,
+];
+export default styles;

package/dist/custom-elements.json

@@ -754,6 +754,76 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/presence/presence.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "Presence",
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "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`",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "privacy": "private",
+              "description": "Get the size of the presence icon based on the given size type",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "privacy": "private",
+              "description": "Get the icon name based on the presence type",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "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`",
+              "fieldName": "type"
+            },
+            {
+              "name": "size",
+              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-presence",
+          "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 */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Presence",
+            "module": "components/presence/presence.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/text/text.component.js",

package/dist/index.d.ts

@@ -3,5 +3,6 @@ import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
 import Avatar from './components/avatar';
 import Badge from './components/badge';
+import Presence from './components/presence';
 import Text from './components/text';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, };

package/dist/index.js

@@ -3,5 +3,6 @@ import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
 import Avatar from './components/avatar';
 import Badge from './components/badge';
+import Presence from './components/presence';
 import Text from './components/text';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, };

package/dist/react/index.d.ts

@@ -2,5 +2,6 @@ export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/dist/react/index.js

@@ -2,5 +2,6 @@ export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/dist/react/presence/index.d.ts

@@ -0,0 +1,14 @@
+import Component from '../../components/presence';
+/**
+ * The `mdc-presence` component is a versatile UI element used to
+ * display the presence status of a user or entity within an avatar component.
+ *
+ * This component is ideal for use within avatar UIs where the presence status
+ * needs to be visually represented.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-presence
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/presence/index.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/presence';
+import { TAG_NAME } from '../../components/presence/presence.constants';
+/**
+ * The `mdc-presence` component is a versatile UI element used to
+ * display the presence status of a user or entity within an avatar component.
+ *
+ * This component is ideal for use within avatar UIs where the presence status
+ * needs to be visually represented.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-presence
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Presence',
+});
+export default reactWrapper;

package/package.json

@@ -37,5 +37,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.5.1"
+  "version": "0.6.0"
 }