@momentum-design/components 0.4.18 → 0.5.0

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

@@ -119,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,
@@ -166,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:
@@ -180,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) {
@@ -204,7 +206,7 @@ __decorate([
     __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([
@@ -212,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/custom-elements.json

@@ -146,7 +146,8 @@
               "kind": "field",
               "name": "variant",
               "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
-              "attribute": "variant"
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -164,7 +165,8 @@
                 "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"
+              "attribute": "max-counter",
+              "reflects": true
             },
             {
               "kind": "field",

package/package.json

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