@dile/ui 3.17.1 → 3.18.0

package/components/steps/index.js

@@ -0,0 +1,2 @@
+export { DileSteps } from './src/DileSteps.js';
+export { DileStep } from './src/DileStep.js';

package/components/steps/src/DileStep.js

@@ -0,0 +1,90 @@
+import { LitElement, html, css } from 'lit';
+
+export class DileStep extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: var(--dile-step-size, 1.5rem);
+        height: var(--dile-step-size, 1.5rem);
+      }
+      .step {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        background-color: var(--dile-step-background-color, var(--dile-background-color, #fff));
+        border-radius: 3rem;
+        font-size: var(--dile-step-font-size, 0.8rem);
+        font-weight: normal;
+        font-family: inherit;
+        padding: 0;
+        border: var(--dile-step-border-width, 2px) solid var(--dile-step-border-color, #ddd);
+        color: var(--dile-step-text-color, var(--dile-on-background-color, #303030));
+        cursor: default;
+      }
+      button.step:focus-visible {
+        outline: 2px solid var(--dile-step-active-border-color, var(--dile-primary-dark-color, #0039cb));
+        outline-offset: 2px;
+      }
+      :host([reached]) .step {
+        background-color: var(--dile-step-reached-background-color, var(--dile-primary-color, #2962ff));
+        border-color: var(--dile-step-reached-background-color, var(--dile-primary-color, #2962ff));
+        color: var(--dile-step-reached-text-color, var(--dile-on-primary-color, #fff));
+      }
+      :host([reached]:not([readonly])) .step {
+        cursor: pointer;
+      }
+      :host([active]) .step {
+        border-color: var(--dile-step-active-border-color, var(--dile-primary-dark-color, #0039cb));
+        font-weight: bold;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      /** Step label, used as accessible name of the button */
+      label: { type: String },
+      /** Zero-based position of the step */
+      index: { type: Number },
+      /** The step is the current one */
+      active: { type: Boolean, reflect: true },
+      /** The step can be navigated to */
+      reached: { type: Boolean, reflect: true },
+      /** Display only: renders the bubble without a button */
+      readonly: { type: Boolean, reflect: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this.index = 0;
+    this.active = false;
+    this.reached = false;
+    this.readonly = false;
+  }
+
+  render() {
+    if (this.readonly) {
+      return html`<span class="step" aria-hidden="true">${this.index + 1}</span>`;
+    }
+    return html`<button
+      type="button"
+      class="step"
+      ?disabled=${!this.reached}
+      aria-label=${this.label ?? ''}
+      @click=${this.doClick}
+    >${this.index + 1}</button>`;
+  }
+
+  doClick() {
+    this.dispatchEvent(new CustomEvent('dile-step-click', {
+      bubbles: true,
+      composed: true,
+      detail: { index: this.index, label: this.label }
+    }));
+  }
+}

package/components/steps/src/DileSteps.js

@@ -0,0 +1,171 @@
+import { LitElement, html, css } from 'lit';
+import '../step.js';
+
+export class DileSteps extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+
+      /* ── Horizontal ── */
+      .horizontal {
+        display: flex;
+        position: relative;
+        padding-bottom: 0.5rem;
+      }
+      .line-bg {
+        position: absolute;
+        top: calc(var(--dile-step-size, 1.5rem) / 2 - var(--dile-steps-line-width, 0.5rem) / 2);
+        left: 0.75rem;
+        right: 0.75rem;
+        height: var(--dile-steps-line-width, 0.5rem);
+        background-color: var(--dile-steps-line-color, var(--dile-primary-color, #2962ff));
+        border-radius: 2rem;
+      }
+      .h-step {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        position: relative;
+        z-index: 1;
+      }
+      .h-label {
+        font-size: var(--dile-step-label-font-size, 0.7rem);
+        text-align: center;
+        margin-top: 0.3rem;
+        color: var(--dile-step-label-color, #606060);
+        line-height: 1.2;
+      }
+
+      /* ── Vertical ── */
+      .vertical {
+        display: flex;
+        flex-direction: column;
+      }
+      .v-step {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 0.75rem;
+      }
+      .v-track {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: var(--dile-step-size, 1.5rem);
+        flex-shrink: 0;
+      }
+      .connector {
+        width: var(--dile-steps-connector-width, 0.35rem);
+        height: var(--dile-steps-connector-height, 1rem);
+        background-color: var(--dile-steps-line-color, var(--dile-primary-color, #2962ff));
+        border-radius: 2rem;
+      }
+      .v-label {
+        font-size: var(--dile-step-label-font-size, 0.85rem);
+        color: var(--dile-step-label-color, #606060);
+        padding-top: 0.2rem;
+        line-height: 1.2;
+      }
+
+      .active .h-label,
+      .active .v-label {
+        color: var(--dile-step-active-label-color, var(--dile-step-active-border-color, var(--dile-primary-dark-color, #0039cb)));
+        font-weight: 600;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      /** Array with the label of each step */
+      steps: { type: Array },
+      /** Zero-based index of the current step */
+      current: { type: Number },
+      /** Highest step index reached so far */
+      reached: { type: Number },
+      /** All steps can be selected, regardless of reached */
+      freeNavigation: { type: Boolean },
+      /** Vertical layout */
+      vertical: { type: Boolean },
+      /** Display only: steps can not be clicked */
+      readonly: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.steps = [];
+    this.current = 0;
+    this.reached = 0;
+    this.freeNavigation = false;
+    this.vertical = false;
+    this.readonly = false;
+  }
+
+  isReached(index) {
+    return this.freeNavigation || index <= this.reached;
+  }
+
+  render() {
+    return this.vertical ? this.renderVertical() : this.renderHorizontal();
+  }
+
+  renderHorizontal() {
+    return html`
+      <div class="horizontal" role="list" @dile-step-click=${this.onStepClick}>
+        <div class="line-bg"></div>
+        ${this.steps.map((step, index) => html`
+          <div class="h-step ${index === this.current ? 'active' : ''}" role="listitem" aria-current=${index === this.current ? 'step' : 'false'}>
+            ${this.stepTemplate(step, index)}
+            <span class="h-label">${step}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  renderVertical() {
+    return html`
+      <div class="vertical" role="list" @dile-step-click=${this.onStepClick}>
+        ${this.steps.map((step, index) => html`
+          <div class="v-step ${index === this.current ? 'active' : ''}" role="listitem" aria-current=${index === this.current ? 'step' : 'false'}>
+            <div class="v-track">
+              ${this.stepTemplate(step, index)}
+              ${index < this.steps.length - 1
+                ? html`<div class="connector"></div>`
+                : ''}
+            </div>
+            <span class="v-label">${step}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  stepTemplate(step, index) {
+    return html`
+      <dile-step
+        ?active=${index === this.current}
+        ?reached=${this.isReached(index)}
+        ?readonly=${this.readonly}
+        label="${step}"
+        index="${index}"
+      ></dile-step>
+    `;
+  }
+
+  onStepClick(e) {
+    e.stopPropagation();
+    if (this.readonly) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('dile-steps-select', {
+      bubbles: true,
+      composed: true,
+      detail: { index: e.detail.index, label: e.detail.label }
+    }));
+  }
+}

package/components/steps/step.js

@@ -0,0 +1,5 @@
+import { DileStep } from './src/DileStep.js';
+
+if (!customElements.get('dile-step')) {
+  customElements.define('dile-step', DileStep);
+}

package/components/steps/steps.js

@@ -0,0 +1,5 @@
+import { DileSteps } from './src/DileSteps.js';
+
+if (!customElements.get('dile-steps')) {
+  customElements.define('dile-steps', DileSteps);
+}

package/components/steps/steps.spec.js

@@ -0,0 +1,84 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './steps.js';
+
+describe('dile-steps', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSteps(attributes = '') {
+    document.body.innerHTML = `<dile-steps ${attributes}></dile-steps>`;
+    const el = document.body.querySelector('dile-steps');
+    el.steps = ['Customer', 'Products', 'Review'];
+    await el.updateComplete;
+    return el;
+  }
+
+  function bubbles(el) {
+    return [...el.shadowRoot.querySelectorAll('dile-step')];
+  }
+
+  it('renders one step bubble and label per step', async () => {
+    const el = await renderSteps();
+
+    expect(bubbles(el)).toHaveLength(3);
+    const labels = [...el.shadowRoot.querySelectorAll('.h-label')].map(label => label.textContent);
+    expect(labels).toEqual(['Customer', 'Products', 'Review']);
+  });
+
+  it('marks the current step as active and with aria-current', async () => {
+    const el = await renderSteps('current="1" reached="1"');
+
+    expect(bubbles(el).map(step => step.active)).toEqual([false, true, false]);
+    const items = [...el.shadowRoot.querySelectorAll('[role="listitem"]')];
+    expect(items[1].getAttribute('aria-current')).toBe('step');
+    expect(items[0].getAttribute('aria-current')).toBe('false');
+  });
+
+  it('only enables the steps already reached', async () => {
+    const el = await renderSteps('current="0" reached="1"');
+    await Promise.all(bubbles(el).map(step => step.updateComplete));
+
+    const buttons = bubbles(el).map(step => step.shadowRoot.querySelector('button'));
+    expect(buttons.map(button => button.disabled)).toEqual([false, false, true]);
+  });
+
+  it('enables every step with freeNavigation', async () => {
+    const el = await renderSteps('freeNavigation');
+    await Promise.all(bubbles(el).map(step => step.updateComplete));
+
+    const buttons = bubbles(el).map(step => step.shadowRoot.querySelector('button'));
+    expect(buttons.every(button => !button.disabled)).toBe(true);
+  });
+
+  it('dispatches dile-steps-select when a reached step is clicked', async () => {
+    const el = await renderSteps('reached="2"');
+    await Promise.all(bubbles(el).map(step => step.updateComplete));
+    let detail;
+    let innerClickEscaped = false;
+    el.addEventListener('dile-steps-select', e => { detail = e.detail; });
+    document.body.addEventListener('dile-step-click', () => { innerClickEscaped = true; });
+
+    bubbles(el)[2].shadowRoot.querySelector('button').click();
+
+    expect(detail).toEqual({ index: 2, label: 'Review' });
+    expect(innerClickEscaped).toBe(false);
+  });
+
+  it('renders the bubbles without buttons in readonly mode', async () => {
+    const el = await renderSteps('readonly reached="2"');
+    await Promise.all(bubbles(el).map(step => step.updateComplete));
+
+    bubbles(el).forEach(step => {
+      expect(step.shadowRoot.querySelector('button')).toBeNull();
+      expect(step.shadowRoot.querySelector('.step').textContent).toBe(String(step.index + 1));
+    });
+  });
+
+  it('renders the vertical layout', async () => {
+    const el = await renderSteps('vertical');
+
+    expect(el.shadowRoot.querySelector('.vertical')).toBeTruthy();
+    expect(el.shadowRoot.querySelectorAll('.connector')).toHaveLength(2);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eb8d274006be88ab2b44ed574f5c2829f27a2ec3"
+  "gitHead": "1b065736666cc26f8afc1106ec7ffc98feaec60e"
 }