@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/components/FilterModal/__tests__/filterModal.spec.js

@@ -1,5 +1,8 @@
 import React from 'react';
+
 import { createTestInstance } from '@magento/peregrine';
+
+import LinkButton from '../../LinkButton';
 import { mockFilterBlock } from '../filterBlock';
 import { mockCurrentFilters } from '../CurrentFilters';
 import FilterModal from '../filterModal';
@@ -41,7 +44,11 @@ const mockFilters = [
     }
 ];
 
-jest.mock('../../../classify');
+let mockFilterState;
+
+let mockIsOpen;
+
+jest.mock('../../LinkButton', () => props => <mock-LinkButton {...props} />);
 
 jest.mock('../../Portal', () => ({
     Portal: jest.fn(({ children }) => {
@@ -77,12 +84,12 @@ jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
             filterApi: null,
             filterItems: itemsByGroup,
             filterNames: names,
-            filterState: new Map(),
+            filterState: mockFilterState,
             handleApply: jest.fn(),
             handleClose: jest.fn(),
             handleReset: jest.fn(),
             handleKeyDownActions: jest.fn(),
-            isOpen: true
+            isOpen: mockIsOpen
         };
     })
 }));
@@ -127,6 +134,9 @@ const givenDefaultValues = () => {
     inputProps = {
         filters: []
     };
+
+    mockFilterState = new Map();
+    mockIsOpen = true;
 };
 
 const givenFilters = () => {
@@ -135,6 +145,14 @@ const givenFilters = () => {
     };
 };
 
+const givenSelectedFilters = () => {
+    mockFilterState = new Map([['group', 'item']]);
+};
+
+const givenClosed = () => {
+    mockIsOpen = false;
+};
+
 describe('#FilterModal', () => {
     beforeEach(() => {
         mockFilterBlock.mockClear();
@@ -156,4 +174,25 @@ describe('#FilterModal', () => {
 
         expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
     });
+
+    it('renders without selected filters', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(LinkButton)).toThrow();
+    });
+
+    it('renders with selected filters', () => {
+        givenSelectedFilters();
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(LinkButton)).not.toThrow();
+    });
+
+    it('renders when closed', () => {
+        givenClosed();
+        createTestInstance(<Component />);
+
+        expect(mockFilterBlock).not.toHaveBeenCalled();
+        expect(mockCurrentFilters).not.toHaveBeenCalled();
+    });
 });

package/lib/components/FilterModal/filterBlock.js

@@ -3,13 +3,14 @@ import { arrayOf, shape, string, func, bool } from 'prop-types';
 import { useIntl } from 'react-intl';
 import { ChevronDown as ArrowDown, ChevronUp as ArrowUp } from 'react-feather';
 import { Form } from 'informed';
+
 import { useFilterBlock } from '@magento/peregrine/lib/talons/FilterModal';
 import setValidator from '@magento/peregrine/lib/validators/set';
 
 import { useStyle } from '../../classify';
 import Icon from '../Icon';
 import FilterList from './FilterList';
-import defaultClasses from './filterBlock.css';
+import defaultClasses from './filterBlock.module.css';
 
 const FilterBlock = props => {
     const {
@@ -31,9 +32,6 @@ const FilterBlock = props => {
     const { handleClick, isExpanded } = talonProps;
     const iconSrc = isExpanded ? ArrowUp : ArrowDown;
     const classes = useStyle(defaultClasses, props.classes);
-    const listClass = isExpanded
-        ? classes.list_expanded
-        : classes.list_collapsed;
 
     const itemAriaLabel = formatMessage(
         {
@@ -65,6 +63,18 @@ const FilterBlock = props => {
               }
           );
 
+    const list = isExpanded ? (
+        <Form className={classes.list}>
+            <FilterList
+                filterApi={filterApi}
+                filterState={filterState}
+                group={group}
+                items={items}
+                onApply={onApply}
+            />
+        </Form>
+    ) : null;
+
     return (
         <li className={classes.root} aria-label={itemAriaLabel}>
             <button
@@ -79,16 +89,7 @@ const FilterBlock = props => {
                     <Icon src={iconSrc} />
                 </span>
             </button>
-            <Form className={listClass}>
-                <FilterList
-                    filterApi={filterApi}
-                    filterState={filterState}
-                    group={group}
-                    items={items}
-                    onApply={onApply}
-                    isExpanded={isExpanded}
-                />
-            </Form>
+            {list}
         </li>
     );
 };
@@ -101,8 +102,7 @@ FilterBlock.defaultProps = {
 FilterBlock.propTypes = {
     classes: shape({
         header: string,
-        list_collapsed: string,
-        list_expanded: string,
+        list: string,
         name: string,
         root: string,
         trigger: string

package/lib/components/FilterModal/{filterBlock.css → filterBlock.module.css}

@@ -25,12 +25,3 @@
 .list:empty {
     display: none;
 }
-
-.list_expanded {
-    composes: list;
-}
-
-.list_collapsed {
-    composes: list;
-    display: none;
-}

package/lib/components/FilterModal/filterFooter.js

@@ -5,7 +5,7 @@ import { useFilterFooter } from '@magento/peregrine/lib/talons/FilterModal';
 
 import { useStyle } from '../../classify';
 import Button from '../Button';
-import defaultClasses from './filterFooter.css';
+import defaultClasses from './filterFooter.module.css';
 
 const FilterFooter = props => {
     const { applyFilters, hasFilters, isOpen } = props;

package/lib/components/FilterModal/filterModal.js

@@ -12,7 +12,7 @@ import { Portal } from '../Portal';
 import CurrentFilters from './CurrentFilters';
 import FilterBlock from './filterBlock';
 import FilterFooter from './filterFooter';
-import defaultClasses from './filterModal.css';
+import defaultClasses from './filterModal.module.css';
 
 /**
  * A view that displays applicable and applied filters.
@@ -96,7 +96,7 @@ const FilterModal = props => {
         <Portal>
             {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
             <FocusScope contain restoreFocus autoFocus>
-                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
                 <aside className={modalClass} onKeyDown={handleKeyDownActions}>
                     <div className={classes.body}>
                         <div className={classes.header}>

package/lib/components/FilterModalOpenButton/__tests__/filterModalOpenButton.shimmer.spec.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { mockShimmer } from '../../Shimmer';
+import ShimmerComponent from '../filterModalOpenButton.shimmer';
+
+const mockClassName = 'filterButtonShimmer';
+const mockClasses = {
+    [mockClassName]: 'test-class'
+};
+
+jest.mock('../../Shimmer', () => {
+    const mockedShimmer = jest.fn(() => null);
+
+    return {
+        __esModule: true,
+        default: mockedShimmer,
+        mockShimmer: mockedShimmer
+    };
+});
+
+jest.mock('../../../classify', () => ({
+    useStyle: (...classes) => Object.assign({}, ...classes)
+}));
+
+let passedProps = {};
+
+const givenDefaultProps = () => {
+    passedProps = {};
+};
+
+const givenPassedClasses = () => {
+    passedProps = {
+        classes: mockClasses
+    };
+};
+
+describe('#FilterModalOpenButton Shimmer', () => {
+    beforeEach(() => {
+        mockShimmer.mockClear();
+
+        givenDefaultProps();
+    });
+
+    test('renders Shimmer component', () => {
+        createTestInstance(<ShimmerComponent {...passedProps} />);
+
+        expect(mockShimmer).toHaveBeenCalled();
+    });
+
+    test('passes merged class to Shimmer component', () => {
+        givenPassedClasses();
+        createTestInstance(<ShimmerComponent {...passedProps} />);
+
+        expect(mockShimmer).toHaveBeenCalledWith(
+            expect.objectContaining({
+                classes: expect.objectContaining({
+                    root_button: mockClasses[mockClassName]
+                })
+            }),
+            expect.any(Object)
+        );
+    });
+});

package/lib/components/FilterModalOpenButton/__tests__/filterModalOpenButton.spec.js

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Button from '../../Button';
+import FilterModalOpenButton from '../filterModalOpenButton';
+
+const mockHandleOpen = jest.fn();
+
+jest.mock('../../Button', () => props => <mock-Button {...props} />);
+
+jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
+    useFilterModal: jest.fn(() => {
+        return {
+            handleOpen: mockHandleOpen
+        };
+    })
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <FilterModalOpenButton {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        filters: []
+    };
+};
+
+describe('#FilterModalOpenButton', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Button)).not.toThrow();
+        expect(root.findByType(Button).props.onClick).toBe(mockHandleOpen);
+    });
+});

package/lib/components/FilterModalOpenButton/filterModalOpenButton.js

@@ -3,7 +3,7 @@ import { shape, string, array } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import Button from '../Button';
 import { useStyle } from '../../classify';
-import defaultClasses from './filterModalOpenButton.css';
+import defaultClasses from './filterModalOpenButton.module.css';
 import { useFilterModal } from '@magento/peregrine/lib/talons/FilterModal';
 
 const FilterModalOpenButton = props => {
@@ -19,6 +19,8 @@ const FilterModalOpenButton = props => {
             }}
             onClick={handleOpen}
             type="button"
+            aria-live="polite"
+            aria-busy="false"
         >
             <FormattedMessage
                 id={'productList.filter'}
@@ -31,8 +33,8 @@ const FilterModalOpenButton = props => {
 export default FilterModalOpenButton;
 
 FilterModalOpenButton.propTypes = {
-    filters: array,
     classes: shape({
         filterButton: string
-    })
+    }),
+    filters: array
 };

package/lib/components/FilterModalOpenButton/{filterModalOpenButton.css → filterModalOpenButton.module.css}

@@ -1,5 +1,5 @@
 .filterButton {
-    composes: root_lowPriority from '../../components/Button/button.css';
+    composes: root_lowPriority from '../Button/button.module.css';
     min-width: 6.25rem;
 }
 

package/lib/components/FilterModalOpenButton/filterModalOpenButton.shimmer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '../../classify';
+
+import Shimmer from '../Shimmer';
+import defaultClasses from './filterModalOpenButton.shimmer.module.css';
+
+const FilterModalOpenButtonShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <Shimmer
+            classes={{ root_button: classes.filterButtonShimmer }}
+            type="button"
+            aria-live="polite"
+            aria-busy="true"
+        />
+    );
+};
+
+FilterModalOpenButtonShimmer.propTypes = {
+    classes: shape({
+        filterButtonShimmer: string
+    })
+};
+
+export default FilterModalOpenButtonShimmer;

package/lib/components/FilterModalOpenButton/filterModalOpenButton.shimmer.module.css

@@ -0,0 +1,4 @@
+.filterButtonShimmer {
+    composes: root_button from '../Shimmer/shimmer.module.css';
+    composes: filterButton from './filterModalOpenButton.module.css';
+}

package/lib/components/FilterModalOpenButton/index.js

@@ -1 +1,4 @@
 export { default } from './filterModalOpenButton';
+export {
+    default as FilterModalOpenButtonShimmer
+} from './filterModalOpenButton.shimmer';

package/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js

@@ -1,7 +1,11 @@
 import React from 'react';
+import { act } from 'react-test-renderer';
+
 import { createTestInstance } from '@magento/peregrine';
-import { mockFilterBlock } from '../../FilterModal/filterBlock';
+
+import FilterBlock, { mockFilterBlock } from '../../FilterModal/filterBlock';
 import { mockCurrentFilters } from '../../FilterModal/CurrentFilters';
+import LinkButton from '../../LinkButton';
 import FilterSidebar from '../filterSidebar';
 
 const mockFilters = [
@@ -43,6 +47,16 @@ const mockFilters = [
 
 const mockFiltersOpenCount = 2;
 
+const mockHandleApply = jest.fn();
+
+const mockScrollTo = jest.fn();
+
+const mockGetBoundingClientRect = jest.fn();
+
+let mockFilterState;
+
+jest.mock('../../LinkButton', () => props => <mock-LinkButton {...props} />);
+
 jest.mock('@magento/peregrine/lib/talons/FilterSidebar', () => ({
     useFilterSidebar: jest.fn(({ filters }) => {
         const names = new Map();
@@ -65,8 +79,8 @@ jest.mock('@magento/peregrine/lib/talons/FilterSidebar', () => ({
             filterApi: null,
             filterItems: itemsByGroup,
             filterNames: names,
-            filterState: new Map(),
-            handleApply: jest.fn(),
+            filterState: mockFilterState,
+            handleApply: mockHandleApply,
             handleReset: jest.fn()
         };
     })
@@ -106,6 +120,8 @@ const givenDefaultValues = () => {
     inputProps = {
         filters: []
     };
+
+    mockFilterState = new Map();
 };
 
 const givenFilters = () => {
@@ -114,6 +130,14 @@ const givenFilters = () => {
     };
 };
 
+const givenSelectedFilters = () => {
+    inputProps = {
+        filters: mockFilters
+    };
+
+    mockFilterState = new Map([['group', 'item']]);
+};
+
 const givenFiltersAndAmountToShow = () => {
     inputProps = {
         filters: mockFilters,
@@ -136,13 +160,66 @@ describe('#FilterSidebar', () => {
         expect(mockCurrentFilters).toHaveBeenCalled();
     });
 
-    it('renders with filters', () => {
+    it('renders with filters and no selected filters', () => {
         givenFilters();
-        createTestInstance(<Component />);
 
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(LinkButton)).toThrow();
         expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
     });
 
+    it('renders with filters and selected filter', () => {
+        givenSelectedFilters();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(LinkButton)).not.toThrow();
+        expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
+    });
+
+    it('handles when a user applies a filter and ref is not provided', () => {
+        givenSelectedFilters();
+
+        const { root } = createTestInstance(<Component />);
+
+        act(() => {
+            root.findAllByType(FilterBlock)[0].props.onApply();
+        });
+
+        expect(mockHandleApply).toHaveBeenCalled();
+    });
+
+    it('handles when a user applies a filter and ref is provided', () => {
+        givenSelectedFilters();
+
+        Object.defineProperty(window, 'scrollTo', {
+            configurable: true,
+            writable: true,
+            value: mockScrollTo
+        });
+
+        const { root } = createTestInstance(<Component />, {
+            createNodeMock: () => {
+                return {
+                    getBoundingClientRect: mockGetBoundingClientRect.mockReturnValue(
+                        {
+                            top: 250
+                        }
+                    )
+                };
+            }
+        });
+
+        act(() => {
+            root.findAllByType(FilterBlock)[0].props.onApply();
+        });
+
+        expect(mockGetBoundingClientRect).toBeCalledTimes(1);
+        expect(window.scrollTo).toBeCalledTimes(1);
+        expect(mockHandleApply).toHaveBeenCalled();
+    });
+
     it('accepts configurable amount of open filters', () => {
         givenFiltersAndAmountToShow();
         createTestInstance(<Component />);

package/lib/components/FilterSidebar/filterSidebar.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useRef, Fragment } from 'react';
+import React, { useMemo, useCallback, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
@@ -7,7 +7,7 @@ import { useStyle } from '../../classify';
 import LinkButton from '../LinkButton';
 import CurrentFilters from '../FilterModal/CurrentFilters';
 import FilterBlock from '../FilterModal/filterBlock';
-import defaultClasses from './filterSidebar.css';
+import defaultClasses from './filterSidebar.module.css';
 
 const SCROLL_OFFSET = 150;
 
@@ -90,28 +90,31 @@ const FilterSidebar = props => {
     ) : null;
 
     return (
-        <Fragment>
-            <aside className={classes.root} ref={filterRef}>
-                <div className={classes.body}>
-                    <div className={classes.header}>
-                        <h2 className={classes.headerTitle}>
-                            <FormattedMessage
-                                id={'filterModal.headerTitle'}
-                                defaultMessage={'Filters'}
-                            />
-                        </h2>
-                    </div>
-                    <CurrentFilters
-                        filterApi={filterApi}
-                        filterNames={filterNames}
-                        filterState={filterState}
-                        onRemove={handleApplyFilter}
-                    />
-                    {clearAll}
-                    <ul className={classes.blocks}>{filtersList}</ul>
+        <aside
+            className={classes.root}
+            ref={filterRef}
+            aria-live="polite"
+            aria-busy="false"
+        >
+            <div className={classes.body}>
+                <div className={classes.header}>
+                    <h2 className={classes.headerTitle}>
+                        <FormattedMessage
+                            id={'filterModal.headerTitle'}
+                            defaultMessage={'Filters'}
+                        />
+                    </h2>
                 </div>
-            </aside>
-        </Fragment>
+                <CurrentFilters
+                    filterApi={filterApi}
+                    filterNames={filterNames}
+                    filterState={filterState}
+                    onRemove={handleApplyFilter}
+                />
+                {clearAll}
+                <ul className={classes.blocks}>{filtersList}</ul>
+            </div>
+        </aside>
     );
 };
 

package/lib/components/FilterSidebar/filterSidebar.shimmer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '../../classify';
+
+import Shimmer from '../Shimmer';
+import defaultClasses from './filterSidebar.module.css';
+
+const FilterSidebar = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <aside className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
+        </aside>
+    );
+};
+
+FilterSidebar.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default FilterSidebar;

package/lib/components/FilterSidebar/index.js

@@ -1 +1,2 @@
 export { default } from './filterSidebar';
+export { default as FilterSidebarShimmer } from './filterSidebar.shimmer';

package/lib/components/Footer/__tests__/__snapshots__/footer.spec.js.snap

@@ -74,14 +74,14 @@ exports[`footer renders copyright 1`] = `
     <div
       className="callout"
     >
-      <h3
+      <span
         className="calloutHeading"
       >
         <mock-FormattedMessage
           defaultMessage="Follow Us!"
           id="footer.followText"
         />
-      </h3>
+      </span>
       <p
         className="calloutBody"
       >
@@ -118,7 +118,7 @@ exports[`footer renders copyright 1`] = `
             />
             <line
               x1="17.5"
-              x2="17.5"
+              x2="17.51"
               y1="6.5"
               y2="6.5"
             />

package/lib/components/Footer/footer.js

@@ -7,7 +7,7 @@ import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';
 
 import Logo from '@magento/venia-ui/lib/components/Logo';
 import { useStyle } from '../../classify';
-import defaultClasses from './footer.css';
+import defaultClasses from './footer.module.css';
 import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
 
 const Footer = props => {
@@ -49,12 +49,12 @@ const Footer = props => {
             <div className={classes.links}>
                 {linkGroups}
                 <div className={classes.callout}>
-                    <h3 className={classes.calloutHeading}>
+                    <span className={classes.calloutHeading}>
                         <FormattedMessage
                             id={'footer.followText'}
                             defaultMessage={'Follow Us!'}
                         />
-                    </h3>
+                    </span>
                     <p className={classes.calloutBody}>
                         <FormattedMessage
                             id={'footer.calloutText'}