@ukic/web-components 2.0.0-alpha.121

package/dist/collection/components/ic-step/ic-step.css

@@ -0,0 +1,146 @@
+:host {
+  display: flex;
+  flex: auto;
+}
+
+:host(.last-step) {
+  flex-grow: initial;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+}
+
+.step-top {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  align-self: flex-start;
+  height: 40px;
+}
+
+.step-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+
+.step-icon-inner {
+  width: var(--ic-space-xl);
+  height: var(--ic-space-xl);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+
+.current {
+  color: var(--ic-theme-primary);
+}
+
+.step-title-area {
+  margin: var(--ic-space-xs) 0;
+  padding-right: var(--ic-space-xs);
+}
+
+.step-title,
+.step-subtitle {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.step-subtitle {
+  color: var(--ic-color-tertiary-text);
+}
+
+.current .step-subtitle {
+  color: var(--ic-color-primary-text);
+}
+
+.completed {
+  color: var(--ic-status-success);
+}
+
+.active .step-icon-inner {
+  box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;
+}
+
+.current .step-icon-inner {
+  background-color: var(--ic-theme-primary);
+  color: white;
+}
+
+.disabled {
+  color: var(--ic-architectural-200);
+}
+
+.disabled .step-icon-inner {
+  border: 1px dashed var(--ic-architectural-200);
+  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+}
+
+.disabled .step-title-area {
+  color: var(--ic-color-tertiary-text);
+}
+
+.completed .step-icon-inner {
+  background: var(--ic-status-success);
+  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);
+  border-radius: 100%;
+}
+
+.current .step-icon {
+  border: var(--ic-space-xxxs) solid var(--ic-theme-primary);
+  padding: var(--ic-space-xxxs);
+  margin: 0 calc(-1 * var(--ic-space-xxxs)); /* compensating for the circle being bigger than other steps */
+}
+
+.step-connect {
+  height: var(--ic-space-xxxs);
+  background-color: var(--ic-architectural-200);
+  margin: 0 var(--ic-space-xs);
+  border-radius: var(--ic-space-xxs);
+  width: 100%;
+}
+
+.aligned-full-width.step-connect {
+  min-width: 100px;
+  width: 100%;
+}
+
+.disabled .step-connect {
+  height: 0;
+  background-color: rgb(0 0 0 / 0%);
+  border-top: 2px dashed var(--ic-architectural-200);
+  border-radius: 0;
+}
+
+.completed .step-connect {
+  background-color: var(--ic-status-success);
+}
+
+.step-connect-inner {
+  width: 70%;
+  display: flex;
+  flex: auto;
+  height: var(--ic-space-xxxs);
+  border-radius: var(--ic-space-xxs);
+  background-color: var(--ic-theme-primary);
+}
+
+.check-icon {
+  padding-top: var(--ic-space-xxs);
+}
+
+.check-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.check-icon > svg > path {
+  fill: white;
+}

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

@@ -0,0 +1,160 @@
+import { Host, h } from "@stencil/core";
+import checkIcon from "../../assets/check-icon.svg";
+import { onComponentRequiredPropUndefined } from "../../utils/helpers";
+export class Step {
+  constructor() {
+    this.stepType = "active";
+    this.stepTitle = undefined;
+    this.stepSubtitle = undefined;
+    this.stepNum = undefined;
+    this.lastStep = undefined;
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([
+      { prop: this.stepNum, propName: "step-num" },
+      { prop: this.lastStep, propName: "last-step" },
+    ], "Step");
+  }
+  render() {
+    let icon;
+    if (this.stepType !== "completed") {
+      icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+    }
+    else {
+      icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
+    }
+    let ariaLabel = "";
+    if (this.stepType === "completed") {
+      ariaLabel = ". Completed step";
+    }
+    else if (this.stepType === "disabled") {
+      ariaLabel = ". Disabled step";
+    }
+    const partialBar = this.stepType === "current" && (h("div", { class: "step-connect-inner" }));
+    const finalStep = !this.lastStep && (h("div", { class: {
+        ["step-connect"]: true,
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("aligned-full-width"),
+      } }, partialBar));
+    return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": this.stepType == "current" ? "step" : null, class: {
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("aligned-full-width"),
+      } }, h("div", { class: {
+        ["step"]: true,
+        [`${this.stepType}`]: true,
+      } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle) && (h("div", { class: "step-title-area" }, this.stepTitle && (h("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepSubtitle && (h("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle)))))));
+  }
+  static get is() { return "ic-step"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-step.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-step.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "stepType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStepTypes",
+          "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+          "references": {
+            "IcStepTypes": {
+              "location": "import",
+              "path": "./ic-step.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "State of step"
+        },
+        "attribute": "step-type",
+        "reflect": false,
+        "defaultValue": "\"active\""
+      },
+      "stepTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Name of step"
+        },
+        "attribute": "step-title",
+        "reflect": false
+      },
+      "stepSubtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Additional information about step"
+        },
+        "attribute": "step-subtitle",
+        "reflect": false
+      },
+      "stepNum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The step number, managed by ic-stepper"
+            }],
+          "text": ""
+        },
+        "attribute": "step-num",
+        "reflect": false
+      },
+      "lastStep": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Final step in series flag, managed by ic-stepper"
+            }],
+          "text": ""
+        },
+        "attribute": "last-step",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ic-step.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n  tag: \"ic-step\",\n  styleUrl: \"ic-step.css\",\n  shadow: true,\n})\nexport class Step {\n  @Element() el: HTMLIcStepElement;\n  /**\n   * State of step\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\n\n  /**\n   * Name of step\n   */\n  @Prop() stepTitle?: string;\n\n  /**\n   * Additional information about step\n   */\n  @Prop() stepSubtitle?: string;\n\n  /**\n   * @internal The step number, managed by ic-stepper\n   */\n  @Prop() stepNum!: number;\n\n  /**\n   * @internal Final step in series flag, managed by ic-stepper\n   */\n  @Prop() lastStep!: boolean;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.stepNum, propName: \"step-num\" },\n        { prop: this.lastStep, propName: \"last-step\" },\n      ],\n      \"Step\"\n    );\n  }\n\n  render() {\n    let icon;\n    if (this.stepType !== \"completed\") {\n      icon = (\n        <ic-typography variant=\"subtitle-small\">\n          <span class=\"step-icon-inner\" aria-hidden=\"true\">\n            {this.stepNum}\n          </span>\n        </ic-typography>\n      );\n    } else {\n      icon = (\n        <div class=\"step-icon-inner\" aria-hidden=\"true\">\n          <span class=\"check-icon\" innerHTML={checkIcon}></span>\n        </div>\n      );\n    }\n\n    let ariaLabel = \"\";\n\n    if (this.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Disabled step\";\n    }\n\n    const partialBar = this.stepType === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n    const finalStep = !this.lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={this.stepType == \"current\" ? \"step\" : null}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        <div\n          class={{\n            [\"step\"]: true,\n            [`${this.stepType}`]: true,\n          }}\n        >\n          <div class=\"step-top\">\n            <div class=\"step-icon\">{icon}</div>\n            {finalStep}\n          </div>\n          {(this.stepTitle || this.stepSubtitle) && (\n            <div class=\"step-title-area\">\n              {this.stepTitle && (\n                <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n                  {this.stepTitle}\n                </ic-typography>\n              )}\n              {this.stepSubtitle && (\n                <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                  {this.stepSubtitle}\n                </ic-typography>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-step.types.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStepTypes = \"active\" | \"current\" | \"completed\" | \"disabled\";\n"]}

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

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+.step-item-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+:host(.aligned-full-width) .step-item-list {
+  flex: auto;
+}

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

@@ -0,0 +1,147 @@
+import { Host, h } from "@stencil/core";
+import { checkResizeObserver } from "../../utils/helpers";
+export class IcStepper {
+  constructor() {
+    this.resizeObserver = null;
+    /**
+     * Get all steps currently within this stepper
+     */
+    this.getChildren = () => {
+      this.steps = Array.from(this.el.querySelectorAll("ic-step"));
+    };
+    this.initialiseStepStates = () => {
+      this.steps.forEach((step, index) => {
+        // Assign stepNum to each step
+        step.stepNum = index + 1;
+        //Assign lastStep to final step
+        step.lastStep = index === this.steps.length - 1;
+        if (step.lastStep) {
+          step.classList.add("last-step");
+          if (this.el.classList.contains("aligned-full-width")) {
+            step.style.maxWidth = `${this.lastStepWidth}px`;
+          }
+          if (this.el.classList.contains("aligned-left")) {
+            step.style.maxWidth = `${this.connectorWidth + 48}px`;
+          }
+        }
+      });
+      for (let i = 0; i < this.steps.length - 1; i++) {
+        if (this.el.classList.contains("aligned-full-width")) {
+          this.steps[i].style.width = `${(this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)}px`;
+          this.steps[i].style.minWidth = "148px";
+        }
+        if (this.el.classList.contains("aligned-left")) {
+          this.steps[i].style.width = `${this.connectorWidth + 48}px`;
+          const stepConnect = this.steps[i].shadowRoot.querySelector("div > .step-top > .step-connect");
+          stepConnect.style.width =
+            this.connectorWidth > 100 ? `${this.connectorWidth}px` : "100px";
+        }
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.setStepperWidth();
+        this.getChildren();
+        this.initialiseStepStates();
+      });
+      this.resizeObserver.observe(this.el);
+    };
+    this.setStepperWidth = () => {
+      this.stepperWidth = this.el.offsetWidth;
+      const allSteps = document.querySelectorAll("ic-step");
+      const lastStep = allSteps[allSteps.length - 1];
+      lastStep.style.maxWidth = "none";
+      if (lastStep.classList.contains("aligned-full-width")) {
+        lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;
+      }
+      this.lastStepWidth = lastStep.offsetWidth;
+      this.getChildren();
+      this.initialiseStepStates();
+    };
+    this.aligned = "full-width";
+    this.connectorWidth = 100;
+    this.stepperWidth = document
+      .querySelector("ic-stepper")
+      .getBoundingClientRect().width;
+    this.lastStepWidth = 0;
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        ["aligned-left"]: this.aligned === "left",
+        ["aligned-full-width"]: this.aligned === "full-width",
+      } }, 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": "How the stepper should be aligned in 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"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "stepperWidth": {},
+      "lastStepWidth": {}
+    };
+  }
+  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 } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class IcStepper {\n  @Element() el: HTMLIcStepperElement;\n\n  /**\n   * How the stepper should be aligned in 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  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n\n  @State() lastStepWidth: number = 0;\n\n  private steps: HTMLIcStepElement[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  /**\n   * Get all steps currently within this stepper\n   */\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\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\n      if (step.lastStep) {\n        step.classList.add(\"last-step\");\n        if (this.el.classList.contains(\"aligned-full-width\")) {\n          step.style.maxWidth = `${this.lastStepWidth}px`;\n        }\n        if (this.el.classList.contains(\"aligned-left\")) {\n          step.style.maxWidth = `${this.connectorWidth + 48}px`;\n        }\n      }\n    });\n\n    for (let i = 0; i < this.steps.length - 1; i++) {\n      if (this.el.classList.contains(\"aligned-full-width\")) {\n        this.steps[i].style.width = `${\n          (this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)\n        }px`;\n        this.steps[i].style.minWidth = \"148px\";\n      }\n\n      if (this.el.classList.contains(\"aligned-left\")) {\n        this.steps[i].style.width = `${this.connectorWidth + 48}px`;\n        const stepConnect = this.steps[i].shadowRoot.querySelector(\n          \"div > .step-top > .step-connect\"\n        ) as HTMLElement;\n        stepConnect.style.width =\n          this.connectorWidth > 100 ? `${this.connectorWidth}px` : \"100px\";\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.setStepperWidth();\n      this.getChildren();\n      this.initialiseStepStates();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private setStepperWidth = (): void => {\n    this.stepperWidth = this.el.offsetWidth;\n    const allSteps = document.querySelectorAll(\"ic-step\");\n    const lastStep = allSteps[allSteps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n    if (lastStep.classList.contains(\"aligned-full-width\")) {\n      lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;\n    }\n    this.lastStepWidth = lastStep.offsetWidth;\n    this.getChildren();\n    this.initialiseStepStates();\n  };\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"aligned-left\"]: this.aligned === \"left\",\n          [\"aligned-full-width\"]: this.aligned === \"full-width\",\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.test.a11y.js

@@ -0,0 +1,24 @@
+import { fixture } from "@open-wc/testing-helpers";
+import { axe } from "jest-axe";
+import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+describe("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();
+  });
+});
+//# sourceMappingURL=ic-stepper.test.a11y.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/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,8BAA8B,CAAC;AAElF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,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","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\ndescribe(\"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"]}

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"]}