tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add icon button component and integrate into cart item for improved UI

Browse Source
This commit is contained in:
ncoronel
2026-07-02 09:13:33 -03:00
parent 202205c038
commit 0a7a9d91c7
9 changed files with 222 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -63,6 +63,57 @@
<hr class="section-divider" />
<div class="icon-button-showcase">
<h2>Icon Buttons</h2>
<p class="text-muted mb-4">
Botones de ícono pequeños con color base <code>#666666</code>, deshabilitados con <code>#A0A0A0</code> y estados hover/active con color de marca (a excepción de trash que usa danger).
</p>
<div class="icon-button-showcase__grid">
<!-- Disabled Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Disabled</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" [disabled]="true" />
<app-icon-button variant="trash" [disabled]="true" />
<app-icon-button variant="angle-left" [disabled]="true" />
<app-icon-button variant="angle-right" [disabled]="true" />
<app-icon-button variant="angle-up" [disabled]="true" />
<app-icon-button variant="angle-down" [disabled]="true" />
<app-icon-button variant="copy" [disabled]="true" />
</div>
</div>
<!-- Normal Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Normal</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" />
<app-icon-button variant="trash" />
<app-icon-button variant="angle-left" />
<app-icon-button variant="angle-right" />
<app-icon-button variant="angle-up" />
<app-icon-button variant="angle-down" />
<app-icon-button variant="copy" />
</div>
</div>
<!-- Hover/Active Row -->
<div class="icon-button-showcase__row">
<span class="icon-button-showcase__label">Active / Hover</span>
<div class="icon-button-showcase__items">
<app-icon-button variant="user" class="hover-preview" />
<app-icon-button variant="trash" class="hover-preview" />
<app-icon-button variant="angle-left" class="hover-preview" />
<app-icon-button variant="angle-right" class="hover-preview" />
<app-icon-button variant="angle-up" class="hover-preview" />
<app-icon-button variant="angle-down" class="hover-preview" />
<app-icon-button variant="copy" class="hover-preview" />
</div>
</div>
</div>
</div>
<div class="input-grid">
<div class="input-field">
<label for="search-input">Texto</label>

41
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
View File

@@ -244,3 +244,44 @@ h1 {
}
}
}
.icon-button-showcase {
display: grid;
gap: 1.5rem;
&__grid {
display: grid;
gap: 1.5rem;
background-color: #eaeaea;
padding: 1.5rem;
border-radius: 8px;
border: 1px solid #dee2e6;
}
&__row {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
gap: 1.5rem;
@media (max-width: 575.98px) {
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
}
}
&__label {
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
color: #495057;
letter-spacing: 0.05em;
}
&__items {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
}
}

11
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
View File

@@ -5,12 +5,21 @@ import { InputComponent } from '../../../../shared/components/input/input.compon
import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
import { TenantService } from '../../../../core/services/tenant.service';
import { ToastService } from '../../../../core/services/toast.service';
@Component({
selector: 'app-reutilizables-test-page',
imports: [ButtonComponent, CartComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
imports: [
ButtonComponent,
CartComponent,
InputComponent,
PaginatorComponent,
ProductCardComponent,
StoreSectionComponent,
IconButtonComponent
],
templateUrl: './reutilizables-test-page.component.html',
styleUrl: './reutilizables-test-page.component.scss'
})

8
src/app/shared/components/cart-item/cart-item.component.html
View File

@@ -41,9 +41,11 @@
(increase)="onIncrease()"
(decrease)="onDecrease()"
/>
<button class="border-0 bg-transparent d-inline-flex align-items-center justify-content-center cart-item-remove-btn" type="button" (click)="onRemove()">
<i class="fa-solid fa-trash"></i>
</button>
<app-icon-button
variant="trash"
class="cart-item-remove-btn"
(click)="onRemove()"
/>
</div>
</div>
</article>

5
src/app/shared/components/cart-item/cart-item.component.scss
View File

@@ -96,10 +96,5 @@
.cart-item-remove-btn {
width: 18px;
height: 18px;
margin-left: 0.35rem;
padding: 0;
color: #b3b3b3;
font-size: 12px;
}

3
src/app/shared/components/cart-item/cart-item.component.ts
View File

@@ -1,5 +1,6 @@
import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
import { IconButtonComponent } from '../icon-button/icon-button.component';
export interface CartItemAttribute {
label: string;
@@ -9,7 +10,7 @@ export interface CartItemAttribute {
@Component({
selector: 'app-cart-item',
standalone: true,
imports: [QuantitySelectorComponent],
imports: [QuantitySelectorComponent, IconButtonComponent],
templateUrl: './cart-item.component.html',
styleUrl: './cart-item.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush

8
src/app/shared/components/icon-button/icon-button.component.html Normal file
View File

@@ -0,0 +1,8 @@
<button
type="button"
[disabled]="disabled()"
[ngClass]="buttonClasses()"
[attr.aria-label]="ariaLabel() || variant()"
>
<i [ngClass]="iconClass()"></i>
</button>

64
src/app/shared/components/icon-button/icon-button.component.scss Normal file
View File

@@ -0,0 +1,64 @@
:host {
display: inline-block;
vertical-align: middle;
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
padding: 4px;
margin: 0;
color: #666666;
font-size: 20px;
cursor: pointer;
outline: none;
transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
border-radius: 4px;
i {
display: inline-block;
line-height: 1;
}
// Active state subtle scale down
&:active:not(:disabled) {
transform: scale(0.92);
}
// Focus ring for accessibility
&:focus-visible {
outline: 2px solid var(--tenant-primary);
outline-offset: 2px;
}
// Disabled state
&:disabled {
color: #A0A0A0;
cursor: not-allowed;
pointer-events: none;
}
}
// Hover/Active/Focus colors (non-disabled)
.icon-btn:hover:not(:disabled),
.icon-btn:focus-visible:not(:disabled),
.icon-btn.hover-preview:not(:disabled),
:host(.hover-preview) .icon-btn:not(:disabled) {
color: var(--tenant-primary);
}
// Trash is special (uses danger color for hover/active)
.icon-btn--trash {
&:hover:not(:disabled),
&:focus-visible:not(:disabled),
&.hover-preview:not(:disabled) {
color: var(--tenant-danger);
}
}
:host(.hover-preview) .icon-btn--trash:not(:disabled) {
color: var(--tenant-danger);
}

41
src/app/shared/components/icon-button/icon-button.component.ts Normal file
View File

@@ -0,0 +1,41 @@
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { NgClass } from '@angular/common';
export type IconButtonVariant =
| 'user'
| 'trash'
| 'angle-right'
| 'angle-left'
| 'angle-up'
| 'angle-down'
| 'copy';
@Component({
selector: 'app-icon-button',
imports: [NgClass],
templateUrl: './icon-button.component.html',
styleUrl: './icon-button.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class IconButtonComponent {
readonly variant = input.required<IconButtonVariant>();
readonly disabled = input(false);
readonly ariaLabel = input<string>('');
protected readonly iconClass = computed(() => {
const classes: Record<IconButtonVariant, string> = {
user: 'fa-regular fa-circle-user',
trash: 'fa-solid fa-trash',
'angle-right': 'fa-solid fa-angle-right',
'angle-left': 'fa-solid fa-angle-left',
'angle-up': 'fa-solid fa-angle-up',
'angle-down': 'fa-solid fa-angle-down',
copy: 'fa-solid fa-copy'
};
return classes[this.variant()];
});
protected readonly buttonClasses = computed(() => {
return ['icon-btn', `icon-btn--${this.variant()}`];
});
}