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.
_10 FilterFacetBooleanItem,
_10} from "@faststore/ui";
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/organisms/Filter/styles.scss";
| 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 |
| 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) |
| 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) |
| 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) |
| Local token | Default value/Global token linked |
|---|
--fs-filter-list-padding-bottom | var(--fs-spacing-3) |
| Local token | Default value/Global token linked |
|---|
--fs-filter-list-item-not-last-margin-bottom | var(--fs-spacing-3) |
| 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) |
| 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 |
| Local token | Default value/Global token linked |
|---|
--fs-filter-list-item-badge-margin-left | var(--fs-spacing-1) |
You can target and override Filter styles using the following data attributes:
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
| Name | Type | Description | Default |
|---|
| 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. | |
| Name | Type | Description | Default |
|---|
| 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. | |
| description | string | The description displayed to identify the Facet. | |
| Name | Type | Description | Default |
|---|
| testId* | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | |
| label* | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | 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. | |
| type | "checkbox" | "radio" | Type of the Facet Item. | checkbox |
| Name | Type | Description | Default |
|---|
| 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. | |
