@magento/venia-ui 9.3.0-beta.1 → 9.4.0-beta.1

package/lib/components/FilterModal/FilterList/__tests__/filterItemRadio.spec.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { mockRadio } from '../../../RadioGroup/radio';
+import FilterItemRadio from '../filterItemRadio';
+
+const mockOnApply = jest.fn();
+
+jest.mock('../../../RadioGroup/radio', () => {
+    const mockedRadio = jest.fn(({ onChange }) => {
+        onChange({
+            target: {
+                value: 'foo'
+            }
+        });
+        return null;
+    });
+
+    return {
+        __esModule: true,
+        default: mockedRadio,
+        mockRadio: mockedRadio
+    };
+});
+
+let inputProps = {};
+
+const Component = () => {
+    return <FilterItemRadio {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        filterApi: {
+            toggleItem: jest.fn(),
+            removeGroup: jest.fn()
+        },
+        labels: new WeakMap(),
+        group: 'Foo',
+        item: {
+            title: 'Bar',
+            value: 'bar',
+            label: 'Bar: bar'
+        },
+        onApply: null
+    };
+};
+
+const givenOnApply = () => {
+    inputProps = {
+        filterApi: {
+            toggleItem: jest.fn(),
+            removeGroup: jest.fn()
+        },
+        labels: new WeakMap(),
+        group: 'Foo',
+        item: {
+            title: 'Bar',
+            value: 'bar',
+            label: 'Bar: bar'
+        },
+        onApply: mockOnApply
+    };
+};
+
+const givenSelectedItem = () => {
+    const item = {
+        title: 'Foo',
+        value: 'foo',
+        label: 'Foo: foo'
+    };
+
+    inputProps = {
+        filterApi: {
+            toggleItem: jest.fn(),
+            removeGroup: jest.fn()
+        },
+        labels: new WeakMap(),
+        group: 'Foo',
+        item: item,
+        onApply: mockOnApply
+    };
+};
+
+describe('#FilterItemRadio', () => {
+    beforeEach(() => {
+        mockRadio.mockClear();
+        mockOnApply.mockClear();
+
+        givenDefaultValues();
+    });
+
+    it('passes props to Radio', () => {
+        createTestInstance(<Component />);
+
+        expect(mockRadio).toHaveBeenCalledWith(
+            expect.objectContaining({
+                onChange: expect.any(Function)
+            }),
+            {}
+        );
+    });
+
+    it('handles no onApply function being passed', () => {
+        createTestInstance(<Component />);
+
+        expect(inputProps.filterApi.removeGroup).toHaveBeenCalledWith({
+            group: inputProps.group
+        });
+    });
+
+    it('calls onApply when passed', () => {
+        givenOnApply();
+        createTestInstance(<Component />);
+
+        expect(inputProps.filterApi.removeGroup).toHaveBeenCalledWith({
+            group: inputProps.group
+        });
+        expect(mockOnApply).toHaveBeenCalled();
+    });
+
+    it('determines the item is selected', () => {
+        givenSelectedItem();
+        createTestInstance(<Component />);
+
+        expect(inputProps.filterApi.removeGroup).toHaveBeenCalledWith({
+            group: inputProps.group
+        });
+        expect(inputProps.filterApi.toggleItem).toHaveBeenCalledWith({
+            group: inputProps.group,
+            item: inputProps.item
+        });
+        expect(mockOnApply).toHaveBeenCalled();
+    });
+});

package/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -0,0 +1,76 @@
+import React, { useCallback } from 'react';
+import { func, number, oneOfType, shape, string, instanceOf } from 'prop-types';
+import Radio from '../../RadioGroup/radio';
+import defaultClasses from './filterItemRadio.module.css';
+import { useStyle } from '../../../classify';
+import { useIntl } from 'react-intl';
+
+const FilterItemRadio = props => {
+    const { filterApi, group, item, onApply, labels } = props;
+    const { removeGroup, toggleItem } = filterApi;
+    const { title, value } = item;
+    const classes = useStyle(defaultClasses);
+    const { formatMessage } = useIntl();
+
+    const label = item.label ? item.label : item.title;
+
+    const ariaLabel = formatMessage(
+        {
+            id: 'filterModal.item.applyFilter',
+            defaultMessage: 'Apply filter "{optionName}".'
+        },
+        {
+            optionName: label
+        }
+    );
+
+    const handleOnchange = useCallback(
+        e => {
+            removeGroup({ group });
+            if (e.target.value === item.value) {
+                toggleItem({ group, item });
+            }
+            if (typeof onApply === 'function') {
+                onApply(group, item);
+            }
+        },
+        [group, item, onApply, removeGroup, toggleItem]
+    );
+
+    const element = (
+        <Radio
+            classes={classes}
+            id={`item-${group}-${value}`}
+            label={title}
+            value={value}
+            onChange={handleOnchange}
+            data-cy="FilterDefault-radio"
+            ariaLabel={ariaLabel}
+        />
+    );
+
+    labels.set(element, label);
+
+    return element;
+};
+
+FilterItemRadio.defaultProps = {
+    onApply: null
+};
+
+FilterItemRadio.propTypes = {
+    filterApi: shape({
+        toggleItem: func.isRequired,
+        removeGroup: func.isRequired
+    }).isRequired,
+    group: string.isRequired,
+    item: shape({
+        title: string.isRequired,
+        value: oneOfType([number, string]).isRequired,
+        label: string
+    }).isRequired,
+    onApply: func,
+    labels: instanceOf(Map).isRequired
+};
+
+export default FilterItemRadio;

package/lib/components/FilterModal/FilterList/filterItemRadioGroup.js

@@ -0,0 +1,86 @@
+import React, { useMemo, useEffect } from 'react';
+import {
+    arrayOf,
+    func,
+    number,
+    oneOfType,
+    shape,
+    string,
+    instanceOf
+} from 'prop-types';
+import setValidator from '@magento/peregrine/lib/validators/set';
+import RadioGroup from '../../RadioGroup';
+import FilterItemRadio from './filterItemRadio';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+
+const FilterItemRadioGroup = props => {
+    const { filterApi, filterState, group, items, onApply, labels } = props;
+
+    const radioItems = useMemo(() => {
+        return items.map(item => {
+            const code = `item-${group}-${item.value}`;
+            return (
+                <FilterItemRadio
+                    key={code}
+                    filterApi={filterApi}
+                    filterState={filterState}
+                    group={group}
+                    item={item}
+                    onApply={onApply}
+                    labels={labels}
+                />
+            );
+        });
+    }, [filterApi, filterState, group, items, labels, onApply]);
+
+    const fieldValue = useMemo(() => {
+        if (filterState) {
+            for (const item of items) {
+                if (filterState.has(item)) {
+                    return item.value;
+                }
+            }
+        }
+
+        return null;
+    }, [filterState, items]);
+    const field = `item-${group}`;
+    const fieldApi = useFieldApi(field);
+    const fieldState = useFieldState(field);
+    useEffect(() => {
+        if (field && fieldValue === null) {
+            fieldApi.reset();
+        } else if (field && fieldValue !== fieldState.value) {
+            fieldApi.setValue(fieldValue);
+        }
+    }, [field, fieldApi, fieldState.value, fieldValue]);
+
+    return (
+        <RadioGroup field={field} data-cy="FilterDefault-radioGroup">
+            {radioItems}
+        </RadioGroup>
+    );
+};
+
+FilterItemRadioGroup.defaultProps = {
+    onApply: null
+};
+
+FilterItemRadioGroup.propTypes = {
+    filterApi: shape({
+        toggleItem: func.isRequired
+    }).isRequired,
+    filterState: setValidator,
+    group: string.isRequired,
+    items: arrayOf(
+        shape({
+            title: string.isRequired,
+            value: oneOfType([number, string]).isRequired
+        })
+    ).isRequired,
+    onApply: func,
+    labels: instanceOf(Map).isRequired
+};
+
+export default FilterItemRadioGroup;

package/lib/components/FilterModal/FilterList/filterList.js

@@ -1,5 +1,5 @@
 import React, { Fragment, useMemo } from 'react';
-import { array, shape, string, func, number } from 'prop-types';
+import { array, func, number, shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 import setValidator from '@magento/peregrine/lib/validators/set';
 import { useFilterList } from '@magento/peregrine/lib/talons/FilterModal';
@@ -7,6 +7,7 @@ import { useFilterList } from '@magento/peregrine/lib/talons/FilterModal';
 import { useStyle } from '../../../classify';
 import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
+import FilterItemRadioGroup from './filterItemRadioGroup';
 
 const labels = new WeakMap();
 
@@ -14,6 +15,8 @@ const FilterList = props => {
     const {
         filterApi,
         filterState,
+        filterFrontendInput,
+        name,
         group,
         itemCountToShow,
         items,
@@ -26,50 +29,70 @@ const FilterList = props => {
 
     // memoize item creation
     // search value is not referenced, so this array is stable
-    const itemElements = useMemo(
-        () =>
-            items.map((item, index) => {
-                const { title, value } = item;
-                const key = `item-${group}-${value}`;
+    const itemElements = useMemo(() => {
+        if (filterFrontendInput === 'boolean') {
+            const key = `item-${group}`;
+            return (
+                <li
+                    key={key}
+                    className={classes.item}
+                    data-cy="FilterList-item"
+                >
+                    <FilterItemRadioGroup
+                        filterApi={filterApi}
+                        filterState={filterState}
+                        group={group}
+                        name={name}
+                        items={items}
+                        onApply={onApply}
+                        labels={labels}
+                    />
+                </li>
+            );
+        }
 
-                if (!isListExpanded && index >= itemCountToShow) {
-                    return null;
-                }
+        return items.map((item, index) => {
+            const { title, value } = item;
+            const key = `item-${group}-${value}`;
 
-                // create an element for each item
-                const element = (
-                    <li
-                        key={key}
-                        className={classes.item}
-                        data-cy="FilterList-item"
-                    >
-                        <FilterItem
-                            filterApi={filterApi}
-                            filterState={filterState}
-                            group={group}
-                            item={item}
-                            onApply={onApply}
-                        />
-                    </li>
-                );
+            if (!isListExpanded && index >= itemCountToShow) {
+                return null;
+            }
 
-                // associate each element with its normalized title
-                // titles are not unique, so use the element as the key
-                labels.set(element, title.toUpperCase());
+            // create an element for each item
+            const element = (
+                <li
+                    key={key}
+                    className={classes.item}
+                    data-cy="FilterList-item"
+                >
+                    <FilterItem
+                        filterApi={filterApi}
+                        filterState={filterState}
+                        group={group}
+                        item={item}
+                        onApply={onApply}
+                    />
+                </li>
+            );
 
-                return element;
-            }),
-        [
-            classes,
-            filterApi,
-            filterState,
-            group,
-            items,
-            isListExpanded,
-            itemCountToShow,
-            onApply
-        ]
-    );
+            // associate each element with its normalized title
+            // titles are not unique, so use the element as the key
+            labels.set(element, title.toUpperCase());
+            return element;
+        });
+    }, [
+        classes,
+        filterApi,
+        filterState,
+        filterFrontendInput,
+        name,
+        group,
+        items,
+        isListExpanded,
+        itemCountToShow,
+        onApply
+    ]);
 
     const showMoreLessItem = useMemo(() => {
         if (items.length <= itemCountToShow) {
@@ -128,6 +151,7 @@ FilterList.propTypes = {
     }),
     filterApi: shape({}),
     filterState: setValidator,
+    name: string,
     group: string,
     items: array,
     onApply: func,

package/lib/components/FilterModal/FilterList/filterList.module.css

@@ -1,20 +1,18 @@
 .items {
-    display: grid;
-    gap: 0.75rem;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: -ml-1.5 from global;
+    composes: pb-md from global;
     grid-template-columns: 100%;
-    margin-left: -0.375rem;
-    padding-bottom: 2rem;
 }
 
 .showMoreLessItem {
-    padding-left: 3px;
+    composes: pl-1 from global;
 }
 
 .showMoreLessButton {
-    font-size: 14px;
-    text-decoration: underline;
-}
+    composes: text-sm from global;
+    composes: underline from global;
 
-.showMoreLessButton:hover {
-    text-decoration: none;
+    composes: hover_no-underline from global;
 }

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

@@ -41,6 +41,22 @@ const mockFilters = [
                 value: 1
             }
         ]
+    },
+    {
+        attribute_code: 'boolean_filter',
+        label: 'Boolean Filter',
+        options: [
+            {
+                __typename: 'AggregationOption',
+                label: '0',
+                value: '0'
+            },
+            {
+                __typename: 'AggregationOption',
+                label: '1',
+                value: '1'
+            }
+        ]
     }
 ];
 
@@ -62,9 +78,30 @@ jest.mock('react-aria', () => ({
     })
 }));
 
+// TODO: Get all frontend input type from gql if other filter input types are needed
+// See: https://github.com/magento-commerce/magento2-pwa/pull/26
+const isBooleanFilter = options => {
+    return (
+        options.length === 2 &&
+        JSON.stringify(options[0]) ===
+            JSON.stringify({
+                __typename: 'AggregationOption',
+                label: '0',
+                value: '0'
+            }) &&
+        JSON.stringify(options[1]) ===
+            JSON.stringify({
+                __typename: 'AggregationOption',
+                label: '1',
+                value: '1'
+            })
+    );
+};
+
 jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
     useFilterModal: jest.fn(({ filters }) => {
         const names = new Map();
+        const filterFrontendInput = new Map();
         const itemsByGroup = new Map();
 
         for (const filter of filters) {
@@ -73,9 +110,26 @@ jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
             // add filter name
             names.set(group, name);
 
-            // add items
-            for (const { label, value } of options) {
-                items.push({ title: label, value });
+            if (isBooleanFilter(options)) {
+                filterFrontendInput.set(group, 'boolean');
+                // add items
+                items.push({
+                    title: 'No',
+                    value: '0',
+                    label: name + ': ' + 'No'
+                });
+                items.push({
+                    title: 'Yes',
+                    value: '1',
+                    label: name + ': ' + 'Yes'
+                });
+            } else {
+                filterFrontendInput.set(group, null);
+
+                // add items
+                for (const { label, value } of options) {
+                    items.push({ title: label, value });
+                }
             }
             itemsByGroup.set(group, items);
         }
@@ -84,6 +138,7 @@ jest.mock('@magento/peregrine/lib/talons/FilterModal', () => ({
             filterApi: null,
             filterItems: itemsByGroup,
             filterNames: names,
+            filterFrontendInput,
             filterState: mockFilterState,
             handleApply: jest.fn(),
             handleClose: jest.fn(),

package/lib/components/FilterModal/filterBlock.js

@@ -16,6 +16,7 @@ const FilterBlock = props => {
     const {
         filterApi,
         filterState,
+        filterFrontendInput,
         group,
         items,
         name,
@@ -68,6 +69,8 @@ const FilterBlock = props => {
             <FilterList
                 filterApi={filterApi}
                 filterState={filterState}
+                name={name}
+                filterFrontendInput={filterFrontendInput}
                 group={group}
                 items={items}
                 onApply={onApply}
@@ -112,6 +115,7 @@ FilterBlock.propTypes = {
         root: string,
         trigger: string
     }),
+    filterFrontendInput: string,
     filterApi: shape({}).isRequired,
     filterState: setValidator,
     group: string.isRequired,

package/lib/components/FilterModal/filterBlock.module.css

@@ -1,27 +1,30 @@
 .root {
-    border-color: rgb(var(--venia-global-color-border));
-    border-style: solid;
-    border-width: 2px 0 0;
-    display: grid;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: border-t-2 from global;
+    composes: border-r-0 from global;
+    composes: border-b-0 from global;
+    composes: border-l-0 from global;
+    composes: grid from global;
 }
 
 .header {
-    align-items: center;
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr auto;
-    min-height: 3.125rem;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: min-h-[3.125rem] from global;
 }
 
 .name {
-    height: 1.5rem;
-    line-height: 1.5rem;
-    text-align: left;
+    composes: leading-normal from global;
+    composes: text-left from global;
 }
 
 .list {
 }
 
+/* TODO @TW: cannot compose */
 .list:empty {
     display: none;
 }

package/lib/components/FilterModal/filterFooter.module.css

@@ -1,10 +1,10 @@
 .root {
-    align-items: center;
-    background-color: white;
-    display: grid;
-    height: 7rem;
-    row-gap: 0.25rem;
-    justify-items: center;
-    align-content: center;
-    position: relative;
+    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/lib/components/FilterModal/filterModal.js

@@ -27,6 +27,7 @@ const FilterModal = props => {
         filterApi,
         filterItems,
         filterNames,
+        filterFrontendInput,
         filterState,
         handleApply,
         handleClose,
@@ -43,19 +44,20 @@ const FilterModal = props => {
             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]
+        [filterApi, filterItems, filterNames, filterState, filterFrontendInput]
     );
 
     const filtersAriaLabel = formatMessage({