Layered Navigation - Desktop Optimizations

packages/extensions/venia-sample-language-packs/i18n/fr_FR.json

@@ -45,6 +45,7 @@
     "cartTrigger.ariaLabel": "Basculer le mini-panier. Vous avez {count} articles dans votre panier.",
     "categoryContent.filter": "Filtre",
     "categoryContent.itemsSortedBy": "Articles triés par ",
+    "categoryContent.resultCount": "{count} Résultats",
     "categoryLeaf.allLabel": "Tout(e) {name}",
     "categoryList.noResults": "Aucune catégorie enfant trouvée.",
     "checkoutPage.accountSuccessfullyCreated": "Compte créé avec succès.",
@@ -130,6 +131,8 @@
     "Email Signup": "Inscription par courriel",
     "field.optional": "Optionnelle",
     "filterFooter.results": "Voir les résultats",
+    "filterList.showMore": "Voir plus",
+    "filterList.showLess": "Voir moins",
     "filterModal.action": "Tout effacer",
     "filterModal.headerTitle": "Filtres",
     "filterSearch.name": "Entrez un {name}",
@@ -283,6 +286,7 @@
     "productListing.loading": "Récupération du panier ...",
     "productOptions.selectedLabel": "Choisie {label}:",
     "productQuantity.label": "quantité de produit",
+    "productSort.sortByButton": "Trier par",
     "productSort.sortButton": "Trier",
     "quantity.buttonDecrement": "Diminuer la quantité",
     "quantity.buttonIncrement": "Augmenter la quantité",

packages/peregrine/lib/talons/FilterModal/__tests__/useFilterBlock.spec.js

@@ -0,0 +1,101 @@
+import React, { useEffect } from 'react';
+import { act } from 'react-test-renderer';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useFilterBlock } from '../useFilterBlock';
+
+const log = jest.fn();
+
+let handleClickProp = null;
+let inputValues = {};
+
+const Component = () => {
+    const talonProps = useFilterBlock(inputValues);
+
+    useEffect(() => {
+        log(talonProps);
+        handleClickProp = talonProps.handleClick;
+    }, [talonProps]);
+
+    return null;
+};
+
+const givenDefaultValues = () => {
+    inputValues = {
+        filterState: new Set(),
+        items: [],
+        initialOpen: false
+    };
+};
+
+const givenInitiallyOpen = () => {
+    inputValues = {
+        filterState: new Set(),
+        items: [],
+        initialOpen: true
+    };
+};
+
+const givenSelectedItems = () => {
+    const item = {
+        attribute_code: 'foo'
+    };
+
+    inputValues = {
+        filterState: new Set().add(item),
+        items: [item],
+        initialOpen: false
+    };
+};
+
+describe('#useFilterBlock', () => {
+    beforeEach(() => {
+        log.mockClear();
+        handleClickProp = null;
+        givenDefaultValues();
+    });
+
+    it('is closed by default', () => {
+        createTestInstance(<Component />);
+
+        expect(log).toHaveBeenCalledWith({
+            handleClick: expect.any(Function),
+            isExpanded: false
+        });
+    });
+
+    it('is open if passed initially open', () => {
+        givenInitiallyOpen();
+        createTestInstance(<Component />);
+
+        expect(log).toHaveBeenCalledWith({
+            handleClick: expect.any(Function),
+            isExpanded: true
+        });
+    });
+
+    it('is open if items are selected', () => {
+        givenSelectedItems();
+        createTestInstance(<Component />);
+
+        expect(log).toHaveBeenCalledWith({
+            handleClick: expect.any(Function),
+            isExpanded: true
+        });
+    });
+
+    it('can toggle visibility', () => {
+        createTestInstance(<Component />);
+
+        expect(typeof handleClickProp).toBe('function');
+
+        act(() => {
+            handleClickProp();
+        });
+
+        expect(log).toHaveBeenLastCalledWith({
+            handleClick: expect.any(Function),
+            isExpanded: true
+        });
+    });
+});

packages/peregrine/lib/talons/FilterModal/__tests__/useFilterList.spec.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { act } from 'react-test-renderer';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useFilterList } from '../useFilterList';
+
+const log = jest.fn();
+
+let handleClickProp = null;
+
+const Component = () => {
+    const talonProps = useFilterList();
+
+    useEffect(() => {
+        log(talonProps);
+        handleClickProp = talonProps.handleListToggle;
+    }, [talonProps]);
+
+    return null;
+};
+
+describe('#useFilterList', () => {
+    beforeEach(() => {
+        log.mockClear();
+        handleClickProp = null;
+    });
+
+    it('is initially closed', () => {
+        createTestInstance(<Component />);
+
+        expect(log).toHaveBeenCalledWith({
+            handleListToggle: expect.any(Function),
+            isListExpanded: false
+        });
+    });
+
+    it('can toggle visibility', () => {
+        createTestInstance(<Component />);
+
+        expect(typeof handleClickProp).toBe('function');
+
+        act(() => {
+            handleClickProp();
+        });
+
+        expect(log).toHaveBeenLastCalledWith({
+            handleListToggle: expect.any(Function),
+            isListExpanded: true
+        });
+    });
+});

packages/peregrine/lib/talons/FilterModal/index.js

@@ -2,3 +2,4 @@ export { useFilterBlock } from './useFilterBlock';
 export { useFilterFooter } from './useFilterFooter';
 export { useFilterModal } from './useFilterModal';
 export { useFilterState } from './useFilterState';
+export { useFilterList } from './useFilterList';

packages/peregrine/lib/talons/FilterModal/useFilterBlock.js

@@ -1,7 +1,19 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 
-export const useFilterBlock = () => {
-    const [isExpanded, setExpanded] = useState(false);
+export const useFilterBlock = props => {
+    const { filterState, items, initialOpen } = props;
+
+    const hasSelected = useMemo(() => {
+        return items.some(item => {
+            return filterState && filterState.has(item);
+        });
+    }, [filterState, items]);
+
+    const [isExpanded, setExpanded] = useState(hasSelected || initialOpen);
+
+    useEffect(() => {
+        setExpanded(hasSelected || initialOpen);
+    }, [hasSelected, initialOpen]);
 
     const handleClick = useCallback(() => {
         setExpanded(value => !value);

packages/peregrine/lib/talons/FilterModal/useFilterList.js

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+export const useFilterList = () => {
+    const [isListExpanded, setExpanded] = useState(false);
+
+    const handleListToggle = useCallback(() => {
+        setExpanded(value => !value);
+    }, [setExpanded]);
+
+    return {
+        handleListToggle,
+        isListExpanded
+    };
+};

packages/peregrine/lib/talons/FilterSidebar/__tests__/useFilterSidebar.spec.js

@@ -0,0 +1,166 @@
+import React, { useEffect } from 'react';
+import { act } from 'react-test-renderer';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useFilterSidebar } from '../useFilterSidebar';
+
+jest.mock('../../FilterModal/helpers', () => ({
+    getStateFromSearch: jest.fn(() => ({})),
+    getSearchFromState: jest.fn(() => 'searchFromState'),
+    stripHtml: jest.fn(() => 'strippedHtml')
+}));
+
+jest.mock('@magento/peregrine/lib/context/app', () => {
+    const api = {
+        closeDrawer: jest.fn()
+    };
+    const state = {
+        drawer: 'filter'
+    };
+    return {
+        useAppContext: jest.fn(() => [state, api])
+    };
+});
+
+jest.mock('../../FilterModal/useFilterState', () => {
+    const api = {
+        setItems: jest.fn()
+    };
+    const state = {};
+    return {
+        useFilterState: jest.fn(() => [state, api])
+    };
+});
+
+// Mock introspection to return all the filters from the test data
+jest.mock('@apollo/client', () => {
+    const apolloClient = jest.requireActual('@apollo/client');
+    const introspectionData = {
+        __type: {
+            inputFields: [
+                {
+                    name: 'price'
+                },
+                {
+                    name: 'category_id'
+                },
+                {
+                    name: 'foo'
+                }
+            ]
+        }
+    };
+    return {
+        ...apolloClient,
+        useQuery: jest.fn(() => ({ data: introspectionData, error: null }))
+    };
+});
+
+jest.mock('react-router-dom', () => ({
+    useHistory: jest.fn(() => ({ push: jest.fn() })),
+    useLocation: jest.fn(() => ({ pathname: '', search: '' }))
+}));
+const mockPush = jest.fn();
+useHistory.mockImplementation(() => ({ push: mockPush }));
+
+const defaultProps = {
+    filters: [
+        {
+            attribute_code: 'price',
+            label: 'Price',
+            options: [
+                {
+                    label: '*-100',
+                    value: '*_100'
+                }
+            ]
+        },
+        {
+            attribute_code: 'category_id',
+            label: 'Category',
+            options: [
+                {
+                    label: 'Bottoms',
+                    value: '28'
+                },
+                {
+                    label: 'Tops',
+                    value: '19'
+                }
+            ]
+        },
+        {
+            attribute_code: 'foo',
+            label: 'Foo',
+            options: [
+                {
+                    label: 'Bar',
+                    value: 'bar'
+                }
+            ]
+        }
+    ],
+    operations: {}
+};
+const log = jest.fn();
+
+const Component = () => {
+    const talonProps = useFilterSidebar(defaultProps);
+
+    useEffect(() => {
+        log(talonProps);
+    }, [talonProps]);
+
+    return null;
+};
+describe('#useFilterSidebar', () => {
+    beforeEach(() => {
+        log.mockClear();
+        mockPush.mockClear();
+    });
+
+    it('returns expected shape', () => {
+        createTestInstance(<Component />);
+
+        expect(log).toHaveBeenCalledWith({
+            filterApi: expect.any(Object),
+            filterItems: expect.any(Object),
+            filterKeys: expect.any(Object),
+            filterNames: expect.any(Object),
+            filterState: expect.any(Object),
+            handleApply: expect.any(Function),
+            handleClose: expect.any(Function),
+            handleKeyDownActions: expect.any(Function),
+            handleOpen: expect.any(Function),
+            handleReset: expect.any(Function),
+            isApplying: expect.any(Boolean),
+            isOpen: expect.any(Boolean)
+        });
+    });
+
+    it('enables category_id filter on search page', () => {
+        useLocation.mockReturnValueOnce({
+            pathname: '/search.html'
+        });
+        createTestInstance(<Component />);
+        const { filterNames } = log.mock.calls[0][0];
+        expect(filterNames.get('category_id')).toBeTruthy();
+    });
+
+    it('only renders filters that are valid and enabled', () => {
+        createTestInstance(<Component />);
+        const { filterNames } = log.mock.calls[0][0];
+        expect(filterNames.get('foo')).toBeTruthy();
+    });
+
+    it('writes filter state to history when "isApplying"', () => {
+        createTestInstance(<Component />);
+        const { handleApply } = log.mock.calls[0][0];
+
+        act(() => {
+            handleApply();
+        });
+        expect(mockPush).toHaveBeenCalled();
+    });
+});

packages/peregrine/lib/talons/FilterSidebar/index.js

@@ -0,0 +1 @@
+export { useFilterSidebar } from './useFilterSidebar';