🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Filter

The Filter component is used to filter products inside the Product Listing Page (PLP) and Search Page.

The Filter component is a compound of the following:

  • Filter: wraps an Accordion along with the component title.
  • FilterSlider: SlideOver that wraps the Filter for small screen dimensions.
  • FilterFacets: wraps an AccordionItem with its AccordionButton and an AccordionPanel for every Facet.
  • FilterFacetBoolean: wraps the list of the FilterFacetBooleanItem.
  • FilterFacetBooleanItem: wraps a Checkbox with its Label and the Badge that represents the child of the FilterFacetBoolean.
  • FilterFacetRange: wraps a PriceRange for a given Facet with the Range type.

Overview


Import

Import the component from @faststore/ui

import {
  Filter,
  FilterFacets,
  FilterFacetBoolean,
  FilterFacetBooleanItem,
  FilterFacetRange,
} from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/organisms/Filter/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.


Usage


Props

Filter

NameTypeDescriptionDefault
testId*stringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).
titlestringTitle for the `Filter` component.
indicesExpanded*Set<number>The expanded items from the `Accordion`.
onAccordionChange*(index: number) => voidThis function is called when `Accordion` is expanded or collapsed.

Filter Facets

NameTypeDescriptionDefault
testId*stringID to find this component in testing tools (e.g.: cypress, testing library, and jest).
index*numberCurrent Facet's position in a list of facets.
type*stringCurrent Facet's type, usually `StoreFacetBoolean` or `StoreFacetRange`.
label*stringThe text displayed to identify the Facet.

Filter Facet Boolean Item

NameTypeDescriptionDefault
testId*stringID to find this component in testing tools (e.g.: cypress, testing library, and jest).
label*stringThe text displayed to identify the Boolean Facet Item.
value*stringValue to be emitted when Checkbox is clicked.
selected*false | trueBoolean that represents the Checkbox checked state.
quantity*numberCounter badge shown besides the Facet Item.
id*stringID to identify the Checkbox and corresponding label.
facetKey*stringString that identifies the current Facet key.
onFacetChange*OnFacetChangeThis function is called when `Checkbox` from the facet changes.

Filter Facet Range

NameTypeDescriptionDefault
min*{ selected: number; absolute: number; }The minimum value of the Slider Range Facet
max*{ selected: number; absolute: number; }The maximum value of the Slider Range Facet
facetKey*stringString that identifies the current Facet key.
formatter*(price: number) => stringFormatter function that transforms the raw price value and render the result.
onFacetChange*OnFacetChangeThis function is called when `Checkbox` from the facet changes.

Design Tokens

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-filter-title-heightvar(--fs-spacing-6)
--fs-filter-title-margin-bottomvar(--fs-spacing-0)
--fs-filter-title-text-sizevar(--fs-text-size-2)
--fs-filter-title-line-height1.25

Accordion

Local tokenDefault value/Global token linked
--fs-filter-accordion-border-width-notebookvar(--fs-border-width)
--fs-filter-accordion-border-color-notebook
var(--fs-border-color-light)
--fs-filter-accordion-border-radius-notebookvar(--fs-border-radius)

Accordion Item Button

Local tokenDefault value/Global token linked
--fs-filter-accordion-button-text-sizevar(--fs-text-size-lead)
--fs-filter-accordion-button-text-weightvar(--fs-text-weight-regular)
--fs-filter-accordion-button-line-height1.5
--fs-filter-accordion-button-text-size-notebookvar(--fs-text-size-2)
--fs-filter-accordion-button-line-height-notebook1.25
--fs-filter-accordion-button-padding-right-notebookvar(--fs-spacing-4)
--fs-filter-accordion-button-padding-left-notebookvar(--fs-filter-accordion-button-padding-right-notebook)

Accordion Item Panel

Local tokenDefault value/Global token linked
--fs-filter-accordion-item-panel-padding-right-notebookvar(--fs-spacing-4)
--fs-filter-accordion-item-panel-padding-left-notebookvar(--fs-filter-accordion-item-panel-padding-right-notebook)

Accordion Item List

Local tokenDefault value/Global token linked
--fs-filter-list-padding-bottomvar(--fs-spacing-3)

List Item

Local tokenDefault value/Global token linked
--fs-filter-list-item-not-last-margin-bottomvar(--fs-spacing-3)

List Item Checkbox

Local tokenDefault value/Global token linked
--fs-filter-list-item-checkbox-width1.25rem
--fs-filter-list-item-checkbox-heightvar(--fs-filter-list-item-checkbox-width)

List Item Label

Local tokenDefault value/Global token linked
--fs-filter-list-item-label-width100%
--fs-filter-list-item-label-margin-leftvar(--fs-spacing-1)
--fs-filter-list-item-label-text-sizevar(--fs-text-size-2)
--fs-filter-list-item-label-line-height1.25

List Item Badge

Local tokenDefault value/Global token linked
--fs-filter-list-item-badge-margin-leftvar(--fs-spacing-1)

Customization

data-fs-filter

data-fs-filter-title

data-fs-filter-accordion

data-fs-filter-accordion-item

data-fs-filter-list

data-fs-filter-list-item

data-fs-filter-list-item-checkbox

data-fs-filter-list-item-label

data-fs-filter-list-item-badge

data-fs-filter-facet-range