@dropi/ui-components 1.0.0

package/src/components-source/dropi-banner-external/dropi-banner-external.component.ts

@@ -0,0 +1,204 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { forkJoin, of } from 'rxjs';
+
+import { WordpressDropiService } from 'src/app/services/wordpress-dropi.service';
+import { IconComponent } from '../icon/icon.component';
+import { BettaTesterService } from '@app/services/betta-tester.service';
+
+@Component({
+  selector: 'app-dropi-banner-external',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  templateUrl: './dropi-banner-external.component.html',
+  styleUrls: ['./dropi-banner-external.component.scss'],
+})
+export class DropiBannerExternalComponent implements OnInit, OnChanges {
+  banners: any[] = [];
+  @Input() slugName!: string; // slug requerido
+  @Output() bannerClick = new EventEmitter<any>();
+  @Output() isVisible = new EventEmitter<boolean>();
+  /**
+   * Si es true: se muestra para TODAS las marcas (Dropi y white label).
+   * Si es false: SOLO se muestra para la marca Dropi.
+   */
+  @Input() viewOnWhiteBrand: boolean = false;
+  /**
+   * Lista de países (nombre) donde se permite mostrar el banner.
+   * Si está vacío o undefined => se muestra en TODOS los países.
+   * Si tiene valores => se muestra solo si el país actual está en la lista (usando viewOnlyCountry()).
+   */
+  @Input() viewOnlyCountries: string[] = [];
+
+  banner: any | null = null; // banner seleccionado
+  hasLink = false;
+  loading = false;
+  error: string | null = null;
+  imageUrls: { large?: string; medium?: string; tablet?: string; mobile?: string } = {};
+  backgroundColor = 'transparent';
+
+  constructor(
+    private wordpressService: WordpressDropiService,
+    private bettaTesterService: BettaTesterService,
+  ) {}
+
+  ngOnInit(): void {
+    if (this.slugName) {
+      this.loadBanners();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['slugName'] && !changes['slugName'].firstChange) {
+      this.loadBanners();
+    }
+  }
+
+  private setInvisible(reason?: string) {
+    if (reason) {
+      console.debug('[DropiBannerExternal] No visible:', reason);
+    }
+    this.banner = null;
+    this.hasLink = false;
+    this.isVisible.emit(false);
+  }
+
+  /**
+   * Reglas solicitadas:
+   *  - viewOnWhiteBrand = false => solo Dropi
+   *  - viewOnWhiteBrand = true  => todas las marcas
+   * Se asegura invocar isDropiBrand() antes de cualquier otra validación.
+   */
+  private canShowForCurrentBrand(isDropi: boolean): boolean {
+    if (this.viewOnWhiteBrand) return true; // mostrar a todos
+    return isDropi; // restringido a Dropi
+  }
+
+  /**
+   * Validación por país:
+   *  - Si viewOnlyCountries está vacío => permitir todos.
+   *  - Si tiene elementos => usar bettaTesterService.viewOnlyCountry(viewOnlyCountries)
+   */
+  private canShowForCurrentCountry(): boolean {
+    if (!this.viewOnlyCountries || this.viewOnlyCountries.length === 0) return true;
+    try {
+      return this.bettaTesterService.viewOnlyCountry(this.viewOnlyCountries);
+    } catch (e) {
+      console.warn('[DropiBannerExternal] Error al validar país', e);
+      return false;
+    }
+  }
+
+  loadBanners(): void {
+    this.loading = true;
+    this.error = null;
+    this.setInvisible(); // reset inicial
+
+    // Aseguramos llamada temprana (puede tener efectos secundarios internos)
+    const isDropi = this.bettaTesterService.isDropiBrand();
+
+    // Validar marca
+    if (!this.canShowForCurrentBrand(isDropi)) {
+      this.setInvisible('Solo visible para marca Dropi');
+      this.loading = false;
+      return;
+    }
+
+    // Validar país
+    if (!this.canShowForCurrentCountry()) {
+      this.setInvisible('País no permitido para este banner');
+      this.loading = false;
+      return;
+    }
+
+    this.wordpressService.getBanners(this.slugName).subscribe(
+      (data) => {
+        this.banners = Array.isArray(data) ? data : [];
+        const banner = this.banners.find((b: any) => b?.acf && b.acf.slug === this.slugName);
+
+        if (!banner) {
+          this.setInvisible('No se encontró banner con ese slug');
+          this.loading = false;
+          return;
+        }
+        if (!banner.acf?.estado) {
+          this.setInvisible('Banner con estado=false');
+          this.loading = false;
+          return;
+        }
+
+        this.banner = banner;
+        this.hasLink = !!this.extractLink();
+        this.backgroundColor = this.banner.acf?.background || 'transparent';
+        this.resolveImages();
+        this.isVisible.emit(true);
+        this.loading = false;
+      },
+      (error) => {
+        console.error('Error al cargar los banners:', error);
+        this.error = 'Error al cargar los banners';
+        this.setInvisible('Error de carga');
+        this.loading = false;
+      },
+    );
+  }
+
+  private resolveImages() {
+    if (!this.banner?.acf) return;
+    const sizes: Array<keyof typeof this.imageUrls> = ['large', 'medium', 'tablet', 'mobile'];
+    const calls: { [k: string]: any } = {};
+    sizes.forEach((size) => {
+      const val = this.banner.acf[size];
+      if (!val) return;
+      if (typeof val === 'number') {
+        calls[size] = this.wordpressService.getImageUrl(val);
+      } else if (typeof val === 'string') {
+        calls[size] = of(val);
+      }
+    });
+    if (Object.keys(calls).length === 0) return;
+    forkJoin(calls).subscribe((res: any) => {
+      this.imageUrls = res;
+    });
+  }
+
+  private extractLink(): string | null {
+    const link = this.banner?.acf?.link_de_la_accion;
+    if (!link) return null;
+    if (typeof link === 'string') return link;
+    if (typeof link === 'object') return link.url || null;
+    return null;
+  }
+
+  getActionLink(): string | null {
+    return this.extractLink();
+  }
+
+  onClickBanner(event: Event): void {
+    if (!this.banner) return;
+    if (!this.hasLink) {
+      event.preventDefault();
+      this.bannerClick.emit(this.banner);
+    }
+  }
+
+  getImageFallback(): string {
+    if (!this.banner?.acf) return '';
+    const { mobile, tablet, medium, large } = this.imageUrls;
+    return mobile || tablet || medium || large || '';
+  }
+
+  closeBanner() {
+    this.setInvisible('Cerrado por usuario');
+    this.isVisible.emit(false);
+    this.loading = false;
+  }
+}

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

@@ -0,0 +1,65 @@
+<nav class="breadcrumb" [attr.aria-label]="ariaLabel">
+  <div class="crumb-list">
+    <!-- HOME: solo ícono -->
+    <div class="crumb-home">
+      <a [routerLink]="homeRoute" class="home-link" aria-label="Inicio">
+        <app-icon [name]="homeIconName" width="16px" color="Gray-Gray-500"></app-icon>
+      </a>
+
+      <app-icon
+        *ngIf="items?.length"
+        name="Dropdown-Right"
+        width="16px"
+        color="Gray-Gray-500"
+      ></app-icon>
+    </div>
+
+    <!-- ITEMS en línea, sin colapsar -->
+    <div *ngFor="let it of items; let last = last" class="crumb">
+      <!-- Si NO es el último (o sí, pero queremos que sea clicable) -->
+      <ng-container *ngIf="!last || lastItemClickable; else current">
+        <!-- Interno con RouterLink -->
+        <a
+          *ngIf="it.routerLink; else maybeExternal"
+          [routerLink]="it.routerLink"
+          [queryParams]="it.queryParams || null"
+          [fragment]="it.fragment || null"
+          [class.disabled]="it.disabled"
+          class="crumb-link Body-S-Regular"
+        >
+          {{ it.label | translate }}
+        </a>
+
+        <!-- Enlace externo (opcional) -->
+        <ng-template #maybeExternal>
+          <a
+            class="crumb-link Body-S-Regular"
+            *ngIf="it.url; else plain"
+            [href]="it.url"
+            [class.disabled]="it.disabled"
+          >
+            {{ it.label | translate }}
+          </a>
+        </ng-template>
+
+        <!-- Sin destino / deshabilitado -->
+        <ng-template #plain>
+          <span class="disabled Body-S-Regular">{{ it.label | translate }}</span>
+        </ng-template>
+      </ng-container>
+
+      <!-- Último como “actual” por defecto -->
+      <ng-template #current>
+        <span class="current Body-S-Regular" aria-current="page">{{ it.label | translate }}</span>
+      </ng-template>
+
+      <app-icon
+        *ngIf="!last"
+        name="Dropdown-Right"
+        width="16px"
+        height="16px"
+        color="Gray-Gray-500"
+      ></app-icon>
+    </div>
+  </div>
+</nav>

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

@@ -0,0 +1,65 @@
+.crumb-list {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .crumb-home {
+    display: flex;
+    padding-right: 4px;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+}
+
+.crumb {
+  display: flex;
+  padding: 0 4px;
+  align-items: center;
+  gap: 8px;
+
+  &.disabled {
+    pointer-events: none;
+
+    .crumb-link {
+      color: var(--Gray-Gray-300, #a1a8b8);
+      cursor: not-allowed;
+    }
+  }
+}
+
+.crumb-link {
+  color: var(--Gray-Gray-500, #69738c);
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--Gray-Gray-700, #32394d);
+    text-decoration: underline;
+  }
+
+  &.disabled {
+    pointer-events: none;
+    color: var(--Gray-Gray-300, #a1a8b8) !important;
+    cursor: not-allowed !important;
+    text-decoration: none !important;
+  }
+}
+
+.current {
+  color: var(--Gray-Gray-700, #32394d);
+  cursor: default;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.breadcrumb {
+  margin: 0;
+}

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

@@ -0,0 +1,125 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DropiBreadcrumbComponent, BreadcrumbItem } from './dropi-breadcrumb.component';
+import { IconComponent } from '../icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { mockDomSanitizer } from '../../../test-utils/jest-mocks';
+
+describe('DropiBreadcrumbComponent', () => {
+  let component: DropiBreadcrumbComponent;
+  let fixture: ComponentFixture<DropiBreadcrumbComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DropiBreadcrumbComponent,
+        IconComponent,
+        RouterTestingModule,
+        TranslateModule.forRoot(),
+      ],
+      providers: [{ provide: DomSanitizer, useValue: mockDomSanitizer }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiBreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.items).toEqual([]);
+      expect(component.homeRoute).toBe('/');
+      expect(component.homeIconName).toBe('Home');
+      expect(component.lastItemClickable).toBe(false);
+      expect(component.ariaLabel).toBe('Breadcrumb');
+    });
+  });
+
+  describe('Propiedad items', () => {
+    it('should accept empty items array', () => {
+      component.items = [];
+      expect(component.items).toEqual([]);
+    });
+
+    it('should accept items with label only', () => {
+      const items: BreadcrumbItem[] = [{ label: 'Home' }, { label: 'Products' }];
+      component.items = items;
+      expect(component.items.length).toBe(2);
+      expect(component.items[0].label).toBe('Home');
+    });
+
+    it('should accept items with routerLink', () => {
+      const items: BreadcrumbItem[] = [
+        { label: 'Home', routerLink: '/home' },
+        { label: 'Products', routerLink: '/products' },
+      ];
+      component.items = items;
+      expect(component.items[0].routerLink).toBe('/home');
+    });
+
+    it('should accept items with disabled property', () => {
+      const items: BreadcrumbItem[] = [
+        { label: 'Home', routerLink: '/home' },
+        { label: 'Current Page', disabled: true },
+      ];
+      component.items = items;
+      expect(component.items[1].disabled).toBe(true);
+    });
+
+    it('should accept items with queryParams', () => {
+      const items: BreadcrumbItem[] = [
+        { label: 'Products', routerLink: '/products', queryParams: { category: 'electronics' } },
+      ];
+      component.items = items;
+      expect(component.items[0].queryParams).toEqual({ category: 'electronics' });
+    });
+
+    it('should accept items with fragment', () => {
+      const items: BreadcrumbItem[] = [{ label: 'Section', routerLink: '/page', fragment: 'section1' }];
+      component.items = items;
+      expect(component.items[0].fragment).toBe('section1');
+    });
+  });
+
+  describe('Propiedad homeRoute', () => {
+    it('should accept string route', () => {
+      component.homeRoute = '/dashboard';
+      expect(component.homeRoute).toBe('/dashboard');
+    });
+
+    it('should accept array route', () => {
+      component.homeRoute = ['/dashboard', 'home'];
+      expect(component.homeRoute).toEqual(['/dashboard', 'home']);
+    });
+  });
+
+  describe('Propiedad homeIconName', () => {
+    it('should accept custom icon name', () => {
+      component.homeIconName = 'Dashboard';
+      expect(component.homeIconName).toBe('Dashboard');
+    });
+  });
+
+  describe('Propiedad lastItemClickable', () => {
+    it('should accept true value', () => {
+      component.lastItemClickable = true;
+      expect(component.lastItemClickable).toBe(true);
+    });
+
+    it('should accept false value', () => {
+      component.lastItemClickable = false;
+      expect(component.lastItemClickable).toBe(false);
+    });
+  });
+
+  describe('Accesibilidad', () => {
+    it('should have aria label', () => {
+      expect(component.ariaLabel).toBe('Breadcrumb');
+    });
+  });
+});

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

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IconComponent } from '../icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+export interface BreadcrumbItem {
+  label: string;
+  /** Rutas internas con RouterLink */
+  routerLink?: string | any[];
+  /** (Opcional) Enlace externo si algún día lo necesitas */
+  url?: string;
+  /** (Opcional) Deshabilitar el click */
+  disabled?: boolean;
+  /** (Opcional) Query params / fragment para RouterLink */
+  queryParams?: Record<string, any>;
+  fragment?: string;
+}
+@Component({
+  selector: 'app-dropi-breadcrumb',
+  standalone: true,
+   imports: [CommonModule, RouterModule, IconComponent, TranslateModule],
+  templateUrl: './dropi-breadcrumb.component.html',
+  styleUrls: ['./dropi-breadcrumb.component.scss']
+})
+export class DropiBreadcrumbComponent {
+    /** Items desde la raíz → página actual (sin incluir home) */
+  @Input() items: BreadcrumbItem[] = [];
+  /** Home: solo ícono + ruta (RouterLink) */
+  @Input() homeRoute: string | any[] = '/';
+  @Input() homeIconName: string = 'Home';
+  @Input() lastItemClickable = false;
+
+
+
+/** ARIA label para accesibilidad */
+ariaLabel = 'Breadcrumb';
+}

package/src/components-source/dropi-breadcrumb/dropi-breadcrumb.stories.ts

@@ -0,0 +1,133 @@
+/**
+ * @fileoverview Breadcrumb component stories for Storybook
+ * @description Navigation breadcrumb component for hierarchical page navigation
+ */
+import { type Meta, type StoryObj, applicationConfig } from '@storybook/angular';
+import { importProvidersFrom } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { DropiBreadcrumbComponent, type BreadcrumbItem } from './dropi-breadcrumb.component';
+
+const meta: Meta<DropiBreadcrumbComponent> = {
+  title: 'UI Dropi/Breadcrumb',
+  component: DropiBreadcrumbComponent,
+  tags: ['autodocs'],
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(RouterTestingModule.withRoutes([]), TranslateModule.forRoot()),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=50-1457&m=dev',
+    },
+    docs: {
+      description: {
+        component: `
+# Breadcrumb Component
+
+A navigation component showing the user's current location in the page hierarchy.
+
+## Key Features
+- **Home icon**: Customizable home route
+- **Router integration**: Works with Angular Router
+- **External links**: Support for external URLs
+- **Disabled items**: Items can be disabled
+- **Last item clickable**: Optional clickable last item
+- **Ellipsis support**: Long labels are truncated
+        `,
+      },
+    },
+  },
+  argTypes: {
+    items: {
+      control: 'object',
+      description:
+        'List of objects representing sections from root to current page (excluding home).',
+    },
+    homeRoute: {
+      control: 'object',
+      description: 'Route (routerLink) for the Home icon.',
+    },
+    homeIconName: {
+      control: 'text',
+      description: 'Icon name for Home (used in <app-icon>).',
+    },
+    lastItemClickable: {
+      control: 'boolean',
+      description: 'If true, the last item is also a link.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiBreadcrumbComponent>;
+
+/* ---------- Stories ---------- */
+
+export const Default: Story = {
+  args: {
+    homeRoute: ['/'],
+    homeIconName: 'Home',
+    lastItemClickable: false,
+    items: [
+      { label: 'Catalog', routerLink: ['/catalog'] },
+      { label: 'Shoes', routerLink: ['/catalog/shoes'] },
+      { label: 'Sports' }, // current
+    ] as BreadcrumbItem[],
+  },
+};
+
+export const LastItemClickable: Story = {
+  args: {
+    homeRoute: ['/'],
+    homeIconName: 'Home',
+    lastItemClickable: true,
+    items: [
+      { label: 'Catalog', routerLink: ['/catalog'] },
+      { label: 'Shoes', routerLink: ['/catalog/shoes'] },
+      { label: 'Sports', routerLink: ['/catalog/shoes/sport'] },
+    ] as BreadcrumbItem[],
+  },
+};
+
+export const WithExternalLink: Story = {
+  args: {
+    homeRoute: ['/'],
+    homeIconName: 'Home',
+    items: [
+      { label: 'Docs', url: 'https://dropi.co' },
+      { label: 'Help', url: 'https://help.dropi.co' },
+      { label: 'Detail' }, // current
+    ] as BreadcrumbItem[],
+  },
+};
+
+export const WithDisabledItem: Story = {
+  args: {
+    homeRoute: ['/'],
+    homeIconName: 'Home',
+    items: [
+      { label: 'Catalog', routerLink: ['/catalog'] },
+      { label: 'Shoes', disabled: true },
+      { label: 'Detail' }, // current
+    ] as BreadcrumbItem[],
+  },
+};
+
+export const LongLabels: Story = {
+  args: {
+    homeRoute: ['/'],
+    homeIconName: 'Home',
+    items: [
+      { label: 'Category with a very long name', routerLink: ['/c/very-long'] },
+      { label: 'Very long subsection to test ellipsis', routerLink: ['/c/very-long/sub'] },
+      { label: 'Page with extended title' },
+    ] as BreadcrumbItem[],
+  },
+};

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

@@ -0,0 +1,37 @@
+<button
+  class="btn"
+  [ngClass]="[!text ? 'without-text' : '', severity, type, size, state]"
+  [disabled]="state === 'disabled' || state === 'loading'"
+  (click)="handleClick($event)"
+>
+  <app-icon
+    *ngIf="preIcon !== ''"
+    [name]="preIcon"
+    [width]="iconSize"
+    [height]="iconSize"
+    [color]="fontColor"
+  ></app-icon>
+  <span *ngIf="text !== ''" class="text">{{ text }}</span>
+  <app-icon
+    *ngIf="postIcon !== '' || type === 'dropdown'"
+    [name]="type == 'dropdown' ? 'Dropdown-down' : postIcon"
+    [width]="iconSize"
+    [height]="iconSize"
+    [color]="fontColor"
+  ></app-icon>
+  <svg
+    *ngIf="state === 'loading'"
+    class="spin"
+    [attr.width]="iconSize"
+    [attr.height]="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z"
+      [attr.fill]="svgColor"
+    />
+  </svg>
+  <ng-content></ng-content>
+</button>