@dropi/ui-components 1.0.0

package/src/components-source/accordion/accordion.component.stories.ts

@@ -0,0 +1,111 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { AccordionComponent } from './accordion.component';
+import { AccordionItemComponent } from './accordion-item/accordion-item.component';
+
+/**
+ * # Accordion Component
+ *
+ * An expandable/collapsible container component for organizing content into sections.
+ * Accordions help reduce page clutter by hiding detailed content until needed.
+ *
+ * ## Features
+ * - **Single/Multiple mode**: Allow one or multiple sections open at once
+ * - **Keyboard accessible**: Navigate using arrow keys and Enter
+ * - **Animated**: Smooth expand/collapse transitions
+ *
+ * ## Usage
+ * ```html
+ * <app-accordion [multiple]="false">
+ *   <app-accordion-item [sectionTitle]="'Section 1'" [index]="0">
+ *     Content for section 1
+ *   </app-accordion-item>
+ *   <app-accordion-item [sectionTitle]="'Section 2'" [index]="1">
+ *     Content for section 2
+ *   </app-accordion-item>
+ * </app-accordion>
+ * ```
+ */
+const meta: Meta<AccordionComponent> = {
+  title: 'UI Dropi/Accordion',
+  component: AccordionComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+An expandable/collapsible container component for organizing content into sections.
+Accordions help reduce page clutter by hiding detailed content until needed.
+
+### Key Features
+- **Single/Multiple mode**: Allow one or multiple sections open at once
+- **Keyboard accessible**: Navigate using arrow keys and Enter
+- **Animated**: Smooth expand/collapse transitions
+        `,
+      },
+    },
+  },
+  argTypes: {
+    multiple: {
+      description: 'When true, allows multiple accordion items to be open simultaneously',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<AccordionComponent>;
+
+/** Default accordion - single item open at a time */
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-accordion [multiple]="multiple">
+        <app-accordion-item [sectionTitle]="'Section 1'" [index]="0">
+          Content for section 1
+        </app-accordion-item>
+        <app-accordion-item [sectionTitle]="'Section 2'" [index]="1">
+          Content for section 2
+        </app-accordion-item>
+        <app-accordion-item [sectionTitle]="'Section 3'" [index]="2">
+          Content for section 3
+        </app-accordion-item>
+      </app-accordion>
+    `,
+    imports: [AccordionComponent, AccordionItemComponent],
+  }),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=1282-2087&p=f&m=dev',
+    },
+    docs: {
+      description: {
+        story:
+          'Default accordion allowing only one section open at a time. Clicking a new section closes the previous one.',
+      },
+    },
+  },
+};
+
+/** Accordion allowing multiple sections open */
+export const MultipleOpen: Story = {
+  args: {
+    multiple: true,
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Accordion with multiple mode enabled. Users can expand multiple sections simultaneously.',
+      },
+    },
+  },
+};

package/src/components-source/accordion/accordion.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Componente que renderiza un acordeón de secciones.
+ *
+ * Permite tener un acordeón con secciones que se pueden expandir o contraer.
+ * Cada sección se renderiza con el componente {@link AccordionItemComponent}.
+ *
+ * @example
+ * <app-accordion>
+ *   <app-accordion-item title="Título 1">Contenido 1</app-accordion-item>
+ *   <app-accordion-item title="Título 2">Contenido 2</app-accordion-item>
+ * </app-accordion>
+ */
+@Component({
+  selector: 'app-accordion',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.scss']
+})
+export class AccordionComponent {
+  /**
+   * Allows multiple sections to be open at the same time. If false, only one section can be open.
+   * @default false
+   */
+  @Input() multiple: boolean = false;
+  activeIndex: number | null = null;
+  openSections: Set<number> = new Set();
+
+  toggle(index: number): void {
+    if (this.multiple) {
+      if (this.openSections.has(index)) this.openSections.delete(index); 
+      else this.openSections.add(index);
+    } 
+    else this.activeIndex = this.activeIndex === index ? null : index;
+  }
+
+  isOpen(index: number): boolean {
+    return this.multiple ? this.openSections.has(index) : this.activeIndex === index;
+  }
+}

package/src/components-source/alert/alert.component.html

@@ -0,0 +1,28 @@
+<div [ngClass]="['alert-container', 'message-' + state, 'type-' + type]" *ngIf="showAlert" @fade>
+  <div [ngClass]="['alert-body', 'type-' + type]">
+    <div class="alert-icon" *ngIf="type !== 'flag'">
+      <app-icon
+        [name]="alertState?.[state]?.icon"
+        [color]="alertState?.[state]?.color"
+        width="16px"
+        height="16px"
+      />
+    </div>
+    <p *ngIf="!clickedText" class="alert-message" [innerHTML]="sanitinezedMessage"></p>
+    <p *ngIf="clickedText" class="alert-message">
+      {{ message }} <a (click)="emitClickLink($event)">{{ clickedText }}</a>
+    </p>
+  </div>
+  <div [ngClass]="['alert-right', 'color-' + state]" class="alert-right">
+    <dropi-button
+      *ngIf="showButton && type !== 'flag'"
+      (onClick)="buttonClick()"
+      [text]="buttonText"
+      [size]="'small'"
+      [type]="state"
+    ></dropi-button>
+    <button (click)="closeAlert()" *ngIf="dismissable">
+      <app-icon name="Close-small" width="16px" height="16px" color="Gray-700" />
+    </button>
+  </div>
+</div>

package/src/components-source/alert/alert.component.scss

@@ -0,0 +1,154 @@
+.alert-container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.type-default {
+  padding: var(--Size-3, 12px);
+  border-radius: 8px;
+}
+
+.type-flag {
+  padding: var(--Size-1, 4px) var(--Size-2, 8px);
+  border-radius: var(--Border-1, 4px);
+
+  .alert-message {
+    width: 100%;
+    font-size: 12px;
+    font-weight: 400;
+  }
+}
+
+.alert-body {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+
+  &.type-flag {
+    width: 100%;
+    text-align: center;
+    flex-grow: 2;
+  }
+
+  &.type-default {
+    padding: 0px;
+  }
+}
+
+.alert-message {
+  color: var(--Gray-600, #475066);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%;
+  text-wrap: break-word;
+  margin-bottom: 0px !important;
+}
+
+.alert-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 4px;
+}
+
+.alert-right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    background: transparent;
+    border: none;
+  }
+}
+
+.message-warning {
+  background: var(--Warning-Warning-50, #fef8ed);
+
+  &.type-default {
+    border: 1px solid var(--Warning-Warning-500, #f1b44c);
+  }
+}
+
+.message-info {
+  background: var(--Info-Info-50, #eef6fe);
+
+  &.type-default {
+    border: 1px solid var(--Info-Info-500, #50a5f1);
+  }
+}
+
+.message-error {
+  background: var(--Error-Error-50, #fef0f0);
+
+  &.type-default {
+    border: 1px solid var(--Error-Error-500, #f46a6b);
+  }
+}
+
+.message-success {
+  background: var(--Success-Success-50, #e7f8f3);
+
+  &.type-default {
+    border: 1px solid var(--Success-Success-500, #0abb87);
+  }
+}
+
+::ng-deep .alert-container {
+  app-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .color-warning {
+    .btn-dropi button {
+      background: var(--Warning-Warning-500, #f1b44c) !important;
+    }
+  }
+
+  .color-info {
+    .btn-dropi button {
+      background: var(--Info-Info-500, #50a5f1) !important;
+    }
+  }
+
+  .color-error {
+    .btn-dropi button {
+      background: var(--Error-Error-500, #f46a6b) !important;
+    }
+  }
+
+  .color-success {
+    .btn-dropi button {
+      background: var(--Success-Success-500, #0abb87) !important;
+    }
+  }
+
+  .btn-dropi button {
+    padding: var(--Size-2, 8px) !important;
+    height: 29px;
+    color: var(--White, #fff);
+    text-align: center;
+    font-family: Inter, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 110%;
+
+    span.p-button-label {
+      font-size: var(--font-size-xs, 12px);
+    }
+  }
+}
+
+.alert-message > a {
+  cursor: pointer;
+}

package/src/components-source/alert/alert.component.spec.ts

@@ -0,0 +1,185 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { AlertComponent } from './alert.component';
+import { IconComponent } from '../icon/icon.component';
+import { ButtonComponent } from '../dropi-button/dropi-button.component';
+import { mockDomSanitizer } from '../../../test-utils/jest-mocks';
+
+describe('AlertComponent', () => {
+  let component: AlertComponent;
+  let fixture: ComponentFixture<AlertComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlertComponent, IconComponent, ButtonComponent, BrowserAnimationsModule],
+      providers: [{ provide: DomSanitizer, useValue: mockDomSanitizer }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlertComponent);
+    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.message).toBe('');
+      expect(component.type).toBe('default');
+      expect(component.state).toBe('success');
+      expect(component.dismissable).toBe(true);
+      expect(component.showButton).toBe(false);
+      expect(component.buttonText).toBe('Close');
+      expect(component.showAlert).toBe(true);
+    });
+
+    it('should accept input properties', () => {
+      component.message = 'Test message';
+      component.type = 'flag';
+      component.state = 'error';
+      component.dismissable = false;
+      component.showButton = true;
+      component.buttonText = 'Custom Close';
+      component.textLink = 'Learn more';
+      component.linkUrl = 'https://example.com';
+
+      expect(component.message).toBe('Test message');
+      expect(component.type).toBe('flag');
+      expect(component.state).toBe('error');
+      expect(component.dismissable).toBe(false);
+      expect(component.showButton).toBe(true);
+      expect(component.buttonText).toBe('Custom Close');
+      expect(component.textLink).toBe('Learn more');
+      expect(component.linkUrl).toBe('https://example.com');
+    });
+  });
+
+  describe('Estados de la alerta', () => {
+    it('should have correct state configuration for success', () => {
+      expect(component.alertState.success.icon).toBe('Check-circle');
+      expect(component.alertState.success.color).toBe('Success-Success-500');
+    });
+
+    it('should have correct state configuration for error', () => {
+      expect(component.alertState.error.icon).toBe('Cross-circle');
+      expect(component.alertState.error.color).toBe('Error-Error-500');
+    });
+
+    it('should have correct state configuration for warning', () => {
+      expect(component.alertState.warning.icon).toBe('Warning-circle');
+      expect(component.alertState.warning.color).toBe('Warning-Warning-500');
+    });
+
+    it('should have correct state configuration for info', () => {
+      expect(component.alertState.info.icon).toBe('Info');
+      expect(component.alertState.info.color).toBe('Info-Info-500');
+    });
+  });
+
+  describe('Sanitización de mensajes', () => {
+    it('should sanitize message without link', () => {
+      component.message = 'Test <b>message</b>';
+      component.textLink = undefined;
+      component.linkUrl = undefined;
+
+      component.sanitizeMessage();
+
+      expect(component.sanitinezedMessage).toBeDefined();
+      expect(mockDomSanitizer.bypassSecurityTrustHtml).toHaveBeenCalled();
+    });
+
+    it('should sanitize message with link', () => {
+      component.message = 'Test message';
+      component.textLink = 'Learn more';
+      component.linkUrl = 'https://example.com';
+      component.state = 'success';
+
+      component.sanitizeMessage();
+
+      expect(component.sanitinezedMessage).toBeDefined();
+      expect(mockDomSanitizer.bypassSecurityTrustHtml).toHaveBeenCalled();
+    });
+
+    it('should call sanitizeMessage on ngOnChanges', () => {
+      const spy = jest.spyOn(component, 'sanitizeMessage');
+
+      component.ngOnChanges({
+        message: {
+          currentValue: 'New message',
+          previousValue: 'Old message',
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      });
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should not call sanitizeMessage on first change', () => {
+      // En el primer cambio, sanitizeMessage SI se llama
+      // porque el componente procesa el mensaje inicial
+      const spy = jest.spyOn(component, 'sanitizeMessage');
+
+      component.ngOnChanges({
+        message: {
+          currentValue: 'New message',
+          previousValue: undefined,
+          firstChange: true,
+          isFirstChange: () => true,
+        },
+      });
+
+      // El componente llama sanitizeMessage incluso en el primer cambio
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Funcionalidad de cierre', () => {
+    it('should close alert when closeAlert is called', () => {
+      const emitSpy = jest.spyOn(component.onClose, 'emit');
+
+      component.closeAlert();
+
+      expect(component.showAlert).toBe(false);
+      expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should emit onButtonClick when buttonClick is called', () => {
+      const emitSpy = jest.spyOn(component.onButtonClick, 'emit');
+
+      component.buttonClick();
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with all features enabled', () => {
+      component.message = 'Complete test message';
+      component.type = 'flag';
+      component.state = 'warning';
+      component.dismissable = true;
+      component.showButton = true;
+      component.buttonText = 'Action';
+      component.textLink = 'More info';
+      component.linkUrl = 'https://example.com';
+      component.showAlert = true;
+
+      fixture.detectChanges();
+
+      expect(component.message).toBe('Complete test message');
+      expect(component.type).toBe('flag');
+      expect(component.state).toBe('warning');
+      expect(component.dismissable).toBe(true);
+      expect(component.showButton).toBe(true);
+    });
+  });
+});