@ukic/web-components 3.0.0 → 3.1.0

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

@@ -1,33 +1,49 @@
-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.
  * @slot action - Content is placed to the right of the message.
+ * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.
  */
 export class Alert {
     constructor() {
         this.hostMutationObserver = null;
-        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;
+        /**
+         * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
+         */
         this.announced = true;
+        /**
+         * If `true`, the alert will have a close icon at the end to dismiss it.
+         */
         this.dismissible = false;
+        /**
+         * The optional title to display at the start of the alert.
+         */
         this.heading = "";
-        this.message = undefined;
+        /**
+         * If `true`, the default icon for the neutral variant will appear on the left of the alert.
+         */
+        this.showDefaultIcon = true;
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
+        /**
+         * If `true`, the title and message will appear above and below instead of inline.
+         */
         this.titleAbove = false;
+        /**
+         * The variant of the alert which will be rendered.
+         */
         this.variant = "neutral";
+        this.dismissAction = () => {
+            this.icDismiss.emit();
+        };
     }
     disconnectedCallback() {
         var _a;
@@ -35,7 +51,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,
         });
@@ -44,35 +60,40 @@ export class Alert {
         this.visible = !this.visible;
     }
     alertTitleShouldWrap() {
-        var _a;
-        const titleHeight = (_a = this.el.shadowRoot.querySelector(".alert-title")) === null || _a === void 0 ? void 0 : _a.clientHeight;
-        if (titleHeight > 24)
+        var _a, _b;
+        const titleHeight = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".alert-title")) === null || _b === void 0 ? void 0 : _b.clientHeight;
+        if (titleHeight && titleHeight > 24)
             this.alertTitleWrap = true;
     }
     render() {
-        const { variant, heading, message, titleAbove, dismissible, announced, visible, } = this;
-        return (visible && (h(Host, { role: announced ? "alert" : null, class: {
-                [IcThemeForegroundEnum.Dark]: true,
-            } }, h("div", { class: {
+        const { variant, heading, message, titleAbove, dismissible, announced, visible, showDefaultIcon, theme, } = this;
+        return (visible && (h(Host, { key: '335bc190a85988d6dd90dee36bc452a249159889', role: announced ? "alert" : null, class: {
+                [IcBrandForegroundEnum.Dark]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("div", { key: 'e856d3193d274c465ff36bcbda07d7d32f005672', class: {
                 ["container"]: true,
                 [`container-${variant}`]: true,
-            } }, h("div", { class: "alert-icon-container" }, h("div", { class: {
+            } }, h("div", { key: '2ce18b9ad21036175efac411f6f975c042d1b262', class: "alert-icon-container" }, h("div", { key: 'd472ee06999d1f7ac81e4f17b7d951ad0d014c5f', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), h("span", { class: {
+            } }), variant === "neutral" ? (isSlotUsed(this.el, "neutral-icon") ? (h("div", { class: "alert-icon svg-container icon-neutral" }, h("slot", { name: "neutral-icon" }))) : showDefaultIcon ? (h("span", { class: {
                 ["alert-icon"]: true,
                 ["svg-container"]: true,
                 [`icon-${variant}`]: true,
-            }, innerHTML: VARIANT_ICONS[variant].icon })), h("div", { class: "alert-content" }, h("div", { class: {
+            }, innerHTML: VARIANT_ICONS[variant].icon })) : (h("div", { class: "icon-placeholder" }))) : (h("span", { class: {
+                ["alert-icon"]: true,
+                ["svg-container"]: true,
+                [`icon-${variant}`]: true,
+            }, innerHTML: VARIANT_ICONS[variant].icon }))), h("div", { key: 'd83902cf13b0e0de71ac43e725bab061e55dc7a4', class: "alert-content" }, h("div", { key: '8d85d750bee6bc70c6d8e8d6de15ab1244f61d67', class: {
                 ["alert-message"]: true,
                 ["alert-message-title-above"]: titleAbove || this.alertTitleWrap,
-            } }, heading && (h("ic-typography", { class: {
+            } }, heading && (h("ic-typography", { key: '597ee8eedb36fa6b5fd311d939fbf6f2ce6efd35', class: {
                 ["alert-title"]: true,
                 ["alert-title-above"]: titleAbove || this.alertTitleWrap,
-            }, 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: {
+            }, variant: "subtitle-large" }, h("p", { key: 'b5a69877cd2d3d4d94c47084a2b7cb739c080b2e' }, heading))), h("slot", { key: 'f6b20259578c375633dff1a24d115500308766d6', name: "message" }, h("ic-typography", { key: '895813c7be5ddc2150f3fda932b69c5da684d460', variant: "body" }, message))), isSlotUsed(this.el, "action") && (h("div", { key: 'b18a1d6e25cc46771f33a09ca956fdcd64d407af', class: "alert-action-container" }, h("slot", { key: '05841b13b776380a6f52cd5cc1a8328df8de7407', name: "action" })))), h("div", { key: 'd58ecb605da9c1fe4b9931abc2bc95ce7aeb8074', class: "dismiss-icon-container" }, dismissible && (h("ic-button", { key: 'd9268c63861f40c897da738994cc35cae1244546', 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"; }
@@ -93,7 +114,7 @@ export class Alert {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -102,6 +123,8 @@ export class Alert {
                     "tags": [],
                     "text": "If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "announced",
                 "reflect": false,
                 "defaultValue": "true"
@@ -111,7 +134,7 @@ export class Alert {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -120,6 +143,8 @@ export class Alert {
                     "tags": [],
                     "text": "If `true`, the alert will have a close icon at the end to dismiss it."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dismissible",
                 "reflect": false,
                 "defaultValue": "false"
@@ -129,7 +154,7 @@ export class Alert {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -138,6 +163,8 @@ export class Alert {
                     "tags": [],
                     "text": "The optional title to display at the start of the alert."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -147,7 +174,7 @@ export class Alert {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -156,15 +183,63 @@ export class Alert {
                     "tags": [],
                     "text": "The main body message of the alert."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "message",
                 "reflect": false
             },
+            "showDefaultIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the default icon for the neutral variant will appear on the left of the alert."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-default-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "titleAbove": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -173,6 +248,8 @@ export class Alert {
                     "tags": [],
                     "text": "If `true`, the title and message will appear above and below instead of inline."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title-above",
                 "reflect": false,
                 "defaultValue": "false"
@@ -182,7 +259,7 @@ export class Alert {
                 "mutable": false,
                 "complexType": {
                     "original": "IcStatusVariants",
-                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "IcStatusVariants": {
                             "location": "import",
@@ -197,6 +274,8 @@ export class Alert {
                     "tags": [],
                     "text": "The variant of the alert which will be rendered."
                 },
+                "getter": false,
+                "setter": false,
                 "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":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,CAAC,EACD,WAAW,GACZ,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAoB,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;;GAGG;AAMH,MAAM,OAAO,KAAK;;QACR,yBAAoB,GAAqB,IAAI,CAAC;QA4D9C,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QAQM,yBAAoB,GAAG,CAAC,YAA8B,EAAQ,EAAE;YACtE,IACE,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,CACvD,IAAI,KAAK,WAAW;gBAClB,CAAC,CAAC,yBAAyB,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,CAAC;gBAC/D,CAAC,CAAC,KAAK,CACV,EACD,CAAC;gBACD,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;8BA5EiC,KAAK;uBACZ,IAAI;yBAKF,IAAI;2BAKF,KAAK;uBAKV,EAAE;;0BAUE,KAAK;uBAKC,SAAS;;IAO9C,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC5E,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAGD,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAMO,oBAAoB;;QAC1B,MAAM,WAAW,GACf,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,YAAY,CAAC;QACjE,IAAI,WAAW,GAAG,EAAE;YAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IACnD,CAAC;IAcD,MAAM;QACJ,MAAM,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,GACR,GAAG,IAAI,CAAC;QAET,OAAO,CACL,OAAO,IAAI,CACT,EAAC,IAAI,IACH,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAChC,KAAK,EAAE;gBACL,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,IAAI;aACnC;YAED,WACE,KAAK,EAAE;oBACL,CAAC,WAAW,CAAC,EAAE,IAAI;oBACnB,CAAC,aAAa,OAAO,EAAE,CAAC,EAAE,IAAI;iBAC/B;gBAED,WAAK,KAAK,EAAC,sBAAsB;oBAC/B,WACE,KAAK,EAAE;4BACL,CAAC,SAAS,CAAC,EAAE,IAAI;4BACjB,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,IAAI;yBAC7B,GACI;oBACP,YACE,KAAK,EAAE;4BACL,CAAC,YAAY,CAAC,EAAE,IAAI;4BACpB,CAAC,eAAe,CAAC,EAAE,IAAI;4BACvB,CAAC,QAAQ,OAAO,EAAE,CAAC,EAAE,IAAI;yBAC1B,EACD,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,GAChC,CACJ;gBACN,WAAK,KAAK,EAAC,eAAe;oBACxB,WACE,KAAK,EAAE;4BACL,CAAC,eAAe,CAAC,EAAE,IAAI;4BACvB,CAAC,2BAA2B,CAAC,EAC3B,UAAU,IAAI,IAAI,CAAC,cAAc;yBACpC;wBAEA,OAAO,IAAI,CACV,qBACE,KAAK,EAAE;gCACL,CAAC,aAAa,CAAC,EAAE,IAAI;gCACrB,CAAC,mBAAmB,CAAC,EAAE,UAAU,IAAI,IAAI,CAAC,cAAc;6BACzD,EACD,OAAO,EAAC,gBAAgB;4BAExB,aAAI,OAAO,CAAK,CACF,CACjB;wBACD,YAAM,IAAI,EAAC,SAAS;4BAClB,qBAAe,OAAO,EAAC,MAAM,IAAE,OAAO,CAAiB,CAClD,CACH;oBACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAChC,WAAK,KAAK,EAAC,wBAAwB;wBACjC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG;gBACN,WAAK,KAAK,EAAC,wBAAwB,IAChC,WAAW,IAAI,CACd,iBACE,KAAK,EAAE;wBACL,CAAC,eAAe,CAAC,EAAE,IAAI;wBACvB,CAAC,cAAc,CAAC,EAAE,IAAI;qBACvB,EACD,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,qBAAqB,CAAC,IAAI,EACtC,KAAK,EAAC,SAAS,GACJ,CACd,CACG,CACF,CACD,CACR,CACF,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 */\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   * 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    } = 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              <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            </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 = 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 && 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",
+};