@dropi/ui-components 1.0.0

package/src/components-source/simple-stepper/simple-stepper.component.scss

@@ -0,0 +1,117 @@
+.stepper-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  padding-left: 3.5em;
+  padding-right: 3.5em;
+  margin-bottom: 2.2em;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.circle {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #d1d5db;
+  border-radius: 50%;
+  background-color: white;
+
+  color: var(--Gray-200, #c3c9d9);
+
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  font-size: 12px;
+  justify-content: center;
+  transition:
+    background-color 0.5s,
+    border-color 0.5s;
+
+  &.active {
+    border-color: var(--stepper-color);
+    background-color: #fff;
+    // color: #F49A3D;
+    color: #fff;
+    // background-color: #FFF;
+    background-color: #f49a3d;
+    color: #f49a3d;
+    border-color: #f49a3d;
+    background-color: #fff;
+  }
+
+  &.active3 {
+    color: #fff;
+    border-color: #f49a3d;
+    background-color: #f49a3d;
+  }
+
+  &.active2 {
+    color: #fff;
+    border-color: #f49a3d;
+    background-color: #f49a3d;
+  }
+
+  .internal-circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: white;
+    transition: background-color 0.5s;
+
+    &.active {
+      background-color: #f49a3d;
+    }
+  }
+}
+
+.line {
+  flex-grow: 2;
+  height: 4px;
+  background-color: #d1d5db;
+  transition: background-color 0.5s;
+
+  &.active {
+    background-color: var(--stepper-color);
+  }
+}
+
+.circle .point-label {
+  display: block;
+  width: 100px;
+  text-align: center;
+  margin-top: 6px;
+  position: absolute;
+  top: 15px; /* distancia desde el borde superior del círculo */
+  // left: 50%;
+  // transform: translateX(-50%);
+  // font-size: 14px;
+  // color: #4B5563;
+}
+
+.internal-number {
+  padding: 0.8em;
+}
+
+.circle .point-label {
+  display: block;
+  width: 100px;
+  text-align: center;
+  margin-top: 6px;
+  position: absolute;
+  top: 15px; /* distancia desde el borde superior del círculo */
+  // left: 50%;
+  // transform: translateX(-50%);
+  // font-size: 14px;
+  // color: #4B5563;
+}
+
+.internal-number {
+  padding: 0.8em;
+}

package/src/components-source/simple-stepper/simple-stepper.component.spec.ts

@@ -0,0 +1,348 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { SimpleStepperComponent } from './simple-stepper.component';
+import { FlowMode } from '@app/utilities/enums/ui/simple-stepper.enum';
+
+describe('SimpleStepperComponent', () => {
+  let component: SimpleStepperComponent;
+  let fixture: ComponentFixture<SimpleStepperComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SimpleStepperComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SimpleStepperComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    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.typeStep).toBe('point');
+      expect(component.currentStep).toBe(0);
+      expect(component.labelStepper).toEqual([]);
+      expect(component.flowMode).toBe(FlowMode.Simultaneous);
+      expect(component.white_brand).toBe('dropi');
+    });
+
+    it('should initialize steps array on ngOnInit', () => {
+      component.stepsCount = 4;
+      component.ngOnInit();
+      expect(component.steps.length).toBe(3); // stepsCount - 1
+    });
+
+    it('should set CSS variable for stepper color on ngOnInit', () => {
+      const setPropertySpy = jest.spyOn(document.documentElement.style, 'setProperty');
+
+      component.white_brand = 'dropi';
+      component.ngOnInit();
+
+      expect(setPropertySpy).toHaveBeenCalledWith('--stepper-color', '#f49a3d');
+    });
+
+    it('should set different color for non-dropi brand', () => {
+      const setPropertySpy = jest.spyOn(document.documentElement.style, 'setProperty');
+
+      component.white_brand = 'other';
+      component.ngOnInit();
+
+      expect(setPropertySpy).toHaveBeenCalledWith(
+        '--stepper-color',
+        'var(--Secondary-Secondary-500)',
+      );
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept stepsCount input', () => {
+      component.stepsCount = 5;
+      expect(component.stepsCount).toBe(5);
+    });
+
+    it('should accept typeStep input', () => {
+      component.typeStep = 'number';
+      expect(component.typeStep).toBe('number');
+    });
+
+    it('should accept currentStep input', () => {
+      component.currentStep = 2;
+      expect(component.currentStep).toBe(2);
+    });
+
+    it('should accept labelStepper input', () => {
+      const labels = ['Step 1', 'Step 2', 'Step 3'];
+      component.labelStepper = labels;
+      expect(component.labelStepper).toEqual(labels);
+    });
+
+    it('should accept flowMode input', () => {
+      component.flowMode = FlowMode.Sequential;
+      expect(component.flowMode).toBe(FlowMode.Sequential);
+    });
+
+    it('should accept white_brand input', () => {
+      component.white_brand = 'custom';
+      expect(component.white_brand).toBe('custom');
+    });
+  });
+
+  describe('Lógica de activación - Modo Simultáneo', () => {
+    beforeEach(() => {
+      component.flowMode = FlowMode.Simultaneous;
+      component.stepsCount = 4;
+      component.ngOnInit();
+    });
+
+    it('should return correct line active state in simultaneous mode', () => {
+      // En modo simultáneo: this.currentStep > stepIndex + 1
+      component.currentStep = 1;
+      expect(component.isLineActive(0)).toBe(false); // 1 > 0 + 1 = false
+
+      component.currentStep = 2;
+      expect(component.isLineActive(0)).toBe(true); // 2 > 0 + 1 = true
+      expect(component.isLineActive(1)).toBe(false); // 2 > 1 + 1 = false
+
+      component.currentStep = 3;
+      expect(component.isLineActive(0)).toBe(true); // 3 > 0 + 1 = true
+      expect(component.isLineActive(1)).toBe(true); // 3 > 1 + 1 = true
+    });
+
+    it('should return correct circle active state in simultaneous mode', () => {
+      // En modo simultáneo: this.currentStep > stepIndex + 1
+      component.currentStep = 1;
+      expect(component.isCircleActive(0)).toBe(false); // 1 > 0 + 1 = false
+
+      component.currentStep = 2;
+      expect(component.isCircleActive(0)).toBe(true); // 2 > 0 + 1 = true
+      expect(component.isCircleActive(1)).toBe(false); // 2 > 1 + 1 = false
+
+      component.currentStep = 3;
+      expect(component.isCircleActive(0)).toBe(true); // 3 > 0 + 1 = true
+      expect(component.isCircleActive(1)).toBe(true); // 3 > 1 + 1 = true
+    });
+  });
+
+  describe('Lógica de activación - Modo Secuencial', () => {
+    beforeEach(() => {
+      component.flowMode = FlowMode.Sequential;
+      component.stepsCount = 4;
+      component.ngOnInit();
+    });
+
+    it('should return correct line active state in sequential mode', () => {
+      component.currentStep = 3;
+
+      expect(component.isLineActive(0)).toBe(true); // 3 > 0 * 2 + 1 = true
+      expect(component.isLineActive(1)).toBe(false); // 3 > 1 * 2 + 1 = false
+      expect(component.isLineActive(2)).toBe(false); // 3 > 2 * 2 + 1 = false
+    });
+
+    it('should return correct circle active state in sequential mode', () => {
+      component.currentStep = 4;
+
+      expect(component.isCircleActive(0)).toBe(true); // 4 > 0 * 2 + 2 = true
+      expect(component.isCircleActive(1)).toBe(false); // 4 > 1 * 2 + 2 = false
+      expect(component.isCircleActive(2)).toBe(false); // 4 > 2 * 2 + 2 = false
+    });
+  });
+
+  describe('Secondary color getter', () => {
+    it('should return dropi color for dropi brand', () => {
+      component.white_brand = 'dropi';
+      expect(component.secondaryColor).toBe('#f49a3d');
+    });
+
+    it('should return dropi color for DROPI brand (case insensitive)', () => {
+      component.white_brand = 'DROPI';
+      expect(component.secondaryColor).toBe('#f49a3d');
+    });
+
+    it('should return default color for other brands', () => {
+      component.white_brand = 'other';
+      expect(component.secondaryColor).toBe('var(--Secondary-Secondary-500, #008DBF)');
+    });
+
+    it('should handle null/undefined brand', () => {
+      component.white_brand = null as any;
+      expect(component.secondaryColor).toBe('var(--Secondary-Secondary-500, #008DBF)');
+    });
+  });
+
+  describe('Renderizado del template', () => {
+    it('should render stepper container', () => {
+      const container = debugElement.query(By.css('.stepper-container'));
+      expect(container).toBeTruthy();
+    });
+
+    it('should render first circle', () => {
+      const firstCircle = debugElement.query(By.css('.circle'));
+      expect(firstCircle).toBeTruthy();
+    });
+
+    it('should render correct number of steps', () => {
+      component.stepsCount = 4;
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const steps = debugElement.queryAll(By.css('.step'));
+      expect(steps.length).toBe(3); // stepsCount - 1 = 3
+    });
+
+    it('should show point type when typeStep is point', () => {
+      component.typeStep = 'point';
+      fixture.detectChanges();
+
+      const internalCircles = debugElement.queryAll(By.css('.internal-circle'));
+      const internalNumbers = debugElement.queryAll(By.css('.internal-number'));
+
+      expect(internalCircles.length).toBeGreaterThan(0);
+      expect(internalNumbers.length).toBe(0);
+    });
+
+    it('should show number type when typeStep is number', () => {
+      component.typeStep = 'number';
+      fixture.detectChanges();
+
+      const internalCircles = debugElement.queryAll(By.css('.internal-circle'));
+      const internalNumbers = debugElement.queryAll(By.css('.internal-number'));
+
+      expect(internalCircles.length).toBe(0);
+      expect(internalNumbers.length).toBeGreaterThan(0);
+    });
+
+    it('should display labels when provided', () => {
+      component.labelStepper = ['First', 'Second', 'Third'];
+      fixture.detectChanges();
+
+      const labels = debugElement.queryAll(By.css('.point-label'));
+      expect(labels[0].nativeElement.textContent.trim()).toBe('First');
+    });
+  });
+
+  describe('Estados activos', () => {
+    it('should apply active classes when currentStep is advanced', () => {
+      component.currentStep = 2;
+      component.typeStep = 'point';
+      fixture.detectChanges();
+
+      const firstCircle = debugElement.query(By.css('.circle'));
+      expect(firstCircle.nativeElement.classList.contains('active2')).toBe(true);
+    });
+
+    it('should apply active classes to lines when appropriate', () => {
+      component.currentStep = 3;
+      component.flowMode = FlowMode.Simultaneous;
+      fixture.detectChanges();
+
+      const lines = debugElement.queryAll(By.css('.line'));
+      // Verificar que al menos algunas líneas están activas
+      expect(lines.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle zero stepsCount', () => {
+      component.stepsCount = 1; // mínimo para evitar array negativo
+      component.ngOnInit();
+      expect(component.steps.length).toBe(0); // 1 - 1 = 0
+    });
+
+    it('should handle negative currentStep', () => {
+      component.currentStep = -1;
+      expect(component.isLineActive(0)).toBe(false);
+      expect(component.isCircleActive(0)).toBe(false);
+    });
+
+    it('should handle currentStep beyond stepsCount', () => {
+      component.currentStep = 10;
+      component.stepsCount = 3;
+      component.ngOnInit();
+
+      expect(component.isLineActive(0)).toBe(true);
+      expect(component.isCircleActive(0)).toBe(true);
+    });
+
+    it('should handle empty labelStepper array', () => {
+      component.labelStepper = [];
+      fixture.detectChanges();
+
+      expect(() => fixture.detectChanges()).not.toThrow();
+    });
+
+    it('should handle undefined/null white_brand', () => {
+      component.white_brand = undefined as any;
+      expect(() => component.ngOnInit()).not.toThrow();
+      expect(component.secondaryColor).toBe('var(--Secondary-Secondary-500, #008DBF)');
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with complete stepper configuration', () => {
+      component.stepsCount = 4;
+      component.typeStep = 'number';
+      component.currentStep = 2;
+      component.labelStepper = ['Start', 'Middle', 'End', 'Finish'];
+      component.flowMode = FlowMode.Simultaneous;
+      component.white_brand = 'dropi';
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      expect(component.steps.length).toBe(3);
+      expect(component.secondaryColor).toBe('#f49a3d');
+      expect(component.isLineActive(0)).toBe(true); // 2 > 0 + 1 = true
+      expect(component.isCircleActive(0)).toBe(true); // 2 > 0 + 1 = true
+    });
+
+    it('should handle dynamic step changes', () => {
+      // Initial state
+      component.currentStep = 1;
+      fixture.detectChanges();
+
+      let firstState = component.isLineActive(0);
+
+      // Change step
+      component.currentStep = 3;
+      fixture.detectChanges();
+
+      let secondState = component.isLineActive(0);
+
+      // Should be different
+      expect(firstState).not.toBe(secondState);
+    });
+
+    it('should handle mode switching', () => {
+      component.currentStep = 5; // valor más alto para ver diferencias
+
+      // Test simultaneous mode
+      component.flowMode = FlowMode.Simultaneous;
+      let simultaneousResult = component.isLineActive(1); // stepIndex = 1
+
+      // Test sequential mode
+      component.flowMode = FlowMode.Sequential;
+      let sequentialResult = component.isLineActive(1); // stepIndex = 1
+
+      // En simultáneo: 5 > 1 + 1 = true
+      // En secuencial: 5 > 1 * 2 + 1 = true (5 > 3)
+      // Necesitamos un caso donde sean diferentes
+      component.currentStep = 2;
+      component.flowMode = FlowMode.Simultaneous;
+      simultaneousResult = component.isLineActive(1); // 2 > 1 + 1 = false
+
+      component.flowMode = FlowMode.Sequential;
+      sequentialResult = component.isLineActive(0); // 2 > 0 * 2 + 1 = true (2 > 1)
+
+      expect(simultaneousResult).toBe(false);
+      expect(sequentialResult).toBe(true);
+    });
+  });
+});

package/src/components-source/simple-stepper/simple-stepper.component.stories.ts

@@ -0,0 +1,104 @@
+/**
+ * @fileoverview SimpleStepper component stories for Storybook
+ * @description A simple progress stepper component with multiple flow modes
+ */
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { SimpleStepperComponent } from './simple-stepper.component';
+import { FlowMode } from '@app/utilities/enums/ui/simple-stepper.enum';
+
+const meta: Meta<SimpleStepperComponent> = {
+  title: 'UI Dropi/Simple Stepper',
+  component: SimpleStepperComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+# Simple Stepper Component
+
+A minimal progress stepper for tracking multi-step processes.
+
+## Key Features
+- **Flow modes**: Simultaneous and Sequential animations
+- **Configurable steps**: Dynamic step count
+- **Current step tracking**: Visual indication of progress
+        `,
+      },
+    },
+  },
+  argTypes: {
+    currentStep: {
+      description: 'Current step of the stepper',
+      control: 'number',
+      defaultValue: 0,
+      table: { category: 'State' },
+    },
+    flowMode: {
+      description: `Stepper advance mode.
+      Simultaneous: Advances line and circle together.
+      Sequential: Advances circle, then line, then circle.`,
+      options: Object.values(FlowMode),
+      mapping: Object.values(FlowMode),
+      control: {
+        type: 'select',
+        labels: Object.keys(FlowMode),
+      },
+      table: { category: 'Behavior' },
+    },
+    stepsCount: {
+      description: 'Total number of steps',
+      control: 'number',
+      defaultValue: 3,
+      table: { category: 'Data' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SimpleStepperComponent>;
+
+/**
+ * Default stepper at initial state
+ */
+export const Default: Story = {
+  args: {
+    currentStep: 0,
+    stepsCount: 3,
+    flowMode: FlowMode.Simultaneous,
+  },
+};
+
+/**
+ * Stepper with simultaneous animation flow
+ */
+export const SimultaneousFlowMode: Story = {
+  args: {
+    currentStep: 2,
+    stepsCount: 3,
+    flowMode: FlowMode.Simultaneous,
+  },
+};
+
+/**
+ * Stepper with sequential animation flow
+ */
+export const SequentialFlowMode: Story = {
+  args: {
+    currentStep: 2,
+    stepsCount: 3,
+    flowMode: FlowMode.Sequential,
+  },
+};
+
+/**
+ * Stepper with more steps
+ */
+export const StepCount: Story = {
+  args: {
+    currentStep: 2,
+    stepsCount: 5,
+    flowMode: FlowMode.Sequential,
+  },
+};

package/src/components-source/simple-stepper/simple-stepper.component.ts

@@ -0,0 +1,69 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlowMode } from '@app/utilities/enums/ui/simple-stepper.enum';
+
+/**
+ * Componente que representa un stepper simple.
+ * Permite avanzar en modo secuencial o simultáneo y muestra visualmente los pasos activos.
+ */
+@Component({
+  selector: 'app-simple-stepper',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './simple-stepper.component.html',
+  styleUrls: ['./simple-stepper.component.scss'],
+})
+export class SimpleStepperComponent implements OnInit {
+  /**
+   * Número total de pasos del stepper.
+   * @default 3
+   */
+  @Input() stepsCount: number = 3;
+
+  /**
+   * Paso actual del stepper (comienza en 0).
+   */
+  @Input() typeStep: string = 'point'; // 'number'  | 'point'
+  @Input() currentStep: number = 0;
+  @Input() labelStepper: Array<string> = [];
+
+  /**
+   * Modo de avance del stepper: simultáneo o secuencial.
+   * @default FlowMode.simultaneous
+   */
+  @Input() flowMode: FlowMode = FlowMode.Simultaneous;
+
+  /**
+   * white_brand: modificará el color del stepper en caso de se envie un valor en white_brand distinto a dropi
+   * @default "dropi"
+   */
+  @Input() white_brand: string = 'dropi';
+
+  steps: number[] = [];
+
+  ngOnInit(): void {
+    this.steps = Array(this.stepsCount - 1).fill(0);
+
+    const color =
+      this.white_brand?.toLowerCase() === 'dropi' ? '#f49a3d' : 'var(--Secondary-Secondary-500)';
+    document.documentElement.style.setProperty('--stepper-color', color);
+  }
+
+  isLineActive(index: number): boolean {
+    return this.flowMode === FlowMode.Simultaneous
+      ? this.currentStep > index + 1
+      : this.currentStep > index * 2 + 1;
+  }
+
+  isCircleActive(index: number): boolean {
+    return this.flowMode === FlowMode.Simultaneous
+      ? this.currentStep > index + 1
+      : this.currentStep > index * 2 + 2;
+  }
+
+  get secondaryColor(): string {
+    return this.white_brand?.toLowerCase() === 'dropi'
+      ? '#f49a3d'
+      : 'var(--Secondary-Secondary-500, #008DBF)';
+  }
+}