@dropi/ui-components 1.0.0

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

@@ -0,0 +1,221 @@
+/**
+ * @fileoverview Button component stories for Storybook
+ * @description Primary UI button with multiple variants and states
+ */
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { ButtonComponent } from './dropi-button.component';
+
+const meta: Meta<ButtonComponent> = {
+  title: 'UI Dropi/Button',
+  component: ButtonComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=195-11769&m=dev',
+    },
+    docs: {
+      description: {
+        component: `
+A versatile button component that supports multiple visual styles, states, and sizes.
+
+## Key Features
+- **Types**: default, legacy, success, error, info, warning, dropdown
+- **Severity**: primary, secondary, tertiary for visual hierarchy
+- **Sizes**: small, normal, large
+- **States**: default, disabled, loading
+- **Icons**: Pre and post icon support
+
+## Usage
+\`\`\`html
+<dropi-button
+  text="Click me"
+  type="success"
+  severity="primary"
+  size="normal"
+  (onClick)="handleClick()">
+</dropi-button>
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['default', 'legacy', 'success', 'error', 'info', 'warning', 'dropdown'],
+      description: 'Defines the visual style and semantic meaning of the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    severity: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+      description: 'Sets the visual hierarchy level of the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'normal', 'large'],
+      description: 'Controls the size of the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'disabled', 'loading'],
+      description: 'Sets the interactive state of the button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    preIcon: {
+      control: 'text',
+      description: 'Icon name to display before the button text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    postIcon: {
+      control: 'text',
+      description: 'Icon name to display after the button text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    text: {
+      control: 'text',
+      description: 'The text content displayed inside the button',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'Event emitted when the button is clicked',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ButtonComponent>;
+
+/** Default button with primary severity */
+export const Default: Story = {
+  args: {
+    text: 'Click me',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The default button style with primary severity. Use this for main actions.',
+      },
+    },
+  },
+};
+
+/** Secondary button for less prominent actions */
+export const Secondary: Story = {
+  args: {
+    text: 'Secondary',
+    severity: 'secondary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Secondary buttons are used for less prominent actions alongside primary buttons.',
+      },
+    },
+  },
+};
+
+/** Tertiary button for minimal emphasis */
+export const Tertiary: Story = {
+  args: {
+    text: 'Tertiary',
+    severity: 'tertiary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tertiary buttons have minimal visual emphasis, ideal for optional actions.',
+      },
+    },
+  },
+};
+
+/** Success button for confirmation actions */
+export const PrimarySuccess: Story = {
+  args: {
+    text: 'Confirm',
+    severity: 'primary',
+    type: 'success',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Success buttons indicate positive or confirmatory actions like saving or completing.',
+      },
+    },
+  },
+};
+
+/** Dropdown button with expandable menu */
+export const Dropdown: Story = {
+  args: {
+    text: 'Options',
+    severity: 'tertiary',
+    state: 'default',
+    type: 'dropdown',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown buttons reveal additional options or actions when clicked.',
+      },
+    },
+  },
+};
+
+/** Disabled button that cannot be interacted with */
+export const Disabled: Story = {
+  args: {
+    text: 'Disabled',
+    severity: 'primary',
+    state: 'disabled',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled buttons indicate that an action is currently unavailable.',
+      },
+    },
+  },
+};
+
+/** Loading button showing progress indicator */
+export const Loading: Story = {
+  args: {
+    text: 'Loading',
+    severity: 'primary',
+    state: 'loading',
+    preIcon: 'Apps',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading state provides visual feedback while an action is being processed.',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,82 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+
+export type ButtonType =
+  | 'legacy'
+  | 'default'
+  | 'success'
+  | 'info'
+  | 'error'
+  | 'warning'
+  | 'dropdown';
+export type ButtonSeverity = 'primary' | 'secondary' | 'tertiary';
+export type ButtonSize = 'large' | 'normal' | 'small';
+export type ButtonState = 'default' | 'disabled' | 'loading';
+
+// @figma-node 2-381
+@Component({
+  selector: 'dropi-button',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  templateUrl: './dropi-button.component.html',
+  styleUrls: ['./dropi-button.component.scss'],
+  host: { 'data-figma-node': '2-381' },
+})
+export class ButtonComponent {
+  @Input() type: ButtonType = 'default';
+  @Input() severity: ButtonSeverity = 'primary';
+  @Input() size: ButtonSize = 'normal';
+  @Input() state: ButtonState = 'default';
+  @Input() preIcon: string = '';
+  @Input() postIcon: string = '';
+  @Input() text: string = '';
+  @Output() onClick = new EventEmitter<Event>();
+
+  colorload = 'var(--Primary-Primary-500)';
+
+  colorMap: { [key: string]: string } = {
+    default: 'Primary-Primary-',
+    success: 'Success-Success-',
+    error: 'Error-Error-',
+    info: 'Info-Info-',
+    legacy: 'Secondary-Secondary-',
+    warning: 'Warning-Warning-',
+  };
+
+  get iconSize(): string {
+    switch (this.size) {
+      case 'large':
+        return '24px';
+      case 'small':
+        return '16px';
+      default:
+        return '18px'; // Tamaño por defecto (normal)
+    }
+  }
+
+  get color() {
+    let intensity = this.state === 'disabled' ? '300' : '500';
+    return this.colorMap[this.type] + intensity;
+  }
+
+  get fontColor(): string {
+    switch (this.severity) {
+      case 'tertiary':
+        return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;
+      case 'secondary':
+        return this.color;
+      default:
+        return 'Neutral-White';
+    }
+  }
+
+  get svgColor(): string {
+    return `var(--${this.fontColor})`;
+  }
+  handleClick(event: Event) {
+    if (this.state !== 'disabled' && this.state !== 'loading') {
+      this.onClick.emit(event);
+    }
+  }
+}

package/src/components-source/dropi-card-checkbox/dropi-card-checkbox.component.html

@@ -0,0 +1,24 @@
+<ng-container>
+  <div (click)="clickFullWidth(state === 'checked')" 
+    class="container-card-check"
+    [ngClass]="[
+      styleLine,
+      (state === 'checked' && type === 'with card') ? 'is-checked' : '',
+      disabled ? 'disabled' : ''
+    ]"
+  >
+    <app-dropi-checkbox [checked]="state == 'checked' ? true : false" [disabled]="disabled" />
+    <div class="Body-M-Regular container-text">
+      <div class="title-check">{{ title }}</div>
+      <div *ngIf="description" class="Body-S-Regular description-text">
+        {{ description }}
+      </div>
+    </div>
+    <div class="extra-info">
+      <div *ngIf="extraInfo" class="Body-S-Regular">{{ extraInfo }}</div>
+      <div *ngIf="extraInfo && extraInfoDescription">
+        <h4>{{ extraInfoDescription }}</h4>
+      </div>
+    </div>
+  </div>
+</ng-container>

package/src/components-source/dropi-card-checkbox/dropi-card-checkbox.component.scss

@@ -0,0 +1,85 @@
+.container-card-check {
+  padding: var(--Size-4);
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: var(--Size-2);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-3);
+  cursor: pointer;
+  height: 66px;
+  overflow: hidden;
+
+  &.disabled {
+    border-radius: var(--Border-2, 8px);
+    border: 1px solid var(--Gray-Gray-100, #E6EAF2);
+    background-color: var(--Gray-Gray-50, #F7F8FA);
+    cursor: default;
+  }
+}
+
+.container-text {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  text-align: start;
+  overflow: hidden;
+}
+
+.container-card-check.disabled .container-text,
+.container-card-check.disabled .title-check,
+.container-card-check.disabled .description-text,
+.container-card-check.disabled .Body-S-Regular,
+.container-card-check.disabled h4 {
+  color: var(--Gray-Gray-400, #858EA6);
+}
+
+.container-text>div {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description-text {
+  margin-top: var(--Size-2);
+
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.disabled {
+    color: var(--Gray-Gray-400, #858EA6);
+  }
+}
+
+.extra-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.extra-info>div>h4 {
+  margin: 0;
+}
+
+.default-card {
+  border: none;
+  display: flex;
+}
+
+.is-checked {
+  background: var(--Primary-Primary-50);
+  border: 1px solid var(--Primary-Primary-500);
+}
+
+.title-check {
+  color: var(--Gray-Gray-700);
+}

package/src/components-source/dropi-card-checkbox/dropi-card-checkbox.component.spec.ts

@@ -0,0 +1,157 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiCardCheckboxComponent } from './dropi-card-checkbox.component';
+import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
+
+describe('DropiCardCheckboxComponent', () => {
+  let component: DropiCardCheckboxComponent;
+  let fixture: ComponentFixture<DropiCardCheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiCardCheckboxComponent, DropiCheckboxComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiCardCheckboxComponent);
+    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('default');
+      expect(component.title).toBe('Tittle');
+      expect(component.description).toBe('');
+      expect(component.extraInfo).toBe('');
+      expect(component.extraInfoDescription).toBe('');
+      expect(component.state).toBe('checked');
+      expect(component.disabled).toBe(false);
+    });
+  });
+
+  describe('Propiedad type', () => {
+    it('should accept "default" type', () => {
+      component.type = 'default';
+      fixture.detectChanges();
+      expect(component.type).toBe('default');
+    });
+
+    it('should accept "with card" type', () => {
+      component.type = 'with card';
+      fixture.detectChanges();
+      expect(component.type).toBe('with card');
+    });
+  });
+
+  describe('Propiedad state', () => {
+    it('should accept "checked" state', () => {
+      component.state = 'checked';
+      expect(component.state).toBe('checked');
+    });
+
+    it('should accept "default" state', () => {
+      component.state = 'default';
+      expect(component.state).toBe('default');
+    });
+  });
+
+  describe('Propiedades de texto', () => {
+    it('should accept title input', () => {
+      component.title = 'Custom Title';
+      expect(component.title).toBe('Custom Title');
+    });
+
+    it('should accept description input', () => {
+      component.description = 'Custom description';
+      expect(component.description).toBe('Custom description');
+    });
+
+    it('should accept extraInfo input', () => {
+      component.extraInfo = 'Extra information';
+      expect(component.extraInfo).toBe('Extra information');
+    });
+
+    it('should accept extraInfoDescription input', () => {
+      component.extraInfoDescription = 'Extra info description';
+      expect(component.extraInfoDescription).toBe('Extra info description');
+    });
+  });
+
+  describe('Propiedad disabled', () => {
+    it('should accept disabled true', () => {
+      component.disabled = true;
+      expect(component.disabled).toBe(true);
+    });
+
+    it('should accept disabled false', () => {
+      component.disabled = false;
+      expect(component.disabled).toBe(false);
+    });
+  });
+
+  describe('Método ngOnInit', () => {
+    it('should set styleLine to "default-card" when type is default', () => {
+      component.type = 'default';
+      component.ngOnInit();
+      expect(component.styleLine).toBe('default-card');
+    });
+
+    it('should set styleLine to empty string when type is "with card"', () => {
+      component.type = 'with card';
+      component.ngOnInit();
+      expect(component.styleLine).toBe('');
+    });
+  });
+
+  describe('Método changeCheck', () => {
+    it('should set state to "checked" when true is passed', () => {
+      component.changeCheck(true);
+      expect(component.state).toBe('checked');
+    });
+
+    it('should set state to "default" when false is passed', () => {
+      component.changeCheck(false);
+      expect(component.state).toBe('default');
+    });
+
+    it('should emit onChange event', () => {
+      const spy = jest.spyOn(component.onChange, 'emit');
+      component.changeCheck(true);
+      expect(spy).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('Método clickFullWidth', () => {
+    it('should not change state when disabled is true', () => {
+      component.disabled = true;
+      component.state = 'checked';
+      component.clickFullWidth(true);
+      expect(component.state).toBe('checked');
+    });
+
+    it('should toggle state when not disabled', () => {
+      component.disabled = false;
+      component.state = 'checked';
+      component.clickFullWidth(true);
+      expect(component.state).toBe('default');
+    });
+
+    it('should call changeCheck with opposite value', () => {
+      component.disabled = false;
+      const spy = jest.spyOn(component, 'changeCheck');
+      component.clickFullWidth(true);
+      expect(spy).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('Output onChange', () => {
+    it('should emit when checkbox state changes', () => {
+      const spy = jest.spyOn(component.onChange, 'emit');
+      component.changeCheck(false);
+      expect(spy).toHaveBeenCalledWith(false);
+    });
+  });
+});