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

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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAQpD,MAAM,OAAO,IAAI;;oBAKkB,QAAQ;;;;;;EAsBzC,MAAM;IACJ,IAAI,IAAI,CAAC;IACT,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,IAAI,GAAG,CACL,qBAAe,OAAO,EAAC,gBAAgB;QACrC,YAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;KACH;SAAM;MACL,IAAI,GAAG,CACL,WAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM;QAC7C,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;KACH;IAED,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE;MACjC,SAAS,GAAG,kBAAkB,CAAC;KAChC;SAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;MACvC,SAAS,GAAG,iBAAiB,CAAC;KAC/B;IAED,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAChD,WAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;IACF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,WACE,KAAK,EAAE;QACL,CAAC,cAAc,CAAC,EAAE,IAAI;QACtB,CAAC,oBAAoB,CAAC,EACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE,IAEA,UAAU,CACP,CACP,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EACpB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;OACjE;MAED,WACE,KAAK,EAAE;UACL,CAAC,MAAM,CAAC,EAAE,IAAI;UACd,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAC3B;QAED,WAAK,KAAK,EAAC,UAAU;UACnB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO;UAClC,SAAS,CACN;QACL,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CACxC,WAAK,KAAK,EAAC,iBAAiB;UACzB,IAAI,CAAC,SAAS,IAAI,CACjB,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,YAAY,IACvD,IAAI,CAAC,SAAS,CACD,CACjB;UACA,IAAI,CAAC,YAAY,IAAI,CACpB,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,IACnD,IAAI,CAAC,YAAY,CACJ,CACjB,CACG,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport { IcStepTypes } from \"./ic-step.types\";\n\n@Component({\n  tag: \"ic-step\",\n  styleUrl: \"ic-step.css\",\n  shadow: true,\n})\nexport class Step {\n  @Element() el: HTMLIcStepElement;\n  /**\n   * State of step\n   */\n  @Prop() stepType?: IcStepTypes = \"active\";\n\n  /**\n   * Name of step\n   */\n  @Prop() stepTitle?: string;\n\n  /**\n   * Additional information about step\n   */\n  @Prop() stepSubtitle?: string;\n\n  /**\n   * @internal The step number, managed by ic-stepper\n   */\n  @Prop() stepNum?: number;\n\n  /**\n   * @internal Final step in series flag, managed by ic-stepper\n   */\n  @Prop() lastStep?: boolean;\n\n  render() {\n    let icon;\n    if (this.stepType !== \"completed\") {\n      icon = (\n        <ic-typography variant=\"subtitle-small\">\n          <span class=\"step-icon-inner\" aria-hidden=\"true\">\n            {this.stepNum}\n          </span>\n        </ic-typography>\n      );\n    } else {\n      icon = (\n        <div class=\"step-icon-inner\" aria-hidden=\"true\">\n          <span class=\"check-icon\" innerHTML={checkIcon}></span>\n        </div>\n      );\n    }\n\n    let ariaLabel = \"\";\n\n    if (this.stepType === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.stepType === \"disabled\") {\n      ariaLabel = \". Disabled step\";\n    }\n\n    const partialBar = this.stepType === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n    const finalStep = !this.lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={this.stepType == \"current\" ? \"step\" : null}\n        class={{\n          [\"aligned-full-width\"]:\n            this.el.parentElement.classList.contains(\"aligned-full-width\"),\n        }}\n      >\n        <div\n          class={{\n            [\"step\"]: true,\n            [`${this.stepType}`]: true,\n          }}\n        >\n          <div class=\"step-top\">\n            <div class=\"step-icon\">{icon}</div>\n            {finalStep}\n          </div>\n          {(this.stepTitle || this.stepSubtitle) && (\n            <div class=\"step-title-area\">\n              {this.stepTitle && (\n                <ic-typography variant=\"subtitle-large\" class=\"step-title\">\n                  {this.stepTitle}\n                </ic-typography>\n              )}\n              {this.stepSubtitle && (\n                <ic-typography variant=\"caption\" class=\"step-subtitle\">\n                  {this.stepSubtitle}\n                </ic-typography>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"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"]}

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

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

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

@@ -0,0 +1,74 @@
+export const defaultStepper = `
+    <ic-stepper>
+        <ic-step step-title="First"></ic-step>
+        <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+        ></ic-step>
+    </ic-stepper>`;
+export const customConnectorWidthStepper = `
+    <ic-stepper aligned="left" connector-width="150">
+        <ic-step step-title="First"></ic-step>
+        <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+        ></ic-step>
+    </ic-stepper>`;
+export const invalidConnectorWidthStepper = `
+    <ic-stepper aligned="left" connector-width="96">
+        <ic-step step-title="First"></ic-step>
+        <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional Subtitle"
+        step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+        step-title="Fourth"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+        ></ic-step>
+    </ic-stepper>`;
+export const compactStepper = `
+    <ic-stepper variant="compact" id="custom-compact-stepper">
+        <ic-step 
+        step-title="First"
+        ></ic-step>
+        <ic-step
+          step-title="Second With a Very Long Title"
+          step-subtitle="Optional subtitle that is long and should wrap"
+          current
+          step-type="current"
+        ></ic-step>
+        <ic-step
+          step-title="Third"
+          step-type="disabled"
+        ></ic-step>
+        <ic-step
+          step-title="Fourth title that is long and should wrap"
+          step-subtitle="Optional Subtitle"
+          step-type="completed"
+        ></ic-step>
+        <ic-step
+          step-title="Fifth and final step"
+          step-subtitle="Optional Subtitle"
+          icon
+          step-status="optional"
+          step-type="completed"
+        ></ic-step>
+      </ic-stepper>`;
+//# sourceMappingURL=ic-stepper-test-examples.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-stepper-test-examples.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper-test-examples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;kBAcZ,CAAC;AAEnB,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;kBAczB,CAAC;AAEnB,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;kBAc1B,CAAC;AAEnB,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2BV,CAAC","sourcesContent":["export const defaultStepper = `\n    <ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const customConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const invalidConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const compactStepper = `\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        step-title=\"First\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          icon\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`;\n"]}

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

@@ -9,6 +9,20 @@
   padding: 0;
 }
 
-:host(.aligned-full-width) .step-item-list {
+:host(.default:not(.aligned-left)) .step-item-list {
   flex: auto;
 }
+
+:host(.compact) ul ::slotted(ic-step) {
+  display: none;
+}
+
+:host(.compact) ul ::slotted(ic-step.show) {
+  display: flex;
+}
+
+:host(.compact) ul ::slotted(ic-step.hide) {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+}

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

@@ -1,69 +1,193 @@
 import { Host, h } from "@stencil/core";
-import { checkResizeObserver } from "../../utils/helpers";
-export class IcStepper {
+import { checkResizeObserver, pxToRem } from "../../utils/helpers";
+export class Stepper {
   constructor() {
     this.resizeObserver = null;
-    /**
-     * Get all steps currently within this stepper
-     */
+    // Get all steps currently within this stepper
     this.getChildren = () => {
       this.steps = Array.from(this.el.querySelectorAll("ic-step"));
+      this.stepsWithStepTitles = Array.from(this.el.querySelectorAll("ic-step[step-title]"));
+    };
+    // Inform the user that stepTitles are required on all steps in a compact stepper
+    this.checkStepTitles = () => {
+      if (this.stepsWithStepTitles.length < this.steps.length &&
+        this.variantOverride &&
+        this.variant === "compact") {
+        this.noOfResizes = this.noOfResizes + 1;
+        if (this.noOfResizes === 1) {
+          console.error(`The prop 'step-title' (web components) / 'stepTitle' (react) is required for all steps of the Stepper component (compact variant)`);
+        }
+      }
+    };
+    this.setStepTypes = () => {
+      this.getChildren();
+      this.stepTypes = [];
+      for (let i = 0; i < this.steps.length; i++) {
+        this.stepTypes.push("active");
+      }
+    };
+    this.setStepperWidth = () => {
+      this.alignedFullWidth =
+        this.variant === "default" && this.aligned === "full-width";
+      const lastStep = this.steps[this.steps.length - 1];
+      lastStep.style.maxWidth = "none";
+      if (this.alignedFullWidth) {
+        this.stepperWidth = this.el.offsetWidth;
+        lastStep.style.maxWidth = pxToRem(`${this.stepperWidth / this.steps.length}px`);
+        this.lastStepWidth = lastStep.offsetWidth;
+      }
     };
     this.initialiseStepStates = () => {
       this.steps.forEach((step, index) => {
+        // Set variant
+        step.variant = this.variant;
         // Assign stepNum to each step
         step.stepNum = index + 1;
-        //Assign lastStep to final step
+        // Assign lastStep to final step
         step.lastStep = index === this.steps.length - 1;
-        if (step.lastStep) {
-          step.classList.add("last-step");
-          if (this.el.classList.contains("aligned-full-width")) {
-            step.style.maxWidth = `${this.lastStepWidth}px`;
+        step.lastStepNum = this.steps.length;
+        if (step.stepType !== "current") {
+          step.current = false;
+          this.stepTypes[index] = step.stepType;
+        }
+        else {
+          step.current = true;
+        }
+        const stepTitleArea = step.shadowRoot &&
+          step.shadowRoot.querySelector(".step > .step-title-area");
+        if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {
+          if (this.variant === "compact") {
+            this.autoSetStepTitles = true;
+            if (this.autoSetStepTitles) {
+              step.stepTitle = "Step " + step.stepNum;
+              stepTitleArea &&
+                stepTitleArea
+                  .querySelector(".step-title")
+                  .setAttribute("aria-hidden", "true");
+            }
+          }
+          if (this.variant === "default") {
+            this.autoSetStepTitles = false;
+            if (!this.autoSetStepTitles) {
+              step.stepTitle = undefined;
+              stepTitleArea &&
+                stepTitleArea
+                  .querySelector(".step-title")
+                  .removeAttribute("aria-hidden");
+            }
+          }
+        }
+        if (this.variant === "compact") {
+          if (step.current === true || step.stepType === "current") {
+            step.classList.remove("hide");
+            step.classList.add("show");
           }
-          if (this.el.classList.contains("aligned-left")) {
-            step.style.maxWidth = `${this.connectorWidth + 48}px`;
+          else if (step.classList.contains("show")) {
+            step.classList.remove("show");
+            step.classList.add("hide");
+          }
+          if (!step.lastStep) {
+            step.nextStepTitle = this.steps[index + 1].stepTitle;
+            step.progress = (step.stepNum / this.steps.length) * 100;
+          }
+          else if (step.lastStep && this.stepTypes[index] !== "completed") {
+            step.progress = 95;
+          }
+          else {
+            step.progress = 100;
+          }
+          if (this.hideStepInfo && stepTitleArea !== null) {
+            stepTitleArea.classList.remove("visually-hidden");
+          }
+          step.compactStepStyling = this.stepTypes[index];
+        }
+        if (this.variant === "default") {
+          if (!step.lastStep) {
+            if (this.alignedFullWidth) {
+              step.style.width = pxToRem(`${(this.stepperWidth - this.lastStepWidth) /
+                (this.steps.length - 1)}px`);
+              step.style.minWidth = pxToRem("148px");
+            }
+          }
+          else if (step.lastStep) {
+            step.classList.add("last-step");
+            if (this.alignedFullWidth) {
+              step.style.maxWidth = `${this.lastStepWidth}px`;
+            }
+            else {
+              step.style.maxWidth =
+                this.connectorWidth > 100
+                  ? pxToRem(`${this.connectorWidth + 48}px`)
+                  : pxToRem("148px");
+            }
+          }
+          if (this.aligned === "left") {
+            step.style.width =
+              this.connectorWidth > 100
+                ? pxToRem(`${this.connectorWidth + 48}px`)
+                : pxToRem("148px");
+            const stepConnect = step.shadowRoot.querySelector(".step > .step-top > .step-connect");
+            if (stepConnect) {
+              stepConnect.style.width =
+                this.connectorWidth > 100
+                  ? pxToRem(`${this.connectorWidth}px`)
+                  : pxToRem("100px");
+            }
+          }
+          if (this.hideStepInfo && stepTitleArea !== null) {
+            stepTitleArea.classList.add("visually-hidden");
           }
         }
       });
-      for (let i = 0; i < this.steps.length - 1; i++) {
-        if (this.el.classList.contains("aligned-full-width")) {
-          this.steps[i].style.width = `${(this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)}px`;
-          this.steps[i].style.minWidth = "148px";
+    };
+    this.overrideVariant = () => {
+      let minDefaultStepperWidth = 148 * this.steps.length;
+      if (this.aligned === "left" && this.connectorWidth > 100) {
+        minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;
+      }
+      if (this.variantOverride) {
+        if (this.el.clientWidth < minDefaultStepperWidth) {
+          this.variant = "compact";
+          this.getChildren();
         }
-        if (this.el.classList.contains("aligned-left")) {
-          this.steps[i].style.width = `${this.connectorWidth + 48}px`;
-          const stepConnect = this.steps[i].shadowRoot.querySelector("div > .step-top > .step-connect");
-          stepConnect.style.width =
-            this.connectorWidth > 100 ? `${this.connectorWidth}px` : "100px";
+        else {
+          this.variant = "default";
+          this.getChildren();
         }
       }
     };
+    this.resizeObserverCallback = () => {
+      this.getChildren();
+      this.checkStepTitles();
+      this.overrideVariant();
+      this.setStepperWidth();
+      this.initialiseStepStates();
+    };
     this.runResizeObserver = () => {
       this.resizeObserver = new ResizeObserver(() => {
-        this.setStepperWidth();
-        this.getChildren();
-        this.initialiseStepStates();
+        this.resizeObserverCallback();
       });
       this.resizeObserver.observe(this.el);
     };
-    this.setStepperWidth = () => {
-      this.stepperWidth = this.el.offsetWidth;
-      const allSteps = document.querySelectorAll("ic-step");
-      const lastStep = allSteps[allSteps.length - 1];
-      lastStep.style.maxWidth = "none";
-      if (lastStep.classList.contains("aligned-full-width")) {
-        lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;
-      }
-      this.lastStepWidth = lastStep.offsetWidth;
-      this.getChildren();
-      this.initialiseStepStates();
-    };
     this.aligned = "full-width";
+    this.variant = "default";
     this.connectorWidth = 100;
+    this.hideStepInfo = false;
     this.stepperWidth = document
       .querySelector("ic-stepper")
       .getBoundingClientRect().width;
     this.lastStepWidth = 0;
+    this.stepTypes = [];
+    this.alignedFullWidth = true;
+    this.autoSetStepTitles = true;
+    this.variantOverride = this.variant !== "compact";
+    this.noOfResizes = 0;
+  }
+  componentWillLoad() {
+    this.setStepTypes();
+    if (this.variant === "compact") {
+      this.variantOverride = false;
+    }
   }
   componentDidLoad() {
     checkResizeObserver(this.runResizeObserver);
@@ -75,8 +199,8 @@ export class IcStepper {
   }
   render() {
     return (h(Host, { class: {
-        ["aligned-left"]: this.aligned === "left",
-        ["aligned-full-width"]: this.aligned === "full-width",
+        [`${this.variant}`]: true,
+        ["aligned-left"]: this.variant === "default" && this.aligned === "left",
       } }, h("ul", { class: "step-item-list" }, h("slot", null))));
   }
   static get is() { return "ic-stepper"; }
@@ -110,12 +234,35 @@ export class IcStepper {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "How the stepper should be aligned in its container."
+          "text": "The alignment of the default stepper within its container."
         },
         "attribute": "aligned",
         "reflect": false,
         "defaultValue": "\"full-width\""
       },
+      "variant": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IcStepVariants",
+          "resolved": "\"compact\" | \"default\"",
+          "references": {
+            "IcStepVariants": {
+              "location": "import",
+              "path": "../ic-step/ic-step.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the stepper."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "connectorWidth": {
         "type": "number",
         "mutable": false,
@@ -133,13 +280,36 @@ export class IcStepper {
         "attribute": "connector-width",
         "reflect": false,
         "defaultValue": "100"
+      },
+      "hideStepInfo": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "hide-step-info",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
   static get states() {
     return {
       "stepperWidth": {},
-      "lastStepWidth": {}
+      "lastStepWidth": {},
+      "stepTypes": {},
+      "alignedFullWidth": {},
+      "autoSetStepTitles": {},
+      "variantOverride": {},
+      "noOfResizes": {}
     };
   }
   static get elementRef() { return "el"; }

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 } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class IcStepper {\n  @Element() el: HTMLIcStepperElement;\n\n  /**\n   * How the stepper should be aligned in its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connnector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n\n  @State() lastStepWidth: number = 0;\n\n  private steps: HTMLIcStepElement[];\n\n  private resizeObserver: ResizeObserver = null;\n\n  /**\n   * Get all steps currently within this stepper\n   */\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      //Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n\n      if (step.lastStep) {\n        step.classList.add(\"last-step\");\n        if (this.el.classList.contains(\"aligned-full-width\")) {\n          step.style.maxWidth = `${this.lastStepWidth}px`;\n        }\n        if (this.el.classList.contains(\"aligned-left\")) {\n          step.style.maxWidth = `${this.connectorWidth + 48}px`;\n        }\n      }\n    });\n\n    for (let i = 0; i < this.steps.length - 1; i++) {\n      if (this.el.classList.contains(\"aligned-full-width\")) {\n        this.steps[i].style.width = `${\n          (this.stepperWidth - this.lastStepWidth) / (this.steps.length - 1)\n        }px`;\n        this.steps[i].style.minWidth = \"148px\";\n      }\n\n      if (this.el.classList.contains(\"aligned-left\")) {\n        this.steps[i].style.width = `${this.connectorWidth + 48}px`;\n        const stepConnect = this.steps[i].shadowRoot.querySelector(\n          \"div > .step-top > .step-connect\"\n        ) as HTMLElement;\n        stepConnect.style.width =\n          this.connectorWidth > 100 ? `${this.connectorWidth}px` : \"100px\";\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.setStepperWidth();\n      this.getChildren();\n      this.initialiseStepStates();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private setStepperWidth = (): void => {\n    this.stepperWidth = this.el.offsetWidth;\n    const allSteps = document.querySelectorAll(\"ic-step\");\n    const lastStep = allSteps[allSteps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n    if (lastStep.classList.contains(\"aligned-full-width\")) {\n      lastStep.style.maxWidth = `${this.stepperWidth / allSteps.length}px`;\n    }\n    this.lastStepWidth = lastStep.offsetWidth;\n    this.getChildren();\n    this.initialiseStepStates();\n  };\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"aligned-left\"]: this.aligned === \"left\",\n          [\"aligned-full-width\"]: this.aligned === \"full-width\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}
+{"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  @Element() el: HTMLIcStepperElement;\n\n  /**\n   * The alignment of the default stepper within its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The variant of the stepper.\n   */\n  @Prop({ mutable: true }) variant?: IcStepVariants = \"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  @State() stepperWidth: number = document\n    .querySelector(\"ic-stepper\")\n    .getBoundingClientRect().width;\n\n  @State() lastStepWidth: number = 0;\n\n  @State() stepTypes: IcStepTypes[] = [];\n\n  @State() alignedFullWidth: boolean = true;\n\n  @State() autoSetStepTitles: boolean = true;\n\n  @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n  @State() noOfResizes?: number = 0;\n\n  private steps: HTMLIcStepElement[];\n\n  private stepsWithStepTitles: HTMLIcStepElement[];\n\n  private resizeObserver: ResizeObserver = null;\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  componentWillLoad(): void {\n    this.setStepTypes();\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`${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/ic-stepper.test.a11y.js

@@ -1,7 +1,7 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
 import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
-describe("stepper component", () => {
+describe("default variant of stepper component", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-stepper>
     <ic-step step-title="First"></ic-step>
@@ -21,4 +21,16 @@ describe("stepper component", () => {
     expect(await axe(el)).toHaveNoViolations();
   });
 });
+describe("compact variant of ic-stepper", () => {
+  it("passes accessibility", async () => {
+    const el = await fixture(`<ic-stepper variant="compact" id="standard-compact-stepper">
+        <ic-step step-title="Create" step-type="completed"></ic-step>
+        <ic-step step-title="Read" step-status="complete" current></ic-step>
+        <ic-step step-title="Update" step-status="not required"></ic-step>
+        <ic-step step-title="Delete" step-status="not required"></ic-step>
+      </ic-stepper>`);
+    checkShadowElementRendersCorrectly(el);
+    expect(await axe(el)).toHaveNoViolations();
+  });
+});
 //# sourceMappingURL=ic-stepper.test.a11y.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-stepper.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;;;;;gBAab,CAAC,CAAC;IACd,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\ndescribe(\"stepper component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-stepper>\n    <ic-step step-title=\"First\"></ic-step>\n    <ic-step\n      step-title=\"Second With a Very Long Title\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"current\"\n    ></ic-step>\n    <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n    <ic-step\n      step-title=\"Fourth\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"completed\"\n    ></ic-step>\n  </ic-stepper>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-stepper.test.a11y.js","sourceRoot":"","sources":["../../../src/components/ic-stepper/ic-stepper.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,8BAA8B,CAAC;AAElF,QAAQ,CAAC,sCAAsC,EAAE,GAAG,EAAE;EACpD,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;;;;;;;gBAab,CAAC,CAAC;IACd,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;EAC7C,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GACN,MAAM,OAAO,CAAC;;;;;oBAKA,CAAC,CAAC;IAClB,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../utils/testa11y.helpers\";\n\ndescribe(\"default variant of stepper component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-stepper>\n    <ic-step step-title=\"First\"></ic-step>\n    <ic-step\n      step-title=\"Second With a Very Long Title\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"current\"\n    ></ic-step>\n    <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n    <ic-step\n      step-title=\"Fourth\"\n      step-subtitle=\"Optional Subtitle\"\n      step-type=\"completed\"\n    ></ic-step>\n  </ic-stepper>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n\ndescribe(\"compact variant of ic-stepper\", () => {\n  it(\"passes accessibility\", async () => {\n    const el =\n      await fixture(`<ic-stepper variant=\"compact\" id=\"standard-compact-stepper\">\n        <ic-step step-title=\"Create\" step-type=\"completed\"></ic-step>\n        <ic-step step-title=\"Read\" step-status=\"complete\" current></ic-step>\n        <ic-step step-title=\"Update\" step-status=\"not required\"></ic-step>\n        <ic-step step-title=\"Delete\" step-status=\"not required\"></ic-step>\n      </ic-stepper>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}