feat(design,design-land): add link support to paginator (#2589)

Co-authored-by: xelaint <[email protected]>

apps/design-land/src/app/paginator/paginator.component.html

@@ -11,3 +11,9 @@ <h2>Usage</h2>
 <design-land-article-encapsulated>
   <design-land-example-viewer-container example="basic-paginator"></design-land-example-viewer-container>
 </design-land-article-encapsulated>
+
+<h3>Link Mode</h3>
+<p>The paginator can be used in link mode which replaces the buttons with anchors. In link mode, pass the URL of the current collection page and optionally the name of the query param that will set the current page.</p>
+<design-land-article-encapsulated>
+  <design-land-example-viewer-container example="link-paginator"></design-land-example-viewer-container>
+</design-land-article-encapsulated>

libs/design/paginator/examples/src/examples.ts

@@ -1,5 +1,7 @@
 import { BasicPaginatorComponent } from './basic-paginator/basic-paginator.component';
+import { LinkPaginatorComponent } from './link-paginator/link-paginator.component';
 
 export const PAGINATOR_EXAMPLES = [
   BasicPaginatorComponent,
+  LinkPaginatorComponent,
 ];

libs/design/paginator/examples/src/link-paginator/link-paginator.component.html

@@ -0,0 +1 @@
+<daff-paginator aria-label="Search results page" [numberOfPages]="numberOfPages" [currentPage]="currentPage$ | async" [linkMode]="true" [url]="url" [queryParam]="queryParam"></daff-paginator>

libs/design/paginator/examples/src/link-paginator/link-paginator.component.ts

@@ -0,0 +1,32 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+  Observable,
+  map,
+} from 'rxjs';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'link-paginator',
+  templateUrl: './link-paginator.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LinkPaginatorComponent {
+  numberOfPages = 15;
+  // TODO: don't hardcode this, pass it in design land
+  url = '/paginator';
+  queryParam = 'currentPage';
+
+  get currentPage$(): Observable<number> {
+    return this.route.queryParamMap.pipe(
+      map((qps) => Number(qps.get(this.queryParam))),
+    );
+  }
+
+  constructor(
+    private route: ActivatedRoute,
+  ) {}
+}

libs/design/paginator/examples/src/link-paginator/link-paginator.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+
+import { DaffPaginatorModule } from '@daffodil/design';
+
+import { LinkPaginatorComponent } from './link-paginator.component';
+
+@NgModule({
+  declarations: [
+    LinkPaginatorComponent,
+  ],
+  exports: [
+    LinkPaginatorComponent,
+  ],
+  imports: [
+    DaffPaginatorModule,
+  ],
+  providers: [],
+})
+export class LinkPaginatorModule { }

libs/design/paginator/examples/src/public_api.ts

@@ -1,4 +1,5 @@
 export { BasicPaginatorComponent } from './basic-paginator/basic-paginator.component';
+export { LinkPaginatorComponent } from './link-paginator/link-paginator.component';
 
 export { PaginatorExamplesModule } from './paginator-examples.module';
 export { PAGINATOR_EXAMPLES } from './examples';

libs/design/src/molecules/paginator/paginator.component.html

@@ -1,48 +1,106 @@
-<button type="button" class="daff-paginator__previous"
-  [disabled]="_disablePrev()"
+<button *ngIf="!linkMode" type="button" class="daff-paginator__previous"
+  [disabled]="_disablePrev"
   tabindex="0"
   attr.aria-label="Go to Previous Page of {{_paginatorId}} Paginator"
   (click)="_onNotifyPrevPageChange()">
   <fa-icon [icon]="faChevronLeft" size="sm"></fa-icon> Previous
 </button>
+<ng-container *ngIf="linkMode">
+  <a class="daff-paginator__previous"
+    *ngIf="!_disablePrev"
+    attr.aria-label="Go to Previous Page of {{_paginatorId}} Paginator"
+    [routerLink]="url"
+    queryParamsHandling="merge"
+    [queryParams]="_buildPageQueryParams(currentPage - 1)">
+    <fa-icon [icon]="faChevronLeft" size="sm"></fa-icon><span>Previous</span>
+  </a>
+  <span class="daff-paginator__previous disabled"
+    *ngIf="_disablePrev"
+    attr.aria-label="Go to Previous Page of {{_paginatorId}} Paginator"
+    [attr.disabled]="true">
+    <fa-icon [icon]="faChevronLeft" size="sm"></fa-icon><span>Previous</span>
+  </span>
+</ng-container>
 
-<button type="button" class="daff-paginator__page-link"
+<button *ngIf="!linkMode" type="button" class="daff-paginator__page-link"
   [class.selected]="_isSelected(1)"
   tabindex="0"
   attr.aria-label="Go to Page 1 of {{_paginatorId}} Paginator"
   (click)="_onNotifyPageChange(1)">
   <span>1</span>
 </button>
+<a *ngIf="linkMode" class="daff-paginator__page-link"
+  [routerLink]="url"
+  [queryParams]="_buildPageQueryParams(1)"
+  queryParamsHandling="merge"
+  [class.selected]="_isSelected(1)"
+  attr.aria-label="Go to Page 1 of {{_paginatorId}} Paginator"
+><span>1</span></a>
 
-<span class="daff-paginator__ellipsis" *ngIf="_showFirstEllipsis()">...</span>
+<span class="daff-paginator__ellipsis" *ngIf="_showFirstEllipsis">...</span>
 
 <ng-container *ngFor="let pageNumber of _numberOfPagesArray">
-  <button type="button" class="daff-paginator__page-link"
-    [class.selected]="_isSelected(pageNumber)"
-    tabindex="0"
-    attr.aria-label="Go to Page {{pageNumber}} of {{_paginatorId}} Paginator"
-    aria-current="_isSelected(pageNumber)"
-    *ngIf="_showNumber(pageNumber)"
-    (click)="_onNotifyPageChange(pageNumber)">
-    <span>{{ pageNumber }}</span>
-  </button>
+  <ng-container *ngIf="_showNumber(pageNumber)">
+    <button *ngIf="!linkMode" type="button" class="daff-paginator__page-link"
+      [class.selected]="_isSelected(pageNumber)"
+      [attr.data-page-number]="pageNumber"
+      tabindex="0"
+      attr.aria-label="Go to Page {{pageNumber}} of {{_paginatorId}} Paginator"
+      aria-current="_isSelected(pageNumber)"
+      (click)="_onNotifyPageChange(pageNumber)">
+      <span>{{ pageNumber }}</span>
+    </button>
+    <a *ngIf="linkMode" class="daff-paginator__page-link"
+      [attr.data-page-number]="pageNumber"
+      [routerLink]="url"
+      [queryParams]="_buildPageQueryParams(pageNumber)"
+      queryParamsHandling="merge"
+      [class.selected]="_isSelected(pageNumber)"
+      attr.aria-label="Go to Page {{pageNumber}} of {{_paginatorId}} Paginator"
+    ><span>{{ pageNumber }}</span></a>
+  </ng-container>
 </ng-container>
 
-<span class="daff-paginator__ellipsis" *ngIf="_showLastEllipsis()">...</span>
+<span class="daff-paginator__ellipsis" *ngIf="_showLastEllipsis">...</span>
 
-<button type="button" class="daff-paginator__page-link"
-  [class.selected]="_isSelected(numberOfPages)"
-  tabindex="0"
-  attr.aria-label="Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator"
-  (click)="_onNotifyPageChange(numberOfPages)"
-  *ngIf="!(numberOfPages < 2)">
-  <span>{{ numberOfPages }}</span>
-</button>
+<ng-container *ngIf="!(numberOfPages < 2)">
+  <button *ngIf="!linkMode" type="button" class="daff-paginator__page-link"
+    [class.selected]="_isSelected(numberOfPages)"
+    tabindex="0"
+    attr.aria-label="Go To Page {{numberOfPages}} of {{_paginatorId}} Paginator"
+    (click)="_onNotifyPageChange(numberOfPages)"
+  >
+    <span>{{ numberOfPages }}</span>
+  </button>
+  <a *ngIf="linkMode" class="daff-paginator__page-link"
+    [routerLink]="url"
+    [queryParams]="_buildPageQueryParams(numberOfPages)"
+    queryParamsHandling="merge"
+    [class.selected]="_isSelected(numberOfPages)"
+    attr.aria-label="Go to Page {{numberOfPages}} of {{_paginatorId}} Paginator"
+  ><span>{{ numberOfPages }}</span></a>
+</ng-container>
 
-<button class="daff-paginator__next"
-  [disabled]="_disableNext()"
+<button *ngIf="!linkMode" class="daff-paginator__next"
+  [disabled]="_disableNext"
   tabindex="0"
   attr.aria-label="Go to Next Page of {{_paginatorId}} Paginator"
   (click)="_onNotifyNextPageChange()">
   Next <fa-icon [icon]="faChevronRight" size="sm"></fa-icon>
 </button>
+<ng-container *ngIf="linkMode">
+  <a class="daff-paginator__next"
+    *ngIf="!_disableNext"
+    [routerLink]="url"
+    attr.aria-label="Go to Next Page of {{_paginatorId}} Paginator"
+    queryParamsHandling="merge"
+    [queryParams]="_buildPageQueryParams(currentPage + 1)">
+    <span>Next</span><fa-icon [icon]="faChevronRight" size="sm"></fa-icon>
+  </a>
+  <span class="daff-paginator__next disabled"
+    *ngIf="_disableNext"
+    attr.aria-label="Go to Next Page of {{_paginatorId}} Paginator"
+    [attr.disabled]="true">
+    <span>Next</span><fa-icon [icon]="faChevronRight" size="sm"></fa-icon>
+  </span>
+</ng-container>

libs/design/src/molecules/paginator/paginator.component.scss

@@ -1,23 +1,35 @@
 @use '../../../scss/interactions';
 
-$border-radius: 3px;
+$border-radius: 4px;
+
+@mixin paginator-controls-base() {
+	@include interactions.clickable;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	appearance: none;
+	background: none;
+	border: 0;
+	border-radius: $border-radius;
+}
 
 :host {
 	display: flex;
 	gap: 4px;
 }
 
 .daff-paginator {
+	&__page-link,
+	&__previous,
+	&__next {
+		text-decoration: none;
+	}
+
 	&__previous,
 	&__next {
 		@include interactions.clickable;
-		display: flex;
-		align-items: center;
+		@include paginator-controls-base();
 		gap: 8px;
-		appearance: none;
-		background: transparent;
-		border: 0;
-		border-radius: $border-radius;
 		height: 2rem;
 		padding: 0 8px;
 
@@ -30,18 +42,12 @@ $border-radius: 3px;
 	&__ellipsis {
 		height: 2rem;
 		width: 2rem;
-		text-align: center
+		text-align: center;
 	}
 
 	&__page-link {
 		@include interactions.clickable;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		appearance: none;
-		background: none;
-		border: 0;
-		border-radius: $border-radius;
+		@include paginator-controls-base();
 		min-width: 2rem;
 		height: 2rem;
 		padding: 0 4px;
@@ -51,7 +57,7 @@ $border-radius: 3px;
 			z-index: 2;
 		}
 
-		&:after {
+		&::after {
 			content: '';
 			border-radius: $border-radius;
 			position: absolute;
@@ -66,7 +72,7 @@ $border-radius: 3px;
 		&:hover,
 		&:active,
 		&.selected {
-			&:after {
+			&::after {
 				opacity: 1;
 			}
 		}