@ukic/web-components 2.18.1 → 2.19.0

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

@@ -39,6 +39,11 @@
   --compact-step-circular-line-width: var(--ic-space-xxs);
 }
 
+:host(.compact.light) {
+  --compact-step-inner-color: var(--ic-status-info-contrast);
+  --compact-step-outer-color: var(--ic-architectural-600);
+}
+
 :host(.compact) .step {
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
@@ -56,6 +61,9 @@
 
 :host ic-loading-indicator::part(ic-loading-container) {
   border-radius: 50%;
+}
+
+:host(:not(.light)) ic-loading-indicator::part(ic-loading-container) {
   background-color: var(--ic-architectural-white);
 }
 
@@ -65,6 +73,10 @@
   width: 14.25rem;
 }
 
+:host(.compact.light) .disabled .step-title-area {
+  color: var(--ic-architectural-400);
+}
+
 .info-line {
   display: flex;
   -moz-column-gap: var(--ic-space-xs);
@@ -82,15 +94,27 @@
   color: var(--ic-status-success);
 }
 
+:host(.light) .compact-step-completed .step-status {
+  color: var(--ic-status-success-contrast);
+}
+
 .compact-step-disabled :is(.step-title, .step-status) {
   color: var(--ic-color-tertiary-text);
 }
 
+:host(.light) .compact-step-disabled :is(.step-status) {
+  color: var(--ic-architectural-white);
+}
+
 .step-num {
   color: var(--ic-color-secondary-text);
   white-space: nowrap;
 }
 
+:host(.light) .step-num {
+  color: var(--ic-architectural-white);
+}
+
 :host(.compact) .step-icon {
   margin: var(--ic-space-xxxs);
 }
@@ -119,6 +143,9 @@
 
 :host(.default) .step-icon {
   border-radius: 50%;
+}
+
+:host(.default:not(.light)) .step-icon {
   background-color: var(--ic-architectural-white);
 }
 
@@ -135,12 +162,25 @@
   color: var(--ic-status-info);
 }
 
+:host(.default.light) .current,
+:host(.default.light) .current .step-title-area {
+  color: var(--ic-status-info-contrast);
+}
+
 :host(.default) .step-title-area {
   margin: var(--ic-space-xs) 0;
   padding-right: var(--ic-space-xs);
   width: 100%;
 }
 
+:host(.light) .step-title-area {
+  color: var(--ic-architectural-200);
+}
+
+:host(.compact.light) .step-title-area {
+  color: var(--ic-architectural-white);
+}
+
 :host(.default) .step-title,
 .step-subtitle {
   width: -moz-fit-content;
@@ -151,6 +191,10 @@
   color: var(--ic-color-tertiary-text);
 }
 
+:host(.light) .step-subtitle {
+  color: var(--ic-architectural-white);
+}
+
 .current .step-subtitle {
   color: var(--ic-color-primary-text);
 }
@@ -159,26 +203,49 @@
   color: var(--ic-status-success);
 }
 
+:host(.default.light) .completed,
+:host(.default.light) .completed .step-title-area {
+  color: var(--ic-status-success-contrast);
+}
+
 .active .step-icon-inner {
   box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;
 }
 
+:host(.light) .active .step-icon-inner {
+  color: var(--ic-architectural-white);
+}
+
 .current .step-icon-inner {
   background-color: var(--ic-status-info);
   color: white;
 }
 
+:host(.light) .current .step-icon-inner {
+  background-color: var(--ic-status-info-contrast);
+}
+
 .disabled {
   color: var(--ic-architectural-200);
 }
 
+:host(.default.light) .disabled,
+:host(.default.light) .disabled .step-title-area {
+  color: var(--ic-architectural-400);
+}
+
 .disabled .step-icon-inner {
   border: var(--ic-border-width) dashed var(--ic-architectural-200);
   width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
   height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
 }
 
-.disabled .step-title-area {
+:host(.light) .disabled .step-icon-inner {
+  border: var(--ic-border-width) dashed var(--ic-architectural-400);
+}
+
+.disabled .step-title-area,
+:host(.default.light) .disabled .step-subtitle {
   color: var(--ic-color-tertiary-text);
 }
 
@@ -188,6 +255,11 @@
   border-radius: 100%;
 }
 
+:host(.light) .completed .step-icon-inner {
+  background: var(--ic-status-success-contrast);
+  box-shadow: inset var(--ic-status-success-contrast) 0 0 0 var(--ic-space-xxxs);
+}
+
 :host(.default) .current .step-icon {
   border: var(--ic-space-xxxs) solid var(--ic-status-info);
   padding: var(--ic-space-xxxs);
@@ -196,6 +268,10 @@
   /* compensating for the circle being bigger than other steps */
 }
 
+:host(.default.light) .current .step-icon {
+  border: var(--ic-space-xxxs) solid var(--ic-status-info-contrast);
+}
+
 .step-connect {
   height: var(--ic-space-xxxs);
   background-color: var(--ic-architectural-200);
@@ -204,6 +280,10 @@
   width: 100%;
 }
 
+:host(.light) .step-connect {
+  background-color: var(--ic-architectural-600);
+}
+
 .aligned-full-width.step-connect {
   min-width: 6.25rem;
   width: 100%;
@@ -216,10 +296,18 @@
   border-radius: 0;
 }
 
+:host(.light) .disabled .step-connect {
+  border-top: 0.125rem dashed var(--ic-architectural-600);
+}
+
 .completed .step-connect {
   background-color: var(--ic-status-success);
 }
 
+:host(.light) .completed .step-connect {
+  background-color: var(--ic-status-success-contrast);
+}
+
 .step-connect-inner {
   width: 70%;
   display: flex;
@@ -229,6 +317,10 @@
   background-color: var(--ic-status-info);
 }
 
+:host(.light) .step-connect-inner {
+  background-color: var(--ic-status-info-contrast);
+}
+
 .step-icon-inner .check-icon {
   padding-top: var(--ic-space-xxs);
 }

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

@@ -26,6 +26,7 @@ export class Step {
         }
     }
     render() {
+        var _a;
         // ARIA LABEL
         let ariaLabel = "";
         if (this.stepType === "completed") {
@@ -116,6 +117,8 @@ export class Step {
                 ["aligned-full-width"]: this.el.parentElement.classList.contains("default") &&
                     !this.el.parentElement.classList.contains("aligned-left"),
                 [`${this.variant}`]: true,
+                ["light"]: ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.appearance) ===
+                    "light",
             } }, this.variant === "compact" ? compactStep : defaultStep));
     }
     static get is() { return "ic-step"; }

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\";\nimport { isPropDefined } from \"../../utils/helpers\";\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 (isPropDefined(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                    isPropDefined(this.stepSubtitle)\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            isPropDefined(this.nextStepTitle) && (\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 && isPropDefined(this.stepSubtitle)\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\";\nimport { isPropDefined } from \"../../utils/helpers\";\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 (isPropDefined(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                    isPropDefined(this.stepSubtitle)\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            isPropDefined(this.nextStepTitle) && (\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 && isPropDefined(this.stepSubtitle)\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          [\"light\"]:\n            (this.el.parentElement as HTMLIcStepperElement)?.appearance ===\n            \"light\",\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -179,6 +179,7 @@ export class Stepper {
         this.stepTypes = [];
         this.variantOverride = this.variant !== "compact";
         this.aligned = "full-width";
+        this.appearance = "default";
         this.connectorWidth = 100;
         this.hideStepInfo = false;
         this.variant = "default";
@@ -244,6 +245,24 @@ export class Stepper {
                 "reflect": false,
                 "defaultValue": "\"full-width\""
             },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"light\" | \"default\"",
+                    "resolved": "\"default\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The appearance of the stepper."
+                },
+                "attribute": "appearance",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
             "connectorWidth": {
                 "type": "number",
                 "mutable": false,

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

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

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

@@ -704,5 +704,23 @@ describe("switch between the compact and default stepper depending on whether th
         expect(page.rootInstance.variant).toMatch("default");
         expect(page.rootInstance["variantOverride"]).toBeTruthy();
     });
+    it("should render a light stepper", async () => {
+        const page = await newSpecPage({
+            components: [Stepper, Step],
+            html: `<ic-stepper appearance="light">
+      <ic-step step-title="Create" step-type="completed"></ic-step>
+      <ic-step step-title="Read" step-type="current"></ic-step>
+      <ic-step step-title="Update"></ic-step>
+      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+        });
+        page.rootInstance.resizeObserverCallback();
+        await page.waitForChanges();
+        expect(page.rootInstance.appearance).toMatch("light");
+        const steps = page.root.querySelectorAll("ic-step");
+        steps.forEach((step) => {
+            expect(step.classList.contains("light")).toBeTruthy();
+        });
+        expect(page.root).toMatchSnapshot();
+    });
 });
 //# sourceMappingURL=ic-stepper.spec.js.map