@momentum-design/components 0.4.17 → 0.4.19

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

@@ -1,10 +1,22 @@
 import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
 /**
- * A badge is a small, visually distinct element that provides additional information
- * or highlights the status of an item.
- * Badges are often used to display notification dot, counts, making them a useful tool for
- * conveying information quickly without taking up much space.
+ * The `mdc-badge` component is a versatile UI element used to
+ * display dot, icons, counters, success, warning and error type badge.
+ *
+ * Supported badge types:
+ * - `dot`: Displays a dot notification badge with a blue color.
+ * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
+ * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
+ * - `success`: Displays a success badge with a check circle icon and green color.
+ * - `warning`: Displays a warning badge with a warning icon and yellow color.
+ * - `error`: Displays a error badge with a error legacy icon and red color.
+ *
+ * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.
+ *
+ * For the `counter` type, the `mdc-text` component is used to render the counter value.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
@@ -13,24 +25,34 @@ import { Component } from '../../models';
 declare class Badge extends Component {
     /**
      * Type of the badge
-     * Can be `dot` (notification) , `icon` and `counter`
-     *
-     * Default: `dot`
+     * Can be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.
      */
-    type: string;
+    type?: string;
     /**
-     * If `type` is set to `icon`, attribute `iconName` can
-     * be used to choose which icon should be shown
+     * Name of the icon (= filename).
      *
-     * If no `iconName` is provided, no icon will be rendered.
+     * If no `icon-name` is provided, no icon will be rendered.
      */
     iconName?: string;
     /**
-     * badge variant
+     * Type of the variant can be `primary` or `secondary`.
+     * It defines the background and foreground color of the icon.
      */
     variant: string;
+    /**
+     * Counter is the number which can be provided in the badge.
+     */
     counter?: number;
+    /**
+     * The maximum number can be set up to 999, anything about that will be rendered as _999+_.
+     * The max counter can be `9`, `99` or `999`.
+     */
     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.
+     */
     overlay: boolean;
     /**
      * Aria-label attribute to be set for accessibility
@@ -47,9 +69,11 @@ declare class Badge extends Component {
      */
     private getCounterText;
     /**
-     * Method to generate the badge icon template.
-     * @param iconName - name of the icon to be used.
-     * @param variant - variant of the badge.
+     * Method to generate the badge icon.
+     * @param iconName - the name of the icon from the icon set
+     * @param overlay - boolean indicating whether the badge should have an overlay.
+     * @param iconVariant - the variant of the icon badge.
+     * @param type - the type of the badge.
      * @returns the template result of the icon.
      */
     private getBadgeIcon;

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

@@ -16,10 +16,22 @@ import { FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
 import styles from './badge.styles';
 /**
- * A badge is a small, visually distinct element that provides additional information
- * or highlights the status of an item.
- * Badges are often used to display notification dot, counts, making them a useful tool for
- * conveying information quickly without taking up much space.
+ * The `mdc-badge` component is a versatile UI element used to
+ * display dot, icons, counters, success, warning and error type badge.
+ *
+ * Supported badge types:
+ * - `dot`: Displays a dot notification badge with a blue color.
+ * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
+ * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
+ * - `success`: Displays a success badge with a check circle icon and green color.
+ * - `warning`: Displays a warning badge with a warning icon and yellow color.
+ * - `error`: Displays a error badge with a error legacy icon and red color.
+ *
+ * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.
+ *
+ * For the `counter` type, the `mdc-text` component is used to render the counter value.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
@@ -29,17 +41,20 @@ class Badge extends Component {
     constructor() {
         super(...arguments);
         /**
-         * Type of the badge
-         * Can be `dot` (notification) , `icon` and `counter`
-         *
-         * Default: `dot`
+         * Type of the variant can be `primary` or `secondary`.
+         * It defines the background and foreground color of the icon.
          */
-        this.type = DEFAULTS.TYPE;
+        this.variant = DEFAULTS.VARIANT;
         /**
-         * badge variant
+         * The maximum number can be set up to 999, anything about that will be rendered as _999+_.
+         * The max counter can be `9`, `99` or `999`.
          */
-        this.variant = DEFAULTS.VARIANT;
         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.
+         */
         this.overlay = false;
         /**
          * Aria-label attribute to be set for accessibility
@@ -56,22 +71,24 @@ class Badge extends Component {
      * @returns the string representation of the counter
      */
     getCounterText(maxCounter, counter) {
-        if (counter === undefined || typeof counter !== 'number') {
+        if (counter === undefined || typeof counter !== 'number' || maxCounter === 0) {
             return '';
         }
-        // At any given time, the max limit should not cross 999.
-        if (counter > DEFAULTS.MAX_COUNTER_LIMIT) {
-            return `${DEFAULTS.MAX_COUNTER_LIMIT}+`;
-        }
         if (counter > maxCounter) {
             return `${maxCounter}+`;
         }
+        // At any given time, the max limit should not cross 999.
+        if (maxCounter > DEFAULTS.MAX_COUNTER_LIMIT || counter > DEFAULTS.MAX_COUNTER_LIMIT) {
+            return `${DEFAULTS.MAX_COUNTER_LIMIT}+`;
+        }
         return counter.toString();
     }
     /**
-     * Method to generate the badge icon template.
-     * @param iconName - name of the icon to be used.
-     * @param variant - variant of the badge.
+     * Method to generate the badge icon.
+     * @param iconName - the name of the icon from the icon set
+     * @param overlay - boolean indicating whether the badge should have an overlay.
+     * @param iconVariant - the variant of the icon badge.
+     * @param type - the type of the badge.
      * @returns the template result of the icon.
      */
     getBadgeIcon(iconName, overlay, iconVariant, type) {
@@ -102,8 +119,7 @@ class Badge extends Component {
     getIconClasses(overlay, iconVariant, type) {
         const overLayClass = { 'mdc-badge-overlay': overlay };
         const variantTypes = type === BADGE_TYPE.ICON ? ICON_VARIANT : ICON_STATE;
-        const iconVariantType = Object.values(variantTypes).includes(iconVariant)
-            ? iconVariant : DEFAULTS.VARIANT;
+        const iconVariantType = Object.values(variantTypes).includes(iconVariant) ? iconVariant : DEFAULTS.VARIANT;
         const backgroundClass = { [`mdc-badge-icon__${iconVariantType}`]: true };
         return {
             ...overLayClass,
@@ -149,10 +165,11 @@ class Badge extends Component {
      * @returns the TemplateResult for the current badge type.
      */
     getBadgeContentBasedOnType() {
+        if (this.variant && !Object.values(ICON_VARIANT).includes(this.variant)) {
+            this.variant = ICON_VARIANT.PRIMARY;
+        }
         const { counter, iconName, maxCounter, overlay, type, variant } = this;
         switch (type) {
-            case BADGE_TYPE.DOT:
-                return this.getBadgeDot(overlay);
             case BADGE_TYPE.ICON:
                 return this.getBadgeIcon(iconName || '', overlay, variant, type);
             case BADGE_TYPE.COUNTER:
@@ -163,8 +180,10 @@ class Badge extends Component {
                 return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME, overlay, ICON_STATE.WARNING);
             case BADGE_TYPE.ERROR:
                 return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME, overlay, ICON_STATE.ERROR);
+            case BADGE_TYPE.DOT:
             default:
-                return html ``;
+                this.type = BADGE_TYPE.DOT;
+                return this.getBadgeDot(overlay);
         }
     }
     update(changedProperties) {
@@ -180,14 +199,14 @@ class Badge extends Component {
 Badge.styles = [...Component.styles, ...styles];
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Badge.prototype, "type", void 0);
 __decorate([
     property({ type: String, attribute: 'icon-name' }),
     __metadata("design:type", String)
 ], Badge.prototype, "iconName", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], Badge.prototype, "variant", void 0);
 __decorate([
@@ -195,7 +214,7 @@ __decorate([
     __metadata("design:type", Number)
 ], Badge.prototype, "counter", void 0);
 __decorate([
-    property({ type: Number, attribute: 'max-counter' }),
+    property({ type: Number, attribute: 'max-counter', reflect: true }),
     __metadata("design:type", Number)
 ], Badge.prototype, "maxCounter", void 0);
 __decorate([

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

@@ -29,4 +29,4 @@ declare const DEFAULTS: {
     VARIANT: string;
     ICON_SIZE: number;
 };
-export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, };
+export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST };

package/dist/components/badge/badge.constants.js

@@ -30,4 +30,4 @@ const DEFAULTS = {
     VARIANT: ICON_VARIANT.PRIMARY,
     ICON_SIZE: 1,
 };
-export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, };
+export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST };

package/dist/components/badge/badge.styles.js

@@ -46,6 +46,7 @@ const styles = [
     }
     .mdc-badge-icon__primary {
       background-color: var(--mdc-badge-primary-background-color);
+      color: var(--mdc-badge-primary-foreground-color);
     }
     .mdc-badge-icon__success {
       background-color: var(--mdc-badge-success-background-color);

package/dist/custom-elements.json

@@ -120,13 +120,16 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A badge is a small, visually distinct element that provides additional information\nor highlights the status of an item.\nBadges are often used to display notification dot, counts, making them a useful tool for\nconveying information quickly without taking up much space.",
+          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
           "name": "Badge",
           "members": [
             {
               "kind": "field",
               "name": "type",
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon` and `counter`\n\nDefault: `dot`",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
               "attribute": "type",
               "reflects": true
             },
@@ -136,14 +139,15 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
               "attribute": "icon-name"
             },
             {
               "kind": "field",
               "name": "variant",
-              "description": "badge variant",
-              "attribute": "variant"
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -151,6 +155,7 @@
               "type": {
                 "text": "number | undefined"
               },
+              "description": "Counter is the number which can be provided in the badge.",
               "attribute": "counter"
             },
             {
@@ -159,7 +164,9 @@
               "type": {
                 "text": "number"
               },
-              "attribute": "max-counter"
+              "description": "The maximum number can be set up to 999, anything about that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "attribute": "max-counter",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -168,6 +175,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
               "attribute": "overlay"
             },
             {
@@ -223,33 +231,32 @@
                   "type": {
                     "text": "string"
                   },
-                  "description": "name of the icon to be used."
+                  "description": "the name of the icon from the icon set"
                 },
                 {
                   "name": "overlay",
                   "type": {
                     "text": "boolean"
-                  }
+                  },
+                  "description": "boolean indicating whether the badge should have an overlay."
                 },
                 {
                   "name": "iconVariant",
                   "type": {
                     "text": "string"
-                  }
+                  },
+                  "description": "the variant of the icon badge."
                 },
                 {
                   "name": "type",
                   "optional": true,
                   "type": {
                     "text": "string"
-                  }
-                },
-                {
-                  "description": "variant of the badge.",
-                  "name": "variant"
+                  },
+                  "description": "the type of the badge."
                 }
               ],
-              "description": "Method to generate the badge icon template."
+              "description": "Method to generate the badge icon."
             },
             {
               "kind": "method",
@@ -367,7 +374,10 @@
           "attributes": [
             {
               "name": "type",
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon` and `counter`\n\nDefault: `dot`",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
               "fieldName": "type"
             },
             {
@@ -375,12 +385,12 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
               "fieldName": "iconName"
             },
             {
               "name": "variant",
-              "description": "badge variant",
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
               "fieldName": "variant"
             },
             {
@@ -388,6 +398,7 @@
               "type": {
                 "text": "number | undefined"
               },
+              "description": "Counter is the number which can be provided in the badge.",
               "fieldName": "counter"
             },
             {
@@ -395,6 +406,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "The maximum number can be set up to 999, anything about that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
               "fieldName": "maxCounter"
             },
             {
@@ -403,6 +415,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
               "fieldName": "overlay"
             },
             {
@@ -420,7 +433,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-badge",
-          "jsDoc": "/**\n * A badge is a small, visually distinct element that provides additional information\n * or highlights the status of an item.\n * Badges are often used to display notification dot, counts, making them a useful tool for\n * conveying information quickly without taking up much space.\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
+          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
           "customElement": true
         }
       ],

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

@@ -1,9 +1,21 @@
 import Component from '../../components/badge';
 /**
- * A badge is a small, visually distinct element that provides additional information
- * or highlights the status of an item.
- * Badges are often used to display notification dot, counts, making them a useful tool for
- * conveying information quickly without taking up much space.
+ * The `mdc-badge` component is a versatile UI element used to
+ * display dot, icons, counters, success, warning and error type badge.
+ *
+ * Supported badge types:
+ * - `dot`: Displays a dot notification badge with a blue color.
+ * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
+ * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
+ * - `success`: Displays a success badge with a check circle icon and green color.
+ * - `warning`: Displays a warning badge with a warning icon and yellow color.
+ * - `error`: Displays a error badge with a error legacy icon and red color.
+ *
+ * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.
+ *
+ * For the `counter` type, the `mdc-text` component is used to render the counter value.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *

package/dist/react/badge/index.js

@@ -3,10 +3,22 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/badge';
 import { TAG_NAME } from '../../components/badge/badge.constants';
 /**
- * A badge is a small, visually distinct element that provides additional information
- * or highlights the status of an item.
- * Badges are often used to display notification dot, counts, making them a useful tool for
- * conveying information quickly without taking up much space.
+ * The `mdc-badge` component is a versatile UI element used to
+ * display dot, icons, counters, success, warning and error type badge.
+ *
+ * Supported badge types:
+ * - `dot`: Displays a dot notification badge with a blue color.
+ * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
+ * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
+ * - `success`: Displays a success badge with a check circle icon and green color.
+ * - `warning`: Displays a warning badge with a warning icon and yellow color.
+ * - `error`: Displays a error badge with a error legacy icon and red color.
+ *
+ * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.
+ *
+ * For the `counter` type, the `mdc-text` component is used to render the counter value.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *

package/package.json

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