feat: add button component

angular.json

@@ -5,6 +5,11 @@
   "projects": {
     "sdg": {
       "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "packages/sdg",
       "sourceRoot": "packages/sdg",
       "prefix": "sdg",
@@ -28,10 +33,7 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "tsConfig": "packages/sdg/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "codeCoverage": true,
             "progress": true
           }

packages/sdg/src/lib/button/button.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TEST_CONFIG } from '../../test-config';
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent],
+      providers: [...TEST_CONFIG.providers!]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/sdg/src/lib/button/button.component.ts

@@ -0,0 +1,107 @@
+import { Component, Directive, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+
+type ButtonColor = 'primary' | 'accent' | 'warn';
+
+@Directive()
+class ButtonBase {
+  color = input<ButtonColor>();
+  disableRipple = input<boolean>();
+
+  click = output();
+
+  handleClick(event: Event) {
+    event.stopImmediatePropagation();
+    this.click.emit();
+  }
+}
+
+@Component({
+  selector: 'sdg-button-icon',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-icon-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="click.emit()"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class IconButtonComponent extends ButtonBase {}
+
+@Component({
+  selector: 'sdg-button-raised',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-raised-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class ButtonRaisedComponent extends ButtonBase {}
+
+@Component({
+  selector: 'sdg-button-flat',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-flat-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class ButtonFlatComponent extends ButtonBase {}
+
+@Component({
+  selector: 'sdg-button-stroked',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-stroked-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class ButtonStrokedComponent extends ButtonBase {}
+
+@Component({
+  selector: 'sdg-button',
+  standalone: true,
+  imports: [MatButtonModule],
+  styleUrl: './button.scss',
+  template: `
+    <button
+      mat-button
+      [color]="color()"
+      [disableRipple]="disableRipple()"
+      (click)="handleClick($event)"
+    >
+      <ng-content />
+    </button>
+  `
+})
+export class ButtonComponent extends ButtonBase {}

packages/sdg/src/lib/button/button.scss

@@ -0,0 +1,7 @@
+:host {
+  pointer-events: none;
+}
+
+button {
+  pointer-events: all;
+}

packages/sdg/src/lib/button/index.ts

@@ -0,0 +1 @@
+export * from './button.component';

packages/sdg/src/public-api.ts

@@ -3,6 +3,7 @@
  */
 
 export * from './lib/breadcrumb';
+export * from './lib/button';
 export * from './lib/header';
 export * from './lib/navigation';
 export * from './lib/screen';

projects/demo/src/app/pages/components/showcases/button/button.component.html

@@ -11,42 +11,51 @@
   /></span>
   <span>du Système de design gouvernemental.</span>
 </p>
-<p>
-  <span>Le concept de bouton est basé sur le </span>
-  <span
-    ><app-external-link
-      title="bouton d'Angular Material"
-      link="https://material.angular.io/components/button/overview"
-  /></span>
-  <span>. Voici quelques uns des types de boutons.</span>
-</p>
 
 <app-example-viewer
   title="Variantes"
   configFolder="button"
   codeFolder="button"
   class="button-types"
 >
-  <button mat-raised-button color="primary">Raised</button>
-  <button mat-stroked-button color="primary">Stroked</button>
-  <button mat-button color="primary">Basic</button>
-  <button mat-flat-button color="primary">Flat</button>
+  <sdg-button-raised color="primary" (click)="handleClick()"
+    >Raised</sdg-button-raised
+  >
+  <sdg-button-stroked color="primary" (click)="handleClick()"
+    >Stroked</sdg-button-stroked
+  >
+  <sdg-button color="primary" (click)="handleClick()">Basic</sdg-button>
+  <sdg-button-flat color="primary" (click)="handleClick()"
+    >Flat</sdg-button-flat
+  >
 </app-example-viewer>
 
 <p>
   Angular Material offre la possibilité de contrôler la couleur via la propriété
   "color" tout en respectant le thème de l'application.
 </p>
 <app-example-viewer title="Couleurs" class="button-types">
-  <button mat-flat-button color="primary">Primaire</button>
-  <button mat-flat-button color="accent">Accent</button>
-  <button mat-flat-button color="warn">Avertissement</button>
+  <sdg-button-flat color="primary" (click)="handleClick()"
+    >Primaire</sdg-button-flat
+  >
+  <sdg-button-flat color="accent" (click)="handleClick()"
+    >Accent</sdg-button-flat
+  >
+  <sdg-button-flat color="warn" (click)="handleClick()"
+    >Avertissement</sdg-button-flat
+  >
 </app-example-viewer>
 
 <p>Pour répliquer l'exemple du SDG:</p>
 <app-example-viewer title="Types de boutons (SDG)" class="button-types">
-  <button mat-raised-button color="primary">Principal</button>
-  <button mat-stroked-button color="primary">Secondaire</button>
-  <button mat-button color="primary">Tertiaire</button>
-  <button mat-flat-button color="warn">Avertissement</button>
+  <sdg-button-raised color="primary" (click)="handleClick()"
+    >Principal</sdg-button-raised
+  >
+  <sdg-button-stroked color="primary" (click)="handleClick()"
+    >Secondaire</sdg-button-stroked
+  >
+  <sdg-button color="primary" (click)="handleClick()">Tertiaire</sdg-button>
+  <sdg-button-flat color="warn" (click)="handleClick()"
+    >Avertissement</sdg-button-flat
+  >
 </app-example-viewer>

projects/demo/src/app/pages/components/showcases/button/button.component.scss

@@ -1,5 +1,5 @@
 .button-types {
-  button {
+  ::ng-deep button {
     margin-right: 16px;
   }
 }

projects/demo/src/app/pages/components/showcases/button/button.component.ts

@@ -1,14 +1,31 @@
 import { Component } from '@angular/core';
-import { MatButton } from '@angular/material/button';
+
+import {
+  ButtonComponent,
+  ButtonFlatComponent,
+  ButtonRaisedComponent,
+  ButtonStrokedComponent
+} from '@igo2/sdg';
 
 import { ExampleViewerComponent } from '../../../../components/example-viewer/example-viewer.component';
 import { ExternalLinkComponent } from '../../../../components/external-link/external-link.component';
 
 @Component({
   selector: 'app-button',
   standalone: true,
-  imports: [ExampleViewerComponent, MatButton, ExternalLinkComponent],
+  imports: [
+    ExampleViewerComponent,
+    ButtonComponent,
+    ButtonStrokedComponent,
+    ButtonRaisedComponent,
+    ButtonFlatComponent,
+    ExternalLinkComponent
+  ],
   templateUrl: './button.component.html',
   styleUrl: './button.component.scss'
 })
-export class ButtonDemoComponent {}
+export class ButtonDemoComponent {
+  handleClick() {
+    alert('Button clicked!');
+  }
+}