@magento/venia-ui 11.5.0 → 11.6.0-alpha.13

package/lib/components/CheckoutPage/checkoutPage.js

@@ -2,14 +2,13 @@ import React, { Fragment, useEffect } from 'react';
 import { shape, string } from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { AlertCircle as AlertCircleIcon } from 'react-feather';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
 import { useWindowSize, useToasts } from '@magento/peregrine';
 import {
     CHECKOUT_STEP,
     useCheckoutPage
 } from '@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage';
-
 import { useStyle } from '../../classify';
 import Button from '../Button';
 import { StoreTitle } from '../Head';
@@ -25,8 +24,8 @@ import payments from './PaymentInformation/paymentMethodCollection';
 import PriceAdjustments from './PriceAdjustments';
 import ShippingMethod from './ShippingMethod';
 import ShippingInformation from './ShippingInformation';
-import OrderConfirmationPage from './OrderConfirmationPage';
 import ItemsReview from './ItemsReview';
+import OrderConfirmationPage from './OrderConfirmationPage';
 import GoogleReCaptcha from '../GoogleReCaptcha';
 
 import defaultClasses from './checkoutPage.module.css';
@@ -35,6 +34,7 @@ import ScrollAnchor from '../ScrollAnchor/scrollAnchor';
 const errorIcon = <Icon src={AlertCircleIcon} size={20} />;
 
 const CheckoutPage = props => {
+    const history = useHistory();
     const { classes: propClasses } = props;
     const { formatMessage } = useIntl();
     const talonProps = useCheckoutPage();
@@ -58,8 +58,8 @@ const CheckoutPage = props => {
         isGuestCheckout,
         isLoading,
         isUpdating,
-        orderDetailsData,
         orderDetailsLoading,
+        orderDetailsData,
         orderNumber,
         placeOrderLoading,
         placeOrderButtonClicked,
@@ -83,7 +83,15 @@ const CheckoutPage = props => {
     } = talonProps;
 
     const [, { addToast }] = useToasts();
-
+    const orderCount = localStorage.getItem('orderCount');
+    useEffect(() => {
+        if (isGuestCheckout && !orderDetailsData) {
+            if (orderCount === '1') {
+                history.push('/');
+                localStorage.setItem('orderCount', '0');
+            }
+        }
+    }, [isGuestCheckout, history, orderDetailsData, orderCount]);
     useEffect(() => {
         if (hasError) {
             const message =
@@ -125,7 +133,7 @@ const CheckoutPage = props => {
               defaultMessage: 'Checkout'
           });
 
-    if (orderNumber && orderDetailsData) {
+    if (isGuestCheckout && orderDetailsData && orderNumber) {
         return (
             <OrderConfirmationPage
                 data={orderDetailsData}
@@ -245,6 +253,7 @@ const CheckoutPage = props => {
             checkoutStep === CHECKOUT_STEP.PAYMENT ? (
                 <Button
                     onClick={handleReviewOrder}
+                    onTouchStart={handleReviewOrder}
                     onKeyDown={handleReviewOrderEnterKeyPress}
                     priority="high"
                     className={classes.review_order_button}
@@ -265,7 +274,7 @@ const CheckoutPage = props => {
         const itemsReview =
             checkoutStep === CHECKOUT_STEP.REVIEW ? (
                 <div className={classes.items_review_container}>
-                    <ItemsReview />
+                    <ItemsReview items={cartItems} />
                 </div>
             ) : null;
 

package/lib/components/CreateAccount/__tests__/createAccount.spec.js

@@ -4,6 +4,8 @@ import { createTestInstance } from '@magento/peregrine';
 
 import CreateAccount from '../createAccount';
 
+import { useHistory, useLocation } from 'react-router-dom';
+
 jest.mock('@apollo/client', () => ({
     gql: jest.fn(),
     useApolloClient: jest.fn().mockImplementation(() => {}),
@@ -24,6 +26,16 @@ jest.mock('@apollo/client', () => ({
     }))
 }));
 
+// Mocking the react-router hooks
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+
+    useHistory: jest.fn(),
+
+    useLocation: jest.fn()
+}));
+
 jest.mock('../../../util/formValidators');
 jest.mock('@magento/peregrine/lib/context/user', () => {
     const userState = {
@@ -58,6 +70,24 @@ jest.mock('@magento/peregrine/lib/hooks/useAwaitQuery', () => {
     return { useAwaitQuery };
 });
 
+// Mocking useLocation and useHistory for the tests
+
+beforeEach(() => {
+    useHistory.mockReturnValue({
+        push: jest.fn() // mock any methods you need from useHistory
+    });
+
+    useLocation.mockReturnValue({
+        pathname: '/mock-path', // mock the location properties
+
+        search: '',
+
+        hash: '',
+
+        state: null
+    });
+});
+
 jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
 }));

package/lib/components/CreateAccount/createAccount.js

@@ -46,7 +46,7 @@ const CreateAccount = props => {
         <Button
             data-cy="CreateAccount-cancelButton"
             className={classes.cancelButton}
-            disabled={isDisabled}
+            disabled={Boolean(isDisabled)}
             type="button"
             priority="low"
             onClick={handleCancel}
@@ -62,7 +62,7 @@ const CreateAccount = props => {
     const submitButton = (
         <Button
             className={classes.submitButton}
-            disabled={isDisabled}
+            disabled={Boolean(isDisabled)}
             type="submit"
             priority="high"
             onKeyDown={handleEnterKeyPress}

package/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -19,7 +20,11 @@ jest.mock('../../../Trigger', () => props => <mock-Trigger {...props} />);
 let inputProps = {};
 
 const Component = () => {
-    return <CurrentFilter {...inputProps} />;
+    return (
+        <MemoryRouter>
+            <CurrentFilter {...inputProps} />
+        </MemoryRouter>
+    );
 };
 
 const givenDefaultValues = () => {

package/lib/components/FilterModal/CurrentFilters/currentFilter.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { shape, string, func } from 'prop-types';
 import { X as Remove } from 'react-feather';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
@@ -12,13 +13,22 @@ const CurrentFilter = props => {
     const { group, item, removeItem, onRemove } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
+    const location = useLocation();
+    const history = useHistory();
 
     const handleClick = useCallback(() => {
         removeItem({ group, item });
         if (typeof onRemove === 'function') {
             onRemove(group, item);
         }
-    }, [group, item, removeItem, onRemove]);
+
+        if (group == 'price') {
+            // preserve all existing params
+            const params = new URLSearchParams(location.search);
+            params.delete('price[filter]');
+            history.replace({ search: params.toString() });
+        }
+    }, [group, item, removeItem, onRemove, history, location.search]);
 
     const ariaLabel = formatMessage(
         {
@@ -34,7 +44,7 @@ const CurrentFilter = props => {
         <span className={classes.root} data-cy="CurrentFilter-root">
             <Trigger
                 action={handleClick}
-                ariaLabel={ariaLabel}
+                aria-label={ariaLabel}
                 data-cy="CurrentFilter-trigger"
             >
                 <Icon size={20} src={Remove} />

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -67,7 +68,11 @@ describe('#FilterList', () => {
     });
 
     it('renders without show more button', () => {
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(root.findAllByType(FilterItem)).toHaveLength(2);
         expect(() => root.findByType('button')).toThrow();
@@ -76,7 +81,11 @@ describe('#FilterList', () => {
     it('renders with show more button', () => {
         givenShowMore();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType('button')).not.toThrow();
         expect(root.findByType('button').children[0]).toBe(mockShowMore);
@@ -86,7 +95,11 @@ describe('#FilterList', () => {
         givenShowMore();
         givenExpanded();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType('button')).not.toThrow();
         expect(root.findByType('button').children[0]).toBe(mockShowLess);

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { Fragment, useMemo, useCallback } from 'react';
 import { array, func, number, shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 import setValidator from '@magento/peregrine/lib/validators/set';
@@ -8,6 +8,8 @@ import { useStyle } from '../../../classify';
 import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
 import FilterItemRadioGroup from './filterItemRadioGroup';
+import RangeSlider from '../../RangeSlider/rangeSlider';
+import { useHistory, useLocation } from 'react-router-dom';
 
 const labels = new WeakMap();
 
@@ -22,13 +24,46 @@ const FilterList = props => {
         items,
         onApply
     } = props;
+    const { pathname, search } = useLocation();
+    const history = useHistory();
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useFilterList({ filterState, items, itemCountToShow });
     const { isListExpanded, handleListToggle } = talonProps;
     const { formatMessage } = useIntl();
 
-    // memoize item creation
-    // search value is not referenced, so this array is stable
+    if (name === 'Price') {
+        var minRange = Number(items[0].value.split('_')[0]);
+        var maxRange = Number(items[items.length - 1].value.split('_')[1]);
+        if (filterState !== undefined) {
+            const filterArray = [...filterState];
+            var currentMinVal = Number(filterArray[0].value.split('_')[0]);
+            var currentMaxVal = Number(filterArray[0].value.split('_')[1]);
+        }
+    }
+
+    const handleChange = useCallback(
+        newValue => {
+            const test = String(search).split('&');
+            const filters = test.filter(element => {
+                return !element.includes('price');
+            });
+            const newSearch = filters.join('&');
+            const nextParams = new URLSearchParams(newSearch);
+
+            const DELIMITER = ',';
+            const title = String(newValue.min) + '-' + String(newValue.max);
+            const value = String(newValue.min) + '_' + String(newValue.max);
+            nextParams.append(
+                `${group}[filter]`,
+                `${title}${DELIMITER}${value}`
+            );
+
+            history.push({ pathname, search: String(nextParams) });
+        },
+        [group, history, pathname, search]
+    );
+
+    // Memoize item creation
     const itemElements = useMemo(() => {
         if (filterFrontendInput === 'boolean') {
             const key = `item-${group}`;
@@ -51,36 +86,46 @@ const FilterList = props => {
             );
         }
 
-        return items.map((item, index) => {
-            const { title, value } = item;
-            const key = `item-${group}-${value}`;
-
-            if (!isListExpanded && index >= itemCountToShow) {
-                return null;
-            }
-
-            // 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}
+        if (name === 'Price') {
+            return (
+                <div className={classes.root}>
+                    <RangeSlider
+                        min={minRange}
+                        max={maxRange}
+                        initialMin={currentMinVal}
+                        initialMax={currentMaxVal}
+                        onChange={handleChange}
                     />
-                </li>
+                </div>
             );
+        } else {
+            return items.map((item, index) => {
+                const { title, value } = item;
+                const key = `item-${group}-${value}`;
+
+                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());
-            return element;
-        });
+                const element = (
+                    <li
+                        key={key}
+                        className={classes.item}
+                        data-cy="FilterList-item"
+                    >
+                        <FilterItem
+                            filterApi={filterApi}
+                            filterState={filterState}
+                            group={group}
+                            item={item}
+                            onApply={onApply}
+                        />
+                    </li>
+                );
+                labels.set(element, title.toUpperCase());
+                return element;
+            });
+        }
     }, [
         classes,
         filterApi,
@@ -91,7 +136,12 @@ const FilterList = props => {
         items,
         isListExpanded,
         itemCountToShow,
-        onApply
+        onApply,
+        minRange,
+        maxRange,
+        currentMinVal,
+        currentMaxVal,
+        handleChange
     ]);
 
     const showMoreLessItem = useMemo(() => {

package/lib/components/FilterModal/filterBlock.js

@@ -28,7 +28,8 @@ const FilterBlock = props => {
     const talonProps = useFilterBlock({
         filterState,
         items,
-        initialOpen
+        initialOpen,
+        group
     });
     const { handleClick, isExpanded } = talonProps;
     const iconSrc = isExpanded ? ArrowUp : ArrowDown;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -51,6 +52,8 @@ const mockHandleApply = jest.fn();
 
 const mockScrollTo = jest.fn();
 
+const mockFilterOptions = jest.fn();
+
 const mockGetBoundingClientRect = jest.fn();
 
 let mockFilterState;
@@ -125,7 +128,8 @@ const Component = () => {
 
 const givenDefaultValues = () => {
     inputProps = {
-        filters: []
+        filters: [],
+        setFilterOptions: mockFilterOptions
     };
 
     mockFilterState = new Map();
@@ -133,13 +137,15 @@ const givenDefaultValues = () => {
 
 const givenFilters = () => {
     inputProps = {
-        filters: mockFilters
+        filters: mockFilters,
+        setFilterOptions: mockFilterOptions
     };
 };
 
 const givenSelectedFilters = () => {
     inputProps = {
-        filters: mockFilters
+        filters: mockFilters,
+        setFilterOptions: mockFilterOptions
     };
 
     mockFilterState = new Map([['group', 'item']]);
@@ -148,7 +154,8 @@ const givenSelectedFilters = () => {
 const givenFiltersAndAmountToShow = () => {
     inputProps = {
         filters: mockFilters,
-        filterCountToOpen: mockFiltersOpenCount
+        filterCountToOpen: mockFiltersOpenCount,
+        setFilterOptions: mockFilterOptions
     };
 };
 
@@ -161,7 +168,11 @@ describe('#FilterSidebar', () => {
     });
 
     it('renders without filters', () => {
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(mockFilterBlock).not.toHaveBeenCalled();
         expect(mockCurrentFilters).toHaveBeenCalled();
@@ -170,7 +181,11 @@ describe('#FilterSidebar', () => {
     it('renders with filters and no selected filters', () => {
         givenFilters();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType(LinkButton)).toThrow();
         expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
@@ -179,7 +194,11 @@ describe('#FilterSidebar', () => {
     it('renders with filters and selected filter', () => {
         givenSelectedFilters();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType(LinkButton)).not.toThrow();
         expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
@@ -188,7 +207,11 @@ describe('#FilterSidebar', () => {
     it('handles when a user applies a filter and ref is not provided', () => {
         givenSelectedFilters();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         act(() => {
             root.findAllByType(FilterBlock)[0].props.onApply();
@@ -206,17 +229,22 @@ describe('#FilterSidebar', () => {
             value: mockScrollTo
         });
 
-        const { root } = createTestInstance(<Component />, {
-            createNodeMock: () => {
-                return {
-                    getBoundingClientRect: mockGetBoundingClientRect.mockReturnValue(
-                        {
-                            top: 250
-                        }
-                    )
-                };
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>,
+            {
+                createNodeMock: () => {
+                    return {
+                        getBoundingClientRect: mockGetBoundingClientRect.mockReturnValue(
+                            {
+                                top: 250
+                            }
+                        )
+                    };
+                }
             }
-        });
+        );
 
         act(() => {
             root.findAllByType(FilterBlock)[0].props.onApply();
@@ -229,7 +257,11 @@ describe('#FilterSidebar', () => {
 
     it('accepts configurable amount of open filters', () => {
         givenFiltersAndAmountToShow();
-        createTestInstance(<Component />);
+        createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
 

package/lib/components/FilterSidebar/filterSidebar.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useRef } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
@@ -8,6 +8,7 @@ import LinkButton from '../LinkButton';
 import CurrentFilters from '../FilterModal/CurrentFilters';
 import FilterBlock from '../FilterModal/filterBlock';
 import defaultClasses from './filterSidebar.module.css';
+import { useLocation } from 'react-router-dom';
 
 const SCROLL_OFFSET = 150;
 
@@ -17,7 +18,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen } = props;
+    const { filters, filterCountToOpen, setFilterOptions } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -31,6 +32,32 @@ const FilterSidebar = props => {
 
     const filterRef = useRef();
     const classes = useStyle(defaultClasses, props.classes);
+    const location = useLocation();
+
+    //adding the price filter values to the filterstate
+    const priceFilters = Array.from(filterItems, ([group]) => {
+        if (group == 'price') {
+            // preserve all existing params
+            const params = new URLSearchParams(location.search);
+            const uniqueKeys = new Set(params.keys());
+            // iterate over existing param keys
+            for (const key of uniqueKeys) {
+                // if a key matches a known filter, add its items to the next state
+                if (key == 'price[filter]') {
+                    const value = params.get('price[filter]');
+                    const item = {
+                        title: value.split(',')[0],
+                        value: value.split(',')[1]
+                    };
+                    const filterVar = new Set();
+                    filterVar.add(item);
+
+                    //to display the price filter value after selecting the filter
+                    filterState.set('price', new Set(filterVar));
+                }
+            }
+        }
+    });
 
     const handleApplyFilter = useCallback(
         (...args) => {
@@ -50,6 +77,12 @@ const FilterSidebar = props => {
         [handleApply, filterRef]
     );
 
+    useEffect(() => {
+        if (filterState) {
+            setFilterOptions(filterState);
+        }
+    }, [filterState, setFilterOptions]);
+
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {
@@ -115,6 +148,7 @@ const FilterSidebar = props => {
                         />
                     </h2>
                 </div>
+                {priceFilters}
                 <CurrentFilters
                     filterApi={filterApi}
                     filterNames={filterNames}

package/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

@@ -20,7 +20,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
           className="image placeholder_layoutOnly"
           height={375}
           loading="eager"
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
           style={
             Object {
               "--height": "375px",
@@ -115,7 +115,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
           className="image placeholder_layoutOnly"
           height={375}
           loading="eager"
-          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
           style={
             Object {
               "--height": "375px",