@dropi/ui-components 1.0.0

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

@@ -0,0 +1,266 @@
+$disabled-colors: (
+  default: Primary-Primary-300,
+  success: Success-Success-300,
+  info: Info-Info-300,
+  error: Error-Error-300,
+  warning: Warning-Warning-300,
+  legacy: Secondary-Secondary-300,
+);
+
+.without-text {
+  gap: 0 !important;
+}
+
+.btn {
+  box-sizing: border-box !important;
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Size-1);
+  border-radius: var(--Border-2);
+  font-weight: 700;
+  min-width: 33px;
+  line-height: 110%;
+  cursor: pointer;
+  white-space: nowrap;
+
+  transition:
+    background 0.25s ease,
+    color 0.25s ease,
+    border-color 0.25s ease,
+    transform 0.25s ease;
+  &:active {
+    transition: transform 0.01s ease-out;
+    transform: scale(0.98); // efecto al hacer click
+  }
+  &:hover:not(:active) {
+    transform: scale(1.01);
+  }
+
+  &.disabled,
+  &.loading {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.large {
+    padding: var(--Size-4);
+    font-size: var(--Size-4);
+    height: 48px;
+  }
+
+  &.normal {
+    padding: var(--Size-3);
+    font-size: var(--font-size-s);
+    height: 40px;
+  }
+
+  &.small {
+    padding: var(--Size-2);
+    font-size: var(--Size-3);
+    height: 29px;
+  }
+
+  // PRIMARY
+  &.primary {
+    &.disabled {
+      @each $type, $color in $disabled-colors {
+        &.#{$type} {
+          background: var(--#{$color});
+          color: var(--Neutral-White);
+        }
+      }
+    }
+    &.default {
+      background: var(--Primary-Primary-500);
+      color: var(--Neutral-White);
+      &:hover {
+        background: var(--Primary-Primary-600);
+      }
+    }
+
+    &.success {
+      background: var(--Success-Success-500);
+      color: var(--Neutral-White);
+      &:hover {
+        background: var(--Success-Success-600);
+      }
+    }
+
+    &.info {
+      background: var(--Info-Info-500);
+      color: var(--Neutral-White);
+      &:hover {
+        background: var(--Info-Info-600);
+      }
+    }
+
+    &.error {
+      background: var(--Error-Error-500);
+      color: var(--Neutral-White);
+      &:hover {
+        background: var(--Error-Error-600);
+      }
+    }
+
+    &.warning {
+      background: var(--Warning-Warning-500);
+      color: var(--Neutral-White);
+      &:hover {
+        background: var(--Warning-Warning-600);
+      }
+    }
+
+    &.legacy {
+      background: var(--Secondary-Secondary-500);
+      color: var(--Neutral-White);
+      &:hover {
+        background: var(--Secondary-Secondary-600);
+      }
+    }
+  }
+
+  // SECONDARY
+  &.secondary {
+    background: var(--Neutral-White);
+    border: 1px solid;
+
+    &.disabled {
+      background: var(--Neutral-White);
+      @each $type, $color in $disabled-colors {
+        &.#{$type} {
+          border-color: var(--#{$color});
+          color: var(--#{$color});
+        }
+      }
+    }
+
+    &.default {
+      border-color: var(--Primary-Primary-500);
+      color: var(--Primary-Primary-500);
+      &:hover {
+        color: var(--Primary-Primary-600);
+        border-color: var(--Primary-Primary-600);
+      }
+    }
+
+    &.success {
+      border-color: var(--Success-Success-500);
+      color: var(--Success-Success-500);
+      &:hover {
+        color: var(--Success-Success-600);
+        border-color: var(--Success-Success-600);
+      }
+    }
+
+    &.info {
+      border-color: var(--Info-Info-500);
+      color: var(--Info-Info-500);
+      &:hover {
+        color: var(--Info-Info-600);
+        border-color: var(--Info-Info-600);
+      }
+    }
+
+    &.error {
+      border-color: var(--Error-Error-500);
+      color: var(--Error-Error-500);
+      &:hover {
+        color: var(--Error-Error-600);
+        border-color: var(--Error-Error-600);
+      }
+    }
+
+    &.warning {
+      border-color: var(--Warning-Warning-500);
+      color: var(--Warning-Warning-500);
+      &:hover {
+        color: var(--Warning-Warning-600);
+        border-color: var(--Warning-Warning-600);
+      }
+    }
+
+    &.legacy {
+      border-color: var(--Secondary-Secondary-500);
+      color: var(--Secondary-Secondary-500);
+      &:hover {
+        color: var(--Secondary-Secondary-600);
+        border-color: var(--Secondary-Secondary-600);
+      }
+    }
+  }
+
+  // TERTIARY
+  &.tertiary {
+    background: none !important;
+    border: none;
+
+    &.disabled {
+      background: none !important;
+      @each $type, $color in $disabled-colors {
+        &.#{$type} {
+          color: var(--#{$color});
+        }
+      }
+
+      &.default,
+      &.legacy {
+        border: 1px solid var(--Gray-Gray-200);
+        color: var(--Gray-Gray-400);
+      }
+    }
+
+    &.default,
+    &.legacy {
+      border: 1px solid var(--Gray-Gray-200);
+      color: var(--Gray-Gray-500);
+      &:hover {
+        border: 1px solid var(--Gray-Gray-400);
+        color: var(--Gray-Gray-600);
+      }
+    }
+
+    // Tipos con color directo
+    @each $type, $color,
+      $hoverBg
+        in (
+          success Success-Success-500 Success-Success-50,
+          info Info-Info-500 Info-Info-50,
+          error Error-Error-500 Error-Error-50,
+          warning Warning-Warning-500 Warning-Warning-50,
+          dropdown Gray-Gray-500 Gray-Gray-100
+        )
+    {
+      &.#{$type} {
+        color: var(--#{$color});
+        border: none;
+        @if $type == 'dropdown' {
+          background: transparent;
+          font-weight: 400;
+          font-size: 14px;
+        }
+        &:hover {
+          @if $type != 'dropdown' {
+            background: var(--#{$hoverBg});
+          }
+          color: var(--#{$color});
+          border: none;
+        }
+      }
+    }
+  }
+
+  .spin {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

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

@@ -0,0 +1,264 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import {
+  ButtonComponent,
+  ButtonType,
+  ButtonSeverity,
+  ButtonSize,
+  ButtonState,
+} from './dropi-button.component';
+import { IconComponent } from '../icon/icon.component';
+
+describe('ButtonComponent (DropiButtonComponent)', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent, IconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      // Verifica que el componente se crea correctamente
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      // Verifica los valores por defecto del botón
+      expect(component.type).toBe('default');
+      expect(component.severity).toBe('primary');
+      expect(component.size).toBe('normal');
+      expect(component.state).toBe('default');
+      expect(component.preIcon).toBe('');
+      expect(component.postIcon).toBe('');
+      expect(component.text).toBe('');
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept different button types', () => {
+      // Verifica que acepta diferentes tipos de botón
+      const types: ButtonType[] = ['legacy', 'default', 'success', 'info', 'error', 'warning'];
+
+      types.forEach((type) => {
+        component.type = type;
+        expect(component.type).toBe(type);
+      });
+    });
+
+    it('should accept different severities', () => {
+      // Verifica que acepta diferentes niveles de severidad
+      const severities: ButtonSeverity[] = ['primary', 'secondary', 'tertiary'];
+
+      severities.forEach((severity) => {
+        component.severity = severity;
+        expect(component.severity).toBe(severity);
+      });
+    });
+
+    it('should accept different sizes', () => {
+      // Verifica que acepta diferentes tamaños
+      const sizes: ButtonSize[] = ['large', 'normal', 'small'];
+
+      sizes.forEach((size) => {
+        component.size = size;
+        expect(component.size).toBe(size);
+      });
+    });
+
+    it('should accept different states', () => {
+      // Verifica que acepta diferentes estados
+      const states: ButtonState[] = ['default', 'disabled', 'loading'];
+
+      states.forEach((state) => {
+        component.state = state;
+        expect(component.state).toBe(state);
+      });
+    });
+  });
+
+  describe('Tamaño de iconos', () => {
+    it('should return correct icon size for large button', () => {
+      // Verifica el tamaño de icono para botón grande
+      component.size = 'large';
+      expect(component.iconSize).toBe('24px');
+    });
+
+    it('should return correct icon size for small button', () => {
+      // Verifica el tamaño de icono para botón pequeño
+      component.size = 'small';
+      expect(component.iconSize).toBe('16px');
+    });
+
+    it('should return correct icon size for normal button', () => {
+      // Verifica el tamaño de icono para botón normal
+      component.size = 'normal';
+      expect(component.iconSize).toBe('18px');
+    });
+  });
+
+  describe('Colores del botón', () => {
+    it('should return correct color for enabled state', () => {
+      // Verifica el color para estado habilitado
+      component.type = 'success';
+      component.state = 'default';
+      expect(component.color).toBe('Success-Success-500');
+    });
+
+    it('should return correct color for disabled state', () => {
+      // Verifica el color para estado deshabilitado
+      component.type = 'error';
+      component.state = 'disabled';
+      expect(component.color).toBe('Error-Error-300');
+    });
+
+    it('should handle all button types correctly', () => {
+      // Verifica colores para todos los tipos de botón
+      const expectedColors = {
+        default: 'Primary-Primary-500',
+        success: 'Success-Success-500',
+        error: 'Error-Error-500',
+        info: 'Info-Info-500',
+        legacy: 'Secondary-Secondary-500',
+        warning: 'Warning-Warning-500',
+      };
+
+      Object.entries(expectedColors).forEach(([type, expectedColor]) => {
+        component.type = type as ButtonType;
+        component.state = 'default';
+        expect(component.color).toBe(expectedColor);
+      });
+    });
+  });
+
+  describe('Color de fuente', () => {
+    it('should return correct font color for primary severity', () => {
+      // Verifica color de fuente para severidad primaria
+      component.severity = 'primary';
+      expect(component.fontColor).toBe('Neutral-White');
+    });
+
+    it('should return correct font color for secondary severity', () => {
+      // Verifica color de fuente para severidad secundaria
+      component.severity = 'secondary';
+      component.type = 'success';
+      expect(component.fontColor).toBe(component.color);
+    });
+
+    it('should return correct font color for tertiary severity with default type', () => {
+      // Verifica color de fuente para severidad terciaria con tipo default
+      component.severity = 'tertiary';
+      component.type = 'default';
+      expect(component.fontColor).toBe('Gray-Gray-500');
+    });
+
+    it('should return correct font color for tertiary severity with other types', () => {
+      // Verifica color de fuente para severidad terciaria con otros tipos
+      component.severity = 'tertiary';
+      component.type = 'success';
+      expect(component.fontColor).toBe(component.color);
+    });
+  });
+
+  describe('Color SVG', () => {
+    it('should return CSS variable format for SVG color', () => {
+      // Verifica que devuelve el formato CSS correcto para el color del SVG
+      component.severity = 'primary';
+      expect(component.svgColor).toBe('var(--Neutral-White)');
+    });
+  });
+
+  describe('Manejo de clics', () => {
+    it('should emit onClick event when clicked and not disabled', () => {
+      // Verifica que emite el evento onClick cuando se hace clic y no está deshabilitado
+      const spy = jest.spyOn(component.onClick, 'emit');
+      const mockEvent = new Event('click');
+
+      component.state = 'default';
+      component.handleClick(mockEvent);
+
+      expect(spy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('should not emit onClick event when disabled', () => {
+      // Verifica que no emite el evento cuando está deshabilitado
+      const spy = jest.spyOn(component.onClick, 'emit');
+      const mockEvent = new Event('click');
+
+      component.state = 'disabled';
+      component.handleClick(mockEvent);
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('should not emit onClick event when loading', () => {
+      // Verifica que no emite el evento cuando está en estado de carga
+      const spy = jest.spyOn(component.onClick, 'emit');
+      const mockEvent = new Event('click');
+
+      component.state = 'loading';
+      component.handleClick(mockEvent);
+
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Iconos', () => {
+    it('should handle preIcon correctly', () => {
+      // Verifica que maneja correctamente el icono previo
+      component.preIcon = 'home';
+      fixture.detectChanges();
+      expect(component.preIcon).toBe('home');
+    });
+
+    it('should handle postIcon correctly', () => {
+      // Verifica que maneja correctamente el icono posterior
+      component.postIcon = 'arrow-right';
+      fixture.detectChanges();
+      expect(component.postIcon).toBe('arrow-right');
+    });
+  });
+
+  describe('Texto del botón', () => {
+    it('should display text correctly', () => {
+      // Verifica que muestra el texto correctamente
+      const testText = 'Click me';
+      component.text = testText;
+      fixture.detectChanges();
+      expect(component.text).toBe(testText);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with all properties set', () => {
+      // Verifica que funciona con todas las propiedades configuradas
+      component.type = 'success';
+      component.severity = 'secondary';
+      component.size = 'large';
+      component.state = 'default';
+      component.preIcon = 'check';
+      component.postIcon = 'arrow';
+      component.text = 'Complete Action';
+
+      fixture.detectChanges();
+
+      expect(component.type).toBe('success');
+      expect(component.severity).toBe('secondary');
+      expect(component.size).toBe('large');
+      expect(component.state).toBe('default');
+      expect(component.preIcon).toBe('check');
+      expect(component.postIcon).toBe('arrow');
+      expect(component.text).toBe('Complete Action');
+      expect(component.iconSize).toBe('24px');
+    });
+  });
+});