@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,243 @@
+import { Host, h, } from "@stencil/core";
+import closeIcon from "../../assets/close-icon.svg";
+import { isSlotUsed } from "../../utils/helpers";
+import { IcThemeForegroundEnum } 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.
+ */
+export class Alert {
+  constructor() {
+    this.dismissAction = () => {
+      this.dismiss.emit();
+      this.icDismiss.emit();
+    };
+    this.alertTitleWrap = false;
+    this.visible = true;
+    this.announced = true;
+    this.dismissible = false;
+    this.heading = "";
+    this.message = undefined;
+    this.titleAbove = false;
+    this.variant = "neutral";
+  }
+  componentDidLoad() {
+    this.alertTitleShouldWrap();
+  }
+  handleClick() {
+    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)
+      this.alertTitleWrap = true;
+  }
+  render() {
+    const { variant, heading, message, titleAbove, dismissible, announced, visible, } = this;
+    return (visible && (h(Host, { role: announced && "alert", class: {
+        [IcThemeForegroundEnum.Dark]: true,
+      } }, h("div", { class: {
+        ["container"]: true,
+        [`container-${variant}`]: true,
+      } }, h("div", { class: "alert-icon-container" }, h("div", { class: {
+        ["divider"]: true,
+        [`divider-${variant}`]: true,
+      } }), 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: {
+        ["alert-message"]: true,
+        ["alert-message-title-above"]: titleAbove || this.alertTitleWrap,
+      } }, heading && (h("ic-typography", { 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: {
+        ["svg-container"]: true,
+        ["dismiss-icon"]: true,
+      }, innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon", appearance: IcThemeForegroundEnum.Dark, title: "dismiss" })))))));
+  }
+  static get is() { return "ic-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-alert.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-alert.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "announced": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers."
+        },
+        "attribute": "announced",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "dismissible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the alert will have a close icon at the end to dismiss it."
+        },
+        "attribute": "dismissible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The optional title to display at the start of the alert."
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The main body message of the alert."
+        },
+        "attribute": "message",
+        "reflect": false
+      },
+      "titleAbove": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the title and message will appear above and below instead of inline."
+        },
+        "attribute": "title-above",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStatusVariants",
+          "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+          "references": {
+            "IcStatusVariants": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the alert which will be rendered."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"neutral\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "alertTitleWrap": {},
+      "visible": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dismiss",
+        "name": "dismiss",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "This event should not be used anymore. Use icDismiss instead."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "icDismiss",
+        "name": "icDismiss",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Is emitted when the user dismisses the alert."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "icDismiss",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=ic-alert.js.map

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

@@ -0,0 +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} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed } 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  @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   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the alert.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  componentDidLoad(): void {\n    this.alertTitleShouldWrap();\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\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    } = this;\n\n    return (\n      visible && (\n        <Host\n          role={announced && \"alert\"}\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"]}

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

@@ -0,0 +1,11 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("ic-alert", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-alert heading="Test" message="Test message"/>`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-alert.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-alert.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/a11y/ic-alert.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,mDAAmD,CACpD,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-alert\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-alert heading=\"Test\" message=\"Test message\"/>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,16 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-alert component", () => {
+  it("should close on dismiss icon click", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-alert dismissible=true></ic-alert>`);
+    await page.waitForChanges();
+    let alert = await page.find("ic-alert >>> .container");
+    const dismissButton = await page.find("ic-alert >>> .dismiss-icon");
+    expect(alert).not.toBeNull();
+    expect(dismissButton).not.toBeNull();
+    await dismissButton.click();
+    alert = await page.find("ic-alert >>> .container");
+    expect(alert).toBeNull();
+  });
+});
+//# sourceMappingURL=ic-alert.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-alert.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,wCAAwC,CAAC,CAAC;IAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAEpE,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC7B,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAErC,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;IAE5B,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAEnD,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;EAC3B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-alert component\", () => {\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-alert dismissible=true></ic-alert>`);\n    await page.waitForChanges();\n\n    let alert = await page.find(\"ic-alert >>> .container\");\n    const dismissButton = await page.find(\"ic-alert >>> .dismiss-icon\");\n\n    expect(alert).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    alert = await page.find(\"ic-alert >>> .container\");\n\n    expect(alert).toBeNull();\n  });\n});\n"]}

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

@@ -0,0 +1,182 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Alert } from "../../ic-alert";
+describe("ic-alert component", () => {
+  it("should render with a heading when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert heading="Test heading"></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" heading="Test heading" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <ic-typography class="alert-title" variant="subtitle-large">
+                                <p>
+                                    Test heading
+                                </p>
+                            </ic-typography>
+                            <slot name="message">
+                                <ic-typography variant="body"></ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+        </ic-alert>`);
+  });
+  it("should render with a message when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="Test message"></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" message="Test message" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                    <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <slot name="message">
+                                <ic-typography variant="body">
+                                    Test message
+                                </ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+        </ic-alert>`);
+  });
+  it("should render an action in the correct position when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This has an action"><button slot="action"></button></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" message="This has an action" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <slot name="message">
+                                <ic-typography variant="body">
+                                    This has an action
+                                </ic-typography>
+                            </slot>
+                        </div>
+                        <div class="alert-action-container">
+                            <slot name="action"></slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+            <button slot="action"></button>
+        </ic-alert>`);
+  });
+  it("should render with a dismiss icon when the prop is applied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+            <ic-alert class="dark" message="This is dismissible" dismissible=true role="alert">
+                <mock:shadow-root>
+                    <div class="container container-neutral">
+                        <div class="alert-icon-container">
+                            <div class="divider divider-neutral"></div>
+                            <span class="alert-icon icon-neutral svg-container">
+                                svg
+                            </span>
+                        </div>
+                        <div class="alert-content">
+                            <div class="alert-message">
+                                <slot name="message">
+                                    <ic-typography variant="body">
+                                        This is dismissible
+                                    </ic-typography>
+                                </slot>
+                            </div>
+                        </div>
+                        <div class="dismiss-icon-container">
+                            <ic-button appearance="dark" class="dismiss-icon svg-container" title="dismiss" variant="icon">
+                                svg
+                            </ic-button>
+                        </div>
+                    </div>
+                </mock:shadow-root>
+            </ic-alert>`);
+  });
+  it("should render an element in the message slot", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert heading="Using custom message"><ic-typography variant="h1" slot="message">Custom h1 message</ic-typography></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" heading="Using custom message" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                            <span class="alert-icon icon-neutral svg-container">
+                                svg
+                            </span>
+                        </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <ic-typography class="alert-title" variant="subtitle-large">
+                                <p>
+                                    Using custom message
+                                </p>
+                            </ic-typography>
+                            <slot name="message">
+                                <ic-typography variant="body"></ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container"></div>
+                </div>
+            </mock:shadow-root>
+            <ic-typography variant="h1" slot="message">Custom h1 message</ic-typography>
+        </ic-alert>`);
+  });
+  it("should close on dismiss icon click", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
+    });
+    let alert = await page.root.shadowRoot.querySelector("div.container-neutral");
+    const dismissButton = await page.root.shadowRoot.querySelector("ic-button");
+    expect(alert).not.toBeNull();
+    expect(dismissButton).not.toBeNull();
+    await dismissButton.click();
+    await page.waitForChanges();
+    alert = await page.root.shadowRoot.querySelector("div.container-neutral");
+    expect(alert).toBeNull();
+  });
+});
+//# sourceMappingURL=ic-alert.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../ic-alert\";\n\ndescribe(\"ic-alert component\", () => {\n  it(\"should render with a heading when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" heading=\"Test heading\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n                                <p>\n                                    Test heading\n                                </p>\n                            </ic-typography>\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\"></ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n        </ic-alert>`);\n  });\n\n  it(\"should render with a message when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"Test message\"></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" message=\"Test message\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                    <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\">\n                                    Test message\n                                </ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n        </ic-alert>`);\n  });\n\n  it(\"should render an action in the correct position when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This has an action\"><button slot=\"action\"></button></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" message=\"This has an action\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\">\n                                    This has an action\n                                </ic-typography>\n                            </slot>\n                        </div>\n                        <div class=\"alert-action-container\">\n                            <slot name=\"action\"></slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n            <button slot=\"action\"></button>\n        </ic-alert>`);\n  });\n\n  it(\"should render with a dismiss icon when the prop is applied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n            <ic-alert class=\"dark\" message=\"This is dismissible\" dismissible=true role=\"alert\">\n                <mock:shadow-root>\n                    <div class=\"container container-neutral\">\n                        <div class=\"alert-icon-container\">\n                            <div class=\"divider divider-neutral\"></div>\n                            <span class=\"alert-icon icon-neutral svg-container\">\n                                svg\n                            </span>\n                        </div>\n                        <div class=\"alert-content\">\n                            <div class=\"alert-message\">\n                                <slot name=\"message\">\n                                    <ic-typography variant=\"body\">\n                                        This is dismissible\n                                    </ic-typography>\n                                </slot>\n                            </div>\n                        </div>\n                        <div class=\"dismiss-icon-container\">\n                            <ic-button appearance=\"dark\" class=\"dismiss-icon svg-container\" title=\"dismiss\" variant=\"icon\">\n                                svg\n                            </ic-button>\n                        </div>\n                    </div>\n                </mock:shadow-root>\n            </ic-alert>`);\n  });\n\n  it(\"should render an element in the message slot\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert heading=\"Using custom message\"><ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" heading=\"Using custom message\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                            <span class=\"alert-icon icon-neutral svg-container\">\n                                svg\n                            </span>\n                        </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n                                <p>\n                                    Using custom message\n                                </p>\n                            </ic-typography>\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\"></ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\"></div>\n                </div>\n            </mock:shadow-root>\n            <ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography>\n        </ic-alert>`);\n  });\n\n  it(\"should 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"]}

package/dist/collection/components/ic-back-to-top/assets/ArrowUpward.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M0 8L1.41 9.41L7 3.83V16H9V3.83L14.58 9.42L16 8L8 0L0 8Z"/>
+</svg>