@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-status-tag/ic-status-tag.js

@@ -3,31 +3,24 @@ import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class StatusTag {
     constructor() {
         this.announced = false;
-        this.appearance = undefined;
         this.label = undefined;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
         this.status = "neutral";
+        this.theme = "inherit";
+        this.uppercase = true;
         this.variant = "filled";
     }
-    componentWillLoad() {
-        if (this.appearance === "outlined") {
-            this.variant = "outlined";
-        }
-    }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Status Tag");
     }
     render() {
-        const { label, status, appearance, variant, small, size, announced } = this;
-        return (h(Host, { role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { class: {
+        const { label, status, variant, size, announced, theme, uppercase } = this;
+        return (h(Host, { class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { class: {
                 ["tag"]: true,
-                [`${appearance}-${status}`]: appearance !== undefined,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
-                ["small"]: small || size === "small",
                 [`${size}`]: true,
-            } }, h("ic-typography", { variant: "label-uppercase", "apply-vertical-margins": false }, h("span", null, label)))));
+            } }, h("ic-typography", { variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", null, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -61,32 +54,6 @@ export class StatusTag {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "appearance": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcStatusTagAppearance",
-                    "resolved": "\"filled\" | \"outlined\"",
-                    "references": {
-                        "IcStatusTagAppearance": {
-                            "location": "import",
-                            "path": "./ic-status-tag.types",
-                            "id": "src/components/ic-status-tag/ic-status-tag.types.ts::IcStatusTagAppearance"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Use variant prop instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "appearance",
-                "reflect": false
-            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -109,7 +76,7 @@ export class StatusTag {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -126,28 +93,7 @@ export class StatusTag {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
-            },
-            "small": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"medium\""
             },
             "status": {
                 "type": "string",
@@ -173,6 +119,42 @@ export class StatusTag {
                 "reflect": false,
                 "defaultValue": "\"neutral\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dark\" | \"light\" | \"inherit\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
+            "uppercase": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The letter case of the status tag's label."
+                },
+                "attribute": "uppercase",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/ic-status-tag/ic-status-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAYvE,MAAM,OAAO,SAAS;;yBAKU,KAAK;;;oBAeV,SAAS;qBAKR,KAAK;sBAKQ,SAAS;uBAKb,QAAQ;;IAE3C,iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC5E,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBAAa,QAAQ;YAC1D,cACE,KAAK,EAAE;oBACL,CAAC,KAAK,CAAC,EAAE,IAAI;oBACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,SAAS;oBACrD,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;oBAC9B,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,UAAU;oBACpC,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,IAAI,KAAK,OAAO;oBACpC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;iBAClB;gBAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;oBAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcStatusTagStatuses,\n  IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   * Screen readers will announce changes to the `label`, but not the initial value.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * @deprecated This prop should not be used anymore. Use variant prop instead.\n   */\n  @Prop() appearance?: IcStatusTagAppearance;\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the status tag component.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  componentWillLoad(): void {\n    if (this.appearance === \"outlined\") {\n      this.variant = \"outlined\";\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, appearance, variant, small, size, announced } = this;\n    return (\n      <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${appearance}-${status}`]: appearance !== undefined,\n            [`${variant}-${status}`]: true,\n            [\"outlined\"]: variant === \"outlined\",\n            [\"small\"]: small || size === \"small\",\n            [`${size}`]: true,\n          }}\n        >\n          <ic-typography\n            variant=\"label-uppercase\"\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AASvE,MAAM,OAAO,SAAS;;yBAKU,KAAK;;oBAUV,QAAQ;sBAKM,SAAS;qBAKD,SAAS;yBAK1B,IAAI;uBAKC,QAAQ;;IAE3C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3E,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS,EAAE,EACrD,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBACtB,QAAQ;YAEnB,cACE,KAAK,EAAE;oBACL,CAAC,KAAK,CAAC,EAAE,IAAI;oBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;oBAC9B,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,UAAU;oBACpC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;iBAClB;gBAED,qBACE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,4BACxB,KAAK;oBAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   * Screen readers will announce changes to the `label`, but not the initial value.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the status tag component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: \"dark\" | \"light\" | \"inherit\" = \"inherit\";\n\n  /**\n   * The letter case of the status tag's label.\n   */\n  @Prop() uppercase?: boolean = true;\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, variant, size, announced, theme, uppercase } = this;\n    return (\n      <Host\n        class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n        role={announced ? \"status\" : null}\n        aria-label=\"Status\"\n      >\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${variant}-${status}`]: true,\n            [\"outlined\"]: variant === \"outlined\",\n            [`${size}`]: true,\n          }}\n        >\n          <ic-typography\n            variant={uppercase ? \"label-uppercase\" : \"label\"}\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-status-tag/ic-status-tag.stories.js

@@ -3,9 +3,11 @@ import { html } from "lit-html";
 const defaultArgs = {
   announced: false,
   label: "Status tag label",
-  size: "default",
+  size: "medium",
   status: "neutral",
   variant: "filled",
+  theme: "inherit",
+  uppercase: true,
 };
 
 export default {
@@ -61,6 +63,27 @@ export const Danger = {
   name: "Danger",
 };
 
+export const LetterCase = {
+  render: () => html`
+    <ic-status-tag label="Uppercase status tag"></ic-status-tag>
+    <ic-status-tag
+      label="Uppercase status tag"
+      variant="outlined"
+    ></ic-status-tag>
+    <ic-status-tag
+      label="Sentence case status tag"
+      uppercase="false"
+    ></ic-status-tag>
+    <ic-status-tag
+      label="Sentence case status tag"
+      variant="outlined"
+      uppercase="false"
+    ></ic-status-tag>
+  `,
+
+  name: "Letter case",
+};
+
 export const Size = {
   render: () => html`
     <ic-status-tag label="Small" size="small"></ic-status-tag>
@@ -69,11 +92,11 @@ export const Size = {
       variant="outlined"
       size="small"
     ></ic-status-tag>
-    <ic-status-tag label="Default" size="default"></ic-status-tag>
+    <ic-status-tag label="Default" size="medium"></ic-status-tag>
     <ic-status-tag
       label="Default"
       variant="outlined"
-      size="default"
+      size="medium"
     ></ic-status-tag>
     <ic-status-tag label="Large" size="large"></ic-status-tag>
     <ic-status-tag
@@ -119,6 +142,8 @@ export const Announced = {
   name: "Announced",
 };
 
+const inlineRadioSelector = "inline-radio";
+
 export const Playground = {
   render: (args) =>
     html`<ic-status-tag
@@ -127,16 +152,18 @@ export const Playground = {
       status=${args.status}
       variant=${args.variant}
       announced=${args.announced}
+      theme=${args.theme}
+      uppercase=${args.uppercase}
     ></ic-status-tag>`,
 
   args: defaultArgs,
 
   argTypes: {
     size: {
-      options: ["default", "small", "large"],
+      options: ["medium", "small", "large"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -152,7 +179,15 @@ export const Playground = {
       options: ["filled", "outlined"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
       },
     },
   },

package/dist/collection/components/ic-status-tag/ic-status-tag.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-status-tag.types.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStatusTagStatuses = \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\nexport type IcStatusTagAppearance = \"filled\" | \"outlined\";\n"]}
+{"version":3,"file":"ic-status-tag.types.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStatusTagStatuses = \"neutral\" | \"success\" | \"warning\" | \"danger\";\n"]}

package/dist/collection/components/ic-status-tag/test/basic/ic-status-tag.spec.js

@@ -6,38 +6,21 @@ describe("ic-status-tag component renders label", () => {
             components: [StatusTag],
             html: `<ic-status-tag label="Neutral"></ic-status-tag>`,
         });
-        expect(page.root).toEqualHtml(`
-    <ic-status-tag aria-label="Status" label="Neutral">
-    <mock:shadow-root>
-      <strong class="default filled-neutral tag" >
-        <ic-typography variant="label-uppercase">
-          <span>
-            Neutral
-          </span>
-        </ic-typography>
-      </strong>
-      </mock:shadow-root>
-    </ic-status-tag>
-    `);
-    }),
-        it("should have the role of 'status' if announced is passed as true", async () => {
-            const page = await newSpecPage({
-                components: [StatusTag],
-                html: `<ic-status-tag label="Neutral" announced="true"></ic-status-tag>`,
-            });
-            expect(page.root).toEqualHtml(`
-    <ic-status-tag announced="true" aria-label="Status" label="Neutral" role="status">
-    <mock:shadow-root>
-      <strong class="default filled-neutral tag" >
-        <ic-typography variant="label-uppercase">
-          <span>
-            Neutral
-          </span>
-        </ic-typography>
-      </strong>
-      </mock:shadow-root>
-    </ic-status-tag>
-    `);
+        expect(page.root).toMatchSnapshot(`renders label`);
+    });
+    it("should have the role of 'status' if announced is passed as true", async () => {
+        const page = await newSpecPage({
+            components: [StatusTag],
+            html: `<ic-status-tag label="Neutral" announced="true"></ic-status-tag>`,
+        });
+        expect(page.root).toMatchSnapshot(`role of status if announced is true`);
+    });
+    it("should render a lowercase label when `uppercase` is set to false", async () => {
+        const page = await newSpecPage({
+            components: [StatusTag],
+            html: `<ic-status-tag label="Neutral" uppercase="false"></ic-status-tag>`,
         });
+        expect(page.root).toMatchSnapshot(`lowercase label when uppercase is false`);
+    });
 });
 //# sourceMappingURL=ic-status-tag.spec.js.map

package/dist/collection/components/ic-status-tag/test/basic/ic-status-tag.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-status-tag.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-status-tag/test/basic/ic-status-tag.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;IACrD,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC;QACA,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;YAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;gBACvB,IAAI,EAAE,kEAAkE;aACzE,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY/B,CAAC,CAAC;QACH,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { StatusTag } from \"../../ic-status-tag\";\n\ndescribe(\"ic-status-tag component renders label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [StatusTag],\n      html: `<ic-status-tag label=\"Neutral\"></ic-status-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-status-tag aria-label=\"Status\" label=\"Neutral\">\n    <mock:shadow-root>\n      <strong class=\"default filled-neutral tag\" >\n        <ic-typography variant=\"label-uppercase\">\n          <span>\n            Neutral\n          </span>\n        </ic-typography>\n      </strong>\n      </mock:shadow-root>\n    </ic-status-tag>\n    `);\n  }),\n    it(\"should have the role of 'status' if announced is passed as true\", async () => {\n      const page = await newSpecPage({\n        components: [StatusTag],\n        html: `<ic-status-tag label=\"Neutral\" announced=\"true\"></ic-status-tag>`,\n      });\n\n      expect(page.root).toEqualHtml(`\n    <ic-status-tag announced=\"true\" aria-label=\"Status\" label=\"Neutral\" role=\"status\">\n    <mock:shadow-root>\n      <strong class=\"default filled-neutral tag\" >\n        <ic-typography variant=\"label-uppercase\">\n          <span>\n            Neutral\n          </span>\n        </ic-typography>\n      </strong>\n      </mock:shadow-root>\n    </ic-status-tag>\n    `);\n    });\n});\n"]}
+{"version":3,"file":"ic-status-tag.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-status-tag/test/basic/ic-status-tag.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;IACrD,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,kEAAkE;SACzE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qCAAqC,CAAC,CAAC;IAC3E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,mEAAmE;SAC1E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,yCAAyC,CAC1C,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { StatusTag } from \"../../ic-status-tag\";\n\ndescribe(\"ic-status-tag component renders label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [StatusTag],\n      html: `<ic-status-tag label=\"Neutral\"></ic-status-tag>`,\n    });\n\n    expect(page.root).toMatchSnapshot(`renders label`);\n  });\n\n  it(\"should have the role of 'status' if announced is passed as true\", async () => {\n    const page = await newSpecPage({\n      components: [StatusTag],\n      html: `<ic-status-tag label=\"Neutral\" announced=\"true\"></ic-status-tag>`,\n    });\n\n    expect(page.root).toMatchSnapshot(`role of status if announced is true`);\n  });\n\n  it(\"should render a lowercase label when `uppercase` is set to false\", async () => {\n    const page = await newSpecPage({\n      components: [StatusTag],\n      html: `<ic-status-tag label=\"Neutral\" uppercase=\"false\"></ic-status-tag>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      `lowercase label when uppercase is false`\n    );\n  });\n});\n"]}