@momentum-design/components 0.7.6 → 0.7.8

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

@@ -37,6 +37,7 @@ declare class Badge extends Component {
     /**
      * Type of the variant can be `primary` or `secondary`.
      * It defines the background and foreground color of the icon.
+     * @default primary
      */
     variant: string;
     /**
@@ -46,16 +47,19 @@ declare class Badge extends Component {
     /**
      * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
      * The max counter can be `9`, `99` or `999`.
+     * @default 99
      */
     maxCounter: number;
     /**
      * Overlay is to add a thin outline to the badge.
      * This will help distinguish between the badge and the button,
      * where the badge will be layered on top of a button.
+     * @default false
      */
     overlay: boolean;
     /**
      * Aria-label attribute to be set for accessibility
+     * @default null
      */
     ariaLabel: string | null;
     /**

package/dist/components/badge/badge.component.js

@@ -43,21 +43,25 @@ class Badge extends Component {
         /**
          * Type of the variant can be `primary` or `secondary`.
          * It defines the background and foreground color of the icon.
+         * @default primary
          */
         this.variant = DEFAULTS.VARIANT;
         /**
          * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
          * The max counter can be `9`, `99` or `999`.
+         * @default 99
          */
         this.maxCounter = DEFAULTS.MAX_COUNTER;
         /**
          * Overlay is to add a thin outline to the badge.
          * This will help distinguish between the badge and the button,
          * where the badge will be layered on top of a button.
+         * @default false
          */
         this.overlay = false;
         /**
          * Aria-label attribute to be set for accessibility
+         * @default null
          */
         this.ariaLabel = null;
     }

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

@@ -25,16 +25,19 @@ declare class IconProvider extends Provider<IconProviderContext> {
      */
     url?: string;
     /**
-     * File extension of icons, default: 'svg'
+     * File extension of icons
+     * @default svg
      */
     fileExtension?: string;
     /**
-     * Length unit used for sizing of icons, default: 'em'
+     * Length unit used for sizing of icons
+     * @default em
      */
     lengthUnit: string;
     /**
      * The default size of the icon.
      * If not set, it falls back to the size defined by the length unit.
+     * @default 1
      */
     size?: number;
     private updateValuesInContext;

package/dist/components/iconprovider/iconprovider.component.js

@@ -31,18 +31,21 @@ class IconProvider extends Provider {
             initialValue: new IconProviderContext(),
         });
         /**
-         * File extension of icons, default: 'svg'
+         * File extension of icons
+         * @default svg
          */
         this.fileExtension = DEFAULTS.FILE_EXTENSION;
         /**
-         * Length unit used for sizing of icons, default: 'em'
+         * Length unit used for sizing of icons
+         * @default em
          */
         this.lengthUnit = DEFAULTS.LENGTH_UNIT;
         /**
          * The default size of the icon.
          * If not set, it falls back to the size defined by the length unit.
+         * @default 1
          */
-        this.size = DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT];
+        this.size = DEFAULTS.SIZE;
     }
     /**
      * Context object of the IconProvider, to be consumed by child components

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

@@ -1,9 +1,10 @@
 declare const TAG_NAME: "mdc-iconprovider";
 declare const ALLOWED_FILE_EXTENSIONS: string[];
 declare const ALLOWED_LENGTH_UNITS: string[];
+declare const LENGTH_UNIT_SIZE: Record<string, number>;
 declare const DEFAULTS: {
     FILE_EXTENSION: string;
     LENGTH_UNIT: string;
-    LENGTH_UNIT_SIZE: Record<string, number>;
+    SIZE: number;
 };
-export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

package/dist/components/iconprovider/iconprovider.constants.js

@@ -2,13 +2,14 @@ import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('iconprovider');
 const ALLOWED_FILE_EXTENSIONS = ['svg'];
 const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
+const LENGTH_UNIT_SIZE = {
+    px: 16,
+    em: 1,
+    rem: 1,
+};
 const DEFAULTS = {
     FILE_EXTENSION: 'svg',
     LENGTH_UNIT: 'em',
-    LENGTH_UNIT_SIZE: {
-        px: 16,
-        em: 1,
-        rem: 1,
-    },
+    SIZE: LENGTH_UNIT_SIZE.em,
 };
-export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

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

@@ -28,7 +28,7 @@ declare class Presence extends Component {
      * - `presenting`
      * - `quiet`
      * - `scheduled`
-     *
+     * @default active
      */
     type: string;
     /**
@@ -40,7 +40,7 @@ declare class Presence extends Component {
      * - LARGE
      * - X_LARGE
      * - XX_LARGE
-     *
+     * @default small
      */
     size: string;
     /**

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

@@ -10,7 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { DEFAULTS } from './presence.constants';
+import { DEFAULTS, PRESENCE_SIZE, PRESENCE_TYPE } from './presence.constants';
 import styles from './presence.styles';
 /**
  * The `mdc-presence` component is a versatile UI element used to
@@ -42,7 +42,7 @@ class Presence extends Component {
          * - `presenting`
          * - `quiet`
          * - `scheduled`
-         *
+         * @default active
          */
         this.type = DEFAULTS.TYPE;
         /**
@@ -54,7 +54,7 @@ class Presence extends Component {
          * - LARGE
          * - X_LARGE
          * - XX_LARGE
-         *
+         * @default small
          */
         this.size = DEFAULTS.SIZE;
     }
@@ -63,17 +63,17 @@ class Presence extends Component {
      */
     get iconSize() {
         switch (this.size) {
-            case 'midsize':
+            case PRESENCE_SIZE.MIDSIZE:
                 return 1.16125;
-            case 'large':
+            case PRESENCE_SIZE.LARGE:
                 return 1.30625;
-            case 'x_large':
+            case PRESENCE_SIZE.X_LARGE:
                 return 1.596875;
-            case 'xx_large':
+            case PRESENCE_SIZE.XX_LARGE:
                 return 2.25;
-            case 'xx_small':
-            case 'x_small':
-            case 'small':
+            case PRESENCE_SIZE.XX_SMALL:
+            case PRESENCE_SIZE.X_SMALL:
+            case PRESENCE_SIZE.SMALL:
             default:
                 this.size = DEFAULTS.SIZE;
                 return 0.875;
@@ -84,33 +84,33 @@ class Presence extends Component {
      */
     get icon() {
         switch (this.type) {
-            case 'away':
+            case PRESENCE_TYPE.AWAY:
                 return 'recents-presence-badge-filled';
-            case 'away-calling':
+            case PRESENCE_TYPE.AWAY_CALLING:
                 return 'away-calling-presence-filled';
-            case 'busy':
+            case PRESENCE_TYPE.BUSY:
                 return 'busy-presence-bold';
-            case 'dnd':
+            case PRESENCE_TYPE.DND:
                 return 'dnd-presence-badge-filled';
-            case 'meeting':
+            case PRESENCE_TYPE.MEETING:
                 return 'camera-filled';
-            case 'on-call':
+            case PRESENCE_TYPE.ON_CALL:
                 return 'handset-filled';
-            case 'on-device':
+            case PRESENCE_TYPE.ON_DEVICE:
                 return 'generic-device-video-badge-filled';
-            case 'on-mobile':
+            case PRESENCE_TYPE.ON_MOBILE:
                 return 'phone-badge-filled';
-            case 'pause':
+            case PRESENCE_TYPE.PAUSE:
                 return 'pause-badge-filled';
-            case 'pto':
+            case PRESENCE_TYPE.PTO:
                 return 'pto-presence-filled';
-            case 'presenting':
+            case PRESENCE_TYPE.PRESENTING:
                 return 'share-screen-badge-filled';
-            case 'quiet':
+            case PRESENCE_TYPE.QUIET:
                 return 'quiet-hours-presence-filled';
-            case 'scheduled':
+            case PRESENCE_TYPE.SCHEDULED:
                 return 'meetings-presence-badge-filled';
-            case 'active':
+            case PRESENCE_TYPE.ACTIVE:
             default:
                 this.type = DEFAULTS.TYPE;
                 return 'active-presence-small-filled';

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

@@ -53,6 +53,7 @@ declare class Text extends Component {
      * - 'heading-xlarge-bold'
      * - 'headline-small-light'
      * - 'headline-small-regular'
+     * @default body-large-regular
      */
     type: string;
     /**

package/dist/components/text/text.component.js

@@ -67,6 +67,7 @@ class Text extends Component {
          * - 'heading-xlarge-bold'
          * - 'headline-small-light'
          * - 'headline-small-regular'
+         * @default body-large-regular
          */
         this.type = DEFAULTS.TYPE;
         /**

package/dist/custom-elements.json

@@ -146,6 +146,7 @@
               "kind": "field",
               "name": "variant",
               "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
+              "default": "primary",
               "attribute": "variant",
               "reflects": true
             },
@@ -165,6 +166,7 @@
                 "text": "number"
               },
               "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
               "attribute": "max-counter",
               "reflects": true
             },
@@ -391,6 +393,7 @@
             {
               "name": "variant",
               "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
+              "default": "primary",
               "fieldName": "variant"
             },
             {
@@ -407,6 +410,7 @@
                 "text": "number"
               },
               "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
               "fieldName": "maxCounter"
             },
             {
@@ -658,7 +662,8 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "File extension of icons, default: 'svg'",
+              "description": "File extension of icons",
+              "default": "svg",
               "attribute": "file-extension",
               "reflects": true
             },
@@ -668,7 +673,8 @@
               "type": {
                 "text": "string"
               },
-              "description": "Length unit used for sizing of icons, default: 'em'",
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
               "attribute": "length-unit",
               "reflects": true
             },
@@ -678,8 +684,8 @@
               "type": {
                 "text": "number | undefined"
               },
-              "default": "DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT]",
               "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
               "attribute": "size",
               "reflects": true
             },
@@ -713,7 +719,8 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "File extension of icons, default: 'svg'",
+              "description": "File extension of icons",
+              "default": "svg",
               "fieldName": "fileExtension"
             },
             {
@@ -721,7 +728,8 @@
               "type": {
                 "text": "string"
               },
-              "description": "Length unit used for sizing of icons, default: 'em'",
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
               "fieldName": "lengthUnit"
             },
             {
@@ -729,8 +737,8 @@
               "type": {
                 "text": "number | undefined"
               },
-              "default": "DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT]",
               "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
               "fieldName": "size"
             }
           ],
@@ -767,6 +775,7 @@
               "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`",
+              "default": "active",
               "attribute": "type",
               "reflects": true
             },
@@ -774,6 +783,7 @@
               "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",
+              "default": "small",
               "attribute": "size",
               "reflects": true
             },
@@ -796,11 +806,13 @@
             {
               "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`",
+              "default": "active",
               "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",
+              "default": "small",
               "fieldName": "size"
             }
           ],
@@ -850,6 +862,7 @@
               "name": "type",
               "privacy": "public",
               "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
               "attribute": "type",
               "reflects": true
             },
@@ -866,6 +879,7 @@
             {
               "name": "type",
               "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
               "fieldName": "type"
             },
             {

package/package.json

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