@dropi/ui-components 1.0.0

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

@@ -0,0 +1,403 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiAvatarsComponent } from './dropi-avatars.component';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('DropiAvatarsComponent', () => {
+  let component: DropiAvatarsComponent;
+  let fixture: ComponentFixture<DropiAvatarsComponent>;
+  let compiled: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiAvatarsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiAvatarsComponent);
+    component = fixture.componentInstance;
+    compiled = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.alt).toBe('Avatar');
+      expect(component.type).toBe('users');
+      expect(component.initials).toBe('?');
+    });
+
+    it('should initialize without image', () => {
+      expect(component.image).toBeUndefined();
+    });
+  });
+
+  describe('Propiedad: initials', () => {
+    it('should accept and format initials', () => {
+      component.initials = 'jd';
+      expect(component.initials).toBe('JD');
+    });
+
+    it('should convert to uppercase', () => {
+      component.initials = 'ab';
+      expect(component.initials).toBe('AB');
+    });
+
+    it('should limit to 2 characters', () => {
+      component.initials = 'abc';
+      expect(component.initials).toBe('AB');
+    });
+
+    it('should handle single character', () => {
+      component.initials = 'j';
+      expect(component.initials).toBe('J');
+    });
+
+    it('should handle empty string', () => {
+      component.initials = '';
+      expect(component.initials).toBe('?');
+    });
+
+    it('should handle undefined', () => {
+      component.initials = undefined;
+      expect(component.initials).toBe('?');
+    });
+
+    it('should handle null', () => {
+      component.initials = null as any;
+      expect(component.initials).toBe('?');
+    });
+
+    it('should handle numbers', () => {
+      component.initials = '12';
+      expect(component.initials).toBe('12');
+    });
+
+    it('should handle special characters', () => {
+      component.initials = '@#';
+      expect(component.initials).toBe('@#');
+    });
+
+    it('should handle whitespace', () => {
+      component.initials = '  ';
+      expect(component.initials).toBe('  ');
+    });
+  });
+
+  describe('Propiedad: image', () => {
+    it('should accept image URL', () => {
+      component.image = 'https://example.com/avatar.jpg';
+      expect(component.image).toBe('https://example.com/avatar.jpg');
+    });
+
+    it('should accept relative path', () => {
+      component.image = '/assets/avatar.jpg';
+      expect(component.image).toBe('/assets/avatar.jpg');
+    });
+
+    it('should accept empty string', () => {
+      component.image = '';
+      expect(component.image).toBe('');
+    });
+
+    it('should handle undefined', () => {
+      component.image = undefined;
+      expect(component.image).toBeUndefined();
+    });
+  });
+
+  describe('Propiedad: alt', () => {
+    it('should accept custom alt text', () => {
+      component.alt = 'User Avatar';
+      expect(component.alt).toBe('User Avatar');
+    });
+
+    it('should use default alt text', () => {
+      expect(component.alt).toBe('Avatar');
+    });
+
+    it('should accept empty alt text', () => {
+      component.alt = '';
+      expect(component.alt).toBe('');
+    });
+  });
+
+  describe('Propiedad: type', () => {
+    it('should accept users type', () => {
+      component.type = 'users';
+      expect(component.type).toBe('users');
+    });
+
+    it('should accept transport type', () => {
+      component.type = 'transport';
+      expect(component.type).toBe('transport');
+    });
+
+    it('should accept supplier type', () => {
+      component.type = 'supplier';
+      expect(component.type).toBe('supplier');
+    });
+
+    it('should accept payment type', () => {
+      component.type = 'payment';
+      expect(component.type).toBe('payment');
+    });
+
+    it('should accept counter type', () => {
+      component.type = 'counter';
+      expect(component.type).toBe('counter');
+    });
+
+    it('should use users as default type', () => {
+      expect(component.type).toBe('users');
+    });
+  });
+
+  describe('Renderizado con imagen', () => {
+    it('should render image when provided', () => {
+      component.image = 'test-avatar.jpg';
+      component.alt = 'Test Avatar';
+      fixture.detectChanges();
+
+      const img = compiled.querySelector('img');
+      expect(img).toBeTruthy();
+      expect(img?.getAttribute('src')).toBe('test-avatar.jpg');
+      expect(img?.getAttribute('alt')).toBe('Test Avatar');
+    });
+
+    it('should not render initials when image is provided', () => {
+      component.image = 'test-avatar.jpg';
+      component.initials = 'JD';
+      fixture.detectChanges();
+
+      const initialsElement = compiled.querySelector('.avatar-initials');
+      expect(initialsElement).toBeFalsy();
+    });
+  });
+
+  describe('Renderizado con iniciales', () => {
+    it('should render initials when no image', () => {
+      component.image = undefined;
+      component.initials = 'JD';
+      fixture.detectChanges();
+
+      const initialsElement = compiled.textContent;
+      expect(initialsElement).toContain('JD');
+    });
+
+    it('should render default question mark', () => {
+      component.image = undefined;
+      component.initials = undefined;
+      fixture.detectChanges();
+
+      const initialsElement = compiled.textContent;
+      expect(initialsElement).toContain('?');
+    });
+
+    it('should not render img tag when no image', () => {
+      component.image = undefined;
+      fixture.detectChanges();
+
+      const img = compiled.querySelector('img');
+      expect(img).toBeFalsy();
+    });
+  });
+
+  describe('Aplicación de clases CSS por tipo', () => {
+    it('should apply users class', () => {
+      component.type = 'users';
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement;
+      const avatar =
+        compiled.querySelector('.dropi-avatar__initials') ||
+        compiled.querySelector('.dropi-avatar');
+      expect(avatar?.classList.contains('users')).toBeTruthy();
+    });
+
+    it('should apply transport class', () => {
+      component.type = 'transport';
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement;
+      const avatar =
+        compiled.querySelector('.dropi-avatar__initials') ||
+        compiled.querySelector('.dropi-avatar');
+      expect(avatar?.classList.contains('transport')).toBeTruthy();
+    });
+
+    it('should apply supplier class', () => {
+      component.type = 'supplier';
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement;
+      const avatar =
+        compiled.querySelector('.dropi-avatar__initials') ||
+        compiled.querySelector('.dropi-avatar');
+      expect(avatar?.classList.contains('supplier')).toBeTruthy();
+    });
+
+    it('should apply payment class', () => {
+      component.type = 'payment';
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement;
+      const avatar =
+        compiled.querySelector('.dropi-avatar__initials') ||
+        compiled.querySelector('.dropi-avatar');
+      expect(avatar?.classList.contains('payment')).toBeTruthy();
+    });
+
+    it('should apply counter class', () => {
+      component.type = 'counter';
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement;
+      const avatar =
+        compiled.querySelector('.dropi-avatar__initials') ||
+        compiled.querySelector('.dropi-avatar');
+      expect(avatar?.classList.contains('counter')).toBeTruthy();
+    });
+  });
+
+  describe('Combinaciones de propiedades', () => {
+    it('should handle image with custom type', () => {
+      component.image = 'test.jpg';
+      component.type = 'supplier';
+      component.alt = 'Supplier Avatar';
+      fixture.detectChanges();
+
+      const img = compiled.querySelector('img');
+      expect(img?.getAttribute('src')).toBe('test.jpg');
+      expect(img?.getAttribute('alt')).toBe('Supplier Avatar');
+    });
+
+    it('should handle initials with custom type', () => {
+      component.image = undefined;
+      component.initials = 'AB';
+      component.type = 'transport';
+      fixture.detectChanges();
+
+      expect(compiled.textContent).toContain('AB');
+    });
+
+    it('should switch from initials to image', () => {
+      component.image = undefined;
+      component.initials = 'JD';
+      fixture.detectChanges();
+      expect(compiled.textContent).toContain('JD');
+
+      component.image = 'new-avatar.jpg';
+      fixture.detectChanges();
+
+      const img = compiled.querySelector('img');
+      expect(img).toBeTruthy();
+    });
+
+    it('should switch from image to initials', () => {
+      component.image = 'avatar.jpg';
+      fixture.detectChanges();
+      let img = compiled.querySelector('img');
+      expect(img).toBeTruthy();
+
+      component.image = undefined;
+      component.initials = 'XY';
+      fixture.detectChanges();
+
+      img = compiled.querySelector('img');
+      expect(img).toBeFalsy();
+      expect(compiled.textContent).toContain('XY');
+    });
+  });
+
+  describe('Casos especiales', () => {
+    it('should handle very long initials', () => {
+      component.initials = 'ABCDEFGH';
+      expect(component.initials).toBe('AB');
+    });
+
+    it('should handle unicode characters in initials', () => {
+      component.initials = 'ÁÉ';
+      expect(component.initials).toBe('ÁÉ');
+    });
+
+    it('should handle emoji in initials', () => {
+      component.initials = '😀😁';
+      expect(component.initials.length).toBeLessThanOrEqual(2);
+    });
+
+    it('should handle image with query parameters', () => {
+      component.image = 'avatar.jpg?v=123';
+      fixture.detectChanges();
+
+      const img = compiled.querySelector('img');
+      expect(img?.getAttribute('src')).toBe('avatar.jpg?v=123');
+    });
+
+    it('should handle data URI as image', () => {
+      component.image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg';
+      fixture.detectChanges();
+
+      const img = compiled.querySelector('img');
+      expect(img?.getAttribute('src')).toContain('data:image');
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should update when all properties change', () => {
+      component.image = undefined;
+      component.initials = 'AB';
+      component.type = 'users';
+      component.alt = 'User';
+      fixture.detectChanges();
+
+      expect(component.initials).toBe('AB');
+      expect(component.type).toBe('users');
+
+      component.image = 'new.jpg';
+      component.type = 'supplier';
+      component.alt = 'Supplier';
+      fixture.detectChanges();
+
+      const img = compiled.querySelector('img');
+      expect(img?.getAttribute('src')).toBe('new.jpg');
+      expect(img?.getAttribute('alt')).toBe('Supplier');
+    });
+
+    it('should render correctly for all types without image', () => {
+      const types: Array<'users' | 'transport' | 'supplier' | 'payment' | 'counter'> = [
+        'users',
+        'transport',
+        'supplier',
+        'payment',
+        'counter',
+      ];
+
+      types.forEach((type) => {
+        component.type = type;
+        component.image = undefined;
+        component.initials = 'TS';
+        fixture.detectChanges();
+
+        expect(compiled.textContent).toContain('TS');
+      });
+    });
+
+    it('should render correctly for all types with image', () => {
+      const types: Array<'users' | 'transport' | 'supplier' | 'payment' | 'counter'> = [
+        'users',
+        'transport',
+        'supplier',
+        'payment',
+        'counter',
+      ];
+
+      types.forEach((type) => {
+        component.type = type;
+        component.image = `${type}.jpg`;
+        fixture.detectChanges();
+
+        const img = compiled.querySelector('img');
+        expect(img?.getAttribute('src')).toBe(`${type}.jpg`);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'dropi-avatars',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './dropi-avatars.component.html',
+  styleUrls: ['./dropi-avatars.component.scss'],
+})
+export class DropiAvatarsComponent {
+  private _initials: string = '?';
+
+  @Input() image?: string;
+  @Input() alt: string = 'Avatar';
+  @Input() type: 'users' | 'transport' | 'supplier' | 'payment' | 'counter' = 'users';
+
+  @Input() set initials(value: string | undefined) {
+    this._initials = (value || '?').substring(0, 2).toUpperCase();
+  }
+  get initials(): string {
+    return this._initials;
+  }
+}

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

@@ -0,0 +1,12 @@
+<div class="counter-badge" *ngIf="type === 'counter'" [ngClass]="variant">
+  <span class="Caption-S">
+    {{ count }}
+  </span>
+</div>
+
+<div class="state-badge" *ngIf="type === 'state'">
+  <div class="check-state" *ngIf="state === 'check'">
+    <img src="assets/img/icons/custom/badge-check.svg" alt="Check" />
+  </div>
+  <div class="pending-state" *ngIf="state === 'pending'"></div>
+</div>

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

@@ -0,0 +1,50 @@
+.counter-badge {
+  display: inline-flex;
+  height: 20px;
+  min-width: 20px;
+  padding: 0 var(--Size-1);
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 14px;
+  
+  &.primary {
+    background-color: var(--Primary-Primary-500, #F49A3D);
+
+    span {
+      color: var(--White, #FFFFFF);
+    }
+  }
+
+  &.secondary {
+    background-color: var(--White, #FFF);
+
+    span {
+      color: var(--Primary-Primary-600, #F49A3D);
+    }
+  }
+
+  &.tertiary {
+    background-color: var(--Gray-100, #E6EAF2);
+
+    span {
+      color: var(--Gray-500, #69738C);
+    }
+  }
+}
+
+.state-badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+
+  .pending-state {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--Primary-Primary-500, #F49A3D);
+  }
+}

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

@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiBadgeComponent } from './dropi-badge.component';
+
+describe('DropiBadgeComponent', () => {
+  let component: DropiBadgeComponent;
+  let fixture: ComponentFixture<DropiBadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiBadgeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.type).toBe('state');
+      expect(component.state).toBe('check');
+      expect(component.variant).toBe('primary');
+      expect(component.count).toBe(0);
+    });
+  });
+
+  describe('Propiedad type', () => {
+    it('should accept "state" type', () => {
+      component.type = 'state';
+      expect(component.type).toBe('state');
+    });
+
+    it('should accept "counter" type', () => {
+      component.type = 'counter';
+      expect(component.type).toBe('counter');
+    });
+  });
+
+  describe('Propiedad state', () => {
+    it('should accept "check" state', () => {
+      component.state = 'check';
+      expect(component.state).toBe('check');
+    });
+
+    it('should accept "pending" state', () => {
+      component.state = 'pending';
+      expect(component.state).toBe('pending');
+    });
+  });
+
+  describe('Propiedad variant', () => {
+    it('should accept "primary" variant', () => {
+      component.variant = 'primary';
+      expect(component.variant).toBe('primary');
+    });
+
+    it('should accept "secondary" variant', () => {
+      component.variant = 'secondary';
+      expect(component.variant).toBe('secondary');
+    });
+
+    it('should accept "tertiary" variant', () => {
+      component.variant = 'tertiary';
+      expect(component.variant).toBe('tertiary');
+    });
+  });
+
+  describe('Propiedad count', () => {
+    it('should accept count value', () => {
+      component.count = 10;
+      expect(component.count).toBe(10);
+    });
+
+    it('should accept zero count', () => {
+      component.count = 0;
+      expect(component.count).toBe(0);
+    });
+
+    it('should accept large count values', () => {
+      component.count = 999;
+      expect(component.count).toBe(999);
+    });
+  });
+
+  describe('Combinaciones de propiedades', () => {
+    it('should work with counter type and count', () => {
+      component.type = 'counter';
+      component.count = 5;
+      fixture.detectChanges();
+      expect(component.type).toBe('counter');
+      expect(component.count).toBe(5);
+    });
+
+    it('should work with state type and pending state', () => {
+      component.type = 'state';
+      component.state = 'pending';
+      component.variant = 'secondary';
+      fixture.detectChanges();
+      expect(component.type).toBe('state');
+      expect(component.state).toBe('pending');
+      expect(component.variant).toBe('secondary');
+    });
+  });
+});