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

package/lib/components/Gallery/item.shimmer.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
+import { useStyle } from '../../classify';
+
+import Shimmer from '../Shimmer';
+import Image from '../Image';
+import defaultClasses from './item.module.css';
+
+const GalleryItemShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer key="product-image">
+                <Image
+                    alt="Placeholder for gallery item image"
+                    classes={{
+                        image: classes.image,
+                        root: classes.imageContainer
+                    }}
+                    src={transparentPlaceholder}
+                />
+            </Shimmer>
+            <Shimmer width="100%" key="product-name" />
+            <Shimmer width={3} key="product-price" />
+            <Shimmer type="button" key="add-to-cart" />
+        </div>
+    );
+};
+
+GalleryItemShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default GalleryItemShimmer;

package/lib/components/Header/__stories__/header.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import Header from '../header';
-import defaultClasses from '../header.css';
+import defaultClasses from '../header.module.css';
 
 const stories = storiesOf('Venia/Header', module);
 

package/lib/components/Header/__tests__/__snapshots__/cartTrigger.spec.js.snap

@@ -10,13 +10,13 @@ Array [
       <span>
         <svg
           fill="none"
-          height="24"
+          height={24}
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
           viewBox="0 0 24 24"
-          width="24"
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -45,13 +45,13 @@ Array [
     <span>
       <svg
         fill="none"
-        height="24"
+        height={24}
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
         viewBox="0 0 24 24"
-        width="24"
+        width={24}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
@@ -89,13 +89,13 @@ Array [
       <span>
         <svg
           fill="none"
-          height="24"
+          height={24}
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
           viewBox="0 0 24 24"
-          width="24"
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -124,13 +124,13 @@ Array [
     <span>
       <svg
         fill="none"
-        height="24"
+        height={24}
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
         viewBox="0 0 24 24"
-        width="24"
+        width={24}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
@@ -170,13 +170,13 @@ Array [
       <span>
         <svg
           fill="none"
-          height="24"
+          height={24}
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
           viewBox="0 0 24 24"
-          width="24"
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -202,13 +202,13 @@ Array [
     <span>
       <svg
         fill="none"
-        height="24"
+        height={24}
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
         viewBox="0 0 24 24"
-        width="24"
+        width={24}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path

package/lib/components/Header/__tests__/__snapshots__/header.spec.js.snap

@@ -27,31 +27,7 @@ Array [
         hasBeenOffline={false}
         isOnline={true}
       />
-      <nav
-        className="megaMenu"
-        role="navigation"
-      >
-        <div
-          className="megaMenuItem"
-        >
-          <div
-            className="submenu"
-          >
-            <div
-              className="submenuItems"
-              style={
-                Object {
-                  "minWidth": 20,
-                }
-              }
-            >
-              <div
-                className="submenuColumn"
-              />
-            </div>
-          </div>
-        </div>
-      </nav>
+      <MegaMenu />
       <div
         className="secondaryActions"
       >
@@ -62,6 +38,9 @@ Array [
         <CartTrigger />
       </div>
     </div>
+    <div
+      id="pageLoadingIndicator"
+    />
   </header>,
 ]
 `;

package/lib/components/Header/__tests__/cartTrigger.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useQuery } from '@apollo/client';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { createTestInstance } from '@magento/peregrine';
 
 import CartTrigger from '../cartTrigger';
@@ -21,9 +21,10 @@ jest.mock('@apollo/client', () => ({
 jest.mock('react-router-dom', () => {
     return {
         useHistory: jest.fn().mockReturnValue({
-            location: {
-                pathname: '/'
-            }
+            push: jest.fn()
+        }),
+        useLocation: jest.fn().mockReturnValue({
+            pathname: '/'
         })
     };
 });
@@ -94,10 +95,8 @@ test('Cart counter displays 99+ when items quantity is more than 99', () => {
 });
 
 test('Cart trigger should not be rendered on the checkout page', () => {
-    useHistory.mockReturnValueOnce({
-        location: {
-            pathname: '/checkout'
-        }
+    useLocation.mockReturnValueOnce({
+        pathname: '/checkout'
     });
 
     const component = createTestInstance(

package/lib/components/Header/__tests__/currencySwitcher.spec.js

@@ -11,7 +11,6 @@ jest.mock('@magento/venia-ui/lib/components/CurrencySymbol', () => {
     return jest.fn(props => <i {...props} />);
 });
 
-jest.mock('@magento/peregrine/lib/talons/Header/useCurrencySwitcher', () => {});
 jest.mock('@magento/venia-ui/lib/classify');
 
 const talonProps = {

package/lib/components/Header/__tests__/header.spec.js

@@ -13,6 +13,7 @@ jest.mock('../searchTrigger', () => 'SearchTrigger');
 jest.mock('../onlineIndicator', () => 'OnlineIndicator');
 jest.mock('../storeSwitcher', () => 'StoreSwitcher');
 jest.mock('../currencySwitcher', () => 'CurrencySwitcher');
+jest.mock('../../MegaMenu', () => 'MegaMenu');
 jest.mock('../../PageLoadingIndicator', () => () => (
     <div id={'pageLoadingIndicator'} />
 ));
@@ -54,7 +55,6 @@ beforeAll(() => {
                             name: 'Accessories',
                             position: 4,
                             url_path: 'venia-accessories',
-                            url_suffix: '.html',
                             children: [
                                 {
                                     id: 4,
@@ -62,7 +62,6 @@ beforeAll(() => {
                                     name: 'Belts',
                                     position: 10,
                                     url_path: 'venia-accessories/venia-belts',
-                                    url_suffix: '.html',
                                     children: []
                                 }
                             ]
@@ -73,12 +72,15 @@ beforeAll(() => {
                             name: 'Dresses',
                             position: 3,
                             url_path: 'venia-dresses',
-                            url_suffix: '.html',
                             children: []
                         }
                     ]
                 }
-            ]
+            ],
+            storeConfig: {
+                id: 1,
+                category_url_suffix: '.html'
+            }
         }
     });
 });

package/lib/components/Header/__tests__/storeSwitcher.spec.js

@@ -7,7 +7,6 @@ jest.mock('@magento/peregrine/lib/talons/Header/useStoreSwitcher', () => ({
     useStoreSwitcher: jest.fn()
 }));
 
-jest.mock('@magento/peregrine/lib/talons/Header/useStoreSwitcher', () => {});
 jest.mock('@magento/venia-ui/lib/classify');
 
 const talonProps = {

package/lib/components/Header/accountTrigger.js

@@ -7,7 +7,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 
 import AccountChip from '../AccountChip';
 
-import defaultClasses from './accountTrigger.css';
+import defaultClasses from './accountTrigger.module.css';
 
 const AccountMenu = React.lazy(() => import('../AccountMenu'));
 

package/lib/components/Header/{accountTrigger.css → accountTrigger.module.css}

@@ -12,7 +12,7 @@
 }
 
 .trigger {
-    composes: root from '../clickable.css';
+    composes: root from '../clickable.module.css';
 
     height: 3rem;
     min-width: 6rem;

package/lib/components/Header/cartTrigger.js

@@ -7,7 +7,7 @@ import { useCartTrigger } from '@magento/peregrine/lib/talons/Header/useCartTrig
 
 import { useStyle } from '../../classify';
 import Icon from '../Icon';
-import defaultClasses from './cartTrigger.css';
+import defaultClasses from './cartTrigger.module.css';
 import { GET_ITEM_COUNT_QUERY } from './cartTrigger.gql';
 
 const MiniCart = React.lazy(() => import('../MiniCart'));

package/lib/components/Header/{cartTrigger.css → cartTrigger.module.css}

@@ -14,7 +14,7 @@
 }
 
 .trigger {
-    composes: root from '../clickable.css';
+    composes: root from '../clickable.module.css';
     align-content: center;
     display: flex;
     height: 3rem;

package/lib/components/Header/currencySwitcher.js

@@ -4,9 +4,10 @@ import { shape, string } from 'prop-types';
 import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './currencySwitcher.css';
+import CurrencySymbol from '../CurrencySymbol';
+import defaultClasses from './currencySwitcher.module.css';
 import SwitcherItem from './switcherItem';
-import CurrencySymbol from '@magento/venia-ui/lib/components/CurrencySymbol';
+import Shimmer from './currencySwitcher.shimmer';
 
 const CurrencySwitcher = props => {
     const {
@@ -26,7 +27,9 @@ const CurrencySwitcher = props => {
         currency: classes.symbol
     };
 
-    if (!availableCurrencies || availableCurrencies.length === 1) return null;
+    if (!availableCurrencies) return <Shimmer />;
+
+    if (availableCurrencies.length === 1) return null;
 
     const currencies = availableCurrencies.map(code => {
         return (

package/lib/components/Header/currencySwitcher.shimmer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Shimmer from '../Shimmer';
+
+export default () => {
+    return <Shimmer width={4} height={2.25} />;
+};

package/lib/components/Header/header.js

@@ -12,11 +12,11 @@ import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './header.css';
-import PageLoadingIndicator from '../PageLoadingIndicator';
+import defaultClasses from './header.module.css';
 import StoreSwitcher from './storeSwitcher';
 import CurrencySwitcher from './currencySwitcher';
 import MegaMenu from '../MegaMenu';
+import PageLoadingIndicator from '../PageLoadingIndicator';
 
 const SearchBar = React.lazy(() => import('../SearchBar'));
 
@@ -25,7 +25,6 @@ const Header = props => {
         handleSearchTriggerClick,
         hasBeenOffline,
         isOnline,
-        isPageLoading,
         isSearchOpen,
         searchRef,
         searchTriggerRef
@@ -33,6 +32,7 @@ const Header = props => {
 
     const classes = useStyle(defaultClasses, props.classes);
     const rootClass = isSearchOpen ? classes.open : classes.closed;
+
     const searchBarFallback = (
         <div className={classes.searchFallback} ref={searchRef}>
             <div className={classes.input}>
@@ -47,9 +47,6 @@ const Header = props => {
             </Route>
         </Suspense>
     ) : null;
-    const pageLoadingIndicator = isPageLoading ? (
-        <PageLoadingIndicator />
-    ) : null;
 
     return (
         <Fragment>
@@ -64,7 +61,6 @@ const Header = props => {
                     <div className={classes.primaryActions}>
                         <NavTrigger />
                     </div>
-                    {pageLoadingIndicator}
                     <OnlineIndicator
                         hasBeenOffline={hasBeenOffline}
                         isOnline={isOnline}
@@ -86,6 +82,7 @@ const Header = props => {
                     </div>
                 </div>
                 {searchBar}
+                <PageLoadingIndicator absolute />
             </header>
         </Fragment>
     );

package/lib/components/Header/{header.css → header.module.css}

@@ -107,7 +107,7 @@
 }
 
 .input {
-    composes: input from '../TextInput/textInput.css';
+    composes: input from '../TextInput/textInput.module.css';
     max-width: 24rem;
 }
 

package/lib/components/Header/navTrigger.js

@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl';
 
 import Icon from '../Icon';
 import { useStyle } from '../../classify';
-import defaultClasses from './navTrigger.css';
+import defaultClasses from './navTrigger.module.css';
 import { useNavigationTrigger } from '@magento/peregrine/lib/talons/Header/useNavigationTrigger';
 
 /**

package/lib/components/Header/{navTrigger.css → navTrigger.module.css}

@@ -1,5 +1,5 @@
 .root {
-    composes: root from '../clickable.css';
+    composes: root from '../clickable.module.css';
     height: 3rem;
     width: 3rem;
 }

package/lib/components/Header/onlineIndicator.js

@@ -5,7 +5,7 @@ import { CloudOff as CloudOffIcon } from 'react-feather';
 import { useStyle } from '../../classify';
 
 import Icon from '../Icon';
-import defaultClasses from './onlineIndicator.css';
+import defaultClasses from './onlineIndicator.module.css';
 
 /**
  * Renders an online indicator when the app goes offline.

package/lib/components/Header/searchTrigger.js

@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl';
 import Icon from '../Icon';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './searchTrigger.css';
+import defaultClasses from './searchTrigger.module.css';
 import { useSearchTrigger } from '@magento/peregrine/lib/talons/Header/useSearchTrigger';
 
 const SearchTrigger = React.forwardRef((props, ref) => {

package/lib/components/Header/{searchTrigger.css → searchTrigger.module.css}

@@ -1,5 +1,5 @@
 .root {
-    composes: root from '../clickable.css';
+    composes: root from '../clickable.module.css';
     transition-property: color;
     transition-duration: 224ms;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

package/lib/components/Header/storeSwitcher.js

@@ -4,8 +4,9 @@ import { shape, string } from 'prop-types';
 import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './storeSwitcher.css';
+import defaultClasses from './storeSwitcher.module.css';
 import SwitcherItem from './switcherItem';
+import Shimmer from './storeSwitcher.shimmer';
 
 const StoreSwitcher = props => {
     const {
@@ -23,7 +24,9 @@ const StoreSwitcher = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
 
-    if (!availableStores || availableStores.size <= 1) return null;
+    if (!availableStores) return <Shimmer />;
+
+    if (availableStores.size <= 1) return null;
 
     const groups = [];
     const hasOnlyOneGroup = storeGroups.size === 1;

package/lib/components/Header/storeSwitcher.shimmer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Shimmer from '../Shimmer';
+
+export default () => {
+    return <Shimmer width={6} height={2.25} />;
+};

package/lib/components/Header/switcherItem.js

@@ -4,7 +4,7 @@ import { bool, func, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
 import Icon from '../Icon/icon';
-import defaultClasses from './switcherItem.css';
+import defaultClasses from './switcherItem.module.css';
 
 const SwitcherItem = props => {
     const { active, onClick, option, children } = props;

package/lib/components/HomePage/homePage.ee.js

@@ -1,4 +1,4 @@
-import globalCSS from './homePage.css';
+import globalCSS from './homePage.module.css';
 
 // `MagentoRoute` renders the CMS page, so this component renders nothing.
 // This file would be obsolete if the CMS could deliver a stylesheet.

package/lib/components/HomePage/{homePage.css → homePage.module.css}

@@ -80,6 +80,7 @@
  * Target the slider.
  */
 :global(.venia-home-slider .slick-slider) {
+    min-height: 628px !important;
     max-width: 1440px;
     width: 100vw;
 }
@@ -120,6 +121,10 @@
 }
 
 @media (max-width: 1280px) {
+    :global(.venia-home-slider .slick-slider) {
+        min-height: 548px !important;
+    }
+
     :global(.venia-home-slider .slick-slide > div > div > div) {
         min-height: 580px !important;
     }

package/lib/components/Icon/icon.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { func, number, shape, string } from 'prop-types';
+import { object, number, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './icon.css';
+import defaultClasses from './icon.module.css';
 
 const Icon = props => {
     // destructure `propClasses` to exclude it from `restProps`
@@ -36,5 +36,5 @@ Icon.propTypes = {
         root: string
     }),
     size: number,
-    src: func.isRequired
+    src: object.isRequired
 };

package/lib/components/Image/__stories__/image.js

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { UNCONSTRAINED_SIZE_KEY } from '@magento/peregrine/lib/talons/Image/useImage';
 
 import Image from '../image';
-import classes from './image.css';
+import classes from './image.module.css';
 
 const stories = storiesOf('Components/Image', module);
 

package/lib/components/Image/image.js

@@ -16,7 +16,7 @@ import ResourceImage from './resourceImage';
 import SimpleImage from './simpleImage';
 import { useStyle } from '../../classify';
 
-import defaultClasses from './image.css';
+import defaultClasses from './image.module.css';
 /**
  * The Image component renders a placeholder until the image is loaded.
  *

package/lib/components/Image/{image.css → image.module.css}

@@ -11,7 +11,7 @@
 
 .image {
     /*
-     * For customization, we provide an empty image class. 
+     * For customization, we provide an empty image class.
      * These styles will be applied directly to the image itself.
      */
 }

package/lib/components/LegacyMiniCart/__tests__/__snapshots__/cartOptions.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`it renders the correct tree 1`] = `
-<or>
+<hr>
   <div>
     <span>
       cartItem name
@@ -52,5 +52,5 @@ exports[`it renders the correct tree 1`] = `
       </span>
     </Button>
   </div>
-</or>
+</hr>
 `;

package/lib/components/LegacyMiniCart/__tests__/__snapshots__/header.spec.js.snap

@@ -9,7 +9,16 @@ exports[`it renders the correct tree 1`] = `
     action={[Function]}
   >
     <Icon
-      src={[Function]}
+      src={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "propTypes": Object {
+            "color": [Function],
+            "size": [Function],
+          },
+          "render": [Function],
+        }
+      }
     />
   </Trigger>
 </div>