Filter Slider

The mobile Filter view that is rendered inside a SlideOver component.

The FilterSlider component is a compound of the following:

FilterSlider: SlideOver that wraps the Filter for small screen dimensions.
Filter: wraps an Accordion along with the component title.
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.

Import

Import the component from @faststore/ui

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

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

@import '@faststore/ui/src/components/organisms/FilterSlider/styles.scss';
@import '@faststore/ui/src/components/atoms/Button/styles.scss';

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

Name	Type	Description
title	`string`	Title for the FilterSlider component.
direction*	`"leftSide" \| "rightSide"`	Represents the side that the FilterSlider comes from.
size*	`"full" \| "partial"`	Represents the size of the FilterSlider.
applyBtnProps	`Partial<ButtonProps>`	Props for the Apply Button from FilterSlider component.
clearBtnProps	`Partial<ButtonProps>`	Props for the Clear Button from FilterSlider component.
overlayProps	`Props`	Props forwarded to the `Overlay` component.
onClose*	`() => void`	Function called when Close Button is clicked.

Local token	Default value/Global token linked
`--fs-filter-slider-content-height`	`calc(100vh - var(--fs-filter-slider-footer-height))`
`--fs-filter-slider-content-padding`	`var(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3))`

Local token	Default value/Global token linked
`--fs-filter-slider-title-font-size`	`var(--fs-text-size-4)`
`--fs-filter-slider-title-font-weight`	`var(--fs-text-weight-bold)`
`--fs-filter-slider-title-line-height`	`1.12`

Local token	Default value/Global token linked
`--fs-filter-slider-footer-width`	`100%`
`--fs-filter-slider-footer-height`	`5rem`

`--fs-filter-slider-footer-padding`	`var(--fs-spacing-3)`

`--fs-filter-slider-footer-bkg-color`	`var(--fs-color-neutral-0)`
`--fs-filter-slider-footer-box-shadow`	`0 0 6px rgb(0 0 0 / 20%)`

Local token	Default value/Global token linked
`--fs-filter-slider-footer-button-clear-width`	`40%`
`--fs-filter-slider-footer-button-clear-margin-right`	`var(--fs-spacing-3)`

`--fs-filter-slider-footer-button-apply-width`	`60%`

data-fs-filter-slider

data-fs-filter-slider-content

data-fs-filter-slider-title

data-fs-filter-slider-footer

data-fs-filter-slider-footer-button-apply

data-fs-filter-slider-footer-button-clear