refactor(various): various changes

packages/sdg/src/lib/alert/alert.component.html

@@ -4,7 +4,7 @@
     <div class="message" [class.--is-handset]="isHandset()">
       {{ message() }}
     </div>
-    @if (closeable()) {
+    @if (isCloseable()) {
       <button
         mat-icon-button
         class="close"

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

@@ -30,8 +30,10 @@ import { AlertIcon, AlertType } from './alert.interface';
 })
 export class AlertComponent {
   type = input.required<keyof typeof AlertType>();
-  message = input.required<string>();
-  closeable = input<boolean>(false);
+  message = input.required<string, string>({
+    transform: (message) => this.messageValidation(message)
+  });
+  isCloseable = input<boolean>(false);
   isOpen = input<boolean>(true);
   isHandset = input<boolean>();
 
@@ -40,6 +42,14 @@ export class AlertComponent {
   iconName = computed(() => AlertIcon[this.type()]);
   typeName = computed(() => AlertType[this.type()]);
 
+  private messageValidation(message: string): string {
+    const maxLength: number = this.isCloseable() ? 105 : 120;
+
+    return message.length > maxLength
+      ? `${message.slice(0, maxLength)}...`
+      : message;
+  }
+
   getAlertClass() {
     return `container --${this.typeName()}`;
   }

projects/demo/src/app/components/external-link/external-link.component.scss

@@ -1,9 +1,10 @@
 span {
-  margin-right: 4px;
+  margin-right: 2px;
 }
 
 mat-icon {
-  width: 12px;
-  height: 12px;
-  font-size: 12px;
+  width: 13px;
+  height: 13px;
+  font-size: 13px;
+  margin-right: 2px;
 }

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

@@ -23,7 +23,7 @@
   <sdg-alert
     type="General"
     message="Ceci est une alerte informative pouvant être fermée"
-    [closeable]="true"
+    [isCloseable]="true"
     [isOpen]="generalAlertIsOpen"
     [isHandset]="isHandset()"
     (closed)="generalAlertIsOpen = false"
@@ -38,7 +38,7 @@
   <sdg-alert
     type="Warning"
     message="Ceci est une alerte pouvant être fermée"
-    [closeable]="true"
+    [isCloseable]="true"
     [isOpen]="alertIsOpen"
     [isHandset]="isHandset()"
     (closed)="alertIsOpen = false"

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

@@ -1,24 +1,39 @@
 <p>
-  Deux types de breadcrumbs, celui qui utilise l'autogénération basé sur le
-  Router d'Angular et le manuel ou on peut spécifier les breads via l'input.
+  <span
+    >Le fil d’Ariane (ou breadcrumbs) est essentiel sur les sites où les pages
+    sont organisées hiérarchiquement, tels que les sites d'information, de
+    commerce électronique et de dossiers en ligne. Pour plus d'information, voir
+    le
+  </span>
+  <span
+    ><app-external-link
+      title="Fil d'Ariane"
+      link="https://design.quebec.ca/design/composants/navigation/fil-ariane"
+  /></span>
+  <span>du Système de design gouvernemental.</span>
+</p>
+<p>
+  Deux types de fils d'Ariane sont disponibles: un premier qui utilise
+  l'autogénération basé sur le Router d'Angular et un second, manuel, où on peut
+  spécifier les éléments via l'input.
 </p>
 
 <p>Pour utiliser l'autogénération, activer la propriété [withRouter]="true"</p>
+
 <app-example-viewer
-  title="Breadcrumbs with Angular Router"
+  title="Fil d'Ariane avec Angular Router"
   configFolder="breadcrumb"
   codeFolder="breadcrumb"
 >
   <sdg-breadcrumbs [withRouter]="true"></sdg-breadcrumbs>
 </app-example-viewer>
-
 <p>
-  Pour référencer manuellement les breadcrumbs, utiliser le input
+  Pour référencer manuellement les éléments du fils, on utilise le input
   [breadcrumbs]="YOUR_BREADCRUMBS". L'overflow via les ... est ajouté lorsqu'on
-  5 niveaux ou plus.
+  a 5 niveaux ou plus.
 </p>
 <app-example-viewer
-  title="Breadcrumbs with Angular Router"
+  title="Fil d'Ariane manuel"
   configFolder="breadcrumb"
   codeFolder="breadcrumb"
 >

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

@@ -3,39 +3,44 @@ import { Component } from '@angular/core';
 import { Breadcrumb, BreadcrumbsComponent } from '@igo2/sdg';
 
 import { ExampleViewerComponent } from '../../../../components/example-viewer/example-viewer.component';
+import { ExternalLinkComponent } from '../../../../components/external-link/external-link.component';
 
 @Component({
   selector: 'app-breadcrumb',
   standalone: true,
-  imports: [ExampleViewerComponent, BreadcrumbsComponent],
+  imports: [
+    ExampleViewerComponent,
+    BreadcrumbsComponent,
+    ExternalLinkComponent
+  ],
   templateUrl: './breadcrumb.component.html',
   styleUrl: './breadcrumb.component.scss'
 })
 export class BreadcrumbComponent {
   breadcrumbs: Breadcrumb[] = [
     {
-      title: 'first',
-      url: 'first'
+      title: 'premier',
+      url: 'premier'
     },
     {
-      title: 'two',
-      url: 'two'
+      title: 'deuxième',
+      url: 'deuxième'
     },
     {
-      title: 'three',
-      url: 'three'
+      title: 'troisième',
+      url: 'troisième'
     },
     {
-      title: 'four',
-      url: 'four'
+      title: 'quatrième',
+      url: 'quatrième'
     },
     {
-      title: 'fifth',
-      url: 'fifth'
+      title: 'cinquième',
+      url: 'cinquième'
     },
     {
-      title: 'six',
-      url: 'six'
+      title: 'sixième',
+      url: 'sixième'
     }
   ];
 }

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

@@ -1,8 +1,22 @@
 <p>
-  <span>Le concept de bouton est basé sur le&nbsp;</span>
-  <span><app-external-link
-    title="bouton d'Angular Material"
-    link="https://material.angular.io/components/button/overview"
+  <span
+    >Les boutons indiquent les actions qui peuvent être exécutées sur une page.
+    Le libellé d’un bouton annonce l'action qui se produit lorsque l'utilisateur
+    interagit avec celui-ci. Pour plus d'information, voir le
+  </span>
+  <span
+    ><app-external-link
+      title="Bouton"
+      link="https://design.quebec.ca/design/composants/boutons"
+  /></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>
@@ -20,17 +34,17 @@
 </app-example-viewer>
 
 <p>
-  Material offre la possibilité de controler la couleur via la propriété "color"
-  tout en respectant le thème de l'application.
+  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>
 </app-example-viewer>
 
-<p>Pour répliquer l'example de Quebec.ca:</p>
-<app-example-viewer title="Types de boutons (Quebec.ca)" class="button-types">
+<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>

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

@@ -1,3 +0,0 @@
-p span {
-  display: inline-flex;
-}

projects/demo/src/app/pages/components/showcases/showcases.routes.ts

@@ -15,18 +15,18 @@ export const routes: INavigationRoutes = [
       import('./notice/notice.component').then((m) => m.NoticeDemoComponent)
   },
   {
-    path: 'breadcrumb',
-    title: 'Breadcrumb',
+    path: 'bouton',
+    title: 'Bouton',
     loadComponent: () =>
-      import('./breadcrumb/breadcrumb.component').then(
-        (m) => m.BreadcrumbComponent
-      )
+      import('./button/button.component').then((m) => m.ButtonComponent)
   },
   {
-    path: 'button',
-    title: 'Button',
+    path: 'fil-ariane',
+    title: "Fil d'Ariane",
     loadComponent: () =>
-      import('./button/button.component').then((m) => m.ButtonComponent)
+      import('./breadcrumb/breadcrumb.component').then(
+        (m) => m.BreadcrumbComponent
+      )
   },
   {
     path: 'tuile',