@momentum-design/components 0.4.17 → 0.4.18

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) {
@@ -180,7 +197,7 @@ 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' }),

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,13 +139,13 @@
               "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",
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
               "attribute": "variant"
             },
             {
@@ -151,6 +154,7 @@
               "type": {
                 "text": "number | undefined"
               },
+              "description": "Counter is the number which can be provided in the badge.",
               "attribute": "counter"
             },
             {
@@ -159,6 +163,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`.",
               "attribute": "max-counter"
             },
             {
@@ -168,6 +173,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 +229,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 +372,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 +383,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 +396,7 @@
               "type": {
                 "text": "number | undefined"
               },
+              "description": "Counter is the number which can be provided in the badge.",
               "fieldName": "counter"
             },
             {
@@ -395,6 +404,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 +413,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 +431,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.18"
 }