feat(sequential-links): add sequential links component

packages/sdg/src/lib/sequential-links/index.ts

@@ -0,0 +1,2 @@
+export * from './sequential-links.component';
+export * from './sequential-links.interface';

packages/sdg/src/lib/sequential-links/sequential-links.component.html

@@ -0,0 +1,18 @@
+@if (previous()) {
+  <button class="link" (click)="goToLink(previous()!.url)">
+    <mat-icon class="arrow">arrow_left_alt</mat-icon>
+    <div class="content">
+      <p><b>Précédent</b></p>
+      <p class="text">{{ previous()?.text }}</p>
+    </div>
+  </button>
+}
+@if (next()) {
+  <button class="link" (click)="goToLink(next()!.url)">
+    <mat-icon class="arrow">arrow_right_alt</mat-icon>
+    <div class="content">
+      <p><b>Suivant</b></p>
+      <p class="text">{{ next()?.text }}</p>
+    </div>
+  </button>
+}

packages/sdg/src/lib/sequential-links/sequential-links.component.scss

@@ -0,0 +1,60 @@
+@use 'sass:map';
+@use '../core/theme/colors';
+
+:host {
+  display: flex;
+  flex-flow: column;
+  min-height: 88px;
+}
+
+.arrow {
+  font-variation-settings: 'wght' 350;
+}
+
+.link {
+  display: flex;
+  padding: 16px 16px 16px 8px;
+  column-gap: 8px;
+  border-right: none;
+  border-left: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  &:hover {
+    background-color: colors.$grey-pale;
+
+    .text {
+      text-decoration: underline;
+    }
+  }
+
+  &:focus {
+    outline: solid 2px colors.$blue-light;
+    outline-offset: 0;
+  }
+
+  &:first-of-type {
+    border-top: 1px solid colors.$grey-light;
+    border-bottom: none;
+  }
+
+  &:last-of-type {
+    border-top: 1px solid colors.$grey-light;
+    border-bottom: 1px solid colors.$grey-light;
+  }
+}
+
+.content {
+  display: flex;
+  flex-flow: column;
+  row-gap: 8px;
+}
+
+.text {
+  align-self: flex-start;
+  color: colors.$blue-piv;
+}
+
+p {
+  margin: 0px;
+}

packages/sdg/src/lib/sequential-links/sequential-links.component.spec.ts

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

packages/sdg/src/lib/sequential-links/sequential-links.component.ts

@@ -0,0 +1,29 @@
+import { NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+
+import { SequentialLink } from './sequential-links.interface';
+
+@Component({
+  selector: 'sdg-sequential-links',
+  standalone: true,
+  imports: [NgIf, NgFor, MatIconModule, RouterLink],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './sequential-links.component.html',
+  styleUrls: ['./sequential-links.component.scss']
+})
+export class SequentialLinksComponent {
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute
+  ) {}
+
+  previous = input<SequentialLink>();
+  next = input<SequentialLink>();
+  isHandset = input<boolean>();
+
+  goToLink(url: string) {
+    this.router.navigate(['../', url], { relativeTo: this.activatedRoute });
+  }
+}

packages/sdg/src/lib/sequential-links/sequential-links.interface.ts

@@ -0,0 +1,4 @@
+export interface SequentialLink {
+  text: string;
+  url: string;
+}

packages/sdg/src/public-api.ts

@@ -13,3 +13,4 @@ export * from './lib/tile';
 export * from './lib/anchor-menu';
 export * from './lib/paginator';
 export * from './lib/consult';
+export * from './lib/sequential-links';

projects/demo/src/app/pages/components/showcases/sequential-links/sequential-links.component.html

@@ -0,0 +1,24 @@
+<p>
+  <span
+    >Les <b>liens séquentiels</b> sont des liens permettant de naviguer vers une
+    page de contenu suivante ou précédente. Pour plus d'information, voir les
+  </span>
+  <span
+    ><app-external-link
+      title="Liens séquentiels"
+      link="https://design.quebec.ca/design/composants/navigation/liens-sequentiels"
+  /></span>
+  <span>du Système de design gouvernemental.</span>
+</p>
+
+<app-example-viewer
+  title="Liens séquentiels"
+  configFolder="sequential-links"
+  codeFolder="sequential-links"
+>
+  <sdg-sequential-links
+    [previous]="previous"
+    [next]="next"
+    [isHandset]="isHandset()"
+  ></sdg-sequential-links>
+</app-example-viewer>

projects/demo/src/app/pages/components/showcases/sequential-links/sequential-links.component.spec.ts

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

projects/demo/src/app/pages/components/showcases/sequential-links/sequential-links.component.ts

@@ -0,0 +1,38 @@
+import { Component, Signal } from '@angular/core';
+
+import { NoticeComponent, SequentialLink } from '@igo2/sdg';
+
+import { SequentialLinksComponent } from '../../../../../../../../packages/sdg/src/lib/sequential-links/sequential-links.component';
+import { AppService } from '../../../../app.service';
+import { ExampleViewerComponent } from '../../../../components/example-viewer/example-viewer.component';
+import { ExternalLinkComponent } from '../../../../components/external-link/external-link.component';
+
+@Component({
+  selector: 'app-sequential-links',
+  standalone: true,
+  imports: [
+    ExampleViewerComponent,
+    ExternalLinkComponent,
+    NoticeComponent,
+    SequentialLinksComponent
+  ],
+  templateUrl: './sequential-links.component.html',
+  styleUrl: './sequential-links.component.scss'
+})
+export class SequentialLinksDemoComponent {
+  constructor(private appService: AppService) {}
+
+  previous: SequentialLink = {
+    text: "Fil d'Ariane",
+    url: 'fil-ariane'
+  };
+
+  next: SequentialLink = {
+    text: 'Tuile',
+    url: 'tuile'
+  };
+
+  get isHandset(): Signal<boolean> {
+    return this.appService.isHandset;
+  }
+}

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

@@ -34,6 +34,14 @@ export const routes: INavigationRoutes = [
         (m) => m.BreadcrumbDemoComponent
       )
   },
+  {
+    path: 'liens-sequentiels',
+    title: 'Liens séquentiels',
+    loadComponent: () =>
+      import('./sequential-links/sequential-links.component').then(
+        (m) => m.SequentialLinksDemoComponent
+      )
+  },
   {
     path: 'menu-ancres',
     title: "Menu d'ancres",