Task #227 - Pagination component

blocks/init/src/Blocks/components/pagination/manifest.json

@@ -0,0 +1,32 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json",
+	"componentName": "pagination",
+	"title": "Pagination",
+	"componentClass": "pagination",
+	"example": {
+		"attributes": {
+			"paginationUse": true
+		}
+	},
+	"components": {
+		"icon": "icon"
+	},
+	"attributes": {
+		"paginationUse": {
+			"type": "boolean",
+			"default": true
+		},
+		"paginationIconColor": {
+			"type": "string",
+			"default": "black"
+		},
+		"paginationIconSize": {
+			"type": "string",
+			"default": "2.4"
+		},
+		"paginationIconName": {
+			"type": "string",
+			"default": "chevron-right"
+		}
+	}
+}

blocks/init/src/Blocks/components/pagination/pagination-style.scss

@@ -0,0 +1,82 @@
+.pagination {
+	--pagination-scoped-radius-size: calc(var(--base-font-size) * 2.7rem);
+	--pagination-scoped-color: var(--global-colors-black);
+	--pagination-scoped-background-color: transparent;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	@include media(tablet up) {
+		justify-content: center;
+	}
+
+	> * {
+		margin: 0 calc(var(--base-font-size) * 0.5rem);
+		font-size: calc(var(--base-font-size) * 1.7rem);
+		line-height: 1.5;
+		color: var(--pagination-scoped-color);
+		transition: color 0.3s ease-out;
+
+		span {
+			width: var(--pagination-scoped-radius-size);
+			height: var(--pagination-scoped-radius-size);
+			border-radius: calc(var(--base-font-size) * 0.4rem);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: var(--pagination-scoped-background-color);
+		}
+	}
+
+	.page-numbers {
+		display: none;
+
+		@include media(tablet up) {
+			display: block;
+		}
+	}
+
+	.prev,
+	.next {
+		display: block;
+		font-weight: 600;
+
+		&__icon {
+			margin-inline-start: calc(var(--base-font-size) * 1rem);
+		}
+	}
+
+	.prev {
+		margin-inline-end: calc(var(--base-font-size) * 5rem);
+
+		&__icon {
+			transform: rotate(180deg);
+		}
+	}
+
+	.next {
+		margin-inline-start: auto;
+
+		@include media(tablet up) {
+			margin-inline-start: calc(var(--base-font-size) * 5rem);
+		}
+	}
+
+	a {
+		text-decoration: none;
+
+		&:hover {
+			color: var(--global-colors-primary700);
+		}
+	}
+
+	.current {
+		color: var(--global-colors-white);
+
+		span {
+			--pagination-scoped-background-color: var(--global-colors-primary500);
+			--pagination-scoped-color: var(--global-colors-white);
+		}
+	}
+}

blocks/init/src/Blocks/components/pagination/pagination.php

@@ -0,0 +1,54 @@
+<?php
+
+/**
+ * Template for the Pagination Component.
+ *
+ * @package embed.
+ */
+
+ use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$paginationUse = Helpers::checkAttr('paginationUse', $attributes, $manifest);
+if (!$paginationUse) {
+	return;
+}
+
+$paginationIconName = Helpers::checkAttr('paginationIconName', $attributes, $manifest);
+$paginationCurrentPage = Helpers::checkAttr('paginationCurrentPage', $attributes, $manifest);
+$paginationMaxPages = Helpers::checkAttr('paginationMaxPages', $attributes, $manifest);
+
+$componentClass = $manifest['componentClass'] ?? '';
+$additionalClass = $attributes['additionalClass'] ?? '';
+$blockClass = $attributes['blockClass'] ?? '';
+$selectorClass = $attributes['selectorClass'] ?? $componentClass;
+
+$navigationClass = Helpers::classnames(
+	$componentClass,
+	Helpers::selector($blockClass, $blockClass, $selectorClass),
+	$additionalClass,
+);
+
+$icon = Helpers::render(
+	'icon',
+	Helpers::props('icon', $attributes, [
+		'blockClass' => $componentClass,
+		'selectorClass' => 'icon',
+		'iconName' => $paginationIconName,
+	])
+);
+?>
+
+<div class="<?php echo esc_attr($navigationClass); ?>">
+	<?php
+	echo paginate_links(
+			[
+				'before_page_number' => '<span>',
+				'after_page_number' => '</span>',
+				'prev_text' => '<span>' . $icon . __('Previous', '%g_textdomain%') . '</span>',
+				'next_text' => '<span>' . __('Next', '%g_textdomain%') . $icon . '</span>',
+			]
+	);
+	?>
+</div>