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

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

@@ -0,0 +1,394 @@
+import { Host, h } from "@stencil/core";
+import checkIcon from "../../assets/check-icon.svg";
+import warningIcon from "../../assets/warning-icon-outline.svg";
+export class Step {
+  constructor() {
+    this.compactStepStyling = undefined;
+    this.current = false;
+    this.lastStep = undefined;
+    this.lastStepNum = undefined;
+    this.nextStepTitle = undefined;
+    this.progress = undefined;
+    this.stepNum = undefined;
+    this.stepStatus = undefined;
+    this.stepSubtitle = undefined;
+    this.stepTitle = undefined;
+    this.variant = undefined;
+    this.stepType = "active";
+  }
+  stepTypeChangeHandler() {
+    if (this.variant === "compact" && this.stepType === "current") {
+      this.current = true;
+    }
+    else {
+      this.current = false;
+    }
+  }
+  render() {
+    // ARIA LABEL
+    let ariaLabel = "";
+    if (this.stepType === "completed") {
+      ariaLabel = ". Completed step";
+    }
+    else if (this.stepType === "disabled") {
+      ariaLabel = ". Non-required step";
+    }
+    else if (this.stepStatus === "required") {
+      ariaLabel = ". Required step";
+    }
+    else if (this.stepStatus === "optional") {
+      ariaLabel = ". Optional step";
+    }
+    // STEP STATUS
+    let stepStatus;
+    if (this.stepStatus) {
+      stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);
+    }
+    // STEP TYPE
+    let stepType;
+    if (this.stepType === "disabled" ||
+      this.compactStepStyling === "disabled") {
+      stepType = "Not required";
+    }
+    else if (this.compactStepStyling === "completed") {
+      stepType = "Completed";
+    }
+    // STATUS ICON FOR COMPACT STEP
+    let statusIcon;
+    if (this.stepType === "completed" ||
+      this.compactStepStyling === "completed") {
+      statusIcon = (h("span", { class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+    }
+    else if (this.stepType === "disabled" ||
+      this.compactStepStyling === "disabled") {
+      statusIcon = (h("span", { class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+    }
+    // COMPACT STEP COMPONENT
+    const compactStep = (h("div", { class: {
+        ["step"]: true,
+        ["current"]: this.current,
+        [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
+      } }, h("ic-loading-indicator", { class: {
+        "compact-step-progress-indicator": true,
+        "not-required": this.stepType === "disabled" ||
+          this.compactStepStyling === "disabled",
+      }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { class: "step-title-area" }, h("ic-typography", { variant: "h4", class: "step-title" }, this.stepTitle), h("div", { class: "info-line" }, h("ic-typography", { variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { class: "visually-hidden" }, " steps")), (this.stepSubtitle ||
+      this.stepType === "completed" ||
+      this.stepType === "disabled" ||
+      (this.variant === "compact" &&
+        !!this.compactStepStyling &&
+        this.compactStepStyling !== "active") ||
+      !!this.stepStatus) && (h("div", { class: "step-status" }, statusIcon !== undefined && statusIcon, (this.stepSubtitle || stepType) && (h("ic-typography", { variant: "caption" }, this.stepSubtitle !== null &&
+      this.stepSubtitle !== undefined
+      ? this.stepSubtitle
+      : this.stepType === "disabled" ||
+        (this.variant === "compact" &&
+          this.compactStepStyling === "disabled") ||
+        this.stepType === "completed" ||
+        (this.variant === "compact" &&
+          this.compactStepStyling === "completed")
+        ? stepType
+        : this.stepStatus && stepStatus))))), this.lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (this.nextStepTitle !== undefined && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepTitle))))));
+    // ICON FOR DEFAULT STEP
+    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 })));
+    }
+    // STEP CONNECT FOR DEFAULT 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("default") &&
+          !this.el.parentElement.classList.contains("aligned-left"),
+      } }, partialBar));
+    // DEFAULT STEP COMPONENT
+    const defaultStep = (h("div", { class: {
+        ["step"]: true,
+        [`${this.stepType}`]: true,
+      } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.stepTitle || this.stepSubtitle || this.stepStatus) && (h("div", { class: "step-title-area" }, this.stepTitle && (h("ic-typography", { variant: "subtitle-large", class: "step-title" }, this.stepTitle)), this.stepTitle && (this.stepSubtitle || this.stepStatus) && (h("ic-typography", { variant: "caption", class: "step-subtitle" }, this.stepSubtitle !== null && this.stepSubtitle !== undefined
+      ? this.stepSubtitle
+      : stepStatus))))));
+    return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.stepType === "current") && "step", class: {
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
+          !this.el.parentElement.classList.contains("aligned-left"),
+        [`${this.variant}`]: true,
+      } }, this.variant === "compact" ? compactStep : defaultStep));
+  }
+  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 {
+      "compactStepStyling": {
+        "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": [{
+              "name": "internal",
+              "text": "If a compact stepper is being used, this sets the styling of the step."
+            }],
+          "text": ""
+        },
+        "attribute": "compact-step-styling",
+        "reflect": false
+      },
+      "current": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "If `true`, and a compact stepper  is being used, the current step will be the only step in view."
+            }],
+          "text": ""
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "lastStep": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper."
+            }],
+          "text": ""
+        },
+        "attribute": "last-step",
+        "reflect": false
+      },
+      "lastStepNum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The step number of the final step. This is managed by ic-stepper."
+            }],
+          "text": ""
+        },
+        "attribute": "last-step-num",
+        "reflect": false
+      },
+      "nextStepTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The name of the next step. This is managed by ic-stepper."
+            }],
+          "text": ""
+        },
+        "attribute": "next-step-title",
+        "reflect": false
+      },
+      "progress": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper."
+            }],
+          "text": ""
+        },
+        "attribute": "progress",
+        "reflect": false
+      },
+      "stepNum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The step number, managed by ic-stepper."
+            }],
+          "text": ""
+        },
+        "attribute": "step-num",
+        "reflect": false
+      },
+      "stepStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStepStatuses",
+          "resolved": "\"optional\" | \"required\"",
+          "references": {
+            "IcStepStatuses": {
+              "location": "import",
+              "path": "./ic-step.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The status of the step. Use this prop to display a status message on the step if it is required or optional."
+        },
+        "attribute": "step-status",
+        "reflect": false
+      },
+      "stepSubtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status."
+        },
+        "attribute": "step-subtitle",
+        "reflect": false
+      },
+      "stepTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The title of the step within the stepper."
+        },
+        "attribute": "step-title",
+        "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcStepVariants",
+          "resolved": "\"compact\" | \"default\"",
+          "references": {
+            "IcStepVariants": {
+              "location": "import",
+              "path": "./ic-step.types"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "The variant of the step. This is managed by ic-stepper."
+            }],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false
+      },
+      "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": "The state of the step within the stepper."
+        },
+        "attribute": "step-type",
+        "reflect": false,
+        "defaultValue": "\"active\""
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "stepType",
+        "methodName": "stepTypeChangeHandler"
+      }];
+  }
+}
+//# 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, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport { IcStepVariants, IcStepStatuses, 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  /**\n   * @internal If a compact stepper is being used, this sets the styling of the step.\n   */\n  @Prop() compactStepStyling?: IcStepTypes;\n\n  /**\n   * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.\n   */\n  @Prop({ mutable: true }) current?: boolean = false;\n\n  /**\n   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n   */\n  @Prop() lastStep!: boolean;\n\n  /**\n   * @internal The step number of the final step. This is managed by ic-stepper.\n   */\n  @Prop() lastStepNum?: number;\n\n  /**\n   * @internal The name of the next step. This is managed by ic-stepper.\n   */\n  @Prop() nextStepTitle?: string;\n\n  /**\n   * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n   */\n  @Prop() progress?: number;\n\n  /**\n   * @internal The step number, managed by ic-stepper.\n   */\n  @Prop() stepNum?: number;\n\n  /**\n   * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n   */\n  @Prop() stepStatus?: IcStepStatuses;\n\n  /**\n   * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n   */\n  @Prop() stepSubtitle?: string;\n\n  /**\n   * The title of the step within the stepper.\n   */\n  @Prop() stepTitle?: string;\n\n  /**\n   * @internal The variant of the step. This is managed by ic-stepper.\n   */\n  @Prop() variant!: IcStepVariants;\n\n  /**\n   * The state of the step within the stepper.\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\n\n  @Watch(\"stepType\")\n  stepTypeChangeHandler(): void {\n    if (this.variant === \"compact\" && this.stepType === \"current\") {\n      this.current = true;\n    } else {\n      this.current = false;\n    }\n  }\n\n  render() {\n    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (this.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.stepStatus === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.stepStatus === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (this.stepStatus) {\n      stepStatus = this.stepStatus[0].toUpperCase() + this.stepStatus.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (\n      this.stepType === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\n      stepType = \"Not required\";\n    } else if (this.compactStepStyling === \"completed\") {\n      stepType = \"Completed\";\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (\n      this.stepType === \"completed\" ||\n      this.compactStepStyling === \"completed\"\n    ) {\n      statusIcon = (\n        <span\n          class=\"check-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={checkIcon}\n        ></span>\n      );\n    } else if (\n      this.stepType === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\n      statusIcon = (\n        <span\n          class=\"warning-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={warningIcon}\n        ></span>\n      );\n    }\n\n    // COMPACT STEP COMPONENT\n    const compactStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [\"current\"]: this.current,\n          [`compact-step-${this.compactStepStyling}`]:\n            !!this.compactStepStyling,\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              this.stepType === \"disabled\" ||\n              this.compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={this.stepNum}\n          progress={this.progress}\n        ></ic-loading-indicator>\n        <div class=\"step-title-area\">\n          <ic-typography variant=\"h4\" class=\"step-title\">\n            {this.stepTitle}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${this.stepNum} of ${this.lastStepNum}`}\n              <span class=\"visually-hidden\"> steps</span>\n            </ic-typography>\n            {(this.stepSubtitle ||\n              this.stepType === \"completed\" ||\n              this.stepType === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.stepStatus) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(this.stepSubtitle || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.stepSubtitle !== null &&\n                    this.stepSubtitle !== undefined\n                      ? this.stepSubtitle\n                      : this.stepType === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.stepType === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.stepStatus && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {this.lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              Last step\n            </ic-typography>\n          ) : (\n            this.nextStepTitle !== undefined && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</span>:{\" \"}\n                {this.nextStepTitle}\n              </ic-typography>\n            )\n          )}\n        </div>\n      </div>\n    );\n\n    // ICON FOR DEFAULT STEP\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    // STEP CONNECT FOR DEFAULT STEP\n    const partialBar = this.stepType === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !this.lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"default\") &&\n            !this.el.parentElement.classList.contains(\"aligned-left\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    // DEFAULT STEP COMPONENT\n    const defaultStep = (\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 || this.stepStatus) && (\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.stepTitle && (this.stepSubtitle || this.stepStatus) && (\n              <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                {this.stepSubtitle !== null && this.stepSubtitle !== undefined\n                  ? this.stepSubtitle\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={(this.current || this.stepType === \"current\") && \"step\"}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"default\") &&\n            !this.el.parentElement.classList.contains(\"aligned-left\"),\n          [`${this.variant}`]: true,\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\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 IcStepVariants = \"default\" | \"compact\";\n\nexport type IcStepStatuses = \"optional\" | \"required\";\n\nexport type IcStepTypes = \"active\" | \"current\" | \"completed\" | \"disabled\";\n"]}

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

@@ -0,0 +1,176 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Step } from "../../ic-step";
+import { Typography } from "../../../ic-typography/ic-typography";
+import { LoadingIndicator } from "../../../ic-loading-indicator/ic-loading-indicator";
+describe("default variant of ic-step component", () => {
+  it("should render default step with no title", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default"></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render default step with correct title", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default" step-title="First"></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render default step with correct title, subtitle and current state", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default" 
+      step-title="Second With a Very Long Title"
+      step-subtitle="Optional Subtitle"
+      step-type="current"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render disabled stepType", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default" 
+      step-type="disabled"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render completed stepType", async () => {
+    const page = await newSpecPage({
+      components: [Step, Typography],
+      html: `<ic-step variant="default" 
+      step-type="completed"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+});
+describe("compact variant of ic-step component", () => {
+  it("should render a compact step with no step status", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact" 
+      step-type="current"
+      last-step="false"
+      step-num="3"
+      last-step-num="4"
+      progress="75"
+      step-title="Third step"
+      next-step-title="Fourth step"></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render an step status icon for a step with a disabled stepType", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact"
+      step-type="disabled"
+      compact-step-styling = "disabled"
+      last-step="false"
+      step-num="3"
+      last-step-num="4"
+      progress="75"
+      step-title="Third step"
+      next-step-title="next step"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    const stepStatus = page.root.shadowRoot.querySelector(".step-status > ic-typography").textContent;
+    expect(stepStatus).toBe("Not required");
+    const statusIcon = page.root.shadowRoot.querySelector("span.step-icon");
+    expect(statusIcon).toEqualHtml(`<span class="warning-icon step-icon" aria-hidden="true">svg</span>`);
+  });
+  it("should render a step status icon for a step with a completed stepType", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact"
+      last-step="false"
+      step-num="3"
+      last-step-num="4"
+      progress="75"
+      step-title="Third step"
+      next-step-title="next step"
+      step-type="completed"
+      compact-step-styling = "completed"
+    ></ic-step>`,
+    });
+    expect(page.root).toMatchSnapshot();
+    const stepStatus = page.root.shadowRoot.querySelector(".step-status > ic-typography").textContent;
+    expect(stepStatus).toBe("Completed");
+    const statusIcon = page.root.shadowRoot.querySelector("span.step-icon");
+    expect(statusIcon).toEqualHtml(`<span class="check-icon step-icon" aria-hidden="true">svg</span>`);
+  });
+  it("should set next step text as last step if last step is true", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact" 
+      step-type="current"
+      last-step="true"
+      step-num=4"
+      last-step-num="4"
+      progress="100"
+      step-title="Final step"
+    ></ic-step>`,
+    });
+    const lastStep = page.root.shadowRoot.querySelector(".next-step").textContent;
+    expect(lastStep).toBe("Last step");
+  });
+  it("should set the circular line width of the loading indicator as 40 for all steps", async () => {
+    jest.spyOn(console, "warn").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [Step, LoadingIndicator],
+      html: `<ic-step
+      variant="compact" 
+      last-step="true"
+      step-num=4"
+      last-step-num="4"
+      progress="100"
+      step-title="Final step"
+    ></ic-step>`,
+    });
+    const loadingIndicator = page.root.shadowRoot.querySelector(".step > ic-loading-indicator");
+    expect(loadingIndicator.classList.contains("compact-step-progress-indicator")).toBeTruthy();
+  });
+  it("should watch the stepType & change the value of the current prop if stepType = 'current'", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact" 
+      last-step="true"
+      step-num=4"
+      last-step-num="4"
+      progress="100"
+      step-title="Final step"
+      step-type = "current"
+    ></ic-step>`,
+    });
+    await page.rootInstance.stepTypeChangeHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.current).toBeTruthy();
+  });
+  it("should watch the stepType & shouldn't change the value of the current prop if stepType is not 'current'", async () => {
+    const page = await newSpecPage({
+      components: [Step],
+      html: `<ic-step
+      variant="compact" 
+      last-step="true"
+      step-num=4"
+      last-step-num="4"
+      progress="100"
+      step-title="Final step"
+      step-type = "completed"
+      compact-step-styling = "completed"
+    ></ic-step>`,
+    });
+    await page.rootInstance.stepTypeChangeHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.current).toBeFalsy();
+  });
+});
+//# sourceMappingURL=ic-step.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-step.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-step/test/basic/ic-step.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Step } from \"../../ic-step\";\nimport { Typography } from \"../../../ic-typography/ic-typography\";\nimport { LoadingIndicator } from \"../../../ic-loading-indicator/ic-loading-indicator\";\n\ndescribe(\"default variant of ic-step component\", () => {\n  it(\"should render default step with no title\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n  it(\"should render default step with correct title\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" step-title=\"First\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render default step with correct title, subtitle and current state\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-title=\"Second With a Very Long Title\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"current\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-type=\"disabled\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render completed stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step, Typography],\n      html: `<ic-step variant=\"default\" \n      step-type=\"completed\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n\ndescribe(\"compact variant of ic-step component\", () => {\n  it(\"should render a compact step with no step status\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      step-type=\"current\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"Fourth step\"></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render an step status icon for a step with a disabled stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\"\n      step-type=\"disabled\"\n      compact-step-styling = \"disabled\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"next step\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const stepStatus = page.root.shadowRoot.querySelector(\n      \".step-status > ic-typography\"\n    ).textContent;\n\n    expect(stepStatus).toBe(\"Not required\");\n\n    const statusIcon = page.root.shadowRoot.querySelector(\"span.step-icon\");\n\n    expect(statusIcon).toEqualHtml(\n      `<span class=\"warning-icon step-icon\" aria-hidden=\"true\">svg</span>`\n    );\n  });\n\n  it(\"should render a step status icon for a step with a completed stepType\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\"\n      last-step=\"false\"\n      step-num=\"3\"\n      last-step-num=\"4\"\n      progress=\"75\"\n      step-title=\"Third step\"\n      next-step-title=\"next step\"\n      step-type=\"completed\"\n      compact-step-styling = \"completed\"\n    ></ic-step>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const stepStatus = page.root.shadowRoot.querySelector(\n      \".step-status > ic-typography\"\n    ).textContent;\n\n    expect(stepStatus).toBe(\"Completed\");\n\n    const statusIcon = page.root.shadowRoot.querySelector(\"span.step-icon\");\n\n    expect(statusIcon).toEqualHtml(\n      `<span class=\"check-icon step-icon\" aria-hidden=\"true\">svg</span>`\n    );\n  });\n\n  it(\"should set next step text as last step if last step is true\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      step-type=\"current\"\n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n    ></ic-step>`,\n    });\n\n    const lastStep =\n      page.root.shadowRoot.querySelector(\".next-step\").textContent;\n\n    expect(lastStep).toBe(\"Last step\");\n  });\n\n  it(\"should set the circular line width of the loading indicator as 40 for all steps\", async () => {\n    jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [Step, LoadingIndicator],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n    ></ic-step>`,\n    });\n\n    const loadingIndicator = page.root.shadowRoot.querySelector(\n      \".step > ic-loading-indicator\"\n    );\n\n    expect(\n      loadingIndicator.classList.contains(\"compact-step-progress-indicator\")\n    ).toBeTruthy();\n  });\n\n  it(\"should watch the stepType & change the value of the current prop if stepType = 'current'\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n      step-type = \"current\"\n    ></ic-step>`,\n    });\n\n    await page.rootInstance.stepTypeChangeHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.current).toBeTruthy();\n  });\n\n  it(\"should watch the stepType & shouldn't change the value of the current prop if stepType is not 'current'\", async () => {\n    const page = await newSpecPage({\n      components: [Step],\n      html: `<ic-step\n      variant=\"compact\" \n      last-step=\"true\"\n      step-num=4\"\n      last-step-num=\"4\"\n      progress=\"100\"\n      step-title=\"Final step\"\n      step-type = \"completed\"\n      compact-step-styling = \"completed\"\n    ></ic-step>`,\n    });\n\n    await page.rootInstance.stepTypeChangeHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.current).toBeFalsy();\n  });\n});\n"]}

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

@@ -0,0 +1,28 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+.step-item-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+:host(.default:not(.aligned-left)) .step-item-list {
+  flex: auto;
+}
+
+:host(.compact) ul ::slotted(ic-step) {
+  display: none;
+}
+
+:host(.compact) ul ::slotted(ic-step.show) {
+  display: flex;
+}
+
+:host(.compact) ul ::slotted(ic-step.hide) {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+}