feat(sf-badge): new component

apps/demo-app/src/app/app.routes.ts

@@ -18,6 +18,13 @@ export const routes: Routes = [
             (mod) => mod.ExampleSfIconBasePageComponent
           ),
       },
+      {
+        path: 'sf-badge',
+        loadComponent: () =>
+          import('./pages/example-sf-badge-page/example-sf-badge-page.component').then(
+            (mod) => mod.ExampleSfBadgePageComponent
+          ),
+      },
       {
         path: 'sf-button',
         loadComponent: () =>

apps/demo-app/src/app/layouts/example-layout/example-layout.component.ts

@@ -20,6 +20,7 @@ import { filter, map } from 'rxjs';
 })
 export class ExampleLayoutComponent {
   components = [
+    { name: 'Badge', url: '/sf-badge' },
     { name: 'Icon Base', url: '/sf-icon-base' },
     { name: 'Button', url: '/sf-button' },
     { name: 'Counter', url: '/sf-counter' },

apps/demo-app/src/app/pages/example-sf-badge-page/example-sf-badge-page.component.html

@@ -0,0 +1,11 @@
+<app-example-wrapper [controls]="controls" [state]="prepareControlsData.state">
+  <button sf-button [square]="true" variant="tertiary" class="relative">
+    <sf-icon-shopping-cart />
+    <sf-badge
+      [content]="prepareControlsData.state().content"
+      [max]="prepareControlsData.state().max"
+      [variant]="prepareControlsData.state().variant"
+      [placement]="prepareControlsData.state().placement"
+    />
+  </button>
+</app-example-wrapper>

apps/demo-app/src/app/pages/example-sf-badge-page/example-sf-badge-page.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  SfBadgeComponent,
+  SfButtonComponent,
+  SfIconShoppingCartComponent,
+} from '@ng-storefront-ui';
+import { ExampleWrapperComponent } from 'src/app/components/example-wrapper/example-wrapper.component';
+import { Controls } from 'src/app/components/controls/controls.types';
+import {
+  SfBadgePlacement,
+  SfBadgeVariant,
+} from '@ng-storefront-ui/components/sf-badge/sf-badge.type';
+import { ControlService } from 'src/app/services/control.service';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    ExampleWrapperComponent,
+    SfBadgeComponent,
+    SfButtonComponent,
+    SfIconShoppingCartComponent,
+  ],
+  templateUrl: './example-sf-badge-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [ControlService],
+})
+export class ExampleSfBadgePageComponent {
+  controls: Controls = [
+    {
+      type: 'text',
+      modelName: 'content',
+      description: 'Content to display in the badge.',
+      propType: 'string | number',
+    },
+    {
+      type: 'text',
+      modelName: 'max',
+      description: 'Maximum number of counter to show.',
+      propType: 'number',
+      propDefaultValue: '99',
+    },
+    {
+      type: 'select',
+      modelName: 'variant',
+      description: 'Badge can have content or be a simple dot.',
+      options: Object.values(SfBadgeVariant),
+      propType: 'SfBadgeVariant',
+      propDefaultValue: 'standard',
+    },
+    {
+      type: 'select',
+      modelName: 'placement',
+      description: 'Position of the badge relatively to a container.',
+      options: Object.values(SfBadgePlacement),
+      propType: 'SfBadgePlacement',
+      propDefaultValue: 'top-right',
+    },
+  ];
+
+  prepareControlsData = this.controlService.prepareControls(this.controls, {
+    content: '1',
+    max: 99,
+    variant: SfBadgeVariant.standard,
+    placement: SfBadgePlacement['top-right'],
+  });
+
+  constructor(private controlService: ControlService) {}
+}

packages/ng-storefront-ui/components/public-api.ts

@@ -2,6 +2,8 @@
  * Public API Surface of ng-storefront-ui
  */
 
+export * from './sf-badge/sf-badge.component';
+
 export * from './sf-button/sf-button.component';
 
 export * from './sf-counter/sf-counter.component';

packages/ng-storefront-ui/components/sf-badge/sf-badge.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SfBadgeComponent } from './sf-badge.component';
+
+describe('SfBadgeComponent', () => {
+  let component: SfBadgeComponent;
+  let fixture: ComponentFixture<SfBadgeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SfBadgeComponent],
+    });
+    fixture = TestBed.createComponent(SfBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/ng-storefront-ui/components/sf-badge/sf-badge.component.ts

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SfBadgePlacement, SfBadgeVariant } from './sf-badge.type';
+
+@Component({
+  selector: 'sf-badge',
+  standalone: true,
+  imports: [CommonModule],
+  template: '{{ displayValue }}',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SfBadgeComponent {
+  @Input() content: string | number = '';
+
+  @Input() max = 99;
+
+  @Input() placement: keyof typeof SfBadgePlacement = SfBadgePlacement['top-right'];
+
+  @Input() variant: keyof typeof SfBadgeVariant = SfBadgeVariant['standard'];
+
+  @HostBinding('class') get hostClass() {
+    const placementClass = {
+      'top-right': 'top-0 right-0 -translate-x-0.5 translate-y-0.5',
+      'top-left': 'top-0 left-0 translate-x-0.5 translate-y-0.5',
+      'bottom-right': 'bottom-0 right-0 -translate-x-0.5 -translate-y-0.5',
+      'bottom-left': 'bottom-0 left-0 translate-x-0.5 -translate-y-0.5',
+    };
+
+    return [
+      'block absolute py-0.5 px-1 bg-secondary-700 font-medium text-white text-[8px] leading-[8px] rounded-xl',
+      this.isDot ? 'w-[10px] h-[10px]' : 'min-w-[12px] min-h-[12px]',
+      placementClass[this.placement],
+    ].join(' ');
+  }
+
+  @HostBinding('attr.data-testid') dataTestId = 'badge';
+
+  get isDot() {
+    return this.variant === 'dot';
+  }
+
+  get displayValue() {
+    if (this.isDot) {
+      return '';
+    }
+
+    if (!Number.isNaN(this.content) && Number(this.content) > this.max) {
+      return `${this.max}+`;
+    }
+
+    return this.content;
+  }
+}

packages/ng-storefront-ui/components/sf-badge/sf-badge.type.ts

@@ -0,0 +1,11 @@
+export enum SfBadgeVariant {
+  standard = 'standard',
+  dot = 'dot',
+}
+
+export enum SfBadgePlacement {
+  'top-right' = 'top-right',
+  'top-left' = 'top-left',
+  'bottom-right' = 'bottom-right',
+  'bottom-left' = 'bottom-left',
+}