@dropi/ui-components 1.0.0

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

@@ -0,0 +1,267 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DropiTagComponent, tagStates, tagTypes } from './dropi-tag.component';
+import { IconComponent } from '../icon/icon.component';
+
+describe('DropiTagComponent', () => {
+  let component: DropiTagComponent;
+  let fixture: ComponentFixture<DropiTagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiTagComponent, IconComponent, BrowserAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiTagComponent);
+    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('primary');
+      expect(component.state).toBe('default');
+      expect(component.showIcon).toBe(false);
+      expect(component.icon).toBe('');
+      expect(component.text).toBe('');
+    });
+
+    it('should initialize colorMap with correct values', () => {
+      expect(component.colorMap).toEqual({
+        default: 'Primary-Primary',
+        success: 'Success-Success',
+        info: 'Info-Info',
+        warning: 'Warning-Warning',
+        error: 'Error-Error',
+        legacy: 'Gray-Gray',
+      });
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept type input', () => {
+      component.type = 'secondary';
+      expect(component.type).toBe('secondary');
+    });
+
+    it('should accept state input', () => {
+      const states: tagStates[] = ['default', 'success', 'info', 'warning', 'error', 'legacy'];
+
+      states.forEach((state) => {
+        component.state = state;
+        expect(component.state).toBe(state);
+      });
+    });
+
+    it('should accept showIcon input', () => {
+      component.showIcon = true;
+      expect(component.showIcon).toBe(true);
+    });
+
+    it('should accept icon input', () => {
+      component.icon = 'test-icon';
+      expect(component.icon).toBe('test-icon');
+    });
+
+    it('should accept text input', () => {
+      component.text = 'Test Text';
+      expect(component.text).toBe('Test Text');
+    });
+  });
+
+  describe('hasContent getter', () => {
+    it('should return false for empty text', () => {
+      component.text = '';
+      expect(component.hasContent).toBe(false);
+    });
+
+    it('should return false for whitespace-only text', () => {
+      component.text = '   ';
+      expect(component.hasContent).toBe(false);
+    });
+
+    it('should return true for valid text', () => {
+      component.text = 'Valid Text';
+      expect(component.hasContent).toBe(true);
+    });
+
+    it('should return true for text with leading/trailing spaces', () => {
+      component.text = '  Valid Text  ';
+      expect(component.hasContent).toBe(true);
+    });
+  });
+
+  describe('setState method', () => {
+    it('should call setState on ngOnInit', () => {
+      const setStateSpy = jest.spyOn(component, 'setState');
+      component.ngOnInit();
+      expect(setStateSpy).toHaveBeenCalled();
+    });
+
+    it('should set fontColor based on state', () => {
+      component.state = 'success';
+      component.setState();
+      expect(component.fontColor).toBeDefined();
+    });
+  });
+
+  describe('Estados del tag', () => {
+    const testStates: { state: tagStates; expectedColor: string }[] = [
+      { state: 'default', expectedColor: 'Primary-Primary' },
+      { state: 'success', expectedColor: 'Success-Success' },
+      { state: 'info', expectedColor: 'Info-Info' },
+      { state: 'warning', expectedColor: 'Warning-Warning' },
+      { state: 'error', expectedColor: 'Error-Error' },
+      { state: 'legacy', expectedColor: 'Gray-Gray' },
+    ];
+
+    testStates.forEach(({ state, expectedColor }) => {
+      it(`should handle ${state} state correctly`, () => {
+        component.state = state;
+        component.ngOnInit();
+
+        expect(component.colorMap[state]).toBe(expectedColor);
+      });
+    });
+  });
+
+  describe('Tipos del tag', () => {
+    it('should handle primary type', () => {
+      component.type = 'primary';
+      expect(component.type).toBe('primary');
+    });
+
+    it('should handle secondary type', () => {
+      component.type = 'secondary';
+      expect(component.type).toBe('secondary');
+    });
+  });
+
+  describe('Renderizado', () => {
+    it('should display text when provided', () => {
+      component.text = 'Test Tag';
+      fixture.detectChanges();
+
+      const tagElement = fixture.nativeElement.querySelector('.tags');
+      expect(tagElement.textContent).toContain('Test Tag');
+    });
+
+    it('should show icon when showIcon is true and icon is provided', () => {
+      component.showIcon = true;
+      component.icon = 'test-icon';
+      fixture.detectChanges();
+
+      const iconElement = fixture.nativeElement.querySelector('app-icon');
+      expect(iconElement).toBeTruthy();
+    });
+
+    it('should not show icon when showIcon is false', () => {
+      component.showIcon = false;
+      component.icon = 'test-icon';
+      fixture.detectChanges();
+
+      const iconElement = fixture.nativeElement.querySelector('app-icon');
+      expect(iconElement).toBeFalsy();
+    });
+
+    it('should apply correct styles for primary type', () => {
+      component.type = 'primary';
+      component.state = 'success';
+      fixture.detectChanges();
+
+      const appliedStyles = component.selectStyle();
+
+      // For primary type, background should be the state color with -500 variant
+      expect(appliedStyles['background-color']).toBe('var(--Success-Success-500)');
+      expect(appliedStyles['color']).toBe('var(--Neutral-White)');
+      expect(component.fontColor).toBe('Neutral-White');
+    });
+
+    it('should apply correct styles for secondary type', () => {
+      component.type = 'secondary';
+      component.state = 'info';
+      fixture.detectChanges();
+
+      const appliedStyles = component.selectStyle();
+
+      // For secondary type, background should be lighter variant of state color
+      expect(appliedStyles['background-color']).toBe('var(--Info-Info-50)');
+      expect(appliedStyles['color']).toBe('var(--Info-Info-700)');
+      expect(component.fontColor).toBe('Info-Info-700');
+    });
+  });
+
+  describe('Animaciones', () => {
+    it('should create component with animations', () => {
+      // El componente debería crearse sin errores incluso con animaciones
+      expect(component).toBeTruthy();
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle undefined text gracefully', () => {
+      component.text = undefined as any;
+      expect(() => component.hasContent).not.toThrow();
+    });
+
+    it('should handle null text gracefully', () => {
+      component.text = null as any;
+      expect(() => component.hasContent).not.toThrow();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete tag workflow', () => {
+      // Set all properties
+      component.type = 'secondary';
+      component.state = 'success';
+      component.showIcon = true;
+      component.icon = 'check';
+      component.text = 'Success Tag';
+
+      // Trigger ngOnInit
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      // Verify all properties are set correctly
+      expect(component.type).toBe('secondary');
+      expect(component.state).toBe('success');
+      expect(component.showIcon).toBe(true);
+      expect(component.icon).toBe('check');
+      expect(component.text).toBe('Success Tag');
+      expect(component.hasContent).toBe(true);
+    });
+
+    it('should handle tag without icon', () => {
+      component.type = 'primary';
+      component.state = 'error';
+      component.showIcon = false;
+      component.text = 'Error Tag';
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      expect(component.hasContent).toBe(true);
+      const iconElement = fixture.nativeElement.querySelector('app-icon');
+      expect(iconElement).toBeFalsy();
+    });
+
+    it('should handle empty tag', () => {
+      component.type = 'primary';
+      component.state = 'default';
+      component.showIcon = false;
+      component.text = '';
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      expect(component.hasContent).toBe(false);
+    });
+  });
+});

package/src/components-source/dropi-tag/dropi-tag.component.stories.ts

@@ -0,0 +1,290 @@
+/**
+ * @fileoverview Tag component stories for Storybook
+ * @description Label component for categorizing, filtering, or displaying status
+ */
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@dotlottie/player-component';
+import { DropiTagComponent } from './dropi-tag.component';
+const meta: Meta<DropiTagComponent> = {
+  title: 'UI Dropi/Tag',
+  component: DropiTagComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A label component for categorizing, filtering, or displaying status information.
+Tags help users quickly identify and organize content.
+
+### Key Features
+- **Types**: primary and secondary visual styles
+- **States**: default, success, info, warning, error, legacy
+- **Icons**: Optional icon display
+- **Versatile**: Use for status, categories, or labels
+        `,
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+      description: 'Visual style type that determines the tag appearance',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'primary' },
+        category: 'Appearance',
+      },
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'success', 'info', 'warning', 'error', 'legacy'],
+      description: 'State that determines the color scheme of the tag',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+        category: 'State',
+      },
+    },
+    icon: {
+      control: 'text',
+      description: 'Name of the icon to display inside the tag',
+      table: {
+        type: { summary: 'string' },
+        category: 'Appearance',
+      },
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Whether to show or hide the icon',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Appearance',
+      },
+    },
+    text: {
+      control: 'text',
+      description: 'Text content displayed inside the tag',
+      table: {
+        type: { summary: 'string' },
+        category: 'Data',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiTagComponent>;
+
+/**
+ * Basic tag with text only, no icon.
+ */
+export const Default: Story = {
+  args: {
+    type: 'primary',
+    state: 'default',
+    showIcon: false,
+    icon: '',
+    text: 'Default Tag',
+  },
+};
+
+/**
+ * Tag with icon and text.
+ */
+export const WithIcon: Story = {
+  args: {
+    type: 'primary',
+    state: 'default',
+    showIcon: true,
+    icon: 'Box',
+    text: 'With Icon',
+  },
+};
+
+/**
+ * Tag for variable type products.
+ */
+export const Variable: Story = {
+  args: {
+    type: 'primary',
+    state: 'default',
+    showIcon: false,
+    icon: '',
+    text: 'Variable',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tag for variable type products.',
+      },
+    },
+  },
+};
+
+/**
+ * Private tag - shows only lock icon without text.
+ */
+export const Private: Story = {
+  args: {
+    type: 'primary',
+    state: 'default',
+    showIcon: true,
+    icon: 'Lock',
+    text: '',
+  },
+};
+
+/**
+ * Tag for combo/bundle products.
+ */
+export const Combo: Story = {
+  args: {
+    type: 'primary',
+    state: 'info',
+    showIcon: false,
+    icon: '',
+    text: 'Combo',
+  },
+};
+
+/**
+ * Success state tag for positive feedback.
+ */
+export const Success: Story = {
+  args: {
+    type: 'primary',
+    state: 'success',
+    showIcon: true,
+    icon: 'Check-circle',
+    text: 'Success',
+  },
+};
+
+/**
+ * Warning state tag for alerts.
+ */
+export const Warning: Story = {
+  args: {
+    type: 'primary',
+    state: 'warning',
+    showIcon: false,
+    icon: 'Alert-triangle',
+    text: 'Warning',
+  },
+};
+
+/**
+ * Error state tag for failures.
+ */
+export const Error: Story = {
+  args: {
+    type: 'primary',
+    state: 'error',
+    showIcon: true,
+    icon: 'Cross-circle',
+    text: 'Error',
+  },
+};
+
+/**
+ * Info state tag for informational messages.
+ */
+export const Info: Story = {
+  args: {
+    type: 'primary',
+    state: 'info',
+    showIcon: true,
+    icon: 'Info',
+    text: 'Information',
+  },
+};
+
+/**
+ * Secondary type tag with subtle styling.
+ */
+export const SecondaryDefault: Story = {
+  args: {
+    type: 'secondary',
+    state: 'default',
+    showIcon: true,
+    icon: 'Box',
+    text: 'Secondary',
+  },
+};
+
+/**
+ * Secondary info tag.
+ */
+export const SecondaryInfo: Story = {
+  args: {
+    type: 'secondary',
+    state: 'info',
+    showIcon: true,
+    icon: 'Info',
+    text: 'Secondary Info',
+  },
+};
+
+/**
+ * Icon only tag without text - useful for private products.
+ */
+export const IconOnly: Story = {
+  args: {
+    type: 'primary',
+    state: 'warning',
+    showIcon: true,
+    icon: 'Lock',
+    text: '',
+  },
+};
+
+/**
+ * Text only tag without icon.
+ */
+export const TextOnly: Story = {
+  args: {
+    type: 'primary',
+    state: 'default',
+    showIcon: false,
+    icon: '',
+    text: 'Text Only',
+  },
+};
+
+/**
+ * Long text tag to test truncation behavior.
+ */
+export const LongText: Story = {
+  args: {
+    type: 'primary',
+    state: 'default',
+    showIcon: true,
+    icon: 'Box',
+    text: 'Very long text that might be truncated',
+  },
+};
+
+/**
+ * Multiple tags displayed together as they would appear in a product card.
+ */
+export const MultipleTagsExample: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+        <app-dropi-tag type="primary" state="default" text="Variable"></app-dropi-tag>
+        <app-dropi-tag type="primary" state="warning" [showIcon]="true" icon="Lock" text=""></app-dropi-tag>
+        <app-dropi-tag type="primary" state="info" text="Combo"></app-dropi-tag>
+        <app-dropi-tag type="secondary" state="success" [showIcon]="true" icon="Check-circle" text="Available"></app-dropi-tag>
+      </div>
+    `,
+  }),
+};

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

@@ -0,0 +1,92 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IconComponent } from '../icon/icon.component';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+export type tagStates = 'default' | 'success' | 'info' | 'warning' | 'error' | 'legacy';
+export type tagTypes = 'primary' | 'secondary';
+
+@Component({
+  selector: 'app-dropi-tag',
+  templateUrl: './dropi-tag.component.html',
+  styleUrls: ['./dropi-tag.component.scss'],
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  animations: [
+    trigger('fade', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'scale(0.8)' }),
+        animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
+      ]),
+      transition(':leave', [
+        animate('150ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' })),
+      ]),
+    ]),
+  ],
+})
+export class DropiTagComponent implements OnInit {
+  @Input() type: tagTypes = 'primary';
+  @Input() state: tagStates = 'default';
+  @Input() showIcon: boolean = false;
+  @Input() icon: string = '';
+  @Input() text: string = '';
+
+  colorMap: { [key: string]: string } = {
+    default: 'Primary-Primary',
+    success: 'Success-Success',
+    info: 'Info-Info',
+    warning: 'Warning-Warning',
+    error: 'Error-Error',
+    legacy: 'Gray-Gray',
+  };
+
+  fontColor: string;
+
+  get hasContent(): boolean {
+    return !!(this.text && this.text.trim().length > 0);
+  }
+
+  ngOnInit() {
+    this.setState();
+  }
+
+  selectStyle() {
+    let stylesTags = {
+      primary: {
+        bgc: `var(--${this.colorMap[this.state]}-500)`,
+        cl: 'var(--Neutral-White)',
+      },
+      secondary: {
+        bgc: `var(--${this.colorMap[this.state]}${this.state == 'default' || this.state == 'legacy' ? '-100' : '-50'})`,
+        cl: `var(--${this.colorMap[this.state]}${this.state == 'default' ? '-500' : '-700'})`,
+      },
+    };
+
+    let styleToApply: {
+      'background-color': any;
+      'border-radius': any;
+      color: any;
+    };
+
+    if (stylesTags.hasOwnProperty(this.type)) {
+      const selectedStyle = stylesTags[this.type];
+
+      styleToApply = {
+        'background-color': selectedStyle.bgc,
+        'border-radius': 'var(--Border-5)',
+        color: selectedStyle.cl,
+      };
+
+      this.fontColor =
+        this.type == 'primary'
+          ? 'Neutral-White'
+          : this.colorMap[this.state] + (this.state == 'default' ? '-500' : '-700');
+
+      return styleToApply;
+    }
+  }
+
+  setState() {
+    return this.selectStyle();
+  }
+}