@riosst100/pwa-marketplace 2.0.7 → 2.0.9

package/src/overwrites/venia-ui/lib/components/FilterModal/filterFooter.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import { bool, func, shape, string } from 'prop-types';
-import { useFilterFooter } from '@magento/peregrine/lib/talons/FilterModal';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Button from '@magento/venia-ui/lib/components/Button';
-import defaultClasses from './filterFooter.module.css';
-
-const FilterFooter = props => {
-    const { applyFilters, hasFilters, isOpen } = props;
-    const { formatMessage } = useIntl();
-    const { touched } = useFilterFooter({
-        hasFilters,
-        isOpen
-    });
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const buttonLabel = formatMessage({
-        id: 'filterFooter.results',
-        defaultMessage: 'See Results'
-    });
-
-    return (
-        <div className={classes.root}>
-            <Button
-                disabled={!touched}
-                onClick={applyFilters}
-                data-cy="FilterFooter-button"
-                aria-label={buttonLabel}
-                aria-disabled={!touched}
-                priority="high"
-            >
-                {buttonLabel}
-            </Button>
-        </div>
-    );
-};
-
-FilterFooter.propTypes = {
-    applyFilters: func.isRequired,
-    classes: shape({
-        root: string
-    }),
-    hasFilters: bool,
-    isOpen: bool
-};
-
-export default FilterFooter;

package/src/overwrites/venia-ui/lib/components/FilterModal/filterFooter.module.css

@@ -1,10 +0,0 @@
-.root {
-    composes: bg-white from global;
-    composes: content-center from global;
-    composes: gap-y-1 from global;
-    composes: grid from global;
-    composes: h-[7rem] from global;
-    composes: items-center from global;
-    composes: justify-items-center from global;
-    composes: relative from global;
-}

package/src/overwrites/venia-ui/lib/components/FilterModal/filterModal.js

@@ -1,166 +0,0 @@
-import React, { useMemo } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { FocusScope } from 'react-aria';
-import { array, arrayOf, shape, string } from 'prop-types';
-import { X as CloseIcon } from 'react-feather';
-import { useFilterModal } from '@magento/peregrine/lib/talons/FilterModal';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
-import { Portal } from '@magento/venia-ui/lib/components/Portal';
-import CurrentFilters from './CurrentFilters';
-import FilterBlock from './filterBlock';
-import FilterFooter from './filterFooter';
-import defaultClasses from './filterModal.module.css';
-
-/**
- * A view that displays applicable and applied filters.
- *
- * @param {Object} props.filters - filters to display
- */
-const FilterModal = props => {
-    const { filters } = props;
-    const { formatMessage } = useIntl();
-    const talonProps = useFilterModal({ filters });
-    const {
-        filterApi,
-        filterItems,
-        filterNames,
-        filterFrontendInput,
-        filterState,
-        handleApply,
-        handleClose,
-        handleReset,
-        handleKeyDownActions,
-        isOpen
-    } = talonProps;
-
-    const classes = useStyle(defaultClasses, props.classes);
-    const modalClass = isOpen ? classes.root_open : classes.root;
-
-    const filtersList = useMemo(
-        () =>
-            Array.from(filterItems, ([group, items]) => {
-                const blockState = filterState.get(group);
-                const groupName = filterNames.get(group);
-                const frontendInput = filterFrontendInput.get(group);
-                return (
-                    <FilterBlock
-                        key={group}
-                        filterApi={filterApi}
-                        filterState={blockState}
-                        filterFrontendInput={frontendInput}
-                        group={group}
-                        items={items}
-                        name={groupName}
-                    />
-                );
-            }),
-        [filterApi, filterItems, filterNames, filterState, filterFrontendInput]
-    );
-
-    const filtersAriaLabel = formatMessage({
-        id: 'filterModal.filters.ariaLabel',
-        defaultMessage: 'Filters'
-    });
-
-    const closeAriaLabel = formatMessage({
-        id: 'filterModal.filters.close.ariaLabel',
-        defaultMessage: 'Close filters popup.'
-    });
-
-    const clearAllAriaLabel = formatMessage({
-        id: 'filterModal.action.clearAll.ariaLabel',
-        defaultMessage: 'Clear all applied filters'
-    });
-
-    const clearAll = filterState.size ? (
-        <div className={classes.action}>
-            <LinkButton
-                type="button"
-                onClick={handleReset}
-                ariaLabel={clearAllAriaLabel}
-                data-cy="FilterModal-clearButton"
-            >
-                <FormattedMessage
-                    id={'filterModal.action'}
-                    defaultMessage={'Clear all'}
-                />
-            </LinkButton>
-        </div>
-    ) : null;
-
-    if (!isOpen) {
-        return null;
-    }
-
-    return (
-        <Portal>
-            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
-            <FocusScope contain restoreFocus autoFocus>
-                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-                <aside
-                    className={modalClass}
-                    onKeyDown={handleKeyDownActions}
-                    data-cy="FilterModal-root"
-                >
-                    <div className={classes.body}>
-                        <div className={classes.header}>
-                            <h2 className={classes.headerTitle}>
-                                <FormattedMessage
-                                    id={'filterModal.headerTitle'}
-                                    defaultMessage={'Filters'}
-                                />
-                            </h2>
-                            <button
-                                onClick={handleClose}
-                                aria-disabled={false}
-                                aria-label={closeAriaLabel}
-                            >
-                                <Icon src={CloseIcon} />
-                            </button>
-                        </div>
-                        <CurrentFilters
-                            filterApi={filterApi}
-                            filterNames={filterNames}
-                            filterState={filterState}
-                        />
-                        {clearAll}
-                        <ul
-                            className={classes.blocks}
-                            aria-label={filtersAriaLabel}
-                        >
-                            {filtersList}
-                        </ul>
-                    </div>
-                    <FilterFooter
-                        applyFilters={handleApply}
-                        hasFilters={!!filterState.size}
-                        isOpen={isOpen}
-                    />
-                </aside>
-            </FocusScope>
-        </Portal>
-    );
-};
-
-FilterModal.propTypes = {
-    classes: shape({
-        action: string,
-        blocks: string,
-        body: string,
-        header: string,
-        headerTitle: string,
-        root: string,
-        root_open: string
-    }),
-    filters: arrayOf(
-        shape({
-            attribute_code: string,
-            items: array
-        })
-    )
-};
-
-export default FilterModal;

package/src/overwrites/venia-ui/lib/components/FilterModal/filterModal.module.css

@@ -1,88 +0,0 @@
-.root {
-    composes: bg-white from global;
-    composes: bottom-0 from global;
-    composes: grid from global;
-    composes: h-full from global;
-    composes: left-0 from global;
-    /* composes: max-w-modal from global;
-     */
-    composes: opacity-0 from global;
-    composes: overflow-hidden from global;
-    composes: fixed from global;
-    composes: top-0 from global;
-    composes: w-full from global;
-    composes: z-dialog from global;
-    grid-template-rows: 1fr 7rem;
-    transform: translate3d(-100%, 0, 0);
-    transition-duration: 192ms;
-    transition-timing-function: var(--venia-global-anim-out);
-    transition-property: opacity, transform, visibility;
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
-}
-
-.root_open {
-    composes: root;
-
-    composes: opacity-100 from global;
-    composes: shadow-modal from global;
-    transform: translate3d(0, 0, 0);
-    transition-duration: 224ms;
-    transition-timing-function: var(--venia-global-anim-in);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
-}
-
-.body {
-    composes: border-b from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
-    composes: overflow-auto from global;
-}
-
-.header {
-    composes: flex from global;
-    composes: justify-between from global;
-    composes: pb-0 from global;
-    composes: pt-5 from global;
-    composes: px-5 from global;
-}
-
-.headerTitle {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: leading-none from global;
-    composes: text-xl from global;
-}
-
-.action {
-    composes: pb-0 from global;
-    composes: pt-xs from global;
-    composes: px-xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.action button {
-    /* composes: text-base from global; */
-    font-size: 0.875rem;
-    /* composes: no-underline from global; */
-    text-decoration: none;
-}
-
-.blocks {
-    composes: pb-0 from global;
-    composes: pt-xs from global;
-    composes: px-xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.blocks > li:last-child {
-    /* composes: border-b-2 from global; */
-    /* composes: border-solid from global; */
-    /* composes: border-subtle from global; */
-    border-bottom: 2px solid rgb(var(--venia-global-color-border));
-}

package/src/overwrites/venia-ui/lib/components/FilterModal/filterSearch.module.css

@@ -1,3 +0,0 @@
-.root {
-    composes: pb-xs from global;
-}

package/src/overwrites/venia-ui/lib/components/FilterModal/index.js

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

package/src/overwrites/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js

@@ -1,246 +0,0 @@
-import React from 'react';
-import { act } from 'react-test-renderer';
-
-import { createTestInstance } from '@magento/peregrine';
-
-import FilterBlock, { mockFilterBlock } from '../../FilterModal/filterBlock';
-import { mockCurrentFilters } from '../../FilterModal/CurrentFilters';
-import LinkButton from '../../LinkButton';
-import FilterSidebar from '../filterSidebar';
-
-const mockFilters = [
-    {
-        attribute_code: 'foo',
-        label: 'Foo',
-        options: [
-            {
-                label: 'value 1',
-                value: 1
-            }
-        ]
-    },
-    {
-        attribute_code: 'bar',
-        label: 'Bar',
-        options: [
-            {
-                label: 'value 1',
-                value: 1
-            },
-            {
-                label: 'value 2',
-                value: 2
-            }
-        ]
-    },
-    {
-        attribute_code: 'baz',
-        label: 'Baz',
-        options: [
-            {
-                label: 'value 1',
-                value: 1
-            }
-        ]
-    }
-];
-
-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();
-        const itemsByGroup = new Map();
-        const filterFrontendInput = new Map();
-
-        for (const filter of filters) {
-            const {
-                options,
-                label: name,
-                attribute_code: group,
-                frontend_input
-            } = filter;
-            const items = [];
-            // add filter name
-            names.set(group, name);
-            filterFrontendInput.set(group, frontend_input);
-            // add items
-            for (const { label, value } of options) {
-                items.push({ title: label, value });
-            }
-            itemsByGroup.set(group, items);
-        }
-
-        return {
-            filterApi: null,
-            filterItems: itemsByGroup,
-            filterNames: names,
-            filterFrontendInput,
-            filterState: mockFilterState,
-            handleApply: mockHandleApply,
-            handleReset: jest.fn()
-        };
-    })
-}));
-
-jest.mock('../../FilterModal/filterBlock', () => {
-    const mockedFilterBlock = jest.fn(() => {
-        return null;
-    });
-
-    return {
-        __esModule: true,
-        default: mockedFilterBlock,
-        mockFilterBlock: mockedFilterBlock
-    };
-});
-
-jest.mock('../../FilterModal/CurrentFilters', () => {
-    const mockedCurrentFilters = jest.fn(() => {
-        return null;
-    });
-
-    return {
-        __esModule: true,
-        default: mockedCurrentFilters,
-        mockCurrentFilters: mockedCurrentFilters
-    };
-});
-
-let inputProps = {};
-
-const Component = () => {
-    return <FilterSidebar {...inputProps} />;
-};
-
-const givenDefaultValues = () => {
-    inputProps = {
-        filters: []
-    };
-
-    mockFilterState = new Map();
-};
-
-const givenFilters = () => {
-    inputProps = {
-        filters: mockFilters
-    };
-};
-
-const givenSelectedFilters = () => {
-    inputProps = {
-        filters: mockFilters
-    };
-
-    mockFilterState = new Map([['group', 'item']]);
-};
-
-const givenFiltersAndAmountToShow = () => {
-    inputProps = {
-        filters: mockFilters,
-        filterCountToOpen: mockFiltersOpenCount
-    };
-};
-
-describe('#FilterSidebar', () => {
-    beforeEach(() => {
-        mockFilterBlock.mockClear();
-        mockCurrentFilters.mockClear();
-
-        givenDefaultValues();
-    });
-
-    it('renders without filters', () => {
-        createTestInstance(<Component />);
-
-        expect(mockFilterBlock).not.toHaveBeenCalled();
-        expect(mockCurrentFilters).toHaveBeenCalled();
-    });
-
-    it('renders with filters and no selected filters', () => {
-        givenFilters();
-
-        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 />);
-
-        expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
-
-        for (let i = 1; i <= mockFilters.length; i++) {
-            expect(mockFilterBlock).toHaveBeenNthCalledWith(
-                i,
-                expect.objectContaining({
-                    initialOpen: i <= mockFiltersOpenCount
-                }),
-                expect.any(Object)
-            );
-        }
-    });
-});