q2-tecton-elements 1.54.4 → 1.55.0

package/dist/collection/components/q2-badge/q2-badge.css

@@ -67,76 +67,87 @@ button {
 
 :host {
   display: inline-block;
-}
-
-.badge-wrapper {
-  --comp-badge-background: var(--tct-badge-background, var(--t-gray8, #61c4ff));
+  line-height: 0;
+  --comp-badge-font-size: var(--app-font-size-small, 12px);
+  --comp-badge-large-font-size: var(--app-font-size-medium, 14px);
+  --comp-badge-background: var(--tct-badge-background, var(--t-a11y-gray-color-AAA, #6c6c6c));
   --comp-badge-color: var(--tct-badge-color, var(--t-base, #ffffff));
-  --comp-badge-border-style: var(--tct-badge-border-style, solid);
-  --comp-badge-border-color: var(--tct-badge-border-color, var(--t-secondary-l1, #9a9898));
 }
-:host([status=info]) .badge-wrapper {
+:host:host([status=info]) {
   --comp-badge-background: var(--tct-badge-info-background, var(--const-stoplight-info, #0079c1));
   --comp-badge-color: var(--tct-badge-info-color, var(--const-stoplight-info-text, #ffffff));
-  --comp-badge-border-color: var(--tct-badge-info-border-color, var(--const-stoplight-info-l1, #3a9bd6));
 }
-:host([status=alert]) .badge-wrapper {
+:host:host([status=alert]) {
   --comp-badge-background: var(--tct-badge-alert-background, var(--const-stoplight-alert, #d20a0a));
   --comp-badge-color: var(--tct-badge-alert-color, var(--const-stoplight-alert-text, #ffffff));
-  --comp-badge-border-color: var(--tct-badge-alert-border-color, var(--const-stoplight-alert-l1, #e42929));
 }
-:host([status=warning]) .badge-wrapper {
+:host:host([status=warning]) {
   --comp-badge-background: var(--tct-badge-warning-background, var(--const-stoplight-warning, #c35500));
-  --comp-badge-color: var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #423535));
-  --comp-badge-border-color: var(--tct-badge-warning-border-color, var(--const-stoplight-warning-l1, #f9ce4c));
+  --comp-badge-color: var(--tct-badge-warning-color, var(--const-stoplight-warning-text, #ffffff));
 }
-:host([status=success]) .badge-wrapper {
-  --comp-badge-background: var(--tct-badge-success-background, var(--const-stoplight-success, #57fc45));
+:host:host([status=success]) {
+  --comp-badge-background: var(--tct-badge-success-background, var(--const-stoplight-success, #0e8a00));
   --comp-badge-color: var(--tct-badge-success-color, var(--const-stoplight-success-text, #ffffff));
-  --comp-badge-border-color: var(--tct-badge-success-border-color, var(--const-stoplight-success-l1, #2eaa21));
 }
-:host([theme=primary]) .badge-wrapper {
-  --comp-badge-background: var(--tct-badge-primary-background, var(--t-primary, #0079c2));
+:host:host([theme=primary]) {
+  --comp-badge-background: var(--tct-badge-primary-background, var(--t-primary, #6a4a9e));
   --comp-badge-color: var(--tct-badge-primary-color, var(--t-primary-text, #ffffff));
-  --comp-badge-border-color: var(--tct-badge-primary-border-color, var(--t-primary-l1, #3a9bd6));
 }
-:host([theme=secondary]) .badge-wrapper {
-  --comp-badge-background: var(--tct-badge-secondary-background, var(--t-secondary, #b4c2cd));
-  --comp-badge-color: var(--tct-badge-secondary-color, var(--t-secondary-text, #ffffff));
-  --comp-badge-border-color: var(--tct-badge-secondary-border-color, var(--t-secondary-l1, #c6d1db));
+:host:host([theme=secondary]) {
+  --comp-badge-background: var(--tct-badge-secondary-background, var(--t-secondary, #b3c2cc));
+  --comp-badge-color: var(--tct-badge-secondary-color, var(--t-secondary-text, #141414));
 }
-:host([theme=tertiary]) .badge-wrapper {
-  --comp-badge-background: var(--tct-badge-tertiary-background, var(--t-tertiary, #e9f5fc));
-  --comp-badge-color: var(--tct-badge-tertiary-color, var(--t-tertiary-text, #000000));
-  --comp-badge-border-color: var(--tct-badge-tertiary-border-color, var(--t-tertiary-l1, #f3f4f5));
+:host:host([theme=tertiary]) {
+  --comp-badge-background: var(--tct-badge-tertiary-background, var(--t-tertiary, #e8f5fc));
+  --comp-badge-color: var(--tct-badge-tertiary-color, var(--t-tertiary-text, #141414));
 }
 
-.badge {
-  font-size: var(--tct-badge-font-size, 10px);
-  line-height: var(--tct-badge-line-height, 14px);
+.badge-container {
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   height: var(--tct-badge-height, 16px);
   min-width: var(--tct-badge-min-width, 16px);
   text-align: center;
-  padding: var(--tct-badge-padding, 0 4px);
+  padding: var(--tct-badge-padding, 0 5px);
   color: var(--comp-badge-color);
   background: var(--comp-badge-background);
-  border-style: var(--comp-badge-border-style);
-  border-color: var(--comp-badge-border-color);
-  border-width: var(--tct-badge-border-width, var(--t-badge-border-width, 1px));
   border-radius: var(--tct-badge-border-radius, var(--t-badge-border-radius, 8px));
 }
+.badge-container .badge-text {
+  font-size: var(--comp-badge-font-size);
+  line-height: var(--tct-badge-line-height, 14px);
+}
+.badge-container .badge-text ::slotted(p) {
+  margin: 0 !important;
+  font-size: var(--comp-badge-font-size) !important;
+}
 
-.badge.size-large {
-  font-size: var(--tct-badge-large-font-size, 14px);
-  line-height: var(--tct-badge-large-line-height, 20px);
+.badge-container.size-large {
   height: var(--tct-badge-large-height, 22px);
   min-width: var(--tct-badge-large-min-width, 22px);
   border-radius: var(--tct-badge-large-border-radius, 11px);
   padding: var(--tct-badge-large-padding, 0 6px);
 }
+.badge-container.size-large .badge-text {
+  font-size: var(--comp-badge-large-font-size);
+  line-height: var(--tct-badge-large-line-height, 20px);
+}
+.badge-container.size-large .badge-text ::slotted(p) {
+  margin: 0 !important;
+  font-size: var(--comp-badge-large-font-size) !important;
+}
 
-.badge-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.empty-variant {
+  min-width: unset;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+}
+.empty-variant.size-large {
+  min-width: unset;
+  width: 22px;
+  height: 22px;
+  padding: 0;
 }

package/dist/collection/components/q2-badge/q2-badge.js

@@ -1,38 +1,75 @@
-import { h, Fragment } from "@stencil/core";
+import { h } from "@stencil/core";
+import { loc } from "../../utils/index";
 export class Q2Badge {
     constructor() {
         this.maxLength = undefined;
         this.size = undefined;
         this.status = undefined;
         this.theme = undefined;
-        this.value = 0;
+        this.value = undefined;
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.
+     * @testonly
+     */
+    async getTextContent() {
+        if (this.hasSlot) {
+            return this.hostElement.textContent.trim();
+        }
+        else {
+            return this.hostElement.shadowRoot.textContent.trim();
+        }
     }
     // #endregion
     // #region Local Methods
+    get badgeClasses() {
+        const badgeClass = ['badge-container'];
+        if (!this.badgeText && !this.hasSlot)
+            badgeClass.push('empty-variant');
+        if (this.size === 'large')
+            badgeClass.push('size-large');
+        return badgeClass.join(' ');
+    }
     get badgeText() {
-        const maxValue = Math.pow(10, this.maxLength || 2) - 1;
-        let value = this.value || 0;
-        if (isNaN(value) || value <= 0) {
-            value = '';
+        const { maxLength, computedMaxLength } = this;
+        let value = this.value;
+        let numValue = Math.abs(Number(value));
+        if (!value)
+            return '';
+        if (typeof value === 'string') {
+            value = loc(value);
+            numValue = Math.abs(Number(value));
+        }
+        if (typeof value === 'string' && isNaN(numValue)) {
+            return value.substring(0, computedMaxLength);
         }
-        else if (value <= maxValue) {
-            value = Number(value).toLocaleString();
+        const maxNumber = maxLength ? computedMaxLength : 2;
+        const maxNumValue = Math.pow(10, maxNumber) - 1;
+        if (numValue > maxNumValue) {
+            return maxNumValue.toLocaleString() + '+';
         }
         else {
-            value = Number(maxValue).toLocaleString() + '+';
+            return numValue.toLocaleString();
         }
-        return value;
+    }
+    get computedMaxLength() {
+        return Math.min(18, this.maxLength || 18);
     }
     get hasSlot() {
         return !!this.hostElement.innerHTML.trim();
     }
     // #endregion
     // #region Render Methods
+    renderEmptyBadge() {
+        return h("div", { class: this.badgeClasses });
+    }
+    renderStandardBadge() {
+        return (h("div", { class: this.badgeClasses }, h("small", { class: "badge-text" }, this.hasSlot ? h("slot", null) : this.badgeText)));
+    }
     render() {
-        const badgeClass = ['badge'];
-        if (this.size === 'large')
-            badgeClass.push('size-large');
-        return !this.badgeText && !this.hasSlot ? (h(Fragment, null)) : (h("div", { class: "badge-wrapper" }, h("div", { class: badgeClass.join(' ') }, h("span", { class: "badge-text" }, this.hasSlot ? h("slot", null) : this.badgeText))));
+        return !this.badgeText && !this.hasSlot ? this.renderEmptyBadge() : this.renderStandardBadge();
     }
     static get is() { return "q2-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -60,7 +97,7 @@ export class Q2Badge {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of digits to show."
+                    "text": "The number of characters to show. A maximum limit of 18 characters is acceptable."
                 },
                 "attribute": "max-length",
                 "reflect": true
@@ -117,22 +154,51 @@ export class Q2Badge {
                 "reflect": true
             },
             "value": {
-                "type": "number",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | string",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The number to display in the badge. `q2-badge` also allows slot HTML elements which can be any string."
+                    "tags": [{
+                            "name": "info",
+                            "text": "`q2-badge` also has limited support for slotted HTML elements."
+                        }, {
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "What to display in the badge. Negative numbers will be shown as positive."
                 },
                 "attribute": "value",
-                "reflect": true,
-                "defaultValue": "0"
+                "reflect": true
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "getTextContent": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.",
+                    "tags": [{
+                            "name": "testonly",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }

package/dist/collection/components/q2-badge/q2-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-badge.js","sourceRoot":"","sources":["../../../src/components/q2-badge/q2-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG1F,MAAM,OAAO,OAAO;;;;;;qBA8BA,CAAC;;IAEjB,aAAa;IACb,wBAAwB;IAExB,IAAI,SAAS;QACT,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACvD,IAAI,KAAK,GAAoB,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC7C,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YAC7B,KAAK,GAAG,EAAE,CAAC;QACf,CAAC;aAAM,IAAI,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC3B,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACJ,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,GAAG,GAAG,CAAC;QACpD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,IAAI,OAAO;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IAC/C,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACtC,EAAC,QAAQ,OAAG,CACf,CAAC,CAAC,CAAC,CACA,WAAK,KAAK,EAAC,eAAe;YACtB,WAAK,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;gBAC5B,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,eAAa,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAQ,CAC7E,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Fragment } from '@stencil/core';\n\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The number of digits to show. */\n    @Prop({ reflect: true })\n    maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true })\n    size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true })\n    status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /** The number to display in the badge. `q2-badge` also allows slot HTML elements which can be any string. */\n    @Prop({ reflect: true })\n    value: number = 0;\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeText(): string {\n        const maxValue = Math.pow(10, this.maxLength || 2) - 1;\n        let value: string | number = this.value || 0;\n        if (isNaN(value) || value <= 0) {\n            value = '';\n        } else if (value <= maxValue) {\n            value = Number(value).toLocaleString();\n        } else {\n            value = Number(maxValue).toLocaleString() + '+';\n        }\n        return value;\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const badgeClass = ['badge'];\n        if (this.size === 'large') badgeClass.push('size-large');\n        return !this.badgeText && !this.hasSlot ? (\n            <Fragment />\n        ) : (\n            <div class=\"badge-wrapper\">\n                <div class={badgeClass.join(' ')}>\n                    <span class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</span>\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-badge.js","sourceRoot":"","sources":["../../../../src/components/q2-badge/q2-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Method } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-badge', shadow: true, styleUrl: 'q2-badge.scss' })\nexport class Q2Badge implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The number of characters to show. A maximum limit of 18 characters is acceptable. */\n    @Prop({ reflect: true })\n    maxLength: number | undefined;\n\n    /** The size of the badge. */\n    @Prop({ reflect: true })\n    size: 'default' | 'large' | undefined;\n\n    /** The stoplight color of the element when `theme` is not present. */\n    @Prop({ reflect: true })\n    status: 'info' | 'alert' | 'warning' | 'success' | undefined;\n\n    /**\n     * The color of the badge when in the active state.\n     * The `theme` has higher priority than `status`.\n     */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary' | undefined;\n\n    /**\n     * What to display in the badge. Negative numbers will be shown as positive.\n     * @info\n     * `q2-badge` also has limited support for slotted HTML elements.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    value: number | string;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.\n     * @testonly\n     */\n    @Method()\n    async getTextContent(): Promise<string> {\n        if (this.hasSlot) {\n            return this.hostElement.textContent.trim();\n        } else {\n            return this.hostElement.shadowRoot.textContent.trim();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get badgeClasses(): string {\n        const badgeClass = ['badge-container'];\n        if (!this.badgeText && !this.hasSlot) badgeClass.push('empty-variant');\n        if (this.size === 'large') badgeClass.push('size-large');\n        return badgeClass.join(' ');\n    }\n\n    get badgeText(): string {\n        const { maxLength, computedMaxLength } = this;\n        let value = this.value;\n        let numValue = Math.abs(Number(value));\n        if (!value) return '';\n\n        if (typeof value === 'string') {\n            value = loc(value);\n            numValue = Math.abs(Number(value));\n        }\n\n        if (typeof value === 'string' && isNaN(numValue)) {\n            return value.substring(0, computedMaxLength);\n        }\n\n        const maxNumber = maxLength ? computedMaxLength : 2;\n        const maxNumValue = Math.pow(10, maxNumber) - 1;\n        if (numValue > maxNumValue) {\n            return maxNumValue.toLocaleString() + '+';\n        } else {\n            return numValue.toLocaleString();\n        }\n    }\n\n    get computedMaxLength(): number {\n        return Math.min(18, this.maxLength || 18);\n    }\n\n    get hasSlot(): boolean {\n        return !!this.hostElement.innerHTML.trim();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderEmptyBadge() {\n        return <div class={this.badgeClasses}></div>;\n    }\n\n    renderStandardBadge() {\n        return (\n            <div class={this.badgeClasses}>\n                <small class=\"badge-text\">{this.hasSlot ? <slot></slot> : this.badgeText}</small>\n            </div>\n        );\n    }\n\n    render() {\n        return !this.badgeText && !this.hasSlot ? this.renderEmptyBadge() : this.renderStandardBadge();\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-badge/test/q2-badge-test.e2e.js

@@ -1,140 +1,49 @@
 import { evaluateA11y, getListOfStyleCompilationIssues, setup } from "../../../utils/helpers";
 describe('q2-badge', () => {
+    let page;
     it('properly compiles CSS vars and functions', async () => {
-        const page = await setup({ html: '<q2-badge></q2-badge>' });
+        page = await setup({ html: '<q2-badge></q2-badge>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-badge')).toHaveLength(0);
     });
-    it('should render value property if value is less than 100', async function () {
-        const page = await setup({
-            html: `<q2-badge value=92></q2-badge>`,
-        });
-        const text = await page.find('q2-badge >>> .badge-text');
-        expect(text.innerText).toEqual('92');
-    });
-    it('should render value property if value is greater than 100', async function () {
-        const page = await setup({
-            html: `<q2-badge value=123></q2-badge>`,
-        });
-        const text = await page.find('q2-badge >>> .badge-text');
-        expect(text.innerText).toEqual('99+');
-    });
-    it('should not render badge element if value is not a number', async function () {
-        const page = await setup({
-            html: `<q2-badge value="abc"></q2-badge>`,
-        });
-        const badgeWrapper = await page.find('q2-badge >>> .badge-wrapper');
-        expect(badgeWrapper).toBeNull();
-    });
-    it('should not render badge element if value is zero', async function () {
-        const page = await setup({
-            html: `<q2-badge value=0></q2-badge>`,
-        });
-        const badgeWrapper = await page.find('q2-badge >>> .badge-wrapper');
-        expect(badgeWrapper).toBeNull();
-    });
-    it('should not render badge element if value is negative number', async function () {
-        const page = await setup({
-            html: `<q2-badge value=-5></q2-badge>`,
-        });
-        const badgeWrapper = await page.find('q2-badge >>> .badge-wrapper');
-        expect(badgeWrapper).toBeNull();
-    });
-    it('should not render badge element if value is undefined', async function () {
-        const page = await setup({
-            html: `<q2-badge></q2-badge>`,
-        });
-        const badgeWrapper = await page.find('q2-badge >>> .badge-wrapper');
-        expect(badgeWrapper).toBeNull();
-    });
-    it('should render value property if value is 123456 with maxLength 6', async function () {
-        const page = await setup({
-            html: `<q2-badge value=123456 max-length=6></q2-badge>`,
-        });
-        const text = await page.find('q2-badge >>> .badge-text');
-        expect(text.innerText).toEqual('123,456');
-    });
-    it('should render value property if value is 12345678 with maxLength 6', async function () {
-        const page = await setup({
-            html: `<q2-badge value=12345678 max-length=6></q2-badge>`,
-        });
-        const text = await page.find('q2-badge >>> .badge-text');
-        expect(text.innerText).toEqual('999,999+');
-    });
-    it('should render badge border', async function () {
-        const page = await setup({
-            html: `<q2-badge value=12345678 max-length=6></q2-badge>`,
-        });
-        const badge = await page.find('q2-badge >>> .badge');
-        const badgeBorderColor = await badge.getComputedStyle();
-        expect(badgeBorderColor.borderColor).toEqual('rgb(154, 152, 152)');
-    });
-    it('should render badge with plain text slot(slot comes first than value)', async function () {
-        const slotValue = '+32';
-        const page = await setup({
-            html: `<q2-badge value=12345678>${slotValue}</q2-badge>`,
-        });
-        const badge = await page.find('q2-badge');
-        expect(badge.textContent.trim()).toEqual(slotValue);
-    });
-    it('should render badge with html slot(slot comes first than value)', async function () {
-        const slotValue = '<b>Bold</b>';
-        const page = await setup({
-            html: `<q2-badge value=12345678>${slotValue}</q2-badge>`,
-        });
-        const badge = await page.find('q2-badge');
-        expect(badge.innerHTML).toEqual(slotValue);
-    });
-    it('should render badge border when status is passed', async function () {
-        const pageInfo = await setup({
-            html: `<q2-badge value=12345678 status="info"></q2-badge>`,
-        });
-        const badgeInfo = await pageInfo.find('q2-badge >>> .badge');
-        const InfoBorderColor = await badgeInfo.getComputedStyle();
-        expect(InfoBorderColor.borderColor).toEqual('rgb(58, 155, 214)');
-        const pageAlert = await setup({
-            html: `<q2-badge value=12345678 status="alert"></q2-badge>`,
-        });
-        const badgeAlert = await pageAlert.find('q2-badge >>> .badge');
-        const alertBorderColor = await badgeAlert.getComputedStyle();
-        expect(alertBorderColor.borderColor).toEqual('rgb(228, 41, 41)');
-        const pageWarning = await setup({
-            html: `<q2-badge value=12345678 status="warning"></q2-badge>`,
-        });
-        const badgeWarning = await pageWarning.find('q2-badge >>> .badge');
-        const warningBorderColor = await badgeWarning.getComputedStyle();
-        expect(warningBorderColor.borderColor).toEqual('rgb(249, 206, 76)');
-        const pageSuccess = await setup({
-            html: `<q2-badge value=12345678 status="success"></q2-badge>`,
-        });
-        const badgeSuccess = await pageSuccess.find('q2-badge >>> .badge');
-        const successBorderColor = await badgeSuccess.getComputedStyle();
-        expect(successBorderColor.borderColor).toEqual('rgb(46, 170, 33)');
-    });
-    it('should render correct border color when theme is passed', async function () {
-        const pagePrimary = await setup({
-            html: `<q2-badge value=12345678 theme="primary" max-length=6></q2-badge>`,
-        });
-        const badgePrimary = await pagePrimary.find('q2-badge >>> .badge');
-        const primaryBorderColor = await badgePrimary.getComputedStyle();
-        expect(primaryBorderColor.borderColor).toEqual('rgb(58, 155, 214)');
-        const pageSecondary = await setup({
-            html: `<q2-badge value=12345678 theme="secondary" max-length=6></q2-badge>`,
+    describe('Styling', () => {
+        let badge;
+        let styles;
+        describe('when a value is provided', () => {
+            it('has proper height for default size', async () => {
+                page = await setup({ html: '<q2-badge value="text"></q2-badge>' });
+                badge = await page.find('q2-badge');
+                styles = await badge.getComputedStyle();
+                expect(styles.height).toEqual('16px');
+            });
+            it('has proper height for large size', async () => {
+                page = await setup({ html: '<q2-badge value="text" size="large"></q2-badge>' });
+                badge = await page.find('q2-badge');
+                styles = await badge.getComputedStyle();
+                expect(styles.height).toEqual('22px');
+            });
         });
-        const badgeSecondary = await pageSecondary.find('q2-badge >>> .badge');
-        const secondaryBorderColor = await badgeSecondary.getComputedStyle();
-        expect(secondaryBorderColor.borderColor).toEqual('rgb(198, 209, 219)');
-        const pageTertiary = await setup({
-            html: `<q2-badge value=12345678 theme="tertiary" max-length=6></q2-badge>`,
+        describe('in empty state', () => {
+            it('has proper height and width for default size', async () => {
+                page = await setup({ html: '<q2-badge></q2-badge>' });
+                badge = await page.find('q2-badge');
+                styles = await badge.getComputedStyle();
+                expect(styles.height).toEqual('16px');
+                expect(styles.width).toEqual('16px');
+            });
+            it('has proper height and width for large size', async () => {
+                page = await setup({ html: '<q2-badge size="large"></q2-badge>' });
+                badge = await page.find('q2-badge');
+                styles = await badge.getComputedStyle();
+                expect(styles.height).toEqual('22px');
+                expect(styles.width).toEqual('22px');
+            });
         });
-        const badgeTertiary = await pageTertiary.find('q2-badge >>> .badge');
-        const tertiaryBorderColor = await badgeTertiary.getComputedStyle();
-        expect(tertiaryBorderColor.borderColor).toEqual('rgb(243, 244, 245)');
     });
     describe('Accessibility', () => {
         describe('aXe DevTools', () => {
             it('does not have accessibility violations', async () => {
-                const page = await setup({
-                    html: `<q2-badge value=123 theme="primary"></q2-badge>`,
+                page = await setup({
+                    html: `<q2-badge value="123" theme="primary"></q2-badge>`,
                 });
                 const hasViolations = await evaluateA11y(page);
                 expect(hasViolations).toBe(false);

package/dist/collection/components/q2-badge/test/q2-badge-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-badge-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-badge/test/q2-badge-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setup } from '@/utils/helpers';\n\ndescribe('q2-badge', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-badge></q2-badge>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-badge')).toHaveLength(0);\n    });\n\n    it('should render value property if value is less than 100', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge value=92></q2-badge>`,\n        });\n        const text = await page.find('q2-badge >>> .badge-text');\n        expect(text.innerText).toEqual('92');\n    });\n\n    it('should render value property if value is greater than 100', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge value=123></q2-badge>`,\n        });\n        const text = await page.find('q2-badge >>> .badge-text');\n        expect(text.innerText).toEqual('99+');\n    });\n\n    it('should not render badge element if value is not a number', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge value=\"abc\"></q2-badge>`,\n        });\n        const badgeWrapper = await page.find('q2-badge >>> .badge-wrapper');\n        expect(badgeWrapper).toBeNull();\n    });\n\n    it('should not render badge element if value is zero', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge value=0></q2-badge>`,\n        });\n        const badgeWrapper = await page.find('q2-badge >>> .badge-wrapper');\n        expect(badgeWrapper).toBeNull();\n    });\n\n    it('should not render badge element if value is negative number', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge value=-5></q2-badge>`,\n        });\n        const badgeWrapper = await page.find('q2-badge >>> .badge-wrapper');\n        expect(badgeWrapper).toBeNull();\n    });\n\n    it('should not render badge element if value is undefined', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge></q2-badge>`,\n        });\n        const badgeWrapper = await page.find('q2-badge >>> .badge-wrapper');\n        expect(badgeWrapper).toBeNull();\n    });\n\n    it('should render value property if value is 123456 with maxLength 6', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge value=123456 max-length=6></q2-badge>`,\n        });\n        const text = await page.find('q2-badge >>> .badge-text');\n        expect(text.innerText).toEqual('123,456');\n    });\n\n    it('should render value property if value is 12345678 with maxLength 6', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge value=12345678 max-length=6></q2-badge>`,\n        });\n        const text = await page.find('q2-badge >>> .badge-text');\n        expect(text.innerText).toEqual('999,999+');\n    });\n\n    it('should render badge border', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-badge value=12345678 max-length=6></q2-badge>`,\n        });\n        const badge = await page.find('q2-badge >>> .badge');\n        const badgeBorderColor = await badge.getComputedStyle();\n        expect(badgeBorderColor.borderColor).toEqual('rgb(154, 152, 152)');\n    });\n\n    it('should render badge with plain text slot(slot comes first than value)', async function (): Promise<void> {\n        const slotValue = '+32';\n        const page = await setup({\n            html: `<q2-badge value=12345678>${slotValue}</q2-badge>`,\n        });\n        const badge = await page.find('q2-badge');\n        expect(badge.textContent.trim()).toEqual(slotValue);\n    });\n\n    it('should render badge with html slot(slot comes first than value)', async function (): Promise<void> {\n        const slotValue = '<b>Bold</b>';\n        const page = await setup({\n            html: `<q2-badge value=12345678>${slotValue}</q2-badge>`,\n        });\n        const badge = await page.find('q2-badge');\n        expect(badge.innerHTML).toEqual(slotValue);\n    });\n\n    it('should render badge border when status is passed', async function (): Promise<void> {\n        const pageInfo = await setup({\n            html: `<q2-badge value=12345678 status=\"info\"></q2-badge>`,\n        });\n        const badgeInfo = await pageInfo.find('q2-badge >>> .badge');\n        const InfoBorderColor = await badgeInfo.getComputedStyle();\n        expect(InfoBorderColor.borderColor).toEqual('rgb(58, 155, 214)');\n\n        const pageAlert = await setup({\n            html: `<q2-badge value=12345678 status=\"alert\"></q2-badge>`,\n        });\n        const badgeAlert = await pageAlert.find('q2-badge >>> .badge');\n        const alertBorderColor = await badgeAlert.getComputedStyle();\n        expect(alertBorderColor.borderColor).toEqual('rgb(228, 41, 41)');\n\n        const pageWarning = await setup({\n            html: `<q2-badge value=12345678 status=\"warning\"></q2-badge>`,\n        });\n        const badgeWarning = await pageWarning.find('q2-badge >>> .badge');\n        const warningBorderColor = await badgeWarning.getComputedStyle();\n        expect(warningBorderColor.borderColor).toEqual('rgb(249, 206, 76)');\n\n        const pageSuccess = await setup({\n            html: `<q2-badge value=12345678 status=\"success\"></q2-badge>`,\n        });\n        const badgeSuccess = await pageSuccess.find('q2-badge >>> .badge');\n        const successBorderColor = await badgeSuccess.getComputedStyle();\n        expect(successBorderColor.borderColor).toEqual('rgb(46, 170, 33)');\n    });\n\n    it('should render correct border color when theme is passed', async function (): Promise<void> {\n        const pagePrimary = await setup({\n            html: `<q2-badge value=12345678 theme=\"primary\" max-length=6></q2-badge>`,\n        });\n        const badgePrimary = await pagePrimary.find('q2-badge >>> .badge');\n        const primaryBorderColor = await badgePrimary.getComputedStyle();\n        expect(primaryBorderColor.borderColor).toEqual('rgb(58, 155, 214)');\n\n        const pageSecondary = await setup({\n            html: `<q2-badge value=12345678 theme=\"secondary\" max-length=6></q2-badge>`,\n        });\n        const badgeSecondary = await pageSecondary.find('q2-badge >>> .badge');\n        const secondaryBorderColor = await badgeSecondary.getComputedStyle();\n        expect(secondaryBorderColor.borderColor).toEqual('rgb(198, 209, 219)');\n\n        const pageTertiary = await setup({\n            html: `<q2-badge value=12345678 theme=\"tertiary\" max-length=6></q2-badge>`,\n        });\n        const badgeTertiary = await pageTertiary.find('q2-badge >>> .badge');\n        const tertiaryBorderColor = await badgeTertiary.getComputedStyle();\n        expect(tertiaryBorderColor.borderColor).toEqual('rgb(243, 244, 245)');\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: `<q2-badge value=123 theme=\"primary\"></q2-badge>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}
+{"version":3,"file":"q2-badge-test.e2e.js","sourceRoot":"","sources":["../../../../../src/components/q2-badge/test/q2-badge-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setup } from '@/utils/helpers';\nimport { E2EElement, E2EPage } from '@stencil/core/testing';\n\ndescribe('q2-badge', () => {\n    let page: E2EPage;\n    it('properly compiles CSS vars and functions', async () => {\n        page = await setup({ html: '<q2-badge></q2-badge>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-badge')).toHaveLength(0);\n    });\n\n    describe('Styling', () => {\n        let badge: E2EElement;\n        let styles: CSSStyleDeclaration;\n        describe('when a value is provided', () => {\n            it('has proper height for default size', async () => {\n                page = await setup({ html: '<q2-badge value=\"text\"></q2-badge>' });\n                badge = await page.find('q2-badge');\n                styles = await badge.getComputedStyle();\n\n                expect(styles.height).toEqual('16px');\n            });\n\n            it('has proper height for large size', async () => {\n                page = await setup({ html: '<q2-badge value=\"text\" size=\"large\"></q2-badge>' });\n                badge = await page.find('q2-badge');\n                styles = await badge.getComputedStyle();\n\n                expect(styles.height).toEqual('22px');\n            });\n        });\n\n        describe('in empty state', () => {\n            it('has proper height and width for default size', async () => {\n                page = await setup({ html: '<q2-badge></q2-badge>' });\n                badge = await page.find('q2-badge');\n                styles = await badge.getComputedStyle();\n\n                expect(styles.height).toEqual('16px');\n                expect(styles.width).toEqual('16px');\n            });\n\n            it('has proper height and width for large size', async () => {\n                page = await setup({ html: '<q2-badge size=\"large\"></q2-badge>' });\n                badge = await page.find('q2-badge');\n                styles = await badge.getComputedStyle();\n\n                expect(styles.height).toEqual('22px');\n                expect(styles.width).toEqual('22px');\n            });\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                page = await setup({\n                    html: `<q2-badge value=\"123\" theme=\"primary\"></q2-badge>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {});\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}