npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.2 → 3.0.0-alpha.4 - Mend

@ukic/web-components 3.0.0-alpha.2 → 3.0.0-alpha.4

Files changed (613) hide show

package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-accordion-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion-group/test/basic/ic-accordion-group.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAE/D,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,gBAAgB,EAAE,EAAE,CAAC;AAEnD,SAAS,CAAC,GAAG,EAAE;IACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC5C,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,gEAAgE;SACvE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,~~6BAA6B~~,EAAE,KAAK,IAAI,EAAE;~~QAC3C~~,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,~~mFAAmF~~;~~SAC1F~~,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,~~kBAAkB~~,CAAC,CAAC;~~IACxD~~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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { AccordionGroup } from \"../../ic-accordion-group\";\nimport { Accordion } from \"../../../ic-accordion/ic-accordion\";\n\nconst event = { detail: { id: \"ic-accordion-0\" } };\n\nbeforeAll(() => {\n jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-accordion-group snapshots\", () => {\n it(\"should match default snapshot\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup],\n html: `<ic-accordion-group label=\"Test heading\"></ic-accordion-group>`,\n });\n expect(page.root).toMatchSnapshot(\"renders as default\");\n });\n\n it(\"should match ~~light~~ snapshot\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup],\n html: `<ic-accordion-group ~~appearance~~=\"~~light~~\" label=\"Test heading\"></ic-accordion-group>`,\n });\n expect(page.root).toMatchSnapshot(\"renders as ~~light~~\");\n });\n});\n\ndescribe(\"ic-accordion-group functions unit test\", () => {\n it(\"should check setExpandedToAreAllAccordionsOpen when single expansion is false\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup, Accordion],\n html: `\n <ic-accordion-group label=\"Test heading\">\n <ic-accordion>\n <ic-typography variant=\"body\" >\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n <ic-accordion expanded>\n <ic-typography variant=\"body\" >\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n </ic-accordion-group>`,\n });\n const spySetExpandedToAreAllAccordionsOpen = jest.spyOn(\n page.rootInstance,\n \"setExpandedToAreAllAccordionsOpen\"\n );\n expect(page.root.singleExpansion).toBe(false);\n await page.rootInstance.handleAccordionClicked(event);\n expect(spySetExpandedToAreAllAccordionsOpen).toBeCalled();\n });\n\n it(\"should check handleExpanded\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup],\n html: `<ic-accordion-group label=\"Test heading\" expanded></ic-accordion-group>`,\n });\n expect(page.root.expanded).toBe(true);\n await page.rootInstance.handleExpanded();\n await page.waitForChanges;\n expect(page.root.expanded).toBe(false);\n });\n});\n\ndescribe(\"ic-accordion-group component\", () => {\n it(\"should test the handleExpanded function\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup, Accordion],\n html: `\n <ic-accordion-group expanded=\"true\" label=\"Test heading\">\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n </ic-accordion-group>`,\n });\n expect(page.root.expanded).toBe(true);\n await page.rootInstance.handleExpanded();\n await page.waitForChanges();\n expect(page.root.expanded).toBe(false);\n });\n\n it(\"should test singleExpansion function\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup, Accordion],\n html: `\n <ic-accordion-group label=\"Test heading\" single-expansion=\"true\">\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n <ic-accordion heading=\"Accordion 2\" expanded>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n </ic-accordion-group>`,\n });\n\n const accordions = page.root.querySelectorAll(\"ic-accordion\");\n const accordion1 = accordions[0];\n const accordion2 = accordions[1];\n const accordionButton = accordion1.shadowRoot.querySelector(\n \".section-button\"\n ) as HTMLButtonElement;\n await page.waitForChanges();\n expect(accordion1.expanded).toBe(false);\n expect(accordion2.expanded).toBe(true);\n accordionButton.click();\n await page.waitForChanges();\n expect(accordion1.expanded).toBe(true);\n expect(accordion2.expanded).toBe(false);\n });\n\n it(\"should check the areAllAccordionsOpen function\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup, Accordion],\n html: `\n <ic-accordion-group label=\"Test heading\">\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n </ic-accordion-group>`,\n });\n // uses handleExpanded to open accordion, making areAllAccordionsOpen = true\n await page.rootInstance.handleExpanded();\n await page.waitForChanges;\n expect(page.root.expanded).toBe(true);\n expect(page.rootInstance.areAllAccordionsOpen).toBe(true);\n\n // uses handleExpanded to close accordion, making areAllAccordionsOpen = false\n await page.rootInstance.handleExpanded();\n await page.waitForChanges;\n expect(page.root.expanded).toBe(false);\n expect(page.rootInstance.areAllAccordionsOpen).toBe(false);\n });\n});\n"]}
1	+ {"version":3,"file":"ic-accordion-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion-group/test/basic/ic-accordion-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { AccordionGroup } from \"../../ic-accordion-group\";\nimport { Accordion } from \"../../../ic-accordion/ic-accordion\";\n\nconst event = { detail: { id: \"ic-accordion-0\" } };\n\nbeforeAll(() => {\n jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-accordion-group snapshots\", () => {\n it(\"should match default snapshot\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup],\n html: `<ic-accordion-group label=\"Test heading\"></ic-accordion-group>`,\n });\n expect(page.root).toMatchSnapshot(\"renders as default\");\n });\n\n it(\"should match dark snapshot\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup],\n html: `<ic-accordion-group theme=\"dark\" label=\"Test heading\"></ic-accordion-group>`,\n });\n expect(page.root).toMatchSnapshot(\"renders as dark\");\n });\n});\n\ndescribe(\"ic-accordion-group functions unit test\", () => {\n it(\"should check setExpandedToAreAllAccordionsOpen when single expansion is false\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup, Accordion],\n html: `\n <ic-accordion-group label=\"Test heading\">\n <ic-accordion>\n <ic-typography variant=\"body\" >\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n <ic-accordion expanded>\n <ic-typography variant=\"body\" >\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n </ic-accordion-group>`,\n });\n const spySetExpandedToAreAllAccordionsOpen = jest.spyOn(\n page.rootInstance,\n \"setExpandedToAreAllAccordionsOpen\"\n );\n expect(page.root.singleExpansion).toBe(false);\n await page.rootInstance.handleAccordionClicked(event);\n expect(spySetExpandedToAreAllAccordionsOpen).toBeCalled();\n });\n\n it(\"should check handleExpanded\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup],\n html: `<ic-accordion-group label=\"Test heading\" expanded></ic-accordion-group>`,\n });\n expect(page.root.expanded).toBe(true);\n await page.rootInstance.handleExpanded();\n await page.waitForChanges;\n expect(page.root.expanded).toBe(false);\n });\n});\n\ndescribe(\"ic-accordion-group component\", () => {\n it(\"should test the handleExpanded function\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup, Accordion],\n html: `\n <ic-accordion-group expanded=\"true\" label=\"Test heading\">\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n </ic-accordion-group>`,\n });\n expect(page.root.expanded).toBe(true);\n await page.rootInstance.handleExpanded();\n await page.waitForChanges();\n expect(page.root.expanded).toBe(false);\n });\n\n it(\"should test singleExpansion function\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup, Accordion],\n html: `\n <ic-accordion-group label=\"Test heading\" single-expansion=\"true\">\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n <ic-accordion heading=\"Accordion 2\" expanded>\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n </ic-accordion-group>`,\n });\n\n const accordions = page.root.querySelectorAll(\"ic-accordion\");\n const accordion1 = accordions[0];\n const accordion2 = accordions[1];\n const accordionButton = accordion1.shadowRoot.querySelector(\n \".section-button\"\n ) as HTMLButtonElement;\n await page.waitForChanges();\n expect(accordion1.expanded).toBe(false);\n expect(accordion2.expanded).toBe(true);\n accordionButton.click();\n await page.waitForChanges();\n expect(accordion1.expanded).toBe(true);\n expect(accordion2.expanded).toBe(false);\n });\n\n it(\"should check the areAllAccordionsOpen function\", async () => {\n const page = await newSpecPage({\n components: [AccordionGroup, Accordion],\n html: `\n <ic-accordion-group label=\"Test heading\">\n <ic-accordion heading=\"Accordion 1\">\n <ic-typography variant=\"body\">\n This is an example of the main body text.\n </ic-typography>\n </ic-accordion>\n </ic-accordion-group>`,\n });\n // uses handleExpanded to open accordion, making areAllAccordionsOpen = true\n await page.rootInstance.handleExpanded();\n await page.waitForChanges;\n expect(page.root.expanded).toBe(true);\n expect(page.rootInstance.areAllAccordionsOpen).toBe(true);\n\n // uses handleExpanded to close accordion, making areAllAccordionsOpen = false\n await page.rootInstance.handleExpanded();\n await page.waitForChanges;\n expect(page.root.expanded).toBe(false);\n expect(page.rootInstance.areAllAccordionsOpen).toBe(false);\n });\n});\n"]}

package/dist/collection/components/ic-alert/ic-alert.css CHANGED Viewed

@@ -445,9 +445,8 @@ video {
   display: block;
 }
-:host ic-typography,
 :host ::slotted(ic-typography) {
-  --ic-typography-color: var(--ic-color-text-primary-light);
+  --ic-typography-color: var(--ic-alert-description);
 }
 .container {
@@ -459,23 +458,23 @@ video {
 }
 .container-neutral {
-  background-color: var(--ic-status-unknown-light);
+  background-color: var(--ic-alert-background-neutral);
 }
 .container-info {
-  background-color: var(--ic-status-info-light);
+  background-color: var(--ic-alert-background-info);
 }
 .container-warning {
-  background-color: var(--ic-status-warning-light);
+  background-color: var(--ic-alert-background-warning);
 }
 .container-error {
-  background-color: var(--ic-status-error-light);
+  background-color: var(--ic-alert-background-error);
 }
 .container-success {
-  background-color: var(--ic-status-success-light);
+  background-color: var(--ic-alert-background-success);
 }
 .alert-icon-container {
@@ -492,23 +491,23 @@ video {
 }
 .divider-neutral {
-  background-color: var(--ic-status-unknown-default);
+  background-color: var(--ic-alert-status-type-neutral);
 }
 .divider-info {
-  background-color: var(--ic-status-info-default);
+  background-color: var(--ic-alert-status-type-info);
 }
 .divider-warning {
-  background-color: var(--ic-color-border-warning);
+  background-color: var(--ic-alert-status-type-warning);
 }
 .divider-error {
-  background-color: var(--ic-color-border-error);
+  background-color: var(--ic-alert-status-type-error);
 }
 .divider-success {
-  background-color: var(--ic-color-border-success);
+  background-color: var(--ic-alert-status-type-success);
 }
 .alert-icon {
@@ -529,7 +528,9 @@ video {
 /* required for Gatsby as prop does not seem to work when set to false */
 :host([showdefaulticon="false"]) .icon-neutral {
-  display: none;
+  visibility: hidden;
+  width: 0;
+  margin-left: 0.625rem;
 }
 .icon-neutral > svg,
@@ -537,23 +538,23 @@ video {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
   display: inline-block;
-  fill: var(--ic-status-unknown-default);
+  fill: var(--ic-alert-icon-neutral);
 }
 :host([variant="info"]) .alert-icon svg {
-  fill: var(--ic-status-info-default);
+  fill: var(--ic-alert-icon-info);
 }
 :host([variant="warning"]) .alert-icon svg {
-  fill: var(--ic-status-warning-default);
+  fill: var(--ic-alert-icon-warning);
 }
 :host([variant="error"]) .alert-icon svg {
-  fill: var(--ic-status-error-default);
+  fill: var(--ic-alert-icon-error);
 }
 :host([variant="success"]) .alert-icon svg {
-  fill: var(--ic-status-success-default);
+  fill: var(--ic-alert-icon-success);
 }
 .alert-content {
@@ -568,6 +569,7 @@ video {
   align-items: center;
   padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;
   flex: 1;
+  --ic-typography-color: var(--ic-alert-description);
 }
 .alert-message-title-above {
@@ -576,6 +578,7 @@ video {
 .alert-title {
   margin-right: var(--ic-space-xs);
+  --ic-typography-color: var(--ic-alert-title);
 }
 .alert-title-above {
@@ -600,6 +603,10 @@ video {
   justify-content: center;
 }
+.dismiss-icon > svg {
+  color: var(--ic-alert-icon-dismissible);
+}
 .dismiss-icon:hover {
   cursor: pointer;
 }

package/dist/collection/components/ic-alert/ic-alert.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h, forceUpdate, } from "@stencil/core";
 import closeIcon from "../../assets/close-icon.svg";
 import { isSlotUsed, checkSlotInChildMutations } from "../../utils/helpers";
-import { IcThemeForegroundEnum } from "../../utils/types";
+import { IcThemeForegroundEnum, } from "../../utils/types";
 import { VARIANT_ICONS } from "../../utils/constants";
 /**
  * @slot message - Content is placed to the right of the title.
@@ -27,9 +27,10 @@ export class Alert {
         this.dismissible = false;
         this.heading = "";
         this.message = undefined;
+        this.showDefaultIcon = true;
+        this.theme = "inherit";
         this.titleAbove = false;
         this.variant = "neutral";
-        this.showDefaultIcon = true;
     }
     disconnectedCallback() {
         var _a;
@@ -52,9 +53,10 @@ export class Alert {
             this.alertTitleWrap = true;
     }
     render() {
-        const { variant, heading, message, titleAbove, dismissible, announced, visible, showDefaultIcon, } = this;
+        const { variant, heading, message, titleAbove, dismissible, announced, visible, showDefaultIcon, theme, } = this;
         return (visible && (h(Host, { role: announced ? "alert" : null, class: {
                 [IcThemeForegroundEnum.Dark]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
             } }, h("div", { class: {
                 ["container"]: true,
                 [`container-${variant}`]: true,
@@ -78,7 +80,7 @@ export class Alert {
             }, variant: "subtitle-large" }, h("p", null, heading))), h("slot", { name: "message" }, h("ic-typography", { variant: "body" }, message))), isSlotUsed(this.el, "action") && (h("div", { class: "alert-action-container" }, h("slot", { name: "action" })))), h("div", { class: "dismiss-icon-container" }, dismissible && (h("ic-button", { class: {
                 ["svg-container"]: true,
                 ["dismiss-icon"]: true,
-            }, innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", appearance: IcThemeForegroundEnum.Dark, title: "dismiss" })))))));
+            }, innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", title: "dismiss" })))))));
     }
     static get is() { return "ic-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -165,7 +167,7 @@ export class Alert {
                 "attribute": "message",
                 "reflect": false
             },
-            "titleAbove": {
+            "showDefaultIcon": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -174,26 +176,26 @@ export class Alert {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the title and message will appear above and below instead of inline."
+                    "text": "If `true`, the default icon for the neutral variant will appear on the left of the alert."
                 },
-                "attribute": "title-above",
+                "attribute": "show-default-icon",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
-            "variant": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcStatusVariants",
-                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                     "references": {
-                        "IcStatusVariants": {
+                        "IcThemeMode": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcStatusVariants"
+                            "id": "src/utils/types.ts::IcThemeMode"
                         }
                     }
                 },
@@ -201,13 +203,13 @@ export class Alert {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The variant of the alert which will be rendered."
+                    "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": "variant",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "\"neutral\""
+                "defaultValue": "\"inherit\""
             },
-            "showDefaultIcon": {
+            "titleAbove": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -216,14 +218,38 @@ export class Alert {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the default icon for the neutral variant will be appear on the left of the alert."
+                    "text": "If `true`, the title and message will appear above and below instead of inline."
                 },
-                "attribute": "show-default-icon",
+                "attribute": "title-above",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcStatusVariants",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IcStatusVariants": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcStatusVariants"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the alert which will be rendered."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "\"neutral\""
             }
         };
     }

package/dist/collection/components/ic-alert/ic-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-alert.js","sourceRoot":"","sources":["../../../src/components/ic-alert/ic-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/*\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n If `true`, the default icon for the neutral variant will be appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Dark}\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-alert.js","sourceRoot":"","sources":["../../../src/components/ic-alert/ic-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport {\n IcThemeForegroundEnum,\n IcStatusVariants,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/*\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the default icon for the neutral variant will appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\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?: IcThemeMode = \"inherit\";\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n theme,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"]}

package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js CHANGED Viewed

@@ -123,7 +123,7 @@ describe("ic-alert component", () => {
                             </div>
                         </div>
                         <div class="dismiss-icon-container">
-                            <ic-button appearance="dark" class="dismiss-icon svg-container" title="dismiss" variant="icon">
+                            <ic-button class="dismiss-icon svg-container" title="dismiss" variant="icon">
                                 svg
                             </ic-button>
                         </div>

package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../ic-alert\";\n\ndescribe(\"ic-alert component\", () => {\n it(\"should render with a heading when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Test heading\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Test heading\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\"></ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render with a message when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"Test message\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"Test message\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n Test message\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render an action in the correct position when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This has an action\"><button slot=\"action\"></button></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"This has an action\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This has an action\n </ic-typography>\n </slot>\n </div>\n <div class=\"alert-action-container\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n <button slot=\"action\"></button>\n </ic-alert>`);\n });\n\n it(\"should render with a dismiss icon when the prop is applied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"This is dismissible\" dismissible=true role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This is dismissible\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n <ic-button appearance=\"dark\" class=\"dismiss-icon svg-container\" title=\"dismiss\" variant=\"icon\">\n svg\n </ic-button>\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render an element in the message slot\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Using custom message\"><ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Using custom message\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Using custom message\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\"></ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n <ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography>\n </ic-alert>`);\n });\n\n it(\"should render an icon in the neutral-icon slot\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `\n <ic-alert heading=\"Using custom icon\" message=\"This has a slotted icon\">\n <svg slot=\"neutral-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"/>\n </svg>\n </ic-alert>\n `,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Using custom icon\" message=\"This has a slotted icon\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <div class=\"alert-icon icon-neutral svg-container\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Using custom icon\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This has a slotted icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n <svg fill=\"#000000\" height=\"24px\" slot=\"neutral-icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n </ic-alert>`);\n });\n\n it(\"should render with no icon when the show-default-icon prop is set to false\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"No icon\" message=\"This alert has no icon\" show-defaul-icon=false></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"No icon\" message=\"This alert has no icon\" role=\"alert\" show-defaul-icon=\"false\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n No icon\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This alert has no icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render default icon of success variant when the show-default-icon prop is set to false\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Success\" message=\"This alert has the default success icon\" variant=\"success\" show-default-icon=\"false\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Success\" message=\"This alert has the default success icon\" role=\"alert\" show-default-icon=\"false\" variant=\"success\">\n <mock:shadow-root>\n <div class=\"container container-success\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-success\"></div>\n <span class=\"alert-icon icon-success svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Success\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This alert has the default success icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n </ic-alert>\n `);\n });\n\n it(\"should close on dismiss icon click\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n });\n\n let alert = await page.root.shadowRoot.querySelector(\n \"div.container-neutral\"\n );\n const dismissButton = await page.root.shadowRoot.querySelector(\"ic-button\");\n\n expect(alert).not.toBeNull();\n expect(dismissButton).not.toBeNull();\n\n await dismissButton.click();\n\n await page.waitForChanges();\n alert = await page.root.shadowRoot.querySelector(\"div.container-neutral\");\n\n expect(alert).toBeNull();\n });\n\n it(\"should test rendering an action after initial render\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n });\n\n const action = document.createElement(\"button\");\n action.setAttribute(\"slot\", \"action\");\n\n page.rootInstance.hostMutationCallback([\n {\n type: \"childList\",\n addedNodes: [action],\n removedNodes: [],\n },\n ]);\n });\n});\n"]}
1	+ {"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../ic-alert\";\n\ndescribe(\"ic-alert component\", () => {\n it(\"should render with a heading when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Test heading\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Test heading\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\"></ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render with a message when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"Test message\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"Test message\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n Test message\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render an action in the correct position when supplied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This has an action\"><button slot=\"action\"></button></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"This has an action\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This has an action\n </ic-typography>\n </slot>\n </div>\n <div class=\"alert-action-container\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n </div>\n </div>\n </mock:shadow-root>\n <button slot=\"action\"></button>\n </ic-alert>`);\n });\n\n it(\"should render with a dismiss icon when the prop is applied\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" message=\"This is dismissible\" dismissible=true role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This is dismissible\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\">\n <ic-button class=\"dismiss-icon svg-container\" title=\"dismiss\" variant=\"icon\">\n svg\n </ic-button>\n </div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render an element in the message slot\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Using custom message\"><ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Using custom message\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Using custom message\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\"></ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n <ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography>\n </ic-alert>`);\n });\n\n it(\"should render an icon in the neutral-icon slot\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `\n <ic-alert heading=\"Using custom icon\" message=\"This has a slotted icon\">\n <svg slot=\"neutral-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"/>\n </svg>\n </ic-alert>\n `,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Using custom icon\" message=\"This has a slotted icon\" role=\"alert\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <div class=\"alert-icon icon-neutral svg-container\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Using custom icon\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This has a slotted icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n <svg fill=\"#000000\" height=\"24px\" slot=\"neutral-icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n </ic-alert>`);\n });\n\n it(\"should render with no icon when the show-default-icon prop is set to false\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"No icon\" message=\"This alert has no icon\" show-defaul-icon=false></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"No icon\" message=\"This alert has no icon\" role=\"alert\" show-defaul-icon=\"false\">\n <mock:shadow-root>\n <div class=\"container container-neutral\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-neutral\"></div>\n <span class=\"alert-icon icon-neutral svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n No icon\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This alert has no icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n </ic-alert>`);\n });\n\n it(\"should render default icon of success variant when the show-default-icon prop is set to false\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Success\" message=\"This alert has the default success icon\" variant=\"success\" show-default-icon=\"false\"></ic-alert>`,\n });\n\n expect(page.root).toEqualHtml(`\n <ic-alert class=\"dark\" heading=\"Success\" message=\"This alert has the default success icon\" role=\"alert\" show-default-icon=\"false\" variant=\"success\">\n <mock:shadow-root>\n <div class=\"container container-success\">\n <div class=\"alert-icon-container\">\n <div class=\"divider divider-success\"></div>\n <span class=\"alert-icon icon-success svg-container\">\n svg\n </span>\n </div>\n <div class=\"alert-content\">\n <div class=\"alert-message\">\n <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n <p>\n Success\n </p>\n </ic-typography>\n <slot name=\"message\">\n <ic-typography variant=\"body\">\n This alert has the default success icon\n </ic-typography>\n </slot>\n </div>\n </div>\n <div class=\"dismiss-icon-container\"></div>\n </div>\n </mock:shadow-root>\n </ic-alert>\n `);\n });\n\n it(\"should close on dismiss icon click\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n });\n\n let alert = await page.root.shadowRoot.querySelector(\n \"div.container-neutral\"\n );\n const dismissButton = await page.root.shadowRoot.querySelector(\"ic-button\");\n\n expect(alert).not.toBeNull();\n expect(dismissButton).not.toBeNull();\n\n await dismissButton.click();\n\n await page.waitForChanges();\n alert = await page.root.shadowRoot.querySelector(\"div.container-neutral\");\n\n expect(alert).toBeNull();\n });\n\n it(\"should test rendering an action after initial render\", async () => {\n const page = await newSpecPage({\n components: [Alert],\n html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n });\n\n const action = document.createElement(\"button\");\n action.setAttribute(\"slot\", \"action\");\n\n page.rootInstance.hostMutationCallback([\n {\n type: \"childList\",\n addedNodes: [action],\n removedNodes: [],\n },\n ]);\n });\n});\n"]}