@dropi/ui-components 1.0.0

package/src/components-source/dropi-steps/dropi-steps.component.spec.ts

@@ -0,0 +1,228 @@
+import { beforeEach, describe, expect, it } from '@jest/globals';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiStepsComponent } from './dropi-steps.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('DropiStepsComponent', () => {
+  let component: DropiStepsComponent;
+  let fixture: ComponentFixture<DropiStepsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiStepsComponent, TranslateModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiStepsComponent);
+    component = fixture.componentInstance;
+    component.stepLabels = []; // Initialize to avoid undefined errors
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.stepsCount).toBe(3);
+      expect(component.showNumberOfStep).toBe(true);
+      expect(component.currentStep).toBe(0);
+      expect(component.state).toBe('pending');
+    });
+
+    it('should create steps on init', () => {
+      const spy = jest.spyOn(component, 'createSteps');
+      component.ngOnInit();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept custom stepsCount', () => {
+      component.stepsCount = 5;
+      expect(component.stepsCount).toBe(5);
+    });
+
+    it('should accept showNumberOfStep flag', () => {
+      component.showNumberOfStep = false;
+      expect(component.showNumberOfStep).toBe(false);
+    });
+
+    it('should accept currentStep', () => {
+      component.currentStep = 2;
+      expect(component.currentStep).toBe(2);
+    });
+
+    it('should accept state', () => {
+      component.state = 'completed';
+      expect(component.state).toBe('completed');
+    });
+
+    it('should accept stepLabels', () => {
+      const labels = [
+        { title: 'Step 1', description: 'Description 1' },
+        { title: 'Step 2', description: 'Description 2' },
+      ];
+      component.stepLabels = labels;
+      expect(component.stepLabels).toEqual(labels);
+    });
+  });
+
+  describe('Creación de steps', () => {
+    it('should create steps based on stepsCount when stepLabels is empty', () => {
+      component.stepLabels = [];
+      component.stepsCount = 4;
+      component.createSteps();
+
+      expect(component.steps.length).toBe(4);
+    });
+
+    it('should use stepLabels when provided', () => {
+      const labels = [
+        { title: 'Personal', description: 'Personal information' },
+        { title: 'Payment', description: 'Payment details' },
+        { title: 'Confirm', description: 'Confirmation' },
+      ];
+      component.stepLabels = labels;
+      component.createSteps();
+
+      expect(component.steps).toEqual(labels);
+      expect(component.steps.length).toBe(3);
+    });
+
+    it('should override stepsCount when stepLabels is provided', () => {
+      component.stepsCount = 5;
+      component.stepLabels = [{ description: 'Step 1' }, { description: 'Step 2' }];
+      component.createSteps();
+
+      expect(component.steps.length).toBe(2);
+    });
+  });
+
+  describe('Estados de los steps', () => {
+    it('should return completed for steps before current step', () => {
+      component.currentStep = 3;
+      component.state = 'focus';
+
+      expect(component.getStepState(0)).toBe('completed');
+      expect(component.getStepState(1)).toBe('completed');
+    });
+
+    it('should return current state for current step', () => {
+      component.currentStep = 2;
+      component.state = 'focus';
+
+      expect(component.getStepState(1)).toBe('focus');
+    });
+
+    it('should return pending for steps after current step', () => {
+      component.currentStep = 2;
+      component.state = 'focus';
+
+      expect(component.getStepState(2)).toBe('pending');
+      expect(component.getStepState(3)).toBe('pending');
+    });
+
+    it('should handle all state types correctly', () => {
+      component.currentStep = 2;
+
+      component.state = 'pending';
+      expect(component.getStepState(1)).toBe('pending');
+
+      component.state = 'focus';
+      expect(component.getStepState(1)).toBe('focus');
+
+      component.state = 'completed';
+      expect(component.getStepState(1)).toBe('completed');
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should recreate steps on changes after first change', () => {
+      const spy = jest.spyOn(component, 'createSteps');
+
+      component.ngOnChanges({
+        stepsCount: {
+          currentValue: 5,
+          previousValue: 3,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should not recreate steps on first change', () => {
+      const spy = jest.spyOn(component, 'createSteps');
+
+      component.ngOnChanges({
+        stepsCount: {
+          currentValue: 3,
+          previousValue: undefined,
+          firstChange: true,
+          isFirstChange: () => true,
+        },
+      });
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with custom configuration', () => {
+      component.stepsCount = 4;
+      component.currentStep = 2;
+      component.state = 'focus';
+      component.showNumberOfStep = true;
+      component.stepLabels = [];
+
+      component.createSteps();
+
+      expect(component.steps.length).toBe(4);
+      expect(component.getStepState(0)).toBe('completed');
+      expect(component.getStepState(1)).toBe('focus');
+      expect(component.getStepState(2)).toBe('pending');
+    });
+
+    it('should handle complete workflow with labels', () => {
+      const labels = [
+        { title: 'Step 1', description: 'First step' },
+        { title: 'Step 2', description: 'Second step' },
+        { title: 'Step 3', description: 'Third step' },
+      ];
+
+      component.stepLabels = labels;
+      component.currentStep = 2;
+      component.state = 'focus';
+      component.createSteps();
+
+      expect(component.steps[0].title).toBe('Step 1');
+      expect(component.getStepState(0)).toBe('completed');
+      expect(component.getStepState(1)).toBe('focus');
+      expect(component.getStepState(2)).toBe('pending');
+    });
+
+    it('should handle step progression', () => {
+      component.stepLabels = [];
+      component.stepsCount = 4;
+      component.createSteps();
+
+      // Start
+      component.currentStep = 1;
+      component.state = 'focus';
+      expect(component.getStepState(0)).toBe('focus');
+
+      // Progress
+      component.currentStep = 2;
+      expect(component.getStepState(0)).toBe('completed');
+      expect(component.getStepState(1)).toBe('focus');
+
+      // Complete
+      component.currentStep = 4;
+      component.state = 'completed';
+      expect(component.getStepState(2)).toBe('completed');
+      expect(component.getStepState(3)).toBe('completed');
+    });
+  });
+});

package/src/components-source/dropi-steps/dropi-steps.component.stories.ts

@@ -0,0 +1,231 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { DropiStepsComponent } from './dropi-steps.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+/**
+ * # Steps Component
+ *
+ * A stepper component for displaying progress through a multi-step process.
+ * Perfect for checkout flows, onboarding wizards, or any sequential workflow.
+ *
+ * ## Features
+ * - **Numbered steps**: Optional step numbers inside circles
+ * - **Labels**: Optional descriptive labels below each step
+ * - **States**: pending, focus, completed for visual feedback
+ * - **Flexible count**: Dynamic number of steps
+ *
+ * ## Usage
+ * ```html
+ * <app-dropi-steps
+ *   [stepsCount]="3"
+ *   [currentStep]="2"
+ *   [showNumberOfStep]="true"
+ *   state="focus">
+ * </app-dropi-steps>
+ * ```
+ */
+const meta: Meta<DropiStepsComponent> = {
+  title: 'UI Dropi/Steps',
+  component: DropiStepsComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A stepper component for displaying progress through a multi-step process.
+Perfect for checkout flows, onboarding wizards, or any sequential workflow.
+
+### Key Features
+- **Numbered steps**: Optional step numbers inside circles
+- **Labels**: Optional descriptive labels below each step
+- **States**: pending, focus, completed for visual feedback
+- **Flexible count**: Dynamic number of steps
+        `,
+      },
+    },
+  },
+  argTypes: {
+    stepsCount: {
+      description: 'Total number of steps (used when stepLabels is empty)',
+      control: { type: 'number', min: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '3' },
+      },
+    },
+    stepLabels: {
+      description: 'Array of label objects for each step. Overrides stepsCount when provided.',
+      control: { type: 'object' },
+      table: {
+        type: { summary: 'StepLabel[]' },
+      },
+    },
+    currentStep: {
+      description: 'Currently active step (1-indexed)',
+      control: { type: 'number', min: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+      },
+    },
+    showNumberOfStep: {
+      description: 'Whether to show step numbers inside the circles',
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    state: {
+      description: 'Visual state of the current step',
+      options: ['pending', 'focus', 'completed'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'pending' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiStepsComponent>;
+
+/** Default stepper with 3 steps */
+export const Default: Story = {
+  args: {
+    stepsCount: 3,
+    currentStep: 1,
+    showNumberOfStep: true,
+    stepLabels: [],
+    state: 'pending',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=2-383&p=f&m=dev',
+    },
+    docs: {
+      description: {
+        story: 'Default stepper showing numbered steps. First step is active.',
+      },
+    },
+  },
+};
+
+/** Stepper with descriptive labels */
+export const WithLabels: Story = {
+  name: 'With Labels',
+  args: {
+    stepLabels: [
+      { description: 'Cart' },
+      { description: 'Payment' },
+      { description: 'Confirmation' },
+    ],
+    currentStep: 2,
+    showNumberOfStep: true,
+    state: 'focus',
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        story:
+          'Stepper with descriptive labels below each step. When stepLabels is provided, stepsCount is ignored.',
+      },
+    },
+  },
+};
+
+/** Stepper with 5 steps */
+export const FiveSteps: Story = {
+  name: 'With 5 Steps',
+  args: {
+    stepsCount: 5,
+    currentStep: 3,
+    showNumberOfStep: true,
+    stepLabels: [],
+    state: 'focus',
+  },
+};
+
+export const HideNumbers: Story = {
+  name: 'Hide numbers',
+  args: {
+    stepsCount: 4,
+    currentStep: 2,
+    showNumberOfStep: false,
+    stepLabels: [],
+    state: 'focus',
+  },
+};
+
+export const CompletedFlow: Story = {
+  name: 'Completed flow',
+  args: {
+    stepLabels: [
+      { description: 'Inicio' },
+      { description: 'Detalles' },
+      { description: 'Resumen' },
+      { description: 'Listo' },
+    ],
+    currentStep: 4,
+    showNumberOfStep: true,
+    state: 'completed',
+  },
+};
+
+export const CurrentStepInZero: Story = {
+  name: 'Current step in 0',
+  args: {
+    stepLabels: [{ description: 'A' }, { description: 'B' }, { description: 'C' }],
+    currentStep: 0,
+    showNumberOfStep: true,
+    state: 'pending',
+  },
+};
+
+export const WithLargeLabels: Story = {
+  name: 'With large labels',
+  args: {
+    stepLabels: [
+      { description: 'Super carrito de compras' },
+      { description: 'Pago en pasarela' },
+      { description: 'Confirmación final del pedido' },
+    ],
+    currentStep: 2,
+    showNumberOfStep: true,
+    state: 'focus',
+  },
+};
+
+export const WithTitle: Story = {
+  name: 'With title',
+  args: {
+    stepLabels: [
+      {
+        title: 'Apply for',
+        description:
+          "Click the 'Apply' button, fill out the form, and we will contact you to continue the process.",
+      },
+      {
+        title: 'Sign the agreement',
+        description: "Dropi will send you a 'Commercial Agreement and Conditions' to sign.",
+      },
+      {
+        title: 'Initial evaluation',
+        description:
+          'For 30 days, Dropi will evaluate your performance according to the established criteria.',
+      },
+    ],
+    currentStep: 3,
+    showNumberOfStep: true,
+    state: 'completed',
+  },
+};

package/src/components-source/dropi-steps/dropi-steps.component.ts

@@ -0,0 +1,98 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+type StepState = 'pending' | 'focus' | 'completed';
+
+/**
+ * Componente Steps de Dropi para mostrar pasos con diferentes estados
+ */
+@Component({
+  selector: 'dropi-steps',
+  standalone: true,
+  imports: [CommonModule, TranslateModule],
+  templateUrl: './dropi-steps.component.html',
+  styleUrls: ['./dropi-steps.component.scss'],
+})
+export class DropiStepsComponent implements OnInit, OnChanges {
+  /**
+   * Cantidad de pasos que se van a mostrar (solo se usa si stepLabels está vacío)
+   * @default 3
+   * @type {number}
+   */
+  @Input() stepsCount: number = 3;
+
+  /**
+   * Permite mostrar el número del step dentro del círculo
+   * @default true
+   * @type {boolean}
+   */
+  @Input() showNumberOfStep: boolean = true;
+
+  /**
+   * Step en el que se encuentra el componente
+   * @default 0
+   * @type {number}
+   */
+  @Input() currentStep: number = 0;
+
+  /**
+   * Etiquetas de cada paso. Si se provee, reemplaza stepsCount.
+   * @type {{title:string, description:string}[]}
+   * @default []
+   */
+  @Input() stepLabels: { title?: string; description?: string }[] = [];
+
+  /**
+   * Estado visual del paso actual (solo afecta al paso `currentStep`).
+   * @default 'pending'
+   * @type {StepState}
+   */
+  @Input() state: StepState = 'pending';
+
+  /**
+   * Los pasos que se van a mostrar
+   * @type {{title:string, description:string}[]}
+   */
+  steps: { title?: string; description?: string }[] = [];
+
+  ngOnInit() {
+    this.createSteps();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!changes) {
+      return;
+    }
+
+    const shouldRecreate = Object.values(changes).some((change) => !change.firstChange);
+
+    if (shouldRecreate) {
+      this.createSteps();
+    }
+  }
+
+  /**
+   * Crea los pasos que se van a mostrar
+   */
+  createSteps() {
+    if (Array.isArray(this.stepLabels) && this.stepLabels.length > 0) {
+      this.steps = [...this.stepLabels];
+      return;
+    }
+
+    this.steps = Array.from({ length: this.stepsCount }, () => ({ description: '' }));
+  }
+
+  /**
+   * Devuelve el estado visual del paso en el índice dado
+   * @param index El índice del paso
+   * @returns El estado visual del paso
+   */
+  getStepState(index: number): StepState {
+    if (index < this.currentStep - 1) return 'completed';
+    else if (index === this.currentStep - 1) return this.state;
+
+    return 'pending';
+  }
+}

package/src/components-source/dropi-switch/dropi-switch.component.html

@@ -0,0 +1,4 @@
+<label class="toggle-switch">
+  <input type="checkbox" [checked]="isChecked" (change)="onToggleChange($event)" >
+  <span class="slider"></span>
+</label>

package/src/components-source/dropi-switch/dropi-switch.component.scss

@@ -0,0 +1,50 @@
+/* Contenedor del toggle */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 21px;
+  margin-bottom: 0;
+}
+
+/* Oculta el checkbox real */
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Estilo de la barra del toggle */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--Gray-Gray-200);
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+/* El "círculo" del toggle */
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 17px;
+  width: 17px;
+  left: 3px;
+  bottom: 2px;
+  background-color: var(--Neutral-White);
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+/* Cuando el checkbox está marcado */
+input:checked + .slider {
+  background-color: var(--Primary-Primary-500);
+}
+
+input:checked + .slider:before {
+  transform: translateX(17px);
+}