@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

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

@@ -1,7 +1,7 @@
-import { Host, h, forceUpdate, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import closeIcon from "../../assets/close-icon.svg";
-import { isSlotUsed, checkSlotInChildMutations } from "../../utils/helpers";
-import { IcThemeForegroundEnum } from "../../utils/types";
+import { isSlotUsed, renderDynamicChildSlots } from "../../utils/helpers";
+import { IcBrandForegroundEnum, } from "../../utils/types";
 import { VARIANT_ICONS } from "../../utils/constants";
 /**
  * @slot message - Content is placed to the right of the title.
@@ -14,22 +14,16 @@ export class Alert {
         this.dismissAction = () => {
             this.icDismiss.emit();
         };
-        this.hostMutationCallback = (mutationList) => {
-            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
-                ? checkSlotInChildMutations(addedNodes, removedNodes, "action")
-                : false)) {
-                forceUpdate(this);
-            }
-        };
         this.alertTitleWrap = false;
         this.visible = true;
         this.announced = true;
         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;
@@ -37,7 +31,7 @@ export class Alert {
     }
     componentDidLoad() {
         this.alertTitleShouldWrap();
-        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "action", this));
         this.hostMutationObserver.observe(this.el, {
             childList: true,
         });
@@ -52,9 +46,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,
+                [IcBrandForegroundEnum.Dark]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
             } }, h("div", { class: {
                 ["container"]: true,
                 [`container-${variant}`]: true,
@@ -78,7 +73,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", theme: "dark", title: "Dismiss" })))))));
     }
     static get is() { return "ic-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -165,7 +160,7 @@ export class Alert {
                 "attribute": "message",
                 "reflect": false
             },
-            "titleAbove": {
+            "showDefaultIcon": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -174,26 +169,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 +196,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 +211,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

@@ -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"]}
+{"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} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, renderDynamicChildSlots } from \"../../utils/helpers\";\nimport {\n  IcBrandForegroundEnum,\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((mutationList) =>\n      renderDynamicChildSlots(mutationList, \"action\", this)\n    );\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  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            [IcBrandForegroundEnum.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                  theme=\"dark\"\n                  title=\"Dismiss\"\n                ></ic-button>\n              )}\n            </div>\n          </div>\n        </Host>\n      )\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-alert/ic-alert.stories.js

@@ -0,0 +1,271 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  dismissible: false,
+  heading: "Heading",
+  message: "Message",
+  titleAbove: false,
+  variant: "neutral",
+  showAction: false,
+  showDefaultIcon: true,
+  showSlottedIcon: false,
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Alert",
+  component: "ic-alert",
+};
+
+export const Variants = {
+  render: () =>
+    html`<ic-alert
+        heading="Neutral"
+        message="This alert is for displaying miscellaneous messages"
+      ></ic-alert>
+      <ic-alert
+        variant="info"
+        heading="Info"
+        message="This alert is for displaying information"
+      ></ic-alert>
+      <ic-alert
+        variant="error"
+        heading="Error"
+        message="This alert is for displaying errors"
+      ></ic-alert>
+      <ic-alert
+        variant="warning"
+        heading="Warning"
+        message="This alert is for displaying warnings"
+      ></ic-alert>
+      <ic-alert
+        variant="success"
+        heading="Success"
+        message="This alert is for displaying success messages. It has a very long message with lots of text which goes over multiple
+        lines so the alert should expand as well to make sure it doesn't overflow"
+      ></ic-alert>`,
+
+  name: "Variants",
+};
+
+export const MessageOnly = {
+  render: () =>
+    html`<ic-alert
+      message="This alert is for displaying miscellaneous messages"
+    ></ic-alert>`,
+
+  name: "Message only",
+};
+
+export const Dismissible = {
+  render: () =>
+    html`<ic-alert
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      dismissible="true"
+    ></ic-alert>`,
+
+  name: "Dismissible",
+};
+
+export const WithAction = {
+  render: () =>
+    html`<ic-alert
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      ><ic-button slot="action" variant="secondary" monochrome="true"
+        >Button</ic-button
+      ></ic-alert
+    >`,
+
+  name: "With action",
+};
+
+export const DismissibleWithAction = {
+  render: () =>
+    html`<ic-alert
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      dismissible="true"
+      ><ic-button slot="action" variant="secondary" monochrome="true"
+        >Button</ic-button
+      ></ic-alert
+    >`,
+
+  name: "Dismissible with action",
+};
+
+export const TitleAbove = {
+  render: () =>
+    html`<ic-alert
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      title-above="true"
+    ></ic-alert>`,
+
+  name: "Title above",
+};
+
+export const ResponsiveTitle = {
+  render: () =>
+    html`<ic-alert
+        heading="This title is very long so should force the alert to add 'title-above'"
+        message="This alert does not have 'title-above' added as a prop but it is forced to add it due to the length of the title"
+      ></ic-alert>
+      <ic-alert
+        variant="success"
+        heading="Shorter title"
+        message="Neither of these has 'title-above' set to true"
+      ></ic-alert>`,
+
+  name: "Responsive title",
+};
+
+export const CustomMessage = {
+  render: () =>
+    html`<ic-alert heading="This alert uses a custom message slot">
+      <ic-typography slot="message">
+        This is some text and
+        <ic-link href="/" inline>this is an inline link</ic-link> within the
+        text.
+      </ic-typography>
+    </ic-alert>`,
+
+  name: "Custom message",
+};
+
+export const CustomMessageAndTitleAbove = {
+  render: () => html`<ic-alert
+    heading="Want to know more about our coffee?"
+    title-above="true"
+  >
+    <ic-typography slot="message">
+      Go to our <ic-link href="/">coffee page</ic-link> to learn more.
+    </ic-typography>
+  </ic-alert>`,
+
+  name: "Custom message and title above",
+};
+
+export const Announced = {
+  render: () => html`
+    <ic-alert
+      id="alert"
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      announced="false"
+    ></ic-alert>
+    <br />
+    <br />
+    <ic-button variant="primary" size="small" onClick="onClick()" id="btn"
+      >Toggle announced prop</ic-button
+    >
+    <script>
+      const alert = document.getElementById("alert");
+      const btn = document.getElementById("btn");
+      btn.addEventListener("click", onClick);
+      function onClick(e) {
+        e.preventDefault();
+        alert.announced
+          ? (alert.announced = "false")
+          : (alert.announced = "true");
+      }
+    </script>
+  `,
+
+  name: "Announced",
+};
+
+export const SlottedIcon = {
+  render: () => html`
+    <ic-alert
+      id="alert"
+      heading="Neutral"
+      message="This alert contains a slotted icon"
+      show-default-icon="false"
+    >
+      <svg
+        slot="neutral-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <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"
+        />
+      </svg>
+    </ic-alert>
+  `,
+
+  name: "Slotted icon",
+};
+
+export const NoIcon = {
+  render: () => html`
+    <ic-alert
+      id="alert"
+      heading="Neutral"
+      message="This alert has no icon"
+      show-default-icon="false"
+    ></ic-alert>
+  `,
+
+  name: "No icon",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-alert
+      dismissible=${args.dismissible}
+      variant=${args.variant}
+      heading=${args.heading}
+      message=${args.message}
+      title-above=${args.titleAbove}
+      show-default-icon=${args.showDefaultIcon}
+      theme=${args.theme}
+    >
+      ${args.showAction &&
+      html`<ic-button slot="action" variant="secondary" monochrome="true"
+        >Button</ic-button
+      >`}
+      ${args.showSlottedIcon &&
+      html`<svg
+        slot="neutral-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <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"
+        />
+      </svg>`}
+    </ic-alert>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    variant: {
+      options: ["neutral", "info", "warning", "error", "success"],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -1,6 +1,13 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Alert } from "../../ic-alert";
+import { mockHasDynamicChildSlots, mockMutationObserverImplementation, mockRenderDynamicChildSlots, } from "../../../../testspec.setup";
 describe("ic-alert component", () => {
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
     it("should render with a heading when supplied", async () => {
         const page = await newSpecPage({
             components: [Alert],
@@ -123,7 +130,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" theme="dark" title="Dismiss" variant="icon">
                                 svg
                             </ic-button>
                         </div>
@@ -297,15 +304,26 @@ describe("ic-alert component", () => {
             components: [Alert],
             html: `<ic-alert heading="Test heading"></ic-alert>`,
         });
+        const component = page.rootInstance;
+        const host = page.root;
+        const observerInstance = mockMutationObserverImplementation.mock.results[0].value;
         const action = document.createElement("button");
         action.setAttribute("slot", "action");
-        page.rootInstance.hostMutationCallback([
+        observerInstance.observe(host, { childList: true });
+        host.appendChild(action);
+        const mockMutationRecord = [
             {
-                type: "childList",
                 addedNodes: [action],
                 removedNodes: [],
+                target: host,
             },
-        ]);
+        ];
+        observerInstance.trigger(mockMutationRecord);
+        await page.waitForChanges();
+        expect(mockRenderDynamicChildSlots).toHaveBeenCalledTimes(1);
+        expect(mockRenderDynamicChildSlots).toHaveBeenCalledWith(mockMutationRecord, "action", component);
+        expect(mockHasDynamicChildSlots).toHaveBeenCalledTimes(1);
+        expect(page.root).toMatchSnapshot();
     });
 });
 //# sourceMappingURL=ic-alert.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,8CAA8C;SACrD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;oBA0Bd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,8CAA8C;SACrD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;oBAuBd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;QAC7E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,mFAAmF;SAC1F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2Bd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;QAC1E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,sEAAsE;SAC7E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0BV,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,kIAAkI;SACzI,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;oBA0Bd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE;;;;;;;SAOH;SACJ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+BlB,CAAC,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC1F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,iGAAiG;SACxG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2Bd,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+FAA+F,EAAE,KAAK,IAAI,EAAE;QAC7G,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,uIAAuI;SAC9I,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA4BzB,CAAC,CAAC;IACT,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,sEAAsE;SAC7E,CAAC,CAAC;QAEH,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAClD,uBAAuB,CACxB,CAAC;QACF,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAE5E,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC7B,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAErC,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAE1E,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,8CAA8C;SACrD,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEtC,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC;YACrC;gBACE,IAAI,EAAE,WAAW;gBACjB,UAAU,EAAE,CAAC,MAAM,CAAC;gBACpB,YAAY,EAAE,EAAE;aACjB;SACF,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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"]}
+{"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\";\nimport {\n  mockHasDynamicChildSlots,\n  mockMutationObserverImplementation,\n  MockMutationRecord,\n  mockRenderDynamicChildSlots,\n} from \"../../../../testspec.setup\";\n\ndescribe(\"ic-alert component\", () => {\n  afterAll(() => {\n    jest.restoreAllMocks();\n  });\n\n  afterEach(() => {\n    jest.clearAllMocks();\n  });\n\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\" theme=\"dark\" 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 component = page.rootInstance;\n    const host = page.root;\n\n    const observerInstance =\n      mockMutationObserverImplementation.mock.results[0].value;\n\n    const action = document.createElement(\"button\");\n    action.setAttribute(\"slot\", \"action\");\n\n    observerInstance.observe(host, { childList: true });\n\n    host.appendChild(action);\n\n    const mockMutationRecord: MockMutationRecord[] = [\n      {\n        addedNodes: [action],\n        removedNodes: [],\n        target: host,\n      },\n    ];\n\n    observerInstance.trigger(mockMutationRecord);\n\n    await page.waitForChanges();\n\n    expect(mockRenderDynamicChildSlots).toHaveBeenCalledTimes(1);\n    expect(mockRenderDynamicChildSlots).toHaveBeenCalledWith(\n      mockMutationRecord,\n      \"action\",\n      component\n    );\n\n    expect(mockHasDynamicChildSlots).toHaveBeenCalledTimes(1);\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}