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

package/lib/RootComponents/Product/__tests__/product.spec.js

@@ -1,24 +1,50 @@
 import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
+import { act, create } from 'react-test-renderer';
 import { useProduct } from '@magento/peregrine/lib/talons/RootComponents/Product/useProduct';
 import Product from '../product';
+import ProductShimmer from '../product.shimmer';
 import mockData from '../mockData';
 
 jest.mock('@magento/peregrine/lib/talons/RootComponents/Product/useProduct');
+jest.mock('@magento/venia-ui/lib/components/ErrorView', () => 'ErrorView');
+jest.mock('@magento/venia-ui/lib/components/Head', () => ({
+    __esModule: true,
+    StoreTitle: jest.fn(() => 'StoreTitle'),
+    Meta: jest.fn(() => 'Meta')
+}));
+jest.mock(
+    '@magento/venia-ui/lib/components/ProductFullDetail',
+    () => 'ProductFullDetail'
+);
+jest.mock('@magento/venia-ui/lib/util/mapProduct');
+jest.mock('react-intl', () => ({
+    FormattedMessage: jest.fn(({ defaultMessage }) => defaultMessage)
+}));
+jest.mock('../product.shimmer', () => {
+    return jest.fn(() => 'ProductShimmer');
+});
+
+const render = async (props = {}) => {
+    let tree;
 
-const renderer = new ShallowRenderer();
+    await act(() => {
+        tree = create(<Product {...props} />);
+    });
 
-test('renders product page correctly', () => {
+    return tree;
+};
+
+test('renders product page correctly', async () => {
     useProduct.mockReturnValueOnce({
         product: mockData
     });
 
-    const tree = renderer.render(<Product />);
+    const tree = await render();
 
     expect(tree).toMatchSnapshot();
 });
 
-test('renders product page correctly when error and product data exist', () => {
+test('renders product page correctly when error and product data exist', async () => {
     useProduct.mockReturnValueOnce({
         product: mockData,
         error: {
@@ -26,19 +52,30 @@ test('renders product page correctly when error and product data exist', () => {
         }
     });
 
-    const tree = renderer.render(<Product />);
+    const tree = await render();
 
     expect(tree).toMatchSnapshot();
 });
 
-test('renders product page failed when error data', () => {
+test('renders product page failed when error data', async () => {
     useProduct.mockReturnValueOnce({
         error: {
             message: 'Fetch failed'
         }
     });
 
-    const tree = renderer.render(<Product />);
+    const tree = await render();
 
     expect(tree).toMatchSnapshot();
 });
+
+test('renders product page shimmer when loading data', async () => {
+    useProduct.mockReturnValueOnce({
+        product: undefined,
+        loading: true
+    });
+
+    await render({ __typename: 'SimpleProduct' });
+
+    expect(ProductShimmer).toHaveBeenCalled();
+});

package/lib/RootComponents/Product/product.js

@@ -1,12 +1,13 @@
 import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { string } from 'prop-types';
 import { useProduct } from '@magento/peregrine/lib/talons/RootComponents/Product/useProduct';
 
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
-import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
 import ProductFullDetail from '@magento/venia-ui/lib/components/ProductFullDetail';
 import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
+import ProductShimmer from './product.shimmer';
 
 /*
  * As of this writing, there is no single Product query type in the M2.3 schema.
@@ -16,14 +17,16 @@ import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
  * TODO: Replace with a single product query when possible.
  */
 
-const Product = () => {
+const Product = props => {
+    const { __typename: productType } = props;
     const talonProps = useProduct({
         mapProduct
     });
 
     const { error, loading, product } = talonProps;
 
-    if (loading && !product) return fullPageLoadingIndicator;
+    if (loading && !product)
+        return <ProductShimmer productType={productType} />;
     if (error && !product) return <ErrorView />;
     if (!product) {
         return (
@@ -47,4 +50,8 @@ const Product = () => {
     );
 };
 
+Product.propTypes = {
+    __typename: string.isRequired
+};
+
 export default Product;

package/lib/RootComponents/Product/product.shimmer.js

@@ -0,0 +1,96 @@
+import React, { Fragment, useMemo } from 'react';
+import { string, shape } from 'prop-types';
+import Shimmer from '../../components/Shimmer';
+import { BreadcrumbShimmer } from '../../components/Breadcrumbs';
+import defaultClasses from '../../components/ProductFullDetail/productFullDetail.module.css';
+import CarouselShimmer from '../../components/ProductImageCarousel/carousel.shimmer';
+import { ProductOptionsShimmer } from '../../components/ProductOptions';
+import { useStyle } from '../../classify';
+
+const ProductShimmer = props => {
+    const { productType } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const options = useMemo(() => {
+        if (productType.includes('Configurable')) {
+            return <ProductOptionsShimmer />;
+        }
+
+        return null;
+    }, [productType]);
+
+    return (
+        <Fragment>
+            <BreadcrumbShimmer />
+            <div className={classes.root}>
+                <section className={classes.title}>
+                    <Shimmer width="100%" height={2} key="product-name" />
+                    <div className={classes.productPrice}>
+                        <Shimmer width={3} height={2} key="product-price" />
+                    </div>
+                </section>
+                <section className={classes.imageCarousel}>
+                    <CarouselShimmer />
+                </section>
+                <section className={classes.options}>{options}</section>
+                <section className={classes.quantity}>
+                    <div className={classes.quantityTitle}>
+                        <Shimmer width="100%" height={1} key="quantity-title" />
+                    </div>
+                    <Shimmer
+                        width={10}
+                        type="textInput"
+                        classes={{ root: classes.quantityRoot }}
+                    />
+                </section>
+                <section className={classes.actions}>
+                    <Shimmer type="button" key="add-to-cart" />
+                </section>
+                <section className={classes.description}>
+                    <div className={classes.descriptionTitle}>
+                        <Shimmer
+                            width="100%"
+                            height={1}
+                            key="description-title"
+                        />
+                    </div>
+                    <Shimmer width="100%" height={1} key="description-line-1" />
+                    <Shimmer width="100%" height={1} key="description-line-2" />
+                    <Shimmer width="100%" height={1} key="description-line-3" />
+                </section>
+                <section className={classes.details}>
+                    <div className={classes.detailsTitle}>
+                        <Shimmer width="100%" height={1} key="detail-title" />
+                    </div>
+                    <Shimmer width="100%" height={1} key="detail-value" />
+                </section>
+            </div>
+        </Fragment>
+    );
+};
+
+ProductShimmer.defaultProps = {
+    classes: {}
+};
+
+ProductShimmer.propTypes = {
+    productType: string.isRequired,
+    classes: shape({
+        cartActions: string,
+        description: string,
+        descriptionTitle: string,
+        details: string,
+        detailsTitle: string,
+        imageCarousel: string,
+        options: string,
+        productName: string,
+        productPrice: string,
+        quantity: string,
+        quantityTitle: string,
+        root: string,
+        title: string,
+        unavailableContainer: string
+    })
+};
+
+export default ProductShimmer;

package/lib/RootComponents/Shimmer/index.js

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

package/lib/RootComponents/Shimmer/shimmer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { string } from 'prop-types';
+import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
+import TYPES from './types';
+
+const RootShimmer = props => {
+    const { type } = props;
+
+    if (!type || typeof TYPES[type] === 'undefined') {
+        return fullPageLoadingIndicator;
+    }
+
+    const Component = TYPES[type];
+
+    return <Component />;
+};
+
+RootShimmer.defaultProps = {
+    type: null
+};
+
+RootShimmer.propTypes = {
+    type: string
+};
+
+export default RootShimmer;

package/lib/RootComponents/Shimmer/types/index.js

@@ -0,0 +1,23 @@
+/**
+ * This file is augmented at build time using the @magento/venia-ui build
+ * target "rootShimmerTypes", which allows third-party modules to
+ * add new root shimmer mappings for loading transitions.
+ *
+ * @see [Shimmer definition object]{@link RootShimmerTypesDefinition}
+ */
+export default {};
+
+/**
+ * A root shimmer definition object that describes a shimmer in your storefront.
+ *
+ * @typedef {Object} RootShimmerTypesDefinition
+ * @property {string} shimmerType is use to map your shimmer
+ * @property {string} importPath Resolvable path to the component the
+ *   Root Shimmer component will render
+ *
+ * @example <caption>A custom root shimmer</caption>
+ * const myCmsPageShimmer = {
+ *      shimmerType: 'CMS_PAGE_SHIMMER',
+ *      importPath: '@partner/module/path_to_your_component'
+ * }
+ */

package/lib/__mocks__/classify.js

@@ -2,6 +2,8 @@
  * The real implementation of `classify` interferes with Enzyme tests, which
  * use class selectors to confirm UI states. CSS modules have dynamic classes.
  *
+ * Note that Enzyme is no longer installed by default since React 17.
+ *
  * The simple solution is to use `identity-obj-proxy` to mock CSS modules,
  * which our jest.config.js does do. But the real implementation of `classify`
  * shadows the mock and disables its special functionality.

package/lib/components/Accordion/accordion.js

@@ -3,7 +3,7 @@ import React, { createContext, useContext } from 'react';
 import { useAccordion } from '@magento/peregrine/lib/talons/Accordion/useAccordion';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './accordion.css';
+import defaultClasses from './accordion.module.css';
 
 const AccordionContext = createContext();
 const { Provider } = AccordionContext;

package/lib/components/Accordion/section.js

@@ -5,7 +5,7 @@ import { useAccordionContext } from './accordion';
 import Icon from '../Icon';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './section.css';
+import defaultClasses from './section.module.css';
 
 const Section = props => {
     const { children, id, title } = props;

package/lib/components/AccountChip/__tests__/__snapshots__/accountChip.spec.js.snap

@@ -10,13 +10,13 @@ exports[`it renders a loading indicator when appropriate 1`] = `
     <svg
       className="icon"
       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
@@ -38,13 +38,13 @@ exports[`it renders a loading indicator when appropriate 1`] = `
       <svg
         className="icon"
         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"
       >
         <line

package/lib/components/AccountChip/accountChip.js

@@ -7,7 +7,7 @@ import { useAccountChip } from '@magento/peregrine/lib/talons/AccountChip/useAcc
 import { useStyle } from '@magento/venia-ui/lib/classify';
 
 import Icon from '../Icon';
-import defaultClasses from './accountChip.css';
+import defaultClasses from './accountChip.module.css';
 import { GET_CUSTOMER_DETAILS } from './accountChip.gql';
 
 /**

package/lib/components/AccountChip/{accountChip.css → accountChip.module.css}

@@ -7,5 +7,5 @@
 }
 
 .loader {
-    composes: indicator from '../LoadingIndicator/indicator.css';
+    composes: indicator from '../LoadingIndicator/indicator.module.css';
 }

package/lib/components/AccountInformationPage/__tests__/__snapshots__/accountInformationPage.spec.js.snap

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`redirects when not authenticated 1`] = `
-<mock-Redirect
-  to="/"
-/>
-`;
-
 exports[`renders form error 1`] = `
 <div
   className="root"

package/lib/components/AccountInformationPage/__tests__/__snapshots__/editForm.spec.js.snap

@@ -188,6 +188,17 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
               className="passwordButton"
               disabled={false}
               onClick={[Function]}
+              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
@@ -195,13 +206,13 @@ exports[`renders form when shouldShowNewPassword is false 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"
                 >
                   <path
@@ -231,6 +242,17 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction]}
+      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
@@ -434,6 +456,17 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
               className="passwordButton"
               disabled={false}
               onClick={[Function]}
+              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
@@ -441,13 +474,13 @@ exports[`renders form when shouldShowNewPassword is true  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"
                 >
                   <path
@@ -512,6 +545,17 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
               className="passwordButton"
               disabled={false}
               onClick={[Function]}
+              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
@@ -519,13 +563,13 @@ exports[`renders form when shouldShowNewPassword is true  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"
                 >
                   <path

package/lib/components/AccountInformationPage/__tests__/__snapshots__/editModal.spec.js.snap

@@ -40,13 +40,13 @@ exports[`it disables the submit button while loading 1`] = `
               <svg
                 className="icon"
                 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"
               >
                 <line
@@ -80,6 +80,17 @@ exports[`it disables the submit button while loading 1`] = `
               className="root_lowPriority"
               disabled={true}
               onClick={[MockFunction onCancel]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="reset"
             >
               <span
@@ -94,6 +105,18 @@ exports[`it disables the submit button while loading 1`] = `
             <button
               className="root_highPriority"
               disabled={true}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="submit"
             >
               <span
@@ -153,13 +176,13 @@ exports[`it renders correctly 1`] = `
               <svg
                 className="icon"
                 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"
               >
                 <line
@@ -193,6 +216,17 @@ exports[`it renders correctly 1`] = `
               className="root_lowPriority"
               disabled={false}
               onClick={[MockFunction onCancel]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="reset"
             >
               <span
@@ -207,6 +241,18 @@ exports[`it renders correctly 1`] = `
             <button
               className="root_highPriority"
               disabled={false}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="submit"
             >
               <span

package/lib/components/AccountInformationPage/__tests__/accountInformationPage.spec.js

@@ -26,7 +26,6 @@ const emptyFormProps = {
         }
     },
     isDisabled: false,
-    isSignedIn: true,
     isUpdateMode: false,
     loadDataError: null,
     showUpdateMode
@@ -38,19 +37,9 @@ jest.mock('react-router-dom', () => ({
     Redirect: props => <mock-Redirect {...props} />
 }));
 
-test('redirects when not authenticated', () => {
-    useAccountInformationPage.mockReturnValue({
-        isSignedIn: false
-    });
-
-    const tree = createTestInstance(<AccountInformationPage />);
-    expect(tree.toJSON()).toMatchSnapshot();
-});
-
 test('renders a loading indicator', () => {
     useAccountInformationPage.mockReturnValueOnce({
-        initialValues: null,
-        isSignedIn: true
+        initialValues: null
     });
 
     const { root } = createTestInstance(<AccountInformationPage />);

package/lib/components/AccountInformationPage/accountInformationPage.js

@@ -1,6 +1,5 @@
 import React, { Fragment, Suspense } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Redirect } from 'react-router-dom';
 import { useAccountInformationPage } from '@magento/peregrine/lib/talons/AccountInformationPage/useAccountInformationPage';
 
 import { useStyle } from '../../classify';
@@ -9,7 +8,7 @@ import { Message } from '../Field';
 import { StoreTitle } from '../Head';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 
-import defaultClasses from './accountInformationPage.css';
+import defaultClasses from './accountInformationPage.module.css';
 import AccountInformationPageOperations from './accountInformationPage.gql.js';
 
 const EditModal = React.lazy(() => import('./editModal'));
@@ -28,7 +27,6 @@ const AccountInformationPage = props => {
         handleSubmit,
         initialValues,
         isDisabled,
-        isSignedIn,
         isUpdateMode,
         loadDataError,
         shouldShowNewPassword,
@@ -36,10 +34,6 @@ const AccountInformationPage = props => {
     } = talonProps;
     const { formatMessage } = useIntl();
 
-    if (!isSignedIn) {
-        return <Redirect to="/" />;
-    }
-
     const errorMessage = loadDataError ? (
         <Message>
             <FormattedMessage