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

package/lib/components/AccountInformationPage/{accountInformationPage.css → accountInformationPage.module.css}

@@ -45,7 +45,7 @@
 }
 
 .editInformationButton {
-    composes: root_normalPriority from '../Button/button.css';
+    composes: root_normalPriority from '../Button/button.module.css';
 }
 
 @media (min-width: 961px) {

package/lib/components/AccountInformationPage/editForm.js

@@ -15,7 +15,7 @@ import {
     isNotEqualToField
 } from '../../util/formValidators';
 import combine from '../../util/combineValidators';
-import defaultClasses from './editForm.css';
+import defaultClasses from './editForm.module.css';
 
 const EditForm = props => {
     const {

package/lib/components/AccountInformationPage/editModal.js

@@ -6,7 +6,7 @@ import { useStyle } from '../../classify';
 import EditForm from './editForm';
 import FormError from '../FormError';
 import Dialog from '../Dialog';
-import defaultClasses from './editModal.css';
+import defaultClasses from './editModal.module.css';
 
 const EditModal = props => {
     const {

package/lib/components/AccountMenu/accountMenu.js

@@ -7,7 +7,7 @@ import CreateAccount from '../CreateAccount';
 import SignIn from '../SignIn/signIn';
 import AccountMenuItems from './accountMenuItems';
 import ForgotPassword from '../ForgotPassword';
-import defaultClasses from './accountMenu.css';
+import defaultClasses from './accountMenu.module.css';
 
 const AccountMenu = React.forwardRef((props, ref) => {
     const { accountMenuIsOpen, setAccountMenuIsOpen } = props;

package/lib/components/AccountMenu/accountMenuItems.js

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import { useAccountMenuItems } from '@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems';
 
-import defaultClasses from './accountMenuItems.css';
+import defaultClasses from './accountMenuItems.module.css';
 
 const AccountMenuItems = props => {
     const { onSignOut } = props;

package/lib/components/AccountMenu/{accountMenuItems.css → accountMenuItems.module.css}

@@ -7,7 +7,7 @@
 }
 
 .link {
-    composes: root from '../LinkButton/linkButton.css';
+    composes: root from '../LinkButton/linkButton.module.css';
 
     color: rgb(var(--venia-global-color-gray-700));
     justify-content: start;

package/lib/components/AddToCartDialog/__tests__/__snapshots__/addToCartDialog.spec.js.snap

@@ -59,6 +59,17 @@ exports[`renders dialog with content 1`] = `
         className="root_normalPriority"
         disabled={false}
         onClick={[MockFunction buttonProps.onClick]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span
@@ -89,7 +100,7 @@ exports[`renders dialog without content 1`] = `
     <div
       className="titleContainer"
     >
-      <PageLoadingIndicator />
+      <Spinner />
     </div>
   }
 >

package/lib/components/AddToCartDialog/addToCartDialog.js

@@ -9,9 +9,9 @@ import Dialog from '../Dialog';
 import Image from '../Image';
 import Price from '../Price';
 import Options from '../ProductOptions';
-import defaultClasses from './addToCartDialog.css';
+import defaultClasses from './addToCartDialog.module.css';
 import FormError from '../FormError';
-import PageLoadingIndicator from '../PageLoadingIndicator';
+import { Spinner } from '../LoadingIndicator';
 
 const AddToCartDialog = props => {
     const { item } = props;
@@ -29,13 +29,20 @@ const AddToCartDialog = props => {
 
     const classes = useStyle(defaultClasses, props.classes);
 
-    const imageComponent = imageProps ? (
-        <Image {...imageProps} classes={{ image: classes.image }} />
-    ) : (
-        <div className={classes.image} />
+    const imageComponent = useMemo(
+        () =>
+            imageProps ? (
+                <Image {...imageProps} classes={{ image: classes.image }} />
+            ) : (
+                <div className={classes.image} />
+            ),
+        [classes.image, imageProps]
     );
 
-    const priceComponent = priceProps ? <Price {...priceProps} /> : null;
+    const priceComponent = useMemo(
+        () => (priceProps ? <Price {...priceProps} /> : null),
+        [priceProps]
+    );
 
     const dialogContent = useMemo(() => {
         if (item) {
@@ -81,7 +88,7 @@ const AddToCartDialog = props => {
 
     const titleElement = isFetchingProductDetail ? (
         <div className={classes.titleContainer}>
-            <PageLoadingIndicator />
+            <Spinner />
         </div>
     ) : null;
 

package/lib/components/AddToCartDialog/{addToCartDialog.css → addToCartDialog.module.css}

@@ -39,7 +39,7 @@
 }
 
 .dialogHeaderText {
-    composes: headerText from '../Dialog/dialog.css';
+    composes: headerText from '../Dialog/dialog.module.css';
     overflow: visible;
 }
 

package/lib/components/AddressBookPage/__tests__/__snapshots__/addEditDialog.spec.js.snap

@@ -403,13 +403,13 @@ exports[`Edit Mode renders correctly 1`] = `
           >
             <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"
             >
               <rect
@@ -845,13 +845,13 @@ exports[`Edit Mode renders correctly with errors 1`] = `
           >
             <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"
             >
               <rect
@@ -1282,13 +1282,13 @@ exports[`renders correctly 1`] = `
           >
             <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"
             >
               <rect
@@ -1724,13 +1724,13 @@ exports[`renders correctly with errors 1`] = `
           >
             <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"
             >
               <rect

package/lib/components/AddressBookPage/__tests__/__snapshots__/addressBookPage.spec.js.snap

@@ -62,6 +62,17 @@ exports[`renders correctly when there are existing addresses 1`] = `
       className="addButton"
       disabled={false}
       onClick={[MockFunction handleAddAddress]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -74,7 +85,16 @@ exports[`renders correctly when there are existing addresses 1`] = `
             }
           }
           size={24}
-          src={[Function]}
+          src={
+            Object {
+              "$$typeof": Symbol(react.forward_ref),
+              "propTypes": Object {
+                "color": [Function],
+                "size": [Function],
+              },
+              "render": [Function],
+            }
+          }
         />
         <span
           className="addText"
@@ -116,6 +136,17 @@ exports[`renders correctly when there are no existing addresses 1`] = `
       className="addButton"
       disabled={false}
       onClick={[MockFunction handleAddAddress]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -128,7 +159,16 @@ exports[`renders correctly when there are no existing addresses 1`] = `
             }
           }
           size={24}
-          src={[Function]}
+          src={
+            Object {
+              "$$typeof": Symbol(react.forward_ref),
+              "propTypes": Object {
+                "color": [Function],
+                "size": [Function],
+              },
+              "render": [Function],
+            }
+          }
         />
         <span
           className="addText"
@@ -215,6 +255,17 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
       className="addButton"
       disabled={false}
       onClick={[MockFunction handleAddAddress]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -227,7 +278,16 @@ exports[`renders delete confirmation on address that is being deleted 1`] = `
             }
           }
           size={24}
-          src={[Function]}
+          src={
+            Object {
+              "$$typeof": Symbol(react.forward_ref),
+              "propTypes": Object {
+                "color": [Function],
+                "size": [Function],
+              },
+              "render": [Function],
+            }
+          }
         />
         <span
           className="addText"
@@ -263,7 +323,16 @@ exports[`renders loading indicator 1`] = `
       }
     }
     size={64}
-    src={[Function]}
+    src={
+      Object {
+        "$$typeof": Symbol(react.forward_ref),
+        "propTypes": Object {
+          "color": [Function],
+          "size": [Function],
+        },
+        "render": [Function],
+      }
+    }
   />
   <span
     className="message"

package/lib/components/AddressBookPage/__tests__/__snapshots__/addressCard.spec.js.snap

@@ -60,6 +60,17 @@ exports[`renders a default address 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction onEdit]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -151,6 +162,17 @@ exports[`renders a non-default address 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction onEdit]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -190,6 +212,17 @@ exports[`renders a non-default address 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction onDelete]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -304,6 +337,17 @@ exports[`renders an address with a middle name 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction onEdit]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -403,6 +447,17 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction onEdit]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -445,6 +500,17 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
         className="root_normalPriorityNegative"
         disabled={false}
         onClick={[MockFunction onConfirmDelete]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span
@@ -460,6 +526,17 @@ exports[`renders delete confirmation if isConfirmingDelete is true 1`] = `
         className="root_lowPriority"
         disabled={false}
         onClick={[MockFunction onCancelDelete]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span
@@ -536,6 +613,17 @@ exports[`renders disabled delete confirmation if isConfirmingDelete and isDeleti
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction onEdit]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -578,6 +666,17 @@ exports[`renders disabled delete confirmation if isConfirmingDelete and isDeleti
         className="root_normalPriorityNegative"
         disabled={true}
         onClick={[MockFunction onConfirmDelete]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span
@@ -593,6 +692,17 @@ exports[`renders disabled delete confirmation if isConfirmingDelete and isDeleti
         className="root_lowPriority"
         disabled={true}
         onClick={[MockFunction onCancelDelete]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span

package/lib/components/AddressBookPage/addEditDialog.js

@@ -13,7 +13,7 @@ import FormError from '@magento/venia-ui/lib/components/FormError';
 import Postcode from '@magento/venia-ui/lib/components/Postcode';
 import Region from '@magento/venia-ui/lib/components/Region';
 import TextInput from '@magento/venia-ui/lib/components/TextInput';
-import defaultClasses from './addEditDialog.css';
+import defaultClasses from './addEditDialog.module.css';
 
 const AddEditDialog = props => {
     const {

package/lib/components/AddressBookPage/addressBookPage.js

@@ -11,7 +11,7 @@ import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/Loadi
 
 import AddressCard from './addressCard';
 import AddEditDialog from './addEditDialog';
-import defaultClasses from './addressBookPage.css';
+import defaultClasses from './addressBookPage.module.css';
 
 const AddressBookPage = props => {
     const talonProps = useAddressBookPage();

package/lib/components/AddressBookPage/addressCard.js

@@ -6,7 +6,7 @@ import { Trash2 as TrashIcon, Edit2 as EditIcon } from 'react-feather';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Button from '@magento/venia-ui/lib/components/Button';
 import Icon from '@magento/venia-ui/lib/components/Icon';
-import defaultClasses from './addressCard.css';
+import defaultClasses from './addressCard.module.css';
 import LinkButton from '../LinkButton';
 
 const AddressCard = props => {

package/lib/components/AddressBookPage/{addressCard.css → addressCard.module.css}

@@ -29,13 +29,13 @@
 }
 
 .confirmDeleteButton {
-    composes: root_normalPriorityNegative from '../Button/button.css';
+    composes: root_normalPriorityNegative from '../Button/button.module.css';
 
     background-color: white;
     order: 1;
 }
 .cancelDeleteButton {
-    composes: root_lowPriority from '../Button/button.css';
+    composes: root_lowPriority from '../Button/button.module.css';
 
     background-color: white;
 }
@@ -71,7 +71,7 @@
 }
 
 .linkButton {
-    composes: root from '../LinkButton/linkButton.css';
+    composes: root from '../LinkButton/linkButton.module.css';
     text-decoration: none;
 }
 

package/lib/components/App/__tests__/__snapshots__/app.spec.js.snap

@@ -11,7 +11,7 @@ exports[`displays open nav or drawer 1`] = `
   <button
     onClick={[Function]}
   />
-  <require('../Navigation') />
+  <Navigation />
   <ToastContainer />
 </div>
 `;
@@ -41,11 +41,7 @@ exports[`renders with unhandledErrors 1`] = `
     dismiss={[Function]}
     isActive={false}
   />
-  <React.Suspense
-    fallback={null}
-  >
-    <require('../Navigation') />
-  </React.Suspense>
+  <Navigation />
   <ToastContainer />
 </HeadProvider>
 `;

package/lib/components/App/__tests__/app.spec.js

@@ -15,9 +15,12 @@ jest.mock('../../Head', () => ({
     StoreTitle: () => 'Title'
 }));
 jest.mock('../../Main', () => 'Main');
-
+jest.mock('../../Navigation', () => 'Navigation');
 jest.mock('../../Routes', () => 'Routes');
 jest.mock('../../ToastContainer', () => 'ToastContainer');
+jest.mock('@magento/peregrine/lib/hooks/useDelayedTransition', () => {
+    return jest.fn();
+});
 
 const mockAddToast = jest.fn();
 jest.mock('@magento/peregrine', () => {

package/lib/components/App/app.js

@@ -1,14 +1,16 @@
-import React, { useCallback, Suspense } from 'react';
+import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { array, func, shape, string } from 'prop-types';
 
 import { useToasts } from '@magento/peregrine';
+import useDelayedTransition from '@magento/peregrine/lib/hooks/useDelayedTransition';
 import { useApp } from '@magento/peregrine/lib/talons/App/useApp';
 
-import globalCSS from '../../index.css';
+import globalCSS from '../../index.module.css';
 import { HeadProvider, StoreTitle } from '../Head';
 import Main from '../Main';
 import Mask from '../Mask';
+import Navigation from '../Navigation';
 import Routes from '../Routes';
 import ToastContainer from '../ToastContainer';
 import Icon from '../Icon';
@@ -19,8 +21,6 @@ import {
     Wifi as WifiIcon
 } from 'react-feather';
 
-const Navigation = React.lazy(() => import('../Navigation'));
-
 const OnlineIcon = <Icon src={WifiIcon} attrs={{ width: 18 }} />;
 const OfflineIcon = <Icon src={CloudOffIcon} attrs={{ width: 18 }} />;
 const ErrorIcon = <Icon src={AlertCircleIcon} attrs={{ width: 18 }} />;
@@ -29,6 +29,7 @@ const App = props => {
     const { markErrorHandled, renderError, unhandledErrors } = props;
     const { formatMessage } = useIntl();
     const [, { addToast }] = useToasts();
+    useDelayedTransition();
 
     const ERROR_MESSAGE = formatMessage({
         id: 'app.errorUnexpected',
@@ -107,9 +108,7 @@ const App = props => {
                 <Routes />
             </Main>
             <Mask isActive={hasOverlay} dismiss={handleCloseDrawer} />
-            <Suspense fallback={null}>
-                <Navigation />
-            </Suspense>
+            <Navigation />
             <ToastContainer />
         </HeadProvider>
     );

package/lib/components/AriaButton/__tests__/__snapshots__/ariaButton.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#AriaButton renders 1`] = `
+<button>
+  Children
+</button>
+`;