Filter

Filters products inside the Product Listing Page (PLP) and Search Page.

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

Example

Code

Filters

Import

Import the component from @faststore/ui


_10import {
_10  Filter,
_10  FilterFacets,
_10  FilterFacetBoolean,
_10  FilterFacetBooleanItem,
_10  FilterFacetRange,
_10} 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:


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

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

Usage

Example

Code

Filters

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.

FilterFacets

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.

FilterFacetBooleanItem

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.

FilterFacetRange

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*	`(value: number) => string`	Formatter function that transforms the raw 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