@ukic/web-components 2.1.0-beta.8 → 2.2.0

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

@@ -3,18 +3,18 @@ import checkIcon from "../../assets/check-icon.svg";
 import warningIcon from "../../assets/warning-icon-outline.svg";
 export class Step {
   constructor() {
-    this.variant = undefined;
-    this.stepTitle = undefined;
-    this.stepSubtitle = undefined;
-    this.stepStatus = undefined;
-    this.stepType = "active";
-    this.current = false;
     this.compactStepStyling = undefined;
-    this.stepNum = 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") {
@@ -78,7 +78,7 @@ export class Step {
       (this.variant === "compact" &&
         !!this.compactStepStyling &&
         this.compactStepStyling !== "active") ||
-      !!this.stepStatus) && (h("div", { class: "step-status" }, statusIcon && statusIcon, (this.stepSubtitle || stepType) && (h("ic-typography", { variant: "caption" }, this.stepSubtitle !== null &&
+      !!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" ||
@@ -131,116 +131,98 @@ export class Step {
   }
   static get properties() {
     return {
-      "variant": {
+      "compactStepStyling": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcStepVariants",
-          "resolved": "\"compact\" | \"default\"",
+          "original": "IcStepTypes",
+          "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
           "references": {
-            "IcStepVariants": {
+            "IcStepTypes": {
               "location": "import",
               "path": "./ic-step.types"
             }
           }
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "The variant of the step. This is managed by ic-stepper."
+              "text": "If a compact stepper is being used, this sets the styling of the step."
             }],
           "text": ""
         },
-        "attribute": "variant",
+        "attribute": "compact-step-styling",
         "reflect": false
       },
-      "stepTitle": {
-        "type": "string",
-        "mutable": false,
+      "current": {
+        "type": "boolean",
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The title of the step within the stepper."
+          "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": "step-title",
-        "reflect": false
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "stepSubtitle": {
-        "type": "string",
+      "lastStep": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "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."
+          "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": "step-subtitle",
+        "attribute": "last-step",
         "reflect": false
       },
-      "stepStatus": {
-        "type": "string",
+      "lastStepNum": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "IcStepStatuses",
-          "resolved": "\"optional\" | \"required\"",
-          "references": {
-            "IcStepStatuses": {
-              "location": "import",
-              "path": "./ic-step.types"
-            }
-          }
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
         "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."
+          "tags": [{
+              "name": "internal",
+              "text": "The step number of the final step. This is managed by ic-stepper."
+            }],
+          "text": ""
         },
-        "attribute": "step-status",
+        "attribute": "last-step-num",
         "reflect": false
       },
-      "stepType": {
+      "nextStepTitle": {
         "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\""
-      },
-      "current": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -248,37 +230,31 @@ export class Step {
         "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": "The name of the next step. This is managed by ic-stepper."
             }],
           "text": ""
         },
-        "attribute": "current",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "next-step-title",
+        "reflect": false
       },
-      "compactStepStyling": {
-        "type": "string",
+      "progress": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "IcStepTypes",
-          "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
-          "references": {
-            "IcStepTypes": {
-              "location": "import",
-              "path": "./ic-step.types"
-            }
-          }
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "If a compact stepper is being used, this sets the styling of the step."
+              "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": "compact-step-styling",
+        "attribute": "progress",
         "reflect": false
       },
       "stepNum": {
@@ -301,47 +277,46 @@ export class Step {
         "attribute": "step-num",
         "reflect": false
       },
-      "lastStep": {
-        "type": "boolean",
+      "stepStatus": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcStepStatuses",
+          "resolved": "\"optional\" | \"required\"",
+          "references": {
+            "IcStepStatuses": {
+              "location": "import",
+              "path": "./ic-step.types"
+            }
+          }
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "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": ""
+          "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": "last-step",
+        "attribute": "step-status",
         "reflect": false
       },
-      "lastStepNum": {
-        "type": "number",
+      "stepSubtitle": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "The step number of the final step. This is managed by ic-stepper."
-            }],
-          "text": ""
+          "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": "last-step-num",
+        "attribute": "step-subtitle",
         "reflect": false
       },
-      "nextStepTitle": {
+      "stepTitle": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -351,35 +326,60 @@ export class Step {
         },
         "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 name of the next step. This is managed by ic-stepper."
+              "text": "The variant of the step. This is managed by ic-stepper."
             }],
           "text": ""
         },
-        "attribute": "next-step-title",
+        "attribute": "variant",
         "reflect": false
       },
-      "progress": {
-        "type": "number",
+      "stepType": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
+          "original": "IcStepTypes",
+          "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+          "references": {
+            "IcStepTypes": {
+              "location": "import",
+              "path": "./ic-step.types"
+            }
+          }
         },
         "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": ""
+          "tags": [],
+          "text": "The state of the step within the stepper."
         },
-        "attribute": "progress",
-        "reflect": false
+        "attribute": "step-type",
+        "reflect": false,
+        "defaultValue": "\"active\""
       }
     };
   }

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

@@ -1 +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   * @internal The variant of the step. This is managed by ic-stepper.\n   */\n  @Prop() variant!: IcStepVariants;\n\n  /**\n   * The title of the step within the stepper.\n   */\n  @Prop() stepTitle?: string;\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 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   * The state of the step within the stepper.\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\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 a compact stepper is being used, this sets the styling of the step.\n   */\n  @Prop() compactStepStyling?: IcStepTypes;\n\n  /**\n   * @internal The step number, managed by ic-stepper.\n   */\n  @Prop() stepNum?: number;\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  @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 && 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"]}
+{"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/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