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

Name	Type	Description
testId*	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).
title	`string`	Title for the `Filter` component.
indicesExpanded*	`Set<number>`	The expanded items from the `Accordion`.
onAccordionChange*	`(index: number) => void`	This function is called when `Accordion` is expanded or collapsed.

Filter Facets

Name	Type	Description
testId*	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
index*	`number`	Current Facet's position in a list of facets.
type*	`string`	Current Facet's type, usually `StoreFacetBoolean` or `StoreFacetRange`.
label*	`string`	The text displayed to identify the Facet.

Filter Facet Boolean Item

Name	Type	Description
testId*	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
label*	`string`	The text displayed to identify the Boolean Facet Item.
value*	`string`	Value to be emitted when Checkbox is clicked.
selected*	`false \| true`	Boolean that represents the Checkbox checked state.
quantity*	`number`	Counter badge shown besides the Facet Item.
id*	`string`	ID to identify the Checkbox and corresponding label.
facetKey*	`string`	String that identifies the current Facet key.
onFacetChange*	`OnFacetChange`	This function is called when `Checkbox` from the facet changes.

Filter Facet Range

Name	Type	Description
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*	`string`	String that identifies the current Facet key.
formatter*	`(price: number) => string`	Formatter function that transforms the raw price value and render the result.
onFacetChange*	`OnFacetChange`	This function is called when `Checkbox` from the facet changes.

Design Tokens

Nested Elements

Title

Local token	Default value/Global token linked
`--fs-filter-title-height`	`var(--fs-spacing-6)`
`--fs-filter-title-margin-bottom`	`var(--fs-spacing-0)`
`--fs-filter-title-text-size`	`var(--fs-text-size-2)`
`--fs-filter-title-line-height`	`1.25`

Accordion

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

Accordion Item Button

Local token	Default value/Global token linked
`--fs-filter-accordion-button-text-size`	`var(--fs-text-size-lead)`
`--fs-filter-accordion-button-text-weight`	`var(--fs-text-weight-regular)`
`--fs-filter-accordion-button-line-height`	`1.5`

`--fs-filter-accordion-button-text-size-notebook`	`var(--fs-text-size-2)`
`--fs-filter-accordion-button-line-height-notebook`	`1.25`
`--fs-filter-accordion-button-padding-right-notebook`	`var(--fs-spacing-4)`
`--fs-filter-accordion-button-padding-left-notebook`	`var(--fs-filter-accordion-button-padding-right-notebook)`

Accordion Item Panel

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

Accordion Item List

Local token	Default value/Global token linked
`--fs-filter-list-padding-bottom`	`var(--fs-spacing-3)`

List Item

Local token	Default value/Global token linked
`--fs-filter-list-item-not-last-margin-bottom`	`var(--fs-spacing-3)`

List Item Checkbox

Local token	Default value/Global token linked
`--fs-filter-list-item-checkbox-width`	`1.25rem`
`--fs-filter-list-item-checkbox-height`	`var(--fs-filter-list-item-checkbox-width)`

List Item Label

Local token	Default value/Global token linked
`--fs-filter-list-item-label-width`	`100%`
`--fs-filter-list-item-label-margin-left`	`var(--fs-spacing-1)`
`--fs-filter-list-item-label-text-size`	`var(--fs-text-size-2)`
`--fs-filter-list-item-label-line-height`	`1.25`

List Item Badge

Local token	Default value/Global token linked
`--fs-filter-list-item-badge-margin-left`	`var(--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

Empty State Filter Slider