@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.10

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

@@ -1,16 +1,107 @@
+/* SHARED STYLING */
 :host {
   display: flex;
   flex: auto;
 }
 
-:host(.last-step) {
-  flex-grow: initial;
+.step {
+  display: flex;
+  flex: 1 1 0;
 }
 
-.step {
+.step-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.step-title,
+.step-subtitle,
+.step-status,
+.next-step {
+  white-space: pre-line;
+}
+
+.visually-hidden {
+  position: absolute;
+  left: -625rem;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* COMPACT STEP STYLING */
+:host(.compact) {
+  -moz-column-gap: var(--ic-space-sm);
+       column-gap: var(--ic-space-sm);
+
+  --compact-step-inner-color: var(--ic-theme-primary);
+  --compact-step-circular-line-width: var(--ic-space-xxs);
+}
+
+:host(.compact) .step {
+  -moz-column-gap: var(--ic-space-sm);
+       column-gap: var(--ic-space-sm);
+}
+
+:host(.compact) .step:not(.current) {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.compact-step-progress-indicator {
+  margin: var(--ic-space-xs) 0 0;
+}
+
+:host(.compact) .step-title-area {
   display: flex;
   flex-direction: column;
-  flex: 1 1 0;
+  width: 14.25rem;
+}
+
+.info-line {
+  display: flex;
+  -moz-column-gap: var(--ic-space-xs);
+       column-gap: var(--ic-space-xs);
+}
+
+.step-status {
+  display: flex;
+  color: var(--ic-color-secondary-text);
+  -moz-column-gap: var(--ic-space-xxxs);
+       column-gap: var(--ic-space-xxxs);
+}
+
+.compact-step-completed .step-status {
+  color: var(--ic-status-success);
+}
+
+.compact-step-disabled :is(.step-title, .step-status) {
+  color: var(--ic-color-tertiary-text);
+}
+
+.step-num {
+  color: var(--ic-color-secondary-text);
+  white-space: nowrap;
+}
+
+:host(.compact) .step-icon {
+  margin: var(--ic-space-xxxs);
+}
+
+:host(.compact) .step-icon svg {
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
+}
+
+/* DEFAULT STEP STYLING */
+:host(.default) .step {
+  flex-direction: column;
+}
+
+:host(.default.last-step) {
+  flex-grow: initial;
 }
 
 .step-top {
@@ -18,13 +109,10 @@
   width: 100%;
   align-items: center;
   align-self: flex-start;
-  height: 40px;
+  height: 2.5rem;
 }
 
-.step-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+:host(.default) .step-icon {
   border-radius: 50%;
 }
 
@@ -37,16 +125,17 @@
   border-radius: 50%;
 }
 
-.current {
+:host(.default) .current {
   color: var(--ic-theme-primary);
 }
 
-.step-title-area {
+:host(.default) .step-title-area {
   margin: var(--ic-space-xs) 0;
   padding-right: var(--ic-space-xs);
+  width: 100%;
 }
 
-.step-title,
+:host(.default) .step-title,
 .step-subtitle {
   width: -moz-fit-content;
   width: fit-content;
@@ -60,12 +149,12 @@
   color: var(--ic-color-primary-text);
 }
 
-.completed {
+:host(.default) .completed {
   color: var(--ic-status-success);
 }
 
 .active .step-icon-inner {
-  box-shadow: inset var(--ic-architectural-200) 0 0 0 2px;
+  box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;
 }
 
 .current .step-icon-inner {
@@ -77,8 +166,8 @@
   color: var(--ic-architectural-200);
 }
 
-.disabled .step-icon {
-  border: 1px dashed var(--ic-architectural-200);
+.disabled .step-icon-inner {
+  border: 0.063rem 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));
 }
@@ -93,10 +182,12 @@
   border-radius: 100%;
 }
 
-.current .step-icon {
+:host(.default) .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 */
+  margin: 0 calc(-1 * var(--ic-space-xxxs));
+
+  /* compensating for the circle being bigger than other steps */
 }
 
 .step-connect {
@@ -108,14 +199,14 @@
 }
 
 .aligned-full-width.step-connect {
-  min-width: 100px;
+  min-width: 6.25rem;
   width: 100%;
 }
 
 .disabled .step-connect {
   height: 0;
   background-color: rgb(0 0 0 / 0%);
-  border-top: 2px dashed var(--ic-architectural-200);
+  border-top: 0.125rem dashed var(--ic-architectural-200);
   border-radius: 0;
 }
 
@@ -132,21 +223,27 @@
   background-color: var(--ic-theme-primary);
 }
 
-.check-icon {
+.step-icon-inner .check-icon {
   padding-top: var(--ic-space-xxs);
 }
 
-.check-icon svg {
-  width: 16px;
-  height: 16px;
+.step-icon-inner .check-icon svg {
+  width: var(--ic-space-md);
+  height: auto;
 }
 
-.check-icon > svg > path {
-  fill: white;
+.step-icon-inner .check-icon > svg > path {
+  fill: var(--ic-color-white-text);
 }
 
 /** High Contrast **/
 @media (forced-colors: active) {
+  /* COMPACT STEP */
+  .compact-step-disabled :is(.step-title, .step-status) {
+    color: GrayText;
+  }
+
+  /* DEFAULT STEP */
   .step-connect:not(.disabled .step-connect) {
     border: var(--ic-hc-border);
   }
@@ -155,19 +252,19 @@
   .completed .step-icon-inner,
   .current .step-icon-inner {
     forced-color-adjust: none;
-    box-shadow: inset canvastext 0 0 0 2px;
+    box-shadow: inset canvastext 0 0 0 0.125rem;
     background-color: transparent;
     color: canvastext;
   }
 
-  .current .step-icon {
+  :host(.default) .current .step-icon {
     padding: 0;
     border: none;
   }
 
   .disabled,
   .disabled .step-title-area {
-    color: Graytext;
+    color: GrayText;
   }
 
   .step-connect-inner,
@@ -175,7 +272,7 @@
     background-color: canvastext;
   }
 
-  .check-icon > svg > path {
+  .step-icon-inner .check-icon > svg > path {
     fill: canvastext;
   }
 }

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

@@ -1,39 +1,121 @@
 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.stepType = "active";
+    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.lastStep = undefined;
+    this.lastStepNum = undefined;
+    this.nextStepTitle = undefined;
+    this.progress = undefined;
   }
-  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)));
+  stepTypeChangeHandler() {
+    if (this.variant === "compact" && this.stepType === "current") {
+      this.current = true;
     }
     else {
-      icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
+      this.current = false;
     }
+  }
+  render() {
+    // ARIA LABEL
     let ariaLabel = "";
     if (this.stepType === "completed") {
       ariaLabel = ". Completed step";
     }
     else if (this.stepType === "disabled") {
-      ariaLabel = ". Disabled step";
+      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 && 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("aligned-full-width"),
+        ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
+          !this.el.parentElement.classList.contains("aligned-left"),
       } }, 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: {
+    // 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) && (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)))))));
+      } }, 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"; }
@@ -49,28 +131,30 @@ export class Step {
   }
   static get properties() {
     return {
-      "stepType": {
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcStepTypes",
-          "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+          "original": "IcStepVariants",
+          "resolved": "\"compact\" | \"default\"",
           "references": {
-            "IcStepTypes": {
+            "IcStepVariants": {
               "location": "import",
               "path": "./ic-step.types"
             }
           }
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
-          "tags": [],
-          "text": "State of step"
+          "tags": [{
+              "name": "internal",
+              "text": "The variant of the step. This is managed by ic-stepper."
+            }],
+          "text": ""
         },
-        "attribute": "step-type",
-        "reflect": false,
-        "defaultValue": "\"active\""
+        "attribute": "variant",
+        "reflect": false
       },
       "stepTitle": {
         "type": "string",
@@ -84,7 +168,7 @@ export class Step {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Name of step"
+          "text": "The title of the step within the stepper."
         },
         "attribute": "step-title",
         "reflect": false
@@ -101,11 +185,102 @@ export class Step {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Additional information about step"
+          "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
       },
+      "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
+      },
+      "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\""
+      },
+      "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"
+      },
+      "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
+      },
       "stepNum": {
         "type": "number",
         "mutable": false,
@@ -119,7 +294,7 @@ export class Step {
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "The step number, managed by ic-stepper"
+              "text": "The step number, managed by ic-stepper."
             }],
           "text": ""
         },
@@ -134,20 +309,86 @@ export class Step {
           "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": "Final step in series flag, managed by ic-stepper"
+              "text": "The step number of the final step. This is managed by ic-stepper."
             }],
           "text": ""
         },
-        "attribute": "last-step",
+        "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
       }
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "stepType",
+        "methodName": "stepTypeChangeHandler"
+      }];
+  }
 }
 //# sourceMappingURL=ic-step.js.map