@momentum-design/components 0.4.16 → 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

@@ -12,13 +12,26 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
+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
  *
@@ -28,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
@@ -55,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) {
@@ -119,8 +137,8 @@ class Badge extends Component {
     getBadgeCounterText(maxCounter, overlay, counter) {
         return html `
       <mdc-text
-        type="body-small-medium"
-        tagname="div"
+        type="${FONT_TYPE.BODY_SMALL_MEDIUM}"
+        tagname="${VALID_TEXT_TAGS.DIV}"
         class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': overlay })}"
       >
         ${this.getCounterText(maxCounter, counter)}
@@ -179,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/components/text/text.component.d.ts

@@ -1,6 +1,5 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import type { FontType, ValidTextTags } from './text.types';
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -55,7 +54,7 @@ declare class Text extends Component {
      * - 'headline-small-light'
      * - 'headline-small-regular'
      */
-    type: FontType;
+    type: string;
     /**
      * Specifies the HTML tag name for the text element. The default tag name is `p`.
      * This attribute is optional. When set, it changes the tag name of the text element.
@@ -76,7 +75,7 @@ declare class Text extends Component {
      * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
      * Note that the styling is determined by the `type` attribute.
      */
-    tagname?: ValidTextTags;
+    tagname?: string | undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './text.styles';
 import { Component } from '../../models';
-import { DEFAULTS } from './text.constants';
+import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -95,16 +95,16 @@ class Text extends Component {
         // Lit does not support dynamically changing values for the tag name of a custom element.
         // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
         switch (this.tagname) {
-            case 'h1': return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
-            case 'h2': return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
-            case 'h3': return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
-            case 'h4': return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
-            case 'h5': return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
-            case 'h6': return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
-            case 'div': return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
-            case 'span': return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
-            case 'small': return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
-            case 'p':
+            case VALID_TEXT_TAGS.H1: return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
+            case VALID_TEXT_TAGS.H2: return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
+            case VALID_TEXT_TAGS.H3: return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
+            case VALID_TEXT_TAGS.H4: return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
+            case VALID_TEXT_TAGS.H5: return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
+            case VALID_TEXT_TAGS.H6: return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
+            case VALID_TEXT_TAGS.DIV: return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
+            case VALID_TEXT_TAGS.SPAN: return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
+            case VALID_TEXT_TAGS.SMALL: return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
+            case VALID_TEXT_TAGS.P:
             default: return html `<p part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
         }
     }
@@ -112,10 +112,10 @@ class Text extends Component {
 Text.styles = [...Component.styles, ...styles];
 __decorate([
     property({ attribute: 'type', reflect: true, type: String }),
-    __metadata("design:type", String)
+    __metadata("design:type", Object)
 ], Text.prototype, "type", void 0);
 __decorate([
     property({ attribute: 'tagname', reflect: true, type: String }),
-    __metadata("design:type", String)
+    __metadata("design:type", Object)
 ], Text.prototype, "tagname", void 0);
 export default Text;

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

@@ -1,12 +1,51 @@
-import type { FontType, ValidTextTags } from './text.types';
 declare const TAG_NAME: "mdc-text";
-declare const VALUES: {
-    TYPE: Array<FontType>;
-    TAGNAME: Array<ValidTextTags>;
+declare const FONT_TYPE: {
+    BODY_SMALL_REGULAR: string;
+    BODY_SMALL_MEDIUM: string;
+    BODY_SMALL_BOLD: string;
+    BODY_MIDSIZE_REGULAR: string;
+    BODY_MIDSIZE_MEDIUM: string;
+    BODY_MIDSIZE_BOLD: string;
+    BODY_LARGE_REGULAR: string;
+    BODY_LARGE_MEDIUM: string;
+    BODY_LARGE_BOLD: string;
+    BODY_SMALL_REGULAR_UNDERLINE: string;
+    BODY_SMALL_MEDIUM_UNDERLINE: string;
+    BODY_MIDSIZE_REGULAR_UNDERLINE: string;
+    BODY_MIDSIZE_MEDIUM_UNDERLINE: string;
+    BODY_LARGE_REGULAR_UNDERLINE: string;
+    BODY_LARGE_MEDIUM_UNDERLINE: string;
+    HEADING_SMALL_REGULAR: string;
+    HEADING_SMALL_MEDIUM: string;
+    HEADING_SMALL_BOLD: string;
+    HEADING_MIDSIZE_REGULAR: string;
+    HEADING_MIDSIZE_MEDIUM: string;
+    HEADING_MIDSIZE_BOLD: string;
+    HEADING_LARGE_REGULAR: string;
+    HEADING_LARGE_MEDIUM: string;
+    HEADING_LARGE_BOLD: string;
+    HEADING_XLARGE_REGULAR: string;
+    HEADING_XLARGE_MEDIUM: string;
+    HEADING_XLARGE_BOLD: string;
+    HEADLINE_SMALL_LIGHT: string;
+    HEADLINE_SMALL_REGULAR: string;
+};
+declare const VALID_TEXT_TAGS: {
+    H1: string;
+    H2: string;
+    H3: string;
+    H4: string;
+    H5: string;
+    H6: string;
+    P: string;
+    SMALL: string;
+    SPAN: string;
+    DIV: string;
 };
 declare const DEFAULTS: {
-    TYPE: FontType;
-    TEXT_ELEMENT_TAGNAME: ValidTextTags;
+    TYPE: string;
+    TEXT_ELEMENT_TAGNAME: string;
     CSS_PART_TEXT: string;
+    CHILDREN: string;
 };
-export { TAG_NAME, DEFAULTS, VALUES };
+export { TAG_NAME, DEFAULTS, FONT_TYPE, VALID_TEXT_TAGS };

package/dist/components/text/text.constants.js

@@ -1,53 +1,52 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('text');
-const VALUES = {
-    TYPE: [
-        'body-small-regular',
-        'body-small-medium',
-        'body-small-bold',
-        'body-midsize-regular',
-        'body-midsize-medium',
-        'body-midsize-bold',
-        'body-large-regular',
-        'body-large-medium',
-        'body-large-bold',
-        'body-small-regular-underline',
-        'body-small-medium-underline',
-        'body-midsize-regular-underline',
-        'body-midsize-medium-underline',
-        'body-large-regular-underline',
-        'body-large-medium-underline',
-        'heading-small-regular',
-        'heading-small-medium',
-        'heading-small-bold',
-        'heading-midsize-regular',
-        'heading-midsize-medium',
-        'heading-midsize-bold',
-        'heading-large-regular',
-        'heading-large-medium',
-        'heading-large-bold',
-        'heading-xlarge-regular',
-        'heading-xlarge-medium',
-        'heading-xlarge-bold',
-        'headline-small-light',
-        'headline-small-regular',
-    ],
-    TAGNAME: [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'p',
-        'small',
-        'span',
-        'div',
-    ],
+const FONT_TYPE = {
+    BODY_SMALL_REGULAR: 'body-small-regular',
+    BODY_SMALL_MEDIUM: 'body-small-medium',
+    BODY_SMALL_BOLD: 'body-small-bold',
+    BODY_MIDSIZE_REGULAR: 'body-midsize-regular',
+    BODY_MIDSIZE_MEDIUM: 'body-midsize-medium',
+    BODY_MIDSIZE_BOLD: 'body-midsize-bold',
+    BODY_LARGE_REGULAR: 'body-large-regular',
+    BODY_LARGE_MEDIUM: 'body-large-medium',
+    BODY_LARGE_BOLD: 'body-large-bold',
+    BODY_SMALL_REGULAR_UNDERLINE: 'body-small-regular-underline',
+    BODY_SMALL_MEDIUM_UNDERLINE: 'body-small-medium-underline',
+    BODY_MIDSIZE_REGULAR_UNDERLINE: 'body-midsize-regular-underline',
+    BODY_MIDSIZE_MEDIUM_UNDERLINE: 'body-midsize-medium-underline',
+    BODY_LARGE_REGULAR_UNDERLINE: 'body-large-regular-underline',
+    BODY_LARGE_MEDIUM_UNDERLINE: 'body-large-medium-underline',
+    HEADING_SMALL_REGULAR: 'heading-small-regular',
+    HEADING_SMALL_MEDIUM: 'heading-small-medium',
+    HEADING_SMALL_BOLD: 'heading-small-bold',
+    HEADING_MIDSIZE_REGULAR: 'heading-midsize-regular',
+    HEADING_MIDSIZE_MEDIUM: 'heading-midsize-medium',
+    HEADING_MIDSIZE_BOLD: 'heading-midsize-bold',
+    HEADING_LARGE_REGULAR: 'heading-large-regular',
+    HEADING_LARGE_MEDIUM: 'heading-large-medium',
+    HEADING_LARGE_BOLD: 'heading-large-bold',
+    HEADING_XLARGE_REGULAR: 'heading-xlarge-regular',
+    HEADING_XLARGE_MEDIUM: 'heading-xlarge-medium',
+    HEADING_XLARGE_BOLD: 'heading-xlarge-bold',
+    HEADLINE_SMALL_LIGHT: 'headline-small-light',
+    HEADLINE_SMALL_REGULAR: 'headline-small-regular',
+};
+const VALID_TEXT_TAGS = {
+    H1: 'h1',
+    H2: 'h2',
+    H3: 'h3',
+    H4: 'h4',
+    H5: 'h5',
+    H6: 'h6',
+    P: 'p',
+    SMALL: 'small',
+    SPAN: 'span',
+    DIV: 'div',
 };
 const DEFAULTS = {
-    TYPE: 'body-midsize-regular',
-    TEXT_ELEMENT_TAGNAME: 'p',
+    TYPE: FONT_TYPE.BODY_LARGE_REGULAR,
+    TEXT_ELEMENT_TAGNAME: VALID_TEXT_TAGS.P,
     CSS_PART_TEXT: 'text',
+    CHILDREN: 'The quick brown fox jumps over the lazy dog',
 };
-export { TAG_NAME, DEFAULTS, VALUES };
+export { TAG_NAME, DEFAULTS, FONT_TYPE, VALID_TEXT_TAGS };