feat: pagination shared between facetwp and elasticsearch

docs/elasticsearch.md

@@ -26,7 +26,11 @@ EP_HOST=
 ES_PUBLIC_URL=
 ```
 
-## 3. Add Reactive Search entrypoint to Vite
+## 3. Check pagination variables
+
+Make sure `variables.css` contains the `--pagination-*` variables. If not, copy them over from `brave`.
+
+## 4. Add Reactive Search entrypoint to Vite
 
 Update your `vite.config.js`:
 
@@ -38,7 +42,7 @@ export default braveConfig( {
 } );
 ```
 
-## 4. Register the Elasticsearch Hook
+## 5. Register the Elasticsearch Hook
 
 Add the `Elasticsearch.php` hook to your `hooks.php`:
 
@@ -48,7 +52,7 @@ return [
 ];
 ```
 
-## 5. Add the reactive search bar to the header
+## 6. Add the reactive search bar to the header
 
 Replace the current `<x-header.search-bar />` of the search-bar with the following in the  `header.blade.php`:
 
@@ -60,7 +64,7 @@ Replace the current `<x-header.search-bar />` of the search-bar with the followi
 @endif
 ```
 
-## 6. Activate the Plugin & Configure Settings
+## 7. Activate the Plugin & Configure Settings
 
 1. Activate the Yard Elasticsearch plugin in WordPress.
 2. Go to the settings page `/wp/wp-admin/admin.php?page=acf-options-yard-elastic`

src/Console/ElasticsearchScaffoldCommand.php

@@ -31,6 +31,11 @@ public function handle(): void
 			'--provider' => 'Yard\\Brave\\Scaffold\\ScaffoldServiceProvider',
 			'--tag' => 'elasticsearch',
 		]);
+		$variablesPath = base_path('resources/styles/base/variables.css');
+		if (! str_contains((string) file_get_contents($variablesPath), '--pagination-')) {
+			$this->warn('variables.css is missing the shared --pagination-* variables. Copy them over from brave.');
+		}
+
 		$this->info('You need to do some additional steps after running this scaffold. Please read the docs here:');
 		$this->line('https://github.com/yardinternet/brave-scaffold/blob/main/docs/elasticsearch.md');
 	}

stubs/resources/scripts/reactive-search/views/search-page/search-page.css

@@ -61,7 +61,7 @@
 	}
 
 	.yrs-datasearch-input {
-		@apply rounded-theme h-13 border-x-0 border-t-0 border-b-2 border-(--yrs-datasearch-input-border-color) bg-white py-3 pr-10 text-base shadow-sm;
+		@apply h-13 rounded-theme border-x-0 border-t-0 border-b-2 border-(--yrs-datasearch-input-border-color) bg-white py-3 pr-10 text-base shadow-sm;
 
 		&:focus {
 			@apply border-(--yrs-datasearch-input-border-color-focus);
@@ -129,7 +129,7 @@
 	}
 
 	.yrs-results-info {
-		@apply text-primary mb-4 justify-end text-sm;
+		@apply mb-4 justify-end text-sm text-primary;
 	}
 
 	.yrs-results-list {
@@ -171,50 +171,59 @@
 		}
 	}
 
+	.yrs-pagination {
+		@apply mb-8;
+	}
+
 	.yrs-pagination-list {
-		@apply justify-end gap-x-2 gap-y-4;
+		@apply m-(--pagination-item-margin) justify-end gap-x-(--pagination-item-gap-x) gap-y-(--pagination-item-gap-y);
 	}
 
 	.yrs-pagination-button {
-		@apply size-10 min-h-10 min-w-10 p-2 text-black no-underline transition-all;
+		@apply relative size-(--pagination-item-size) min-h-auto min-w-auto rounded-(--pagination-item-radius) p-2 text-black no-underline transition-all;
 
 		&:not( .is-active ) {
-			@apply hover:bg-primary-100;
+			@variant hocus {
+				@apply bg-(--pagination-item-bg-color-hover) text-(--pagination-item-color-hover);
+			}
 		}
 
 		&.is-active {
-			@apply font-bold;
+			@apply bg-(--pagination-current-bg-color) text-(--pagination-current-color);
+
+			&::after {
+				@apply absolute bottom-0 left-1/2 h-0.5 w-3/4 -translate-x-1/2 bg-(--pagination-current-underline-bg-color) content;
+			}
 		}
 	}
 
 	.yrs-pagination-button-prev {
-		@apply hover:bg-primary! border-primary text-primary mr-4 size-10 border text-[0px];
+		@apply mr-4 size-(--pagination-item-size) border border-(--pagination-prev-border-color) bg-(--pagination-prev-bg-color) text-[0px] text-(--pagination-prev-color);
 
 		&::before {
 			@apply fontawesome text-base text-inherit;
 			--fa-icon: '\f053';
 		}
 
 		@variant hocus {
-			@apply bg-primary text-white;
+			@apply border-(--pagination-prev-border-color-hocus) bg-(--pagination-prev-bg-color-hocus) text-(--pagination-prev-color-hocus);
 		}
 	}
 
 	.yrs-pagination-button-next {
-		@apply bg-primary ml-4 size-10 text-[0px] text-white;
+		@apply ml-4 size-(--pagination-item-size) border border-(--pagination-next-border-color) bg-(--pagination-next-bg-color) text-[0px] text-(--pagination-next-color);
 
 		&::before {
-			@apply fontawesome text-base;
+			@apply fontawesome text-base text-inherit;
 			--fa-icon: '\f054';
 		}
 
 		@variant hocus {
-			@apply bg-primary-700!;
-			filter: brightness( 1 );
+			@apply border-(--pagination-next-border-color-hocus) bg-(--pagination-next-bg-color-hocus) text-(--pagination-next-color-hocus);
 		}
 	}
 
 	.yrs-pagination-info {
-		@apply text-right text-sm;
+		@apply mt-4 text-right text-sm;
 	}
 }