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

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

@@ -0,0 +1,317 @@
+import { Host, h } from "@stencil/core";
+import { checkResizeObserver, pxToRem } from "../../utils/helpers";
+export class Stepper {
+  constructor() {
+    this.resizeObserver = null;
+    // Get all steps currently within this stepper
+    this.getChildren = () => {
+      this.steps = Array.from(this.el.querySelectorAll("ic-step"));
+      this.stepsWithStepTitles = Array.from(this.el.querySelectorAll("ic-step[step-title]"));
+    };
+    // Inform the user that stepTitles are required on all steps in a compact stepper
+    this.checkStepTitles = () => {
+      if (this.stepsWithStepTitles.length < this.steps.length &&
+        this.variantOverride &&
+        this.variant === "compact") {
+        this.noOfResizes = this.noOfResizes + 1;
+        if (this.noOfResizes === 1) {
+          console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`);
+        }
+      }
+    };
+    this.setStepTypes = () => {
+      this.getChildren();
+      this.stepTypes = [];
+      for (let i = 0; i < this.steps.length; i++) {
+        this.stepTypes.push("active");
+      }
+    };
+    this.setStepperWidth = () => {
+      this.alignedFullWidth =
+        this.variant === "default" && this.aligned === "full-width";
+      const lastStep = this.steps[this.steps.length - 1];
+      lastStep.style.maxWidth = "none";
+      if (this.alignedFullWidth) {
+        this.stepperWidth = this.el.offsetWidth;
+        lastStep.style.maxWidth = pxToRem(`${this.stepperWidth / this.steps.length}px`);
+        this.lastStepWidth = lastStep.offsetWidth;
+      }
+    };
+    this.initialiseStepStates = () => {
+      this.steps.forEach((step, index) => {
+        // Set variant
+        step.variant = this.variant;
+        // Assign stepNum to each step
+        step.stepNum = index + 1;
+        // Assign lastStep to final step
+        step.lastStep = index === this.steps.length - 1;
+        step.lastStepNum = this.steps.length;
+        if (step.stepType !== "current") {
+          step.current = false;
+          this.stepTypes[index] = step.stepType;
+        }
+        else {
+          step.current = true;
+        }
+        const stepTitleArea = step.shadowRoot &&
+          step.shadowRoot.querySelector(".step > .step-title-area");
+        if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {
+          if (this.variant === "compact") {
+            this.autoSetStepTitles = true;
+            if (this.autoSetStepTitles) {
+              step.stepTitle = "Step " + step.stepNum;
+              stepTitleArea &&
+                stepTitleArea
+                  .querySelector(".step-title")
+                  .setAttribute("aria-hidden", "true");
+            }
+          }
+          if (this.variant === "default") {
+            this.autoSetStepTitles = false;
+            if (!this.autoSetStepTitles) {
+              step.stepTitle = undefined;
+              stepTitleArea &&
+                stepTitleArea
+                  .querySelector(".step-title")
+                  .removeAttribute("aria-hidden");
+            }
+          }
+        }
+        if (this.variant === "compact") {
+          if (step.current === true || step.stepType === "current") {
+            step.classList.remove("hide");
+            step.classList.add("show");
+          }
+          else if (step.classList.contains("show")) {
+            step.classList.remove("show");
+            step.classList.add("hide");
+          }
+          if (!step.lastStep) {
+            step.nextStepTitle = this.steps[index + 1].stepTitle;
+            step.progress = (step.stepNum / this.steps.length) * 100;
+          }
+          else if (step.lastStep && this.stepTypes[index] !== "completed") {
+            step.progress = 95;
+          }
+          else {
+            step.progress = 100;
+          }
+          if (this.hideStepInfo && stepTitleArea !== null) {
+            stepTitleArea.classList.remove("visually-hidden");
+          }
+          step.compactStepStyling = this.stepTypes[index];
+        }
+        if (this.variant === "default") {
+          if (!step.lastStep) {
+            if (this.alignedFullWidth) {
+              step.style.width = pxToRem(`${(this.stepperWidth - this.lastStepWidth) /
+                (this.steps.length - 1)}px`);
+              step.style.minWidth = pxToRem("148px");
+            }
+          }
+          else if (step.lastStep) {
+            step.classList.add("last-step");
+            if (this.alignedFullWidth) {
+              step.style.maxWidth = `${this.lastStepWidth}px`;
+            }
+            else {
+              step.style.maxWidth =
+                this.connectorWidth > 100
+                  ? pxToRem(`${this.connectorWidth + 48}px`)
+                  : pxToRem("148px");
+            }
+          }
+          if (this.aligned === "left") {
+            step.style.width =
+              this.connectorWidth > 100
+                ? pxToRem(`${this.connectorWidth + 48}px`)
+                : pxToRem("148px");
+            const stepConnect = step.shadowRoot.querySelector(".step > .step-top > .step-connect");
+            if (stepConnect) {
+              stepConnect.style.width =
+                this.connectorWidth > 100
+                  ? pxToRem(`${this.connectorWidth}px`)
+                  : pxToRem("100px");
+            }
+          }
+          if (this.hideStepInfo && stepTitleArea !== null) {
+            stepTitleArea.classList.add("visually-hidden");
+          }
+        }
+      });
+    };
+    this.overrideVariant = () => {
+      let minDefaultStepperWidth = 148 * this.steps.length;
+      if (this.aligned === "left" && this.connectorWidth > 100) {
+        minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;
+      }
+      if (this.variantOverride) {
+        if (this.el.clientWidth < minDefaultStepperWidth) {
+          this.variant = "compact";
+          this.getChildren();
+        }
+        else {
+          this.variant = "default";
+          this.getChildren();
+        }
+      }
+    };
+    this.resizeObserverCallback = () => {
+      this.getChildren();
+      this.checkStepTitles();
+      this.overrideVariant();
+      this.setStepperWidth();
+      this.initialiseStepStates();
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.resizeObserverCallback();
+      });
+      this.resizeObserver.observe(this.el);
+    };
+    this.alignedFullWidth = true;
+    this.autoSetStepTitles = true;
+    this.lastStepWidth = 0;
+    this.noOfResizes = 0;
+    this.stepperWidth = document
+      .querySelector("ic-stepper")
+      .getBoundingClientRect().width;
+    this.stepTypes = [];
+    this.variantOverride = this.variant !== "compact";
+    this.aligned = "full-width";
+    this.connectorWidth = 100;
+    this.hideStepInfo = false;
+    this.variant = "default";
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    this.setStepTypes();
+    if (this.variant === "compact") {
+      this.variantOverride = false;
+    }
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+  }
+  render() {
+    return (h(Host, { class: {
+        [`${this.variant}`]: true,
+        ["aligned-left"]: this.variant === "default" && this.aligned === "left",
+      } }, h("ul", { class: "step-item-list" }, h("slot", null))));
+  }
+  static get is() { return "ic-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-stepper.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-stepper.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "aligned": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStepperAlignment",
+          "resolved": "\"full-width\" | \"left\"",
+          "references": {
+            "IcStepperAlignment": {
+              "location": "import",
+              "path": "./ic-stepper.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The alignment of the default stepper within its container."
+        },
+        "attribute": "aligned",
+        "reflect": false,
+        "defaultValue": "\"full-width\""
+      },
+      "connectorWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The length of the connnector between each step in pixels. Minimum length is 100px."
+        },
+        "attribute": "connector-width",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "hideStepInfo": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper."
+        },
+        "attribute": "hide-step-info",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IcStepVariants",
+          "resolved": "\"compact\" | \"default\"",
+          "references": {
+            "IcStepVariants": {
+              "location": "import",
+              "path": "../ic-step/ic-step.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the stepper."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "alignedFullWidth": {},
+      "autoSetStepTitles": {},
+      "lastStepWidth": {},
+      "noOfResizes": {},
+      "stepperWidth": {},
+      "stepTypes": {},
+      "variantOverride": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport { IcStepTypes, IcStepVariants } from \"../ic-step/ic-step.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class Stepper {\n  private resizeObserver: ResizeObserver = null;\n  private steps: HTMLIcStepElement[];\n  private stepsWithStepTitles: HTMLIcStepElement[];\n\n  @Element() el: HTMLIcStepperElement;\n\n  @State() alignedFullWidth: boolean = true;\n  @State() autoSetStepTitles: boolean = true;\n  @State() lastStepWidth: number = 0;\n  @State() noOfResizes?: number = 0;\n  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n  @State() stepTypes: IcStepTypes[] = [];\n  @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n  /**\n   * The alignment of the default stepper within its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connnector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  /**\n   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n   */\n  @Prop() hideStepInfo?: boolean = false;\n\n  /**\n   * The variant of the stepper.\n   */\n  @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.setStepTypes();\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  // Get all steps currently within this stepper\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n    this.stepsWithStepTitles = Array.from(\n      this.el.querySelectorAll(\"ic-step[step-title]\")\n    );\n  };\n\n  // Inform the user that stepTitles are required on all steps in a compact stepper\n  private checkStepTitles = (): void => {\n    if (\n      this.stepsWithStepTitles.length < this.steps.length &&\n      this.variantOverride &&\n      this.variant === \"compact\"\n    ) {\n      this.noOfResizes = this.noOfResizes + 1;\n      if (this.noOfResizes === 1) {\n        console.error(\n          `The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`\n        );\n      }\n    }\n  };\n\n  private setStepTypes = (): void => {\n    this.getChildren();\n    this.stepTypes = [];\n    for (let i = 0; i < this.steps.length; i++) {\n      this.stepTypes.push(\"active\");\n    }\n  };\n\n  private setStepperWidth = (): void => {\n    this.alignedFullWidth =\n      this.variant === \"default\" && this.aligned === \"full-width\";\n\n    const lastStep = this.steps[this.steps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n\n    if (this.alignedFullWidth) {\n      this.stepperWidth = this.el.offsetWidth;\n      lastStep.style.maxWidth = pxToRem(\n        `${this.stepperWidth / this.steps.length}px`\n      );\n      this.lastStepWidth = lastStep.offsetWidth;\n    }\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Set variant\n      step.variant = this.variant;\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      // Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n      step.lastStepNum = this.steps.length;\n\n      if (step.stepType !== \"current\") {\n        step.current = false;\n        this.stepTypes[index] = step.stepType;\n      } else {\n        step.current = true;\n      }\n\n      const stepTitleArea =\n        step.shadowRoot &&\n        step.shadowRoot.querySelector(\".step > .step-title-area\");\n\n      if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n        if (this.variant === \"compact\") {\n          this.autoSetStepTitles = true;\n          if (this.autoSetStepTitles) {\n            step.stepTitle = \"Step \" + step.stepNum;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .setAttribute(\"aria-hidden\", \"true\");\n          }\n        }\n        if (this.variant === \"default\") {\n          this.autoSetStepTitles = false;\n          if (!this.autoSetStepTitles) {\n            step.stepTitle = undefined;\n            stepTitleArea &&\n              stepTitleArea\n                .querySelector(\".step-title\")\n                .removeAttribute(\"aria-hidden\");\n          }\n        }\n      }\n\n      if (this.variant === \"compact\") {\n        if (step.current === true || step.stepType === \"current\") {\n          step.classList.remove(\"hide\");\n          step.classList.add(\"show\");\n        } else if (step.classList.contains(\"show\")) {\n          step.classList.remove(\"show\");\n          step.classList.add(\"hide\");\n        }\n\n        if (!step.lastStep) {\n          step.nextStepTitle = this.steps[index + 1].stepTitle;\n          step.progress = (step.stepNum / this.steps.length) * 100;\n        } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n          step.progress = 95;\n        } else {\n          step.progress = 100;\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.remove(\"visually-hidden\");\n        }\n\n        step.compactStepStyling = this.stepTypes[index];\n      }\n\n      if (this.variant === \"default\") {\n        if (!step.lastStep) {\n          if (this.alignedFullWidth) {\n            step.style.width = pxToRem(\n              `${\n                (this.stepperWidth - this.lastStepWidth) /\n                (this.steps.length - 1)\n              }px`\n            );\n            step.style.minWidth = pxToRem(\"148px\");\n          }\n        } else if (step.lastStep) {\n          step.classList.add(\"last-step\");\n          if (this.alignedFullWidth) {\n            step.style.maxWidth = `${this.lastStepWidth}px`;\n          } else {\n            step.style.maxWidth =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth + 48}px`)\n                : pxToRem(\"148px\");\n          }\n        }\n\n        if (this.aligned === \"left\") {\n          step.style.width =\n            this.connectorWidth > 100\n              ? pxToRem(`${this.connectorWidth + 48}px`)\n              : pxToRem(\"148px\");\n          const stepConnect = step.shadowRoot.querySelector(\n            \".step > .step-top > .step-connect\"\n          ) as HTMLElement;\n\n          if (stepConnect) {\n            stepConnect.style.width =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth}px`)\n                : pxToRem(\"100px\");\n          }\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.add(\"visually-hidden\");\n        }\n      }\n    });\n  };\n\n  private overrideVariant = () => {\n    let minDefaultStepperWidth = 148 * this.steps.length;\n\n    if (this.aligned === \"left\" && this.connectorWidth > 100) {\n      minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n    }\n\n    if (this.variantOverride) {\n      if (this.el.clientWidth < minDefaultStepperWidth) {\n        this.variant = \"compact\";\n        this.getChildren();\n      } else {\n        this.variant = \"default\";\n        this.getChildren();\n      }\n    }\n  };\n\n  private resizeObserverCallback = () => {\n    this.getChildren();\n    this.checkStepTitles();\n    this.overrideVariant();\n    this.setStepperWidth();\n    this.initialiseStepStates();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`${this.variant}`]: true,\n          [\"aligned-left\"]:\n            this.variant === \"default\" && this.aligned === \"left\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-stepper/ic-stepper.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-stepper.types.js.map

package/dist/collection/components/ic-stepper/ic-stepper.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper.types.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStepperAlignment = \"left\" | \"full-width\";\n"]}

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

@@ -0,0 +1,36 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
+describe("default variant of stepper component", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-stepper>
+    <ic-step step-title="First"></ic-step>
+    <ic-step
+      step-title="Second With a Very Long Title"
+      step-subtitle="Optional Subtitle"
+      step-type="current"
+    ></ic-step>
+    <ic-step step-title="Third" step-type="disabled"></ic-step>
+    <ic-step
+      step-title="Fourth"
+      step-subtitle="Optional Subtitle"
+      step-type="completed"
+    ></ic-step>
+  </ic-stepper>`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+describe("compact variant of ic-stepper", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-stepper variant="compact" id="standard-compact-stepper">
+        <ic-step step-title="Create" step-type="completed"></ic-step>
+        <ic-step step-title="Read" step-status="complete" current></ic-step>
+        <ic-step step-title="Update" step-status="not required"></ic-step>
+        <ic-step step-title="Delete" step-status="not required"></ic-step>
+      </ic-stepper>`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
+//# sourceMappingURL=ic-stepper.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/a11y/ic-stepper.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,sCAAsC,EAAE,GAAG,EAAE;EACpD,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;;;;;gBAab,CAAC,CAAC;IACd,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;AAEH,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;EAC7C,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GACN,MAAM,OAAO,CAAC;;;;;oBAKA,CAAC,CAAC;IAClB,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(\"default variant of stepper component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-stepper>\n    <ic-step step-title=\"First\"></ic-step>\n    <ic-step\n      step-title=\"Second With a Very Long Title\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"current\"\n    ></ic-step>\n    <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n    <ic-step\n      step-title=\"Fourth\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"completed\"\n    ></ic-step>\n  </ic-stepper>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n\ndescribe(\"compact variant of ic-stepper\", () => {\n  it(\"passes accessibility\", async () => {\n    const el =\n      await fixture(`<ic-stepper variant=\"compact\" id=\"standard-compact-stepper\">\n        <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n        <ic-step step-title=\"Read\" step-status=\"complete\" current></ic-step>\n        <ic-step step-title=\"Update\" step-status=\"not required\"></ic-step>\n        <ic-step step-title=\"Delete\" step-status=\"not required\"></ic-step>\n      </ic-stepper>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-stepper/test/basic/ic-stepper-test-examples.js

@@ -0,0 +1,74 @@
+export const defaultStepper = `
+    <ic-stepper>
+        <ic-step step-title="First"></ic-step>
+        <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+        ></ic-step>
+    </ic-stepper>`;
+export const customConnectorWidthStepper = `
+    <ic-stepper aligned="left" connector-width="150">
+        <ic-step step-title="First"></ic-step>
+        <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+        ></ic-step>
+    </ic-stepper>`;
+export const invalidConnectorWidthStepper = `
+    <ic-stepper aligned="left" connector-width="96">
+        <ic-step step-title="First"></ic-step>
+        <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+        ></ic-step>
+    </ic-stepper>`;
+export const compactStepper = `
+    <ic-stepper variant="compact" id="custom-compact-stepper">
+        <ic-step 
+        step-title="First"
+        ></ic-step>
+        <ic-step
+          step-title="Second With a Very Long Title"
+          step-subtitle="Optional subtitle that is long and should wrap"
+          current
+          step-type="current"
+        ></ic-step>
+        <ic-step
+          step-title="Third"
+          step-type="disabled"
+        ></ic-step>
+        <ic-step
+          step-title="Fourth title that is long and should wrap"
+          step-subtitle="Optional Subtitle"
+          step-type="completed"
+        ></ic-step>
+        <ic-step
+          step-title="Fifth and final step"
+          step-subtitle="Optional Subtitle"
+          icon
+          step-status="optional"
+          step-type="completed"
+        ></ic-step>
+      </ic-stepper>`;
+//# sourceMappingURL=ic-stepper-test-examples.js.map

package/dist/collection/components/ic-stepper/test/basic/ic-stepper-test-examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper-test-examples.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/basic/ic-stepper-test-examples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;kBAcZ,CAAC;AAEnB,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;kBAczB,CAAC;AAEnB,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;kBAc1B,CAAC;AAEnB,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2BV,CAAC","sourcesContent":["export const defaultStepper = `\n    <ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const customConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const invalidConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const compactStepper = `\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        step-title=\"First\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          icon\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`;\n"]}

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

@@ -0,0 +1,49 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { defaultStepper, invalidConnectorWidthStepper, compactStepper, } from "./ic-stepper-test-examples";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("default variant of ic-stepper component", () => {
+  it("should render four steps and three step-connects", async () => {
+    const page = await newE2EPage({ html: defaultStepper });
+    const steps = await page.findAll("ic-step");
+    expect(steps.length).toBe(4);
+    const stepConnects = await page.findAll("ic-step >>> div.step-connect");
+    expect(stepConnects.length).toBe(3);
+  });
+  it("should render the correct number on each step", async () => {
+    const page = await newE2EPage({ html: defaultStepper });
+    const stepInners = await page.findAll("ic-step >>> .step-icon-inner");
+    expect(stepInners[0].innerHTML).toEqual("1");
+    expect(stepInners[1].innerHTML).toEqual("2");
+    expect(stepInners[2].innerHTML).toEqual("3");
+    expect(stepInners[3].innerHTML).toContain("check-icon");
+  });
+  it("should keep the length of the step connect at 100px if a connectorWidth under 100px is given", async () => {
+    const page = await newE2EPage({ html: invalidConnectorWidthStepper });
+    await page.waitForChanges();
+    const connectorWidth = await page.$eval("ic-stepper", (el) => {
+      return el.connectorWidth;
+    });
+    expect(connectorWidth).toBe(96);
+    const steps = await page.evaluate(() => {
+      return Array.from(document.querySelectorAll("ic-step:not(:last-child)")).map((step) => window.getComputedStyle(step).width);
+    });
+    steps.forEach((step) => {
+      expect(step).toMatch(`${148}px`);
+    });
+  });
+});
+describe("compact variant of ic-stepper", () => {
+  it("only shows the current step", async () => {
+    const page = await newE2EPage({ html: compactStepper });
+    await page.waitForChanges();
+    const currentStep = await page.find("ic-step[current='']");
+    expect(currentStep.isVisible()).toBeTruthy();
+    const notCurrentSteps = await page.findAll("ic-step:not([current=''])");
+    notCurrentSteps.forEach(async (el) => {
+      expect(await el.isVisible()).toBeFalsy();
+    });
+  });
+});
+//# sourceMappingURL=ic-stepper.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/basic/ic-stepper.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, newE2EPage } from \"@stencil/core/testing\";\nimport {\n  defaultStepper,\n  invalidConnectorWidthStepper,\n  compactStepper,\n} from \"./ic-stepper-test-examples\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"default variant of ic-stepper component\", () => {\n  it(\"should render four steps and three step-connects\", async () => {\n    const page = await newE2EPage({ html: defaultStepper });\n    const steps = await page.findAll(\"ic-step\");\n    expect(steps.length).toBe(4);\n    const stepConnects = await page.findAll(\"ic-step >>> div.step-connect\");\n    expect(stepConnects.length).toBe(3);\n  });\n\n  it(\"should render the correct number on each step\", async () => {\n    const page = await newE2EPage({ html: defaultStepper });\n    const stepInners: E2EElement[] = await page.findAll(\n      \"ic-step >>> .step-icon-inner\"\n    );\n    expect(stepInners[0].innerHTML).toEqual(\"1\");\n    expect(stepInners[1].innerHTML).toEqual(\"2\");\n    expect(stepInners[2].innerHTML).toEqual(\"3\");\n    expect(stepInners[3].innerHTML).toContain(\"check-icon\");\n  });\n\n  it(\"should keep the length of the step connect at 100px if a connectorWidth under 100px is given\", async () => {\n    const page = await newE2EPage({ html: invalidConnectorWidthStepper });\n\n    await page.waitForChanges();\n\n    const connectorWidth = await page.$eval(\n      \"ic-stepper\",\n      (el: HTMLIcStepperElement) => {\n        return el.connectorWidth;\n      }\n    );\n\n    expect(connectorWidth).toBe(96);\n\n    const steps = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\"ic-step:not(:last-child)\")\n      ).map((step) => window.getComputedStyle(step).width);\n    });\n\n    steps.forEach((step) => {\n      expect(step).toMatch(`${148}px`);\n    });\n  });\n});\n\ndescribe(\"compact variant of ic-stepper\", () => {\n  it(\"only shows the current step\", async () => {\n    const page = await newE2EPage({ html: compactStepper });\n\n    await page.waitForChanges();\n\n    const currentStep = await page.find(\"ic-step[current='']\");\n\n    expect(currentStep.isVisible()).toBeTruthy();\n\n    const notCurrentSteps = await page.findAll(\"ic-step:not([current=''])\");\n\n    notCurrentSteps.forEach(async (el) => {\n      expect(await el.isVisible()).toBeFalsy();\n    });\n  });\n});\n"]}