feat: implement cart icon component with quantity badge and integrate into store header for improved UI

src/app/shared/components/cart-icon/cart-icon.component.html

@@ -0,0 +1,13 @@
+<button
+  type="button"
+  [disabled]="disabled()"
+  [attr.aria-label]="ariaLabel()"
+  class="cart-icon"
+>
+  <div class="cart-icon__container">
+    <i class="fa-solid fa-cart-shopping cart-icon__glyph" aria-hidden="true"></i>
+    @if (hasQuantity()) {
+      <span class="cart-icon__badge" data-testid="cart-badge">{{ quantity() }}</span>
+    }
+  </div>
+</button>

src/app/shared/components/cart-icon/cart-icon.component.scss

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.cart-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 4px;
+  margin: 0;
+  color: #666666;
+  cursor: pointer;
+  outline: none;
+  transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
+  border-radius: 4px;
+
+  // 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)
+.cart-icon:hover:not(:disabled),
+.cart-icon:focus-visible:not(:disabled),
+.cart-icon.hover-preview:not(:disabled),
+:host(.hover-preview) .cart-icon:not(:disabled) {
+  color: var(--tenant-primary);
+}
+
+.cart-icon__container {
+  position: relative;
+  display: inline-flex;
+}
+
+.cart-icon__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 23px;
+  height: 23px;
+  font-size: 23px;
+  line-height: 1;
+}
+
+.cart-icon__badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: var(--tenant-primary);
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  line-height: 1;
+  box-sizing: border-box;
+}

src/app/shared/components/cart-icon/cart-icon.component.spec.ts

@@ -0,0 +1,60 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { CartIconComponent } from './cart-icon.component';
+
+describe('CartIconComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartIconComponent]
+    }).compileComponents();
+  });
+
+  function setup(quantity?: number | null, disabled = false) {
+    const fixture = TestBed.createComponent(CartIconComponent);
+    if (quantity !== undefined) {
+      fixture.componentRef.setInput('quantity', quantity);
+    }
+    fixture.componentRef.setInput('disabled', disabled);
+    fixture.detectChanges();
+
+    return {
+      fixture,
+      element: fixture.nativeElement as HTMLElement
+    };
+  }
+
+  it('renders the cart shopping icon', () => {
+    const { element } = setup();
+    expect(element.querySelector('.fa-cart-shopping')).not.toBeNull();
+  });
+
+  it('does not render the badge when quantity is undefined', () => {
+    const { element } = setup();
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+  });
+
+  it('does not render the badge when quantity is 0', () => {
+    const { element } = setup(0);
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+  });
+
+  it('renders the badge with correct quantity when positive', () => {
+    const { element } = setup(3);
+    const badge = element.querySelector('[data-testid="cart-badge"]');
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent?.trim()).toBe('3');
+  });
+
+  it('disables the button when disabled is true', () => {
+    const { element } = setup(undefined, true);
+    const button = element.querySelector('button');
+    expect(button?.disabled).toBe(true);
+  });
+
+  it('enables the button when disabled is false', () => {
+    const { element } = setup(undefined, false);
+    const button = element.querySelector('button');
+    expect(button?.disabled).toBe(false);
+  });
+});

src/app/shared/components/cart-icon/cart-icon.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'app-cart-icon',
+  imports: [],
+  templateUrl: './cart-icon.component.html',
+  styleUrl: './cart-icon.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CartIconComponent {
+  readonly quantity = input<number | null | undefined>(undefined);
+  readonly disabled = input(false);
+  readonly ariaLabel = input<string>('Carrito de compras');
+
+  protected readonly hasQuantity = computed(() => {
+    const q = this.quantity();
+    return q !== null && q !== undefined && q > 0;
+  });
+}