@momentum-design/components 0.4.13 → 0.4.14

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

@@ -1,33 +1,23 @@
-import { CSSResult } from 'lit';
+import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
-import type { BadgeType } from './badge.types';
 /**
- * @slot - This is a default/unnamed slot
- *
- * @summary This is MyElement
+ * 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.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @tagname mdc-badge
  */
 declare class Badge extends Component {
     /**
      * Type of the badge
-     * Can be `regular`, `icon`, `text` or `warning`
-     *
-     * Default: `regular`
-     */
-    type?: BadgeType;
-    /**
-     * Scale of the badge (works in combination with length unit)
-     *
-     * Default: `1`
-     */
-    size?: number;
-    /**
-     * Length unit attribute for scale
+     * Can be `dot` (notification) , `icon` and `counter`
      *
-     * Default: `rem`
+     * Default: `dot`
      */
-    lengthUnit?: string;
+    type: string;
     /**
      * If `type` is set to `icon`, attribute `iconName` can
      * be used to choose which icon should be shown
@@ -36,16 +26,71 @@ declare class Badge extends Component {
      */
     iconName?: string;
     /**
-     * If `type` is set to `text`, attribute `text` can
-     * be used to pass in any text to be displayed in the badge.
+     * badge variant
+     */
+    variant: string;
+    counter?: number;
+    maxCounter: number;
+    overlay: boolean;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    /**
+     * If `type` is set to `counter` and if `counter` is greater than `maxCounter`,
+     * then it will return a string the maxCounter value as string.
+     * Otherwise, it will return a string representation of `counter`.
+     * If `counter` is not a number, it will return an empty string.
+     * @param maxCounter - the maximum limit which can be displayed on the badge
+     * @param counter - the number to be displayed on the badge
+     * @returns the string representation of the counter
+     */
+    private getCounterText;
+    /**
+     * Method to generate the badge icon template.
+     * @param iconName - name of the icon to be used.
+     * @param variant - variant of the badge.
+     * @returns the template result of the icon.
+     */
+    private getBadgeIcon;
+    /**
+     * Method to generate the badge dot template.
+     * @param overlay - boolean indicating whether the badge should have an overlay.
+     * @returns the template result of the dot with mdc-badge-dot class.
+     */
+    private getBadgeDot;
+    /**
+     * This method generates the CSS classes for the badge icon.
+     * @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 - an object containing the CSS classes for the icon.
+     */
+    private getIconClasses;
+    /**
+     * Method to generate the badge text and counter template.
+     * @param maxCounter - the maximum limit which can be displayed on the badge
+     * @param overlay - whether the badge should have an overlay.
+     * @param counter - the number to be displayed on the badge
+     * @returns the template result of the text.
+     */
+    private getBadgeCounterText;
+    /**
+     * Method to set the role based on the aria-label provided.
+     * If the aria-label is provided, the role of the element will be 'img'.
+     * Otherwise, the role will be null.
+     */
+    private setRoleByAriaLabel;
+    /**
+     * Generates the badge content based on the badge type.
+     * Utilizes various helper methods to create the appropriate badge template based on the
+     * current badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'
+     * types, returning the corresponding template result for each type.
+     * @returns the TemplateResult for the current badge type.
      */
-    text?: string;
-    private updateSize;
-    updated(changedProperties: Map<string, any>): void;
-    iconTemplate(): import("lit-html").TemplateResult<1>;
-    textTemplate(): import("lit-html").TemplateResult<1>;
-    warningTemplate(): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
+    private getBadgeContentBasedOnType;
+    update(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1 | 2 | 3>;
     static styles: Array<CSSResult>;
 }
 export default Badge;

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

@@ -2,16 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const lit_1 = require("lit");
+const class_map_js_1 = require("lit-html/directives/class-map.js");
 const decorators_js_1 = require("lit/decorators.js");
 const if_defined_js_1 = require("lit/directives/if-defined.js");
-const style_map_js_1 = require("lit/directives/style-map.js");
 const models_1 = require("../../models");
 const badge_constants_1 = require("./badge.constants");
 const badge_styles_1 = tslib_1.__importDefault(require("./badge.styles"));
 /**
- * @slot - This is a default/unnamed slot
- *
- * @summary This is MyElement
+ * 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.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @tagname mdc-badge
  */
@@ -20,95 +23,180 @@ class Badge extends models_1.Component {
         super(...arguments);
         /**
          * Type of the badge
-         * Can be `regular`, `icon`, `text` or `warning`
+         * Can be `dot` (notification) , `icon` and `counter`
          *
-         * Default: `regular`
+         * Default: `dot`
          */
         this.type = badge_constants_1.DEFAULTS.TYPE;
         /**
-         * Scale of the badge (works in combination with length unit)
-         *
-         * Default: `1`
+         * badge variant
          */
-        this.size = badge_constants_1.DEFAULTS.SIZE;
+        this.variant = badge_constants_1.DEFAULTS.VARIANT;
+        this.maxCounter = badge_constants_1.DEFAULTS.MAX_COUNTER;
+        this.overlay = false;
         /**
-         * Length unit attribute for scale
-         *
-         * Default: `rem`
+         * Aria-label attribute to be set for accessibility
          */
-        this.lengthUnit = badge_constants_1.DEFAULTS.LENGTH_UNIT;
-    }
-    updateSize() {
-        // if (this.scale && this.lengthUnit) {
-        //   const value = `${this.scale}${this.lengthUnit}`;
-        //   this.style.height = value;
-        //   if (this.type !== 'text') {
-        //     this.style.width = value;
-        //   }
-        // }
+        this.ariaLabel = null;
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
-            this.updateSize();
+    /**
+     * If `type` is set to `counter` and if `counter` is greater than `maxCounter`,
+     * then it will return a string the maxCounter value as string.
+     * Otherwise, it will return a string representation of `counter`.
+     * If `counter` is not a number, it will return an empty string.
+     * @param maxCounter - the maximum limit which can be displayed on the badge
+     * @param counter - the number to be displayed on the badge
+     * @returns the string representation of the counter
+     */
+    getCounterText(maxCounter, counter) {
+        if (counter === undefined || typeof counter !== 'number') {
+            return '';
         }
+        // At any given time, the max limit should not cross 999.
+        if (counter > badge_constants_1.DEFAULTS.MAX_COUNTER_LIMIT) {
+            return `${badge_constants_1.DEFAULTS.MAX_COUNTER_LIMIT}+`;
+        }
+        if (counter > maxCounter) {
+            return `${maxCounter}+`;
+        }
+        return counter.toString();
     }
-    iconTemplate() {
-        return (0, lit_1.html) `<div class="mdc-badge-icon-container">
-      <mdc-icon name=${(0, if_defined_js_1.ifDefined)(this.iconName)} size="100" length-unit="%"></mdc-icon>
-    </div>`;
+    /**
+     * Method to generate the badge icon template.
+     * @param iconName - name of the icon to be used.
+     * @param variant - variant of the badge.
+     * @returns the template result of the icon.
+     */
+    getBadgeIcon(iconName, overlay, iconVariant, type) {
+        return (0, lit_1.html) `
+      <mdc-icon
+        class="mdc-badge-icon ${(0, class_map_js_1.classMap)(this.getIconClasses(overlay, iconVariant, type))}"
+        name="${(0, if_defined_js_1.ifDefined)(iconName)}"
+        length-unit="${badge_constants_1.DEFAULTS.LENGTH_UNIT}"
+        size="${badge_constants_1.DEFAULTS.ICON_SIZE}"
+      ></mdc-icon>
+    `;
     }
-    textTemplate() {
-        return (0, lit_1.html) `${this.text}`;
+    /**
+     * Method to generate the badge dot template.
+     * @param overlay - boolean indicating whether the badge should have an overlay.
+     * @returns the template result of the dot with mdc-badge-dot class.
+     */
+    getBadgeDot(overlay) {
+        return (0, lit_1.html) `<div class="mdc-badge-dot ${(0, class_map_js_1.classMap)({ 'mdc-badge-overlay': overlay })}"></div>`;
     }
-    warningTemplate() {
-        return (0, lit_1.html) ` <mdc-icon name="${badge_constants_1.WARNING_ICON_NAME}" class="mdc-badge-warning"></mdc-icon> `;
+    /**
+     * This method generates the CSS classes for the badge icon.
+     * @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 - an object containing the CSS classes for the icon.
+     */
+    getIconClasses(overlay, iconVariant, type) {
+        const overLayClass = { 'mdc-badge-overlay': overlay };
+        const variantTypes = type === badge_constants_1.BADGE_TYPE.ICON ? badge_constants_1.ICON_VARIANT : badge_constants_1.ICON_STATE;
+        const iconVariantType = Object.values(variantTypes).includes(iconVariant)
+            ? iconVariant : badge_constants_1.DEFAULTS.VARIANT;
+        const backgroundClass = { [`mdc-badge-icon__${iconVariantType}`]: true };
+        return {
+            ...overLayClass,
+            ...backgroundClass,
+        };
     }
-    render() {
-        let content;
-        const size = `${this.size}${this.lengthUnit}`;
-        let sizeStyles = { width: size, height: size };
-        switch (this.type) {
-            case 'regular':
-                content = (0, lit_1.html) ``;
-                break;
-            case 'icon':
-                content = this.iconTemplate();
-                break;
-            case 'text':
-                content = this.textTemplate();
-                // make width flexible when text -> only set the height:
-                sizeStyles = { height: sizeStyles.height };
-                break;
-            case 'warning':
-                content = this.warningTemplate();
-                break;
+    /**
+     * Method to generate the badge text and counter template.
+     * @param maxCounter - the maximum limit which can be displayed on the badge
+     * @param overlay - whether the badge should have an overlay.
+     * @param counter - the number to be displayed on the badge
+     * @returns the template result of the text.
+     */
+    getBadgeCounterText(maxCounter, overlay, counter) {
+        return (0, lit_1.html) `
+      <mdc-text
+        type="body-small-medium"
+        tagname="div"
+        class="mdc-badge-text ${(0, class_map_js_1.classMap)({ 'mdc-badge-overlay': overlay })}"
+      >
+        ${this.getCounterText(maxCounter, counter)}
+      </mdc-text>
+    `;
+    }
+    /**
+     * Method to set the role based on the aria-label provided.
+     * If the aria-label is provided, the role of the element will be 'img'.
+     * Otherwise, the role will be null.
+     */
+    setRoleByAriaLabel() {
+        if (this.ariaLabel) {
+            this.role = 'img';
+        }
+        else {
+            this.role = null;
+        }
+    }
+    /**
+     * Generates the badge content based on the badge type.
+     * Utilizes various helper methods to create the appropriate badge template based on the
+     * current badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'
+     * types, returning the corresponding template result for each type.
+     * @returns the TemplateResult for the current badge type.
+     */
+    getBadgeContentBasedOnType() {
+        const { counter, iconName, maxCounter, overlay, type, variant } = this;
+        switch (type) {
+            case badge_constants_1.BADGE_TYPE.DOT:
+                return this.getBadgeDot(overlay);
+            case badge_constants_1.BADGE_TYPE.ICON:
+                return this.getBadgeIcon(iconName || '', overlay, variant, type);
+            case badge_constants_1.BADGE_TYPE.COUNTER:
+                return this.getBadgeCounterText(maxCounter, overlay, counter);
+            case badge_constants_1.BADGE_TYPE.SUCCESS:
+                return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.SUCCESS_ICON_NAME, overlay, badge_constants_1.ICON_STATE.SUCCESS);
+            case badge_constants_1.BADGE_TYPE.WARNING:
+                return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.WARNING_ICON_NAME, overlay, badge_constants_1.ICON_STATE.WARNING);
+            case badge_constants_1.BADGE_TYPE.ERROR:
+                return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.ERROR_ICON_NAME, overlay, badge_constants_1.ICON_STATE.ERROR);
             default:
-                content = (0, lit_1.html) ``;
-                break;
+                return (0, lit_1.html) ``;
         }
-        return (0, lit_1.html) `<div class="mdc-badge-container" style=${(0, style_map_js_1.styleMap)(sizeStyles)}>${content}</div>`;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('ariaLabel')) {
+            this.setRoleByAriaLabel();
+        }
+    }
+    render() {
+        return this.getBadgeContentBasedOnType();
     }
 }
 Badge.styles = [...models_1.Component.styles, ...badge_styles_1.default];
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, reflect: true }),
-    tslib_1.__metadata("design:type", String)
+    tslib_1.__metadata("design:type", Object)
 ], Badge.prototype, "type", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Number }),
-    tslib_1.__metadata("design:type", Number)
-], Badge.prototype, "size", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
-    tslib_1.__metadata("design:type", String)
-], Badge.prototype, "lengthUnit", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, attribute: 'icon-name' }),
     tslib_1.__metadata("design:type", String)
 ], Badge.prototype, "iconName", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", String)
-], Badge.prototype, "text", void 0);
+    tslib_1.__metadata("design:type", Object)
+], Badge.prototype, "variant", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: Number }),
+    tslib_1.__metadata("design:type", Number)
+], Badge.prototype, "counter", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: Number, attribute: 'max-counter' }),
+    tslib_1.__metadata("design:type", Number)
+], Badge.prototype, "maxCounter", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: Boolean }),
+    tslib_1.__metadata("design:type", Object)
+], Badge.prototype, "overlay", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'aria-label' }),
+    tslib_1.__metadata("design:type", Object)
+], Badge.prototype, "ariaLabel", void 0);
 exports.default = Badge;

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

@@ -1,8 +1,32 @@
 declare const TAG_NAME: "mdc-badge";
-declare const WARNING_ICON_NAME = "warning-badge-filled";
+declare const BADGE_TYPE: {
+    DOT: string;
+    ICON: string;
+    COUNTER: string;
+    SUCCESS: string;
+    WARNING: string;
+    ERROR: string;
+};
+declare const ICON_NAMES_LIST: {
+    SUCCESS_ICON_NAME: string;
+    WARNING_ICON_NAME: string;
+    ERROR_ICON_NAME: string;
+};
+declare const ICON_VARIANT: {
+    PRIMARY: string;
+    SECONDARY: string;
+};
+declare const ICON_STATE: {
+    SUCCESS: string;
+    WARNING: string;
+    ERROR: string;
+};
 declare const DEFAULTS: {
-    TYPE: "regular";
-    SIZE: number;
+    TYPE: string;
     LENGTH_UNIT: string;
+    MAX_COUNTER: number;
+    MAX_COUNTER_LIMIT: number;
+    VARIANT: string;
+    ICON_SIZE: number;
 };
-export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME, };
+export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, };

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

@@ -1,15 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WARNING_ICON_NAME = exports.DEFAULTS = exports.TAG_NAME = void 0;
+exports.ICON_NAMES_LIST = exports.ICON_VARIANT = exports.ICON_STATE = exports.BADGE_TYPE = exports.DEFAULTS = exports.TAG_NAME = void 0;
 const tslib_1 = require("tslib");
 const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
 const TAG_NAME = tag_name_1.default.constructTagName('badge');
 exports.TAG_NAME = TAG_NAME;
-const WARNING_ICON_NAME = 'warning-badge-filled';
-exports.WARNING_ICON_NAME = WARNING_ICON_NAME;
+const BADGE_TYPE = {
+    DOT: 'dot',
+    ICON: 'icon',
+    COUNTER: 'counter',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    ERROR: 'error',
+};
+exports.BADGE_TYPE = BADGE_TYPE;
+const ICON_NAMES_LIST = {
+    SUCCESS_ICON_NAME: 'check-circle-filled',
+    WARNING_ICON_NAME: 'warning-filled',
+    ERROR_ICON_NAME: 'error-legacy-filled',
+};
+exports.ICON_NAMES_LIST = ICON_NAMES_LIST;
+const ICON_VARIANT = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+};
+exports.ICON_VARIANT = ICON_VARIANT;
+const ICON_STATE = {
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    ERROR: 'error',
+};
+exports.ICON_STATE = ICON_STATE;
 const DEFAULTS = {
-    TYPE: 'regular',
-    SIZE: 1,
+    TYPE: BADGE_TYPE.DOT,
     LENGTH_UNIT: 'rem',
+    MAX_COUNTER: 99,
+    MAX_COUNTER_LIMIT: 999,
+    VARIANT: ICON_VARIANT.PRIMARY,
+    ICON_SIZE: 1,
 };
 exports.DEFAULTS = DEFAULTS;

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

@@ -6,22 +6,64 @@ const styles = [
     styles_1.hostFitContentStyles,
     (0, lit_1.css) `
     :host {
-      --mdc-badge-icon-background-color: var(--mds-color-theme-background-accent-normal);
-      --mdc-badge-icon-color: var(--mds-color-theme-common-text-primary-normal);
-    }
+      --mdc-badge-primary-foreground-color: var(--mds-color-theme-common-text-primary-normal);
+      --mdc-badge-primary-background-color: var(--mds-color-theme-background-accent-normal);
+
+      --mdc-badge-secondary-foreground-color: var(--mds-color-theme-text-secondary-normal);
+      --mdc-badge-secondary-background-color: var(--mds-color-theme-background-alert-default-normal);
 
-    .mdc-badge-container {
+      --mdc-badge-success-foreground-color: var(--mds-color-theme-text-success-normal);
+      --mdc-badge-success-background-color: var(--mds-color-theme-background-alert-success-normal);
+      
+      --mdc-badge-warning-foreground-color: var(--mds-color-theme-text-warning-normal);
+      --mdc-badge-warning-background-color: var(--mds-color-theme-background-alert-warning-normal);
+      
+      --mdc-badge-error-foreground-color: var(--mds-color-theme-text-error-normal);
+      --mdc-badge-error-background-color: var(--mds-color-theme-background-alert-error-normal);
+      
+      --mdc-badge-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
+      
+      color: var(--mdc-badge-primary-foreground-color);
+    }
+    .mdc-badge-overlay {
+      outline: 0.0625rem solid var(--mdc-badge-overlay-background-color);
+    }
+    .mdc-badge-text {
+      padding: 0 0.25rem;
+      border-radius: 6.25rem;
+      min-width: 1rem;
       display: flex;
       justify-content: center;
-      align-items: center;
-      border-radius: 9999px;
-      background-color: var(--mdc-badge-icon-background-color);
-      color: var(--mdc-badge-icon-color);
+      background-color: var(--mdc-badge-primary-background-color);
     }
-
-    .mdc-badge-icon-container {
-      height: 80%;
-      width: 80%;
+    .mdc-badge-dot {
+      width: 0.75rem;
+      height: 0.75rem;
+      border-radius: 50%;
+      background-color: var(--mdc-badge-primary-background-color);
+    }
+    .mdc-badge-icon {
+      padding: 2px;
+      border-radius: 50%;
+    }
+    .mdc-badge-icon__primary {
+      background-color: var(--mdc-badge-primary-background-color);
+    }
+    .mdc-badge-icon__success {
+      background-color: var(--mdc-badge-success-background-color);
+      color: var(--mdc-badge-success-foreground-color);
+    }
+    .mdc-badge-icon__warning {
+      background-color: var(--mdc-badge-warning-background-color);
+      color: var(--mdc-badge-warning-foreground-color);
+    }
+    .mdc-badge-icon__error {
+      background-color: var(--mdc-badge-error-background-color);
+      color: var(--mdc-badge-error-foreground-color);
+    }
+    .mdc-badge-icon__secondary {
+      background-color: var(--mdc-badge-secondary-background-color);
+      color: var(--mdc-badge-secondary-foreground-color);
     }
   `,
 ];

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

@@ -1,4 +1,6 @@
 import Badge from './badge.component';
+import '../icon';
+import '../text';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-badge']: Badge;

package/dist/components/badge/index.js

@@ -3,5 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const badge_component_1 = tslib_1.__importDefault(require("./badge.component"));
 const badge_constants_1 = require("./badge.constants");
+require("../icon");
+require("../text");
 badge_component_1.default.register(badge_constants_1.TAG_NAME);
 exports.default = badge_component_1.default;