Pagination Search
ready

A pagination component with additional search sorting functionality.

Usage

  • Pagination Search extends the Pagination component by adding search and sorting functionality.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdPaginationSearch } from '@fbin-web/neighborhood-core';
<nbhd-pagination-search selected-sort="relevance" heading="Search Results for" search-term="faucet" current-page="1"
  total-pages="10" total-results="75" max-visible-pages="3" surface="secondary">
</nbhd-pagination-search>


<script>
  const paginationSearch = document.querySelector('nbhd-pagination-search');

  paginationSearch.sortOptions = [
    { name: 'Relevance', value: 'relevance' },
    { name: 'Price: Low to High', value: 'price-asc' },
    { name: 'Price: High to Low', value: 'price-desc' },
    { name: 'Newest', value: 'newest' },
  ];
</script>

React 

import { NbhdPaginationSearch } from '@fbin-web/neighborhood-react';

const sortOptions = [
  { name: 'Relevance', value: 'relevance' },
  { name: 'Price: Low to High', value: 'price-asc' },
  { name: 'Price: High to Low', value: 'price-desc' },
  { name: 'Newest', value: 'newest' },
];

const App = () => (
  <>
    <NbhdPaginationSearch
      selectedSort="relevance"
      heading="Search Results for"
      searchTerm="faucet"
      currentPage={1}
      totalPages={10}
      totalResults={75}
      maxVisiblePages={3}
      sortOptions={sortOptions}
      surface="secondary"></NbhdPaginationSearch>
  </>
);

Properties

Property Attribute Type Default Description
surface surface none | primary | secondary | inverse | inverse-secondary primary Surface to apply to the component.
marginTop margin-top none | small | medium | large none Top margin spacing.
marginBottom margin-bottom none | small | medium | large none Bottom margin spacing.
paddingTop padding-top default | none | small | medium | large default Top padding spacing.
paddingBottom padding-bottom default | none | small | medium | large default Bottom padding spacing.
maxVisiblePages max-visible-pages number 3 The maximum number of page buttons to display at once.
showLabels show-labels boolean false Whether to show labels on the pagination arrows.
currentPage current-page number 1 The current active page.
totalPages total-pages number 1 The total number of pages.
nextLabel next-label string Next The label for the next page arrow button.
previousLabel previous-label string Previous The label for the previous page arrow button.
onNbhdPageChanged on-nbhd-page-changed (event: CustomEvent<{ page: number }>) => void Callback function when page changes.
heading heading string Search Results for Text displayed before the search term in the results summary.
searchTerm search-term string The current search term to display alongside the results summary.
totalResults total-results number 0 The total number of search results.
selectedSort selected-sort string relevance The currently selected sort option.
sortLabel sort-label string Sort By: The label shown before the sort select dropdown.
onNbhdSortChanged on-nbhd-sort-changed (event: CustomEvent<{ value: string }>) => void Callback function when the sort option changes.
sortOptions SelectOptionContent[] [] An array of sort options for the select dropdown.

Select Option Content Structure

Each item in sortOptions must match the SelectOptionContent shape used by the shared select component.

Property Type Required Description
name string Yes Display label shown for the sort option in the dropdown.
value string Yes Value assigned to the option and used when the selection changes.

Events

Name Description Event Detail
nbhd-page-changed Emitted when the user navigates to a different page. { page: number }
nbhd-sort-changed Emitted when the sort option changes. { value: string }

CSS Parts

Parts exposed for styling the pagination-search component.

Name Description
base The component's outer wrapper.
container The internal container that wraps the search summary and controls.
wrapper The content wrapper containing the summary, pagination, and sort controls.
summary The results summary row showing the heading, term, and result count.
summary-heading The heading text before the search term.
summary-term The active search term shown in the summary.
summary-results The results count displayed in the summary.
pagination The pagination section wrapper.
controls The pagination controls container.
page-button Each page number button in the pagination set.
previous-button The previous page navigation button.
next-button The next page navigation button.
previous-label The label text for the previous button when labels are visible.
next-label The label text for the next button when labels are visible.
ellipsis The ellipsis indicators between pagination groups.
pagination-item-svg The SVG icon rendered inside the previous and next buttons.
sort The sort row wrapper containing the dropdown and label.
sort-label The label text before the sort select control.
sort-select The select control used for sorting options.

Dependencies

This component contains the following components as dependencies.