@reliability-design/web 1.0.2

package/dist/components/rel-stepper/rel-stepper.ts

@@ -0,0 +1,425 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type StepStatus = "done" | "progress" | "disabled";
+export type TextAlign = "right" | "below";
+export type Orientation = "horizontal" | "vertical";
+export type StepperSize = "small" | "large";
+
+export interface Step {
+  title: string;
+  status: StepStatus;
+}
+
+@customElement("rel-stepper")
+export class RelStepper extends LitElement {
+  @property({ type: Array }) steps: Step[] = [];
+
+  @property({ type: String }) textAlign: TextAlign = "below";
+
+  @property({ type: String }) orientation: Orientation = "horizontal";
+
+  @property({ type: String }) size: StepperSize = "large";
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    /********************************************
+     * Base Stepper Styles
+     ********************************************/
+    .rel-stepper {
+      display: flex;
+      font-family: var(--rel-fontFamilies-primary);
+      width: 100%;
+      position: relative;
+    }
+
+    /* Orientation */
+    .rel-stepper.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: center;
+    }
+
+    .rel-stepper.vertical.text-below {
+      flex-direction: column;
+      align-items: center;
+      justify-content: start;
+    }
+
+    .rel-stepper.vertical.text-right {
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: start;
+    }
+
+    /********************************************
+     * Step Container
+     ********************************************/
+    .rel-step {
+      display: flex;
+      position: relative;
+    }
+
+    .rel-stepper.horizontal.text-below .rel-step {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      position: relative;
+      flex: 0;
+    }
+
+    .rel-stepper.horizontal.text-right .rel-step {
+      flex-direction: row;
+      align-items: center;
+      position: relative;
+      flex: 0;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    /* Vertical layout variants */
+    .rel-stepper.vertical.text-below .rel-step {
+      flex-direction: column;
+      align-items: center;
+      justify-content: start;
+      position: relative;
+    }
+
+    .rel-stepper.vertical.text-right .rel-step {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: center;
+      position: relative;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    /* Wrapper for indicator and connector */
+    .indicator-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+
+    /* Wrapper for indicator and label (text-below only) */
+    .step-content {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    .text-below-content {
+      flex-direction: column;
+    }
+
+    .text-right-content {
+      flex-direction: row;
+    }
+
+    /********************************************
+     * Indicator
+     ********************************************/
+    .indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      border: 2px solid var(--rel-colors-gray-border);
+      background: var(--rel-colors-white);
+      border-radius: 50%;
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      position: relative;
+      z-index: 2;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .indicator svg {
+      width: 12px;
+      height: auto;
+      display: block;
+    }
+
+    /********************************************
+     * Labels
+     ********************************************/
+    .step-label {
+      white-space: nowrap;
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-colors-gray-paragraph);
+    }
+
+    /* Horizontal text-below specific */
+    .rel-stepper.horizontal.text-below .step-label {
+      margin-top: var(--rel-spacing-space-2xs);
+      text-align: center;
+    }
+
+    /* Horizontal text-right specific */
+    .rel-stepper.horizontal.text-right .step-label {
+      margin-top: 0;
+      margin-left: 0;
+      margin-right: var(--rel-spacing-space-xs);
+      text-align: left;
+    }
+
+    /* Vertical text-right specific */
+    .rel-stepper.vertical.text-right .step-label {
+      margin-top: 0;
+      margin-left: 0;
+      text-align: left;
+    }
+
+    /* Vertical text-below specific */
+    .rel-stepper.vertical.text-below .step-label {
+      margin-top: 0;
+      margin-left: 0;
+      text-align: center;
+    }
+
+    /********************************************
+     * Connector Lines
+     ********************************************/
+    .connector {
+      position: absolute;
+      background: var(--rel-colors-gray-border);
+      z-index: 1;
+    }
+
+    /* Horizontal connector */
+    .rel-stepper.horizontal .connector {
+      top: 50%;
+      left: 100%;
+      transform: translateY(-50%);
+      height: 2px;
+      position: absolute;
+      background: var(--rel-colors-gray-border);
+    }
+
+    .rel-stepper.horizontal .rel-step:last-child .connector {
+      display: none;
+    }
+
+    /* Vertical connectors */
+    .rel-stepper.vertical.text-below .connector {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      position: absolute;
+    }
+
+    .rel-stepper.vertical.text-right .connector {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      position: absolute;
+    }
+
+    .rel-stepper.vertical .rel-step:last-child .connector {
+      display: none;
+    }
+
+    .rel-stepper.vertical.text-right .rel-step:last-child .indicator-wrapper .connector {
+      display: none;
+    }
+
+    /********************************************
+     * Step States
+     ********************************************/
+    .rel-step.done .indicator {
+      background: var(--rel-colors-black);
+      border-color: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+    }
+
+    .rel-step.progress .indicator {
+      border-color: var(--rel-colors-black);
+      color: var(--rel-colors-black);
+      background: var(--rel-colors-white);
+    }
+
+    .rel-step.disabled .indicator {
+      background: var(--rel-colors-gray-bg-subtle);
+      border-color: var(--rel-colors-gray-border);
+      color: var(--rel-colors-gray-disabled);
+    }
+
+    .rel-step.done .connector {
+      background: var(--rel-colors-black);
+    }
+
+    .rel-step.progress .connector {
+      background: var(--rel-colors-black);
+    }
+
+    .rel-step.done .step-label {
+      color: var(--rel-colors-black);
+      font-weight: var(--rel-fontWeights-semibold);
+    }
+
+    .rel-step.progress .step-label {
+      color: var(--rel-colors-black);
+      font-weight: var(--rel-fontWeights-semibold);
+    }
+
+    .rel-step.disabled .step-label {
+      color: var(--rel-colors-gray-disabled);
+    }
+
+    /********************************************
+     * Size Property — controls connector length
+     ********************************************/
+    /* Horizontal */
+    .rel-stepper.large.horizontal {
+      gap: 86px;
+    }
+
+    .rel-stepper.small.horizontal {
+      gap: 60px;
+    }
+
+    .rel-stepper.large.horizontal .connector {
+      width: 86px;
+    }
+
+    .rel-stepper.small.horizontal .connector {
+      width: 60px;
+    }
+
+    /* Vertical */
+    .rel-stepper.large.vertical .connector {
+      height: 86px;
+    }
+
+    .rel-stepper.large.vertical {
+      gap: 86px;
+    }
+
+    .rel-stepper.small.vertical .connector {
+      height: 42px;
+    }
+
+    .rel-stepper.small.vertical {
+      gap: 42px;
+    }
+  `;
+
+  private isDone(step: Step): boolean {
+    return step.status === "done";
+  }
+
+  private isProgress(step: Step): boolean {
+    return step.status === "progress";
+  }
+
+  private isDisabled(step: Step): boolean {
+    return step.status === "disabled";
+  }
+
+  private getStepClasses(step: Step): string {
+    const classes = ["rel-step"];
+    if (this.isDone(step)) classes.push("done");
+    if (this.isProgress(step)) classes.push("progress");
+    if (this.isDisabled(step)) classes.push("disabled");
+    return classes.join(" ");
+  }
+
+  private renderIndicator(step: Step, index: number) {
+    if (step.status === "done") {
+      return html`
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="10"
+          viewBox="0 0 18 14"
+          fill="none"
+          class="check-icon"
+        >
+          <path
+            d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
+            fill="white"
+          />
+        </svg>
+      `;
+    }
+    return html`<span>${index + 1}</span>`;
+  }
+
+  render() {
+    const stepperClasses = [
+      "rel-stepper",
+      this.orientation === "vertical" ? "vertical" : "horizontal",
+      this.textAlign === "below" ? "text-below" : "text-right",
+      this.size === "small" ? "small" : "large",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const isVertical = this.orientation === "vertical";
+    const isTextRight = this.textAlign === "right";
+
+    return html`
+      <div class="${stepperClasses}">
+        ${this.steps.map(
+          (step, idx) => html`
+            <div class="${this.getStepClasses(step)}">
+              ${isVertical && isTextRight
+                ? html`
+                    <!-- Indicator with connector below -->
+                    <div class="indicator-wrapper">
+                      <div class="indicator">
+                        ${this.renderIndicator(step, idx)}
+                      </div>
+                      ${idx < this.steps.length - 1
+                        ? html`<div class="connector"></div>`
+                        : ""}
+                    </div>
+
+                    <!-- Step Label to the right -->
+                    <div class="step-label">${step.title}</div>
+                  `
+                : isVertical
+                ? html`
+                    <div class="step-content text-below-content">
+                      <!-- Step Indicator -->
+                      <div class="indicator">
+                        ${this.renderIndicator(step, idx)}
+                      </div>
+
+                      <!-- Step Label -->
+                      <div class="step-label">${step.title}</div>
+                    </div>
+
+                    <!-- Connector -->
+                    ${idx < this.steps.length - 1
+                      ? html`<div class="connector"></div>`
+                      : ""}
+                  `
+                : html`
+                    <!-- Step Indicator -->
+                    <div class="indicator">
+                      ${this.renderIndicator(step, idx)}
+                    </div>
+
+                    <!-- Step Label -->
+                    <div class="step-label">${step.title}</div>
+
+                    <!-- Connector (for horizontal only) -->
+                    ${!isVertical && idx < this.steps.length - 1
+                      ? html`<div class="connector"></div>`
+                      : ""}
+                  `}
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+}