@faststore/components 2.0.89-alpha.0 → 2.0.90-alpha.0

package/dist/index.d.ts

@@ -94,6 +94,8 @@ export { default as ToggleField } from './molecules/ToggleField';
 export type { ToggleFieldProps } from './molecules/ToggleField';
 export { default as QuantitySelector } from './molecules/QuantitySelector';
 export type { QuantitySelectorProps } from './molecules/QuantitySelector';
+export { default as Filter, FilterFacetBoolean, FilterFacetBooleanItem, FilterFacetRange, FilterFacets, FilterSlider } from './organisms/Filter';
+export type { FilterFacetBooleanItemProps, FilterFacetRangeProps, FilterFacetsProps, FilterProps, FilterSliderProps } from './organisms/Filter';
 export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
 export type { HeroProps, HeroImageProps, HeroHeaderProps, } from './organisms/Hero';
 export { default as OutOfStock } from './organisms/OutOfStock';

package/dist/index.js

@@ -54,6 +54,7 @@ export { default as Toggle } from './molecules/Toggle';
 export { default as ToggleField } from './molecules/ToggleField';
 export { default as QuantitySelector } from './molecules/QuantitySelector';
 // Organisms
+export { default as Filter, FilterFacetBoolean, FilterFacetBooleanItem, FilterFacetRange, FilterFacets, FilterSlider } from './organisms/Filter';
 export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
 export { default as OutOfStock } from './organisms/OutOfStock';
 export { default as PaymentMethods } from './organisms/PaymentMethods';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/organisms/Filter/Filter.d.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+export type OnFacetChange = (item: {
+    key: string;
+    value: string;
+}, type: 'BOOLEAN' | 'RANGE') => void;
+export interface FilterProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId: string;
+    /**
+     * Title for the `Filter` component.
+     */
+    title?: string;
+    /**
+     * The expanded items from the `Accordion`.
+     */
+    indicesExpanded: Set<number>;
+    /**
+     * This function is called when `Accordion` is expanded or collapsed.
+     */
+    onAccordionChange: (index: number) => void;
+}
+declare function Filter({ testId, title, indicesExpanded, onAccordionChange, children, }: PropsWithChildren<FilterProps>): JSX.Element;
+export default Filter;

package/dist/organisms/Filter/Filter.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Accordion } from '../../';
+function Filter({ testId, title, indicesExpanded, onAccordionChange, children, }) {
+    return (React.createElement("div", { "data-fs-filter": true, "data-testid": testId },
+        React.createElement("h2", { "data-fs-filter-title": true }, title),
+        React.createElement(Accordion, { indices: indicesExpanded, onChange: onAccordionChange, "data-fs-filter-accordion": true }, children)));
+}
+export default Filter;
+//# sourceMappingURL=Filter.js.map

package/dist/organisms/Filter/Filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/organisms/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AA2BlC,SAAS,MAAM,CAAC,EACd,MAAM,EACN,KAAK,EACL,eAAe,EACf,iBAAiB,EACjB,QAAQ,GACuB;IAC/B,OAAO,CACL,oEAAiC,MAAM;QACrC,4DAA0B,KAAK,CAAM;QACrC,oBAAC,SAAS,IACR,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,iBAAiB,sCAG1B,QAAQ,CACC,CACR,CACP,CAAA;AACH,CAAC;AAED,eAAe,MAAM,CAAA"}

package/dist/organisms/Filter/FilterFacetBoolean.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+declare function FilterFacetBoolean({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export default FilterFacetBoolean;

package/dist/organisms/Filter/FilterFacetBoolean.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { List } from '../../';
+function FilterFacetBoolean({ children }) {
+    return React.createElement(List, { "data-fs-filter-list": true }, children);
+}
+export default FilterFacetBoolean;
+//# sourceMappingURL=FilterFacetBoolean.js.map

package/dist/organisms/Filter/FilterFacetBoolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterFacetBoolean.js","sourceRoot":"","sources":["../../../src/organisms/Filter/FilterFacetBoolean.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,SAAS,kBAAkB,CAAC,EAAE,QAAQ,EAA2B;IAC/D,OAAO,oBAAC,IAAI,mCAAsB,QAAQ,CAAQ,CAAA;AACpD,CAAC;AAED,eAAe,kBAAkB,CAAA"}

package/dist/organisms/Filter/FilterFacetBooleanItem.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { OnFacetChange } from './Filter';
+export interface FilterFacetBooleanItemProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId: string;
+    /**
+     * The text displayed to identify the Boolean Facet Item.
+     */
+    label: string;
+    /**
+     * Value to be emitted when Checkbox is clicked.
+     */
+    value: string;
+    /**
+     * Boolean that represents the Checkbox checked state.
+     */
+    selected: boolean;
+    /**
+     * Counter badge shown besides the Facet Item.
+     */
+    quantity: number;
+    /**
+     * ID to identify the Checkbox and corresponding label.
+     */
+    id: string;
+    /**
+     * String that identifies the current Facet key.
+     */
+    facetKey: string;
+    /**
+     * This function is called when `Checkbox` from the facet changes.
+     */
+    onFacetChange: OnFacetChange;
+}
+declare function FilterFacetBooleanItem({ testId, id, selected, value, quantity, facetKey, label, onFacetChange, }: FilterFacetBooleanItemProps): JSX.Element;
+export default FilterFacetBooleanItem;

package/dist/organisms/Filter/FilterFacetBooleanItem.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Badge, Checkbox, Label } from '../..';
+function FilterFacetBooleanItem({ testId, id, selected, value, quantity, facetKey, label, onFacetChange, }) {
+    return (React.createElement("li", { key: id, "data-fs-filter-list-item": true },
+        React.createElement(Checkbox, { id: id, checked: selected, onChange: () => onFacetChange({ key: facetKey, value }, 'BOOLEAN'), "data-fs-filter-list-item-checkbox": true, "data-testid": `${testId}-accordion-panel-checkbox`, "data-value": value, "data-quantity": quantity }),
+        React.createElement(Label, { htmlFor: id, className: "text__title-mini-alt", "data-fs-filter-list-item-label": true },
+            label,
+            " ",
+            React.createElement(Badge, { "data-fs-filter-list-item-badge": true }, quantity))));
+}
+export default FilterFacetBooleanItem;
+//# sourceMappingURL=FilterFacetBooleanItem.js.map

package/dist/organisms/Filter/FilterFacetBooleanItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterFacetBooleanItem.js","sourceRoot":"","sources":["../../../src/organisms/Filter/FilterFacetBooleanItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,OAAO,CAAA;AAsC9C,SAAS,sBAAsB,CAAC,EAC9B,MAAM,EACN,EAAE,EACF,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,GACe;IAC5B,OAAO,CACL,4BAAI,GAAG,EAAE,EAAE;QACT,oBAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,CAAC,4DAErD,GAAG,MAAM,2BAA2B,gBACrC,KAAK,mBACF,QAAQ,GACvB;QACF,oBAAC,KAAK,IACJ,OAAO,EAAE,EAAE,EACX,SAAS,EAAC,sBAAsB;YAG/B,KAAK;;YAAE,oBAAC,KAAK,8CAAiC,QAAQ,CAAS,CAC1D,CACL,CACN,CAAA;AACH,CAAC;AAED,eAAe,sBAAsB,CAAA"}

package/dist/organisms/Filter/FilterFacetRange.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { OnFacetChange } from './Filter';
+export interface FilterFacetRangeProps {
+    /**
+     * The minimum value of the Slider Range Facet
+     */
+    min: {
+        selected: number;
+        absolute: number;
+    };
+    /**
+     * The maximum value of the Slider Range Facet
+     */
+    max: {
+        selected: number;
+        absolute: number;
+    };
+    /**
+     * String that identifies the current Facet key.
+     */
+    facetKey: string;
+    /**
+     * Formatter function that transforms the raw price value and render the result.
+     */
+    formatter: (price: number) => string;
+    /**
+     * This function is called when `Checkbox` from the facet changes.
+     */
+    onFacetChange: OnFacetChange;
+}
+declare function FilterFacetRange({ min, max, formatter, facetKey, onFacetChange, }: FilterFacetRangeProps): JSX.Element;
+export default FilterFacetRange;

package/dist/organisms/Filter/FilterFacetRange.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PriceRange } from '../..';
+const formatRange = (min, max) => `${min.toFixed(2)}-to-${max.toFixed(2)}`;
+function FilterFacetRange({ min, max, formatter, facetKey, onFacetChange, }) {
+    return (React.createElement(PriceRange, { "data-fs-filter-facet-range": true, min: min, max: max, formatter: formatter, step: 1, onEnd: (v) => onFacetChange({
+            key: facetKey,
+            value: formatRange(v.min, v.max),
+        }, 'RANGE') }));
+}
+export default FilterFacetRange;
+//# sourceMappingURL=FilterFacetRange.js.map

package/dist/organisms/Filter/FilterFacetRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterFacetRange.js","sourceRoot":"","sources":["../../../src/organisms/Filter/FilterFacetRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA0BlC,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE,CAC/C,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;AAE1C,SAAS,gBAAgB,CAAC,EACxB,GAAG,EACH,GAAG,EACH,SAAS,EACT,QAAQ,EACR,aAAa,GACS;IACtB,OAAO,CACL,oBAAC,UAAU,wCAET,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CACX,aAAa,CACX;YACE,GAAG,EAAE,QAAQ;YACb,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC;SACjC,EACD,OAAO,CACR,GAEH,CACH,CAAA;AACH,CAAC;AAED,eAAe,gBAAgB,CAAA"}

package/dist/organisms/Filter/FilterFacets.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+export interface FilterFacetsProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId: string;
+    /**
+     * Current Facet's position in a list of facets.
+     */
+    index: number;
+    /**
+     * Current Facet's type, usually `StoreFacetBoolean` or `StoreFacetRange`.
+     */
+    type: string;
+    /**
+     * The text displayed to identify the Facet.
+     */
+    label: string;
+}
+declare function FilterFacets({ testId, label, index, children, type, }: PropsWithChildren<FilterFacetsProps>): JSX.Element;
+export default FilterFacets;

package/dist/organisms/Filter/FilterFacets.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AccordionButton, AccordionItem, AccordionPanel } from '../..';
+function FilterFacets({ testId, label, index, children, type, }) {
+    return (React.createElement(AccordionItem, { key: `${label}-${index}`, prefixId: testId, testId: `${testId}-accordion`, index: index, "data-type": type, "data-fs-filter-accordion-item": true },
+        React.createElement(AccordionButton, { testId: `${testId}-accordion-button` }, label),
+        React.createElement(AccordionPanel, null, children)));
+}
+export default FilterFacets;
+//# sourceMappingURL=FilterFacets.js.map

package/dist/organisms/Filter/FilterFacets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterFacets.js","sourceRoot":"","sources":["../../../src/organisms/Filter/FilterFacets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAqBtE,SAAS,YAAY,CAAC,EACpB,MAAM,EACN,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,GACiC;IACrC,OAAO,CACL,oBAAC,aAAa,IACZ,GAAG,EAAE,GAAG,KAAK,IAAI,KAAK,EAAE,EACxB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,GAAG,MAAM,YAAY,EAC7B,KAAK,EAAE,KAAK,eACD,IAAI;QAGf,oBAAC,eAAe,IAAC,MAAM,EAAE,GAAG,MAAM,mBAAmB,IAClD,KAAK,CACU;QAClB,oBAAC,cAAc,QAAE,QAAQ,CAAkB,CAC7B,CACjB,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}

package/dist/organisms/Filter/FilterSlider.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../../';
+import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver';
+export interface FilterSliderProps {
+    /**
+     * Title for the FilterSlider component.
+     */
+    title?: string;
+    /**
+     * Props for the Clear Button from FilterSlider component.
+     */
+    clearBtnProps?: Partial<ButtonProps>;
+    /**
+     * Props for the Apply Button from FilterSlider component.
+     */
+    applyBtnProps?: Partial<ButtonProps>;
+    /**
+     * Function called when close button is clicked.
+     */
+    onClose: () => void;
+    /**
+     * Represents the side that the FilterSlider comes from.
+     */
+    direction: SlideOverDirection;
+    /**
+     * Represents the size of the FilterSlider.
+     */
+    size: SlideOverWidthSize;
+}
+declare function FilterSlider({ title, clearBtnProps, applyBtnProps, onClose, size, direction, children, }: PropsWithChildren<FilterSliderProps>): JSX.Element;
+export default FilterSlider;

package/dist/organisms/Filter/FilterSlider.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, SlideOver, SlideOverHeader, useFadeEffect, useUI, } from '../../';
+function FilterSlider({ title, clearBtnProps, applyBtnProps, onClose, size, direction, children, }) {
+    const { closeFilter } = useUI();
+    const { fade, fadeOut } = useFadeEffect();
+    return (React.createElement(SlideOver, { "data-fs-filter-slider": true, isOpen: true, fade: fade, onDismiss: fadeOut, size: size, direction: direction, onTransitionEnd: () => fade === 'out' && closeFilter() },
+        React.createElement("div", { "data-fs-filter-slider-content": true },
+            React.createElement(SlideOverHeader, { onClose: () => {
+                    onClose();
+                    fadeOut();
+                } },
+                React.createElement("h2", { "data-fs-filter-slider-title": true }, title)),
+            children),
+        React.createElement("footer", { "data-fs-filter-slider-footer": true },
+            React.createElement(Button, { "data-fs-filter-slider-footer-button-clear": true, ...clearBtnProps }),
+            React.createElement(Button, { "data-fs-filter-slider-footer-button-apply": true, "data-testid": "filter-slider-button-apply", ...applyBtnProps, onClick: (e) => {
+                    applyBtnProps?.onClick?.(e);
+                    fadeOut();
+                } }))));
+}
+export default FilterSlider;
+//# sourceMappingURL=FilterSlider.js.map

package/dist/organisms/Filter/FilterSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSlider.js","sourceRoot":"","sources":["../../../src/organisms/Filter/FilterSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,OAAO,EACL,MAAM,EAEN,SAAS,EACT,eAAe,EACf,aAAa,EACb,KAAK,GACN,MAAM,QAAQ,CAAA;AA+Bf,SAAS,YAAY,CAAC,EACpB,KAAK,EACL,aAAa,EACb,aAAa,EACb,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,GAC6B;IACrC,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,CAAA;IAC/B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAA;IAEzC,OAAO,CACL,oBAAC,SAAS,mCAER,MAAM,QACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,WAAW,EAAE;QAEtD;YACE,oBAAC,eAAe,IACd,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAA;oBACT,OAAO,EAAE,CAAA;gBACX,CAAC;gBAED,mEAAiC,KAAK,CAAM,CAC5B;YACjB,QAAQ,CACL;QACN;YACE,oBAAC,MAAM,0DAA+C,aAAa,GAAI;YACvE,oBAAC,MAAM,sEAEO,4BAA4B,KACpC,aAAa,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;oBAC3B,OAAO,EAAE,CAAA;gBACX,CAAC,GACD,CACK,CACC,CACb,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}

package/dist/organisms/Filter/index.d.ts

@@ -0,0 +1,11 @@
+export { default } from './Filter';
+export type { FilterProps } from './Filter';
+export { default as FilterFacetBoolean } from './FilterFacetBoolean';
+export { default as FilterFacetBooleanItem } from './FilterFacetBooleanItem';
+export type { FilterFacetBooleanItemProps } from './FilterFacetBooleanItem';
+export { default as FilterFacetRange } from './FilterFacetRange';
+export type { FilterFacetRangeProps } from './FilterFacetRange';
+export { default as FilterFacets } from './FilterFacets';
+export type { FilterFacetsProps } from './FilterFacets';
+export { default as FilterSlider } from './FilterSlider';
+export type { FilterSliderProps } from './FilterSlider';

package/dist/organisms/Filter/index.js

@@ -0,0 +1,7 @@
+export { default } from './Filter';
+export { default as FilterFacetBoolean } from './FilterFacetBoolean';
+export { default as FilterFacetBooleanItem } from './FilterFacetBooleanItem';
+export { default as FilterFacetRange } from './FilterFacetRange';
+export { default as FilterFacets } from './FilterFacets';
+export { default as FilterSlider } from './FilterSlider';
+//# sourceMappingURL=index.js.map

package/dist/organisms/Filter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/Filter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAE5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/organisms/SlideOver/SlideOver.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ModalProps } from '../../';
-type Direction = 'leftSide' | 'rightSide';
-type WidthSize = 'full' | 'partial';
+export type Direction = 'leftSide' | 'rightSide';
+export type WidthSize = 'full' | 'partial';
 export type SlideOverProps = Omit<ModalProps, 'title'> & {
     /**
      * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).

package/dist/organisms/SlideOver/SlideOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAmC9B,SAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,KAChB,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAkC9B,SAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,KAChB,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}

package/dist/organisms/SlideOver/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from './SlideOver';
+export { default, Direction as SlideOverDirection, WidthSize as SlideOverWidthSize } from './SlideOver';
 export type { SlideOverProps } from './SlideOver';
 export { default as SlideOverHeader } from './SlideOverHeader';
 export type { SlideOverHeaderProps } from './SlideOverHeader';

package/dist/organisms/SlideOver/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAGrC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAoE,MAAM,aAAa,CAAA;AAEvG,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.89-alpha.0",
+  "version": "2.0.90-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "110810c0f5ff267980370f556fe7e9ad34e4d68a"
+  "gitHead": "8382d02bffb1fcf8c517df11221b228ecb1a38bd"
 }

package/src/index.ts

@@ -192,6 +192,22 @@ export { default as QuantitySelector } from './molecules/QuantitySelector'
 export type { QuantitySelectorProps } from './molecules/QuantitySelector'
 
 // Organisms
+export { 
+  default as Filter,
+  FilterFacetBoolean,
+  FilterFacetBooleanItem,
+  FilterFacetRange,
+  FilterFacets,
+  FilterSlider 
+} from './organisms/Filter'
+export type {
+  FilterFacetBooleanItemProps,
+  FilterFacetRangeProps,
+  FilterFacetsProps,
+  FilterProps,
+  FilterSliderProps
+} from './organisms/Filter'
+
 export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero'
 export type {
   HeroProps,

package/src/organisms/Filter/Filter.tsx

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren } from 'react'
+import { Accordion } from '../../'
+
+export type OnFacetChange = (
+  item: { key: string; value: string },
+  type: 'BOOLEAN' | 'RANGE'
+) => void
+
+export interface FilterProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId: string
+  /**
+   * Title for the `Filter` component.
+   */
+  title?: string
+  /**
+   * The expanded items from the `Accordion`.
+   */
+  indicesExpanded: Set<number>
+  /**
+   * This function is called when `Accordion` is expanded or collapsed.
+   */
+  onAccordionChange: (index: number) => void
+}
+
+function Filter({
+  testId,
+  title,
+  indicesExpanded,
+  onAccordionChange,
+  children,
+}: PropsWithChildren<FilterProps>) {
+  return (
+    <div data-fs-filter data-testid={testId}>
+      <h2 data-fs-filter-title>{title}</h2>
+      <Accordion
+        indices={indicesExpanded}
+        onChange={onAccordionChange}
+        data-fs-filter-accordion
+      >
+        {children}
+      </Accordion>
+    </div>
+  )
+}
+
+export default Filter

package/src/organisms/Filter/FilterFacetBoolean.tsx

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react'
+import { List } from '../../'
+
+function FilterFacetBoolean({ children }: { children: ReactNode }) {
+  return <List data-fs-filter-list>{children}</List>
+}
+
+export default FilterFacetBoolean

package/src/organisms/Filter/FilterFacetBooleanItem.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Badge, Checkbox, Label } from '../..'
+import { OnFacetChange } from './Filter'
+
+export interface FilterFacetBooleanItemProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId: string
+  /**
+   * The text displayed to identify the Boolean Facet Item.
+   */
+  label: string
+  /**
+   * Value to be emitted when Checkbox is clicked.
+   */
+  value: string
+  /**
+   * Boolean that represents the Checkbox checked state.
+   */
+  selected: boolean
+  /**
+   * Counter badge shown besides the Facet Item.
+   */
+  quantity: number
+  /**
+   * ID to identify the Checkbox and corresponding label.
+   */
+  id: string
+  /**
+   * String that identifies the current Facet key.
+   */
+  facetKey: string
+  /**
+   * This function is called when `Checkbox` from the facet changes.
+   */
+  onFacetChange: OnFacetChange
+}
+
+function FilterFacetBooleanItem({
+  testId,
+  id,
+  selected,
+  value,
+  quantity,
+  facetKey,
+  label,
+  onFacetChange,
+}: FilterFacetBooleanItemProps) {
+  return (
+    <li key={id} data-fs-filter-list-item>
+      <Checkbox
+        id={id}
+        checked={selected}
+        onChange={() => onFacetChange({ key: facetKey, value }, 'BOOLEAN')}
+        data-fs-filter-list-item-checkbox
+        data-testid={`${testId}-accordion-panel-checkbox`}
+        data-value={value}
+        data-quantity={quantity}
+      />
+      <Label
+        htmlFor={id}
+        className="text__title-mini-alt"
+        data-fs-filter-list-item-label
+      >
+        {label} <Badge data-fs-filter-list-item-badge>{quantity}</Badge>
+      </Label>
+    </li>
+  )
+}
+
+export default FilterFacetBooleanItem

package/src/organisms/Filter/FilterFacetRange.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { PriceRange } from '../..'
+import { OnFacetChange } from './Filter'
+
+export interface FilterFacetRangeProps {
+  /**
+   * The minimum value of the Slider Range Facet
+   */
+  min: { selected: number; absolute: number }
+  /**
+   * The maximum value of the Slider Range Facet
+   */
+  max: { selected: number; absolute: number }
+  /**
+   * String that identifies the current Facet key.
+   */
+  facetKey: string
+  /**
+   * Formatter function that transforms the raw price value and render the result.
+   */
+  formatter: (price: number) => string
+  /**
+   * This function is called when `Checkbox` from the facet changes.
+   */
+  onFacetChange: OnFacetChange
+}
+
+const formatRange = (min: number, max: number) =>
+  `${min.toFixed(2)}-to-${max.toFixed(2)}`
+
+function FilterFacetRange({
+  min,
+  max,
+  formatter,
+  facetKey,
+  onFacetChange,
+}: FilterFacetRangeProps) {
+  return (
+    <PriceRange
+      data-fs-filter-facet-range
+      min={min}
+      max={max}
+      formatter={formatter}
+      step={1}
+      onEnd={(v) =>
+        onFacetChange(
+          {
+            key: facetKey,
+            value: formatRange(v.min, v.max),
+          },
+          'RANGE'
+        )
+      }
+    />
+  )
+}
+
+export default FilterFacetRange

package/src/organisms/Filter/FilterFacets.tsx

@@ -0,0 +1,47 @@
+import React, { PropsWithChildren } from 'react'
+import { AccordionButton, AccordionItem, AccordionPanel } from '../..'
+
+export interface FilterFacetsProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId: string
+  /**
+   * Current Facet's position in a list of facets.
+   */
+  index: number
+  /**
+   * Current Facet's type, usually `StoreFacetBoolean` or `StoreFacetRange`.
+   */
+  type: string
+  /**
+   * The text displayed to identify the Facet.
+   */
+  label: string
+}
+
+function FilterFacets({
+  testId,
+  label,
+  index,
+  children,
+  type,
+}: PropsWithChildren<FilterFacetsProps>) {
+  return (
+    <AccordionItem
+      key={`${label}-${index}`}
+      prefixId={testId}
+      testId={`${testId}-accordion`}
+      index={index}
+      data-type={type}
+      data-fs-filter-accordion-item
+    >
+      <AccordionButton testId={`${testId}-accordion-button`}>
+        {label}
+      </AccordionButton>
+      <AccordionPanel>{children}</AccordionPanel>
+    </AccordionItem>
+  )
+}
+
+export default FilterFacets

package/src/organisms/Filter/FilterSlider.tsx

@@ -0,0 +1,90 @@
+import React, { PropsWithChildren } from 'react'
+
+import {
+  Button,
+  ButtonProps,
+  SlideOver,
+  SlideOverHeader,
+  useFadeEffect,
+  useUI,
+} from '../../'
+
+import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
+
+export interface FilterSliderProps {
+  /**
+   * Title for the FilterSlider component.
+   */
+  title?: string
+  /**
+   * Props for the Clear Button from FilterSlider component.
+   */
+  clearBtnProps?: Partial<ButtonProps>
+  /**
+   * Props for the Apply Button from FilterSlider component.
+   */
+  applyBtnProps?: Partial<ButtonProps>
+  /**
+   * Function called when close button is clicked.
+   */
+  onClose: () => void
+  /**
+   * Represents the side that the FilterSlider comes from.
+   */
+  direction: SlideOverDirection
+  /**
+   * Represents the size of the FilterSlider.
+   */
+  size: SlideOverWidthSize
+}
+
+function FilterSlider({
+  title,
+  clearBtnProps,
+  applyBtnProps,
+  onClose,
+  size,
+  direction,
+  children,
+}: PropsWithChildren<FilterSliderProps>) {
+  const { closeFilter } = useUI()
+  const { fade, fadeOut } = useFadeEffect()
+
+  return (
+    <SlideOver
+      data-fs-filter-slider
+      isOpen
+      fade={fade}
+      onDismiss={fadeOut}
+      size={size}
+      direction={direction}
+      onTransitionEnd={() => fade === 'out' && closeFilter()}
+    >
+      <div data-fs-filter-slider-content>
+        <SlideOverHeader
+          onClose={() => {
+            onClose()
+            fadeOut()
+          }}
+        >
+          <h2 data-fs-filter-slider-title>{title}</h2>
+        </SlideOverHeader>
+        {children}
+      </div>
+      <footer data-fs-filter-slider-footer>
+        <Button data-fs-filter-slider-footer-button-clear {...clearBtnProps} />
+        <Button
+          data-fs-filter-slider-footer-button-apply
+          data-testid="filter-slider-button-apply"
+          {...applyBtnProps}
+          onClick={(e) => {
+            applyBtnProps?.onClick?.(e)
+            fadeOut()
+          }}
+        />
+      </footer>
+    </SlideOver>
+  )
+}
+
+export default FilterSlider

package/src/organisms/Filter/index.ts

@@ -0,0 +1,12 @@
+export { default } from './Filter'
+export type { FilterProps } from './Filter'
+export { default as FilterFacetBoolean } from './FilterFacetBoolean'
+export { default as FilterFacetBooleanItem } from './FilterFacetBooleanItem'
+export type { FilterFacetBooleanItemProps } from './FilterFacetBooleanItem'
+export { default as FilterFacetRange } from './FilterFacetRange'
+export type { FilterFacetRangeProps } from './FilterFacetRange'
+export { default as FilterFacets } from './FilterFacets'
+export type { FilterFacetsProps } from './FilterFacets'
+export { default as FilterSlider } from './FilterSlider'
+export type { FilterSliderProps } from './FilterSlider'
+

package/src/organisms/SlideOver/SlideOver.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
 import type { ReactNode } from 'react'
+import React from 'react'
 
-import { Modal } from '../../'
 import type { ModalProps } from '../../'
+import { Modal } from '../../'
 
-type Direction = 'leftSide' | 'rightSide'
-type WidthSize = 'full' | 'partial'
+export type Direction = 'leftSide' | 'rightSide'
+export type WidthSize = 'full' | 'partial'
 
 export type SlideOverProps = Omit<ModalProps, 'title'> & {
   /**

package/src/organisms/SlideOver/index.ts

@@ -1,5 +1,6 @@
-export { default } from './SlideOver'
+export { default, Direction as SlideOverDirection, WidthSize as SlideOverWidthSize } from './SlideOver'
 export type { SlideOverProps } from './SlideOver'
-
 export { default as SlideOverHeader } from './SlideOverHeader'
 export type { SlideOverHeaderProps } from './SlideOverHeader'
+
+