FilteredPagination

Button-based pagination for the products-filter island — same visual as the SSR Pagination but calls back to the island for in-place page transitions.

Filters & Search

First page

Middle page (both-side ellipsis)

Last page

Interactive

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for FilteredPagination — new coverage (epic #1647, wave 6 / #1660). // Button-based (client-mode) counterpart of the SSR `Pagination` components; // same page-number/ellipsis math, exercised at the same totalPages=12 fixture as // the sibling Pagination stories so the first/middle/last states line up 1:1. import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { FilteredPagination } from './filtered-pagination'; const meta: StoryMeta = { title: 'FilteredPagination', category: 'Filters & Search', description: 'Button-based pagination for the products-filter island — same visual as the SSR Pagination but calls back to the island for in-place page transitions.', usage: `import { FilteredPagination } from '@/src/components/products/filtered-pagination';\n\n<FilteredPagination currentPage={1} totalPages={12} onPageChange={setPage} />`, }; export default meta; export const FirstPage = defineStory({ name: 'First page', render: () => <FilteredPagination currentPage={1} totalPages={12} onPageChange={() => {}} />, }); export const MiddlePageWithEllipsis = defineStory({ name: 'Middle page (both-side ellipsis)', render: () => <FilteredPagination currentPage={6} totalPages={12} onPageChange={() => {}} />, }); export const LastPage = defineStory({ name: 'Last page', render: () => <FilteredPagination currentPage={12} totalPages={12} onPageChange={() => {}} />, }); const InteractivePagination = () => { const [page, setPage] = useState(6); return ( <div class="flex flex-col gap-vgap-md"> <FilteredPagination currentPage={page} totalPages={12} onPageChange={setPage} /> <p class="font-futura text-xs text-zd-subtext text-center"> Page: <span class="text-zd-white">{page}</span> / 12 </p> </div> ); }; export const Interactive = defineStory({ name: 'Interactive', render: () => <InteractivePagination />, });