Merge pull request #3034 from brampeirs/pagination-nav-sizes

feat: allow specifying a size for the pagination nav component

Author: zvonimirfras

package-lock.json

@@ -85,7 +85,7 @@
     "@angular/platform-browser-dynamic": "14.3.0",
     "@angular/router": "14.3.0",
     "@babel/core": "7.9.6",
-    "@carbon/styles": "1.56.0",
+    "@carbon/styles": "1.67.0",
     "@carbon/themes": "11.24.0",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",

package.json

@@ -29,7 +29,8 @@ const Template = (args) => ({
 			[disabled]="disabled"
 			[totalDataLength]="totalDataLength"
 			[numOfItemsToShow]="numOfItemsToShow"
-			[skeleton]="skeleton">
+			[skeleton]="skeleton"
+			[size]="size">
 		</app-pagination>
 	`
 });
@@ -38,5 +39,6 @@ Basic.args = {
 	disabled: false,
 	totalDataLength: 10,
 	numOfItemsToShow: 4,
-	skeleton: false
+	skeleton: false,
+	size: "md"
 };

src/pagination/pagination-nav.stories.ts

@@ -3,7 +3,8 @@ import {
 	Component,
 	Input,
 	Output,
-	EventEmitter
+	EventEmitter,
+	HostBinding
 } from "@angular/core";
 
 import { I18n, Overridable } from "carbon-components-angular/i18n";
@@ -51,7 +52,7 @@ export interface PaginationNavTranslations {
 				<li class="cds--pagination-nav__list-item">
 					<cds-icon-button
 						kind="ghost"
-						size="md"
+						[size]="size"
 						(click)="jumpToPrevious()"
 						[disabled]="leftArrowDisabled"
 						[description]="previousItemText.subject | async">
@@ -95,6 +96,7 @@ export interface PaginationNavTranslations {
 				<li class="cds--pagination-nav__list-item">
 					<cds-icon-button
 						kind="ghost"
+						[size]="size"
 						(click)="jumpToNext()"
 						[disabled]="rightArrowDisabled"
 						[description]="nextItemText.subject | async">
@@ -141,6 +143,22 @@ export class PaginationNav {
 		this.previousItemText.override(valueWithDefaults.PREVIOUS);
 	}
 
+	/**
+	 * Sets the pagination nav size
+	 */
+	@Input() size: "sm" | "md" | "lg" = "lg";
+
+	// Size
+	@HostBinding("class.cds--layout--size-sm") get smallLayoutSize() {
+		return this.size === "sm";
+	}
+	@HostBinding("class.cds--layout--size-md") get mediumLayoutSize() {
+		return this.size === "md";
+	}
+	@HostBinding("class.cds--layout--size-lg") get largeLayoutSize() {
+		return this.size === "lg";
+	}
+
 	/**
 	 * Emits the new page number.
 	 *