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

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

@@ -6,7 +6,16 @@ exports[`it renders children passed to it 1`] = `
     onClick={[Function]}
   >
     <Icon
-      src={[Function]}
+      src={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "propTypes": Object {
+            "color": [Function],
+            "size": [Function],
+          },
+          "render": [Function],
+        }
+      }
     />
   </button>
   <ul>
@@ -23,7 +32,16 @@ exports[`it renders correctly without children 1`] = `
     onClick={[Function]}
   >
     <Icon
-      src={[Function]}
+      src={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "propTypes": Object {
+            "color": [Function],
+            "size": [Function],
+          },
+          "render": [Function],
+        }
+      }
     />
   </button>
   <ul />

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

@@ -13,13 +13,13 @@ exports[`renders the correct tree 1`] = `
       <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"
         >
           <line

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

@@ -46,7 +46,16 @@ exports[`it fills the icon when isFilled is true 1`] = `
         }
       }
       size={16}
-      src={[Function]}
+      src={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "propTypes": Object {
+            "color": [Function],
+            "size": [Function],
+          },
+          "render": [Function],
+        }
+      }
     />
     <span>
       Unit Test Text
@@ -65,7 +74,16 @@ exports[`it renders an icon when passed a valid one 1`] = `
         }
       }
       size={16}
-      src={[Function]}
+      src={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "propTypes": Object {
+            "color": [Function],
+            "size": [Function],
+          },
+          "render": [Function],
+        }
+      }
     />
     <span>
       Unit Test Text

package/lib/components/LegacyMiniCart/body.js

@@ -4,7 +4,7 @@ import { array, bool, func, object, shape, string } from 'prop-types';
 import { useStyle } from '../../classify';
 import LoadingIndicator from '../LoadingIndicator';
 
-import defaultClasses from './body.css';
+import defaultClasses from './body.module.css';
 import EditItem from './editItem';
 import EmptyMiniCartBody from './emptyMiniCartBody';
 import ProductList from './productList';

package/lib/components/LegacyMiniCart/cartOptions.gql.js

@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
-
-import { CartPageFragment } from '../CartPage/cartPageFragments.gql';
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
 
 export const REMOVE_ITEM_MUTATION = gql`
     mutation RemoveItemForOptions($cartId: String!, $itemId: Int!) {

package/lib/components/LegacyMiniCart/cartOptions.js

@@ -14,7 +14,7 @@ import {
     ADD_CONFIGURABLE_MUTATION,
     ADD_SIMPLE_MUTATION
 } from '../ProductFullDetail/productFullDetail.gql';
-import defaultClasses from './cartOptions.css';
+import defaultClasses from './cartOptions.module.css';
 import { REMOVE_ITEM_MUTATION, UPDATE_ITEM_MUTATION } from './cartOptions.gql';
 import { gql } from '@apollo/client';
 

package/lib/components/LegacyMiniCart/{cartOptions.css → cartOptions.module.css}

@@ -41,9 +41,9 @@
 }
 
 .quantityTitle {
-    composes: title from '../../components/ProductOptions/option.css';
+    composes: title from '../../components/ProductOptions/option.module.css';
 }
 
 .save {
-    composes: footer from '../../components/Checkout/flow.css';
+    composes: footer from '../../components/Checkout/flow.module.css';
 }

package/lib/components/LegacyMiniCart/emptyMiniCartBody.js

@@ -3,7 +3,7 @@ import { func, string, shape } from 'prop-types';
 
 import { useStyle } from '../../classify';
 
-import defaultClasses from './emptyMiniCartBody.css';
+import defaultClasses from './emptyMiniCartBody.module.css';
 import { useEmptyMiniCart } from '@magento/peregrine/lib/talons/LegacyMiniCart/useEmptyMiniCart';
 import Button from '../Button';
 

package/lib/components/LegacyMiniCart/{emptyMiniCartBody.css → emptyMiniCartBody.module.css}

@@ -14,5 +14,5 @@
 }
 
 .continue {
-    composes: root from '../Button/button.css';
+    composes: root from '../Button/button.module.css';
 }

package/lib/components/LegacyMiniCart/footer.js

@@ -5,7 +5,7 @@ import { useStyle } from '../../classify';
 import Checkout from '../Checkout';
 import CheckoutButton from '../Checkout/checkoutButton';
 
-import defaultClasses from './footer.css';
+import defaultClasses from './footer.module.css';
 import TotalsSummary from './totalsSummary';
 
 const Footer = props => {

package/lib/components/LegacyMiniCart/header.js

@@ -6,7 +6,7 @@ import { useStyle } from '../../classify';
 import Icon from '../Icon';
 import Trigger from '../Trigger';
 
-import defaultClasses from './header.css';
+import defaultClasses from './header.module.css';
 import { useHeader } from '@magento/peregrine/lib/talons/LegacyMiniCart/useHeader';
 
 const Header = props => {

package/lib/components/LegacyMiniCart/kebab.js

@@ -5,7 +5,7 @@ import { MoreVertical as MoreVerticalIcon } from 'react-feather';
 import { useStyle } from '../../classify';
 import Icon from '../Icon';
 
-import defaultClasses from './kebab.css';
+import defaultClasses from './kebab.module.css';
 import { useKebab } from '@magento/peregrine/lib/talons/LegacyMiniCart/useKebab';
 
 const Kebab = props => {

package/lib/components/LegacyMiniCart/mask.js

@@ -4,7 +4,7 @@ import { bool, func, shape, string } from 'prop-types';
 import { useStyle } from '../../classify';
 import Mask from '../Mask';
 
-import defaultClasses from './mask.css';
+import defaultClasses from './mask.module.css';
 
 const MiniCartMask = props => {
     const { dismiss, isActive } = props;

package/lib/components/LegacyMiniCart/mask.module.css

@@ -0,0 +1,4 @@
+.root_active {
+    composes: root_active from '../Mask/mask.module.css';
+    opacity: 0.25;
+}

package/lib/components/LegacyMiniCart/miniCart.js

@@ -7,7 +7,7 @@ import Body from './body';
 import Footer from './footer';
 import Header from './header';
 import Mask from './mask';
-import defaultClasses from './miniCart.css';
+import defaultClasses from './miniCart.module.css';
 import { useStyle } from '../../classify';
 
 const LegacyMiniCart = props => {

package/lib/components/LegacyMiniCart/product.js

@@ -9,7 +9,7 @@ import { useStyle } from '../../classify';
 import Image from '../Image';
 import { REMOVE_ITEM_MUTATION } from './cartOptions.gql';
 import Kebab from './kebab';
-import defaultClasses from './product.css';
+import defaultClasses from './product.module.css';
 import ProductOptions from './productOptions';
 import Section from './section';
 import { gql } from '@apollo/client';

package/lib/components/LegacyMiniCart/productList.js

@@ -4,7 +4,7 @@ import { array, func, shape, string } from 'prop-types';
 import { useStyle } from '../../classify';
 
 import Product from './product';
-import defaultClasses from './productList.css';
+import defaultClasses from './productList.module.css';
 
 const ProductList = props => {
     const { beginEditItem, cartItems, currencyCode } = props;

package/lib/components/LegacyMiniCart/productOptions.js

@@ -3,7 +3,7 @@ import { arrayOf, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
 
-import defaultClasses from './productOptions.css';
+import defaultClasses from './productOptions.module.css';
 
 const ProductOptions = props => {
     const { options = [] } = props;

package/lib/components/LegacyMiniCart/section.js

@@ -9,7 +9,7 @@ import {
 import { useStyle } from '../../classify';
 import Icon from '../Icon';
 
-import defaultClasses from './section.css';
+import defaultClasses from './section.module.css';
 
 const icons = new Map()
     .set('Heart', HeartIcon)

package/lib/components/LegacyMiniCart/{section.css → section.module.css}

@@ -20,7 +20,7 @@
 }
 
 .icon {
-    composes: root from '../Icon/icon.css';
+    composes: root from '../Icon/icon.module.css';
     --stroke: rgb(var(--venia-global-color-teal));
 }
 

package/lib/components/LegacyMiniCart/totalsSummary.js

@@ -5,7 +5,7 @@ import Price from '@magento/venia-ui/lib/components/Price';
 
 import { useStyle } from '../../classify';
 
-import defaultClasses from './totalsSummary.css';
+import defaultClasses from './totalsSummary.module.css';
 
 const cartTotalString = 'Cart Total : ';
 

package/lib/components/Link/__tests__/link.spec.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { Link as RouterLink } from 'react-router-dom';
+import useLink from '@magento/peregrine/lib/talons/Link/useLink';
+import Link from '../link';
+
+jest.mock('@magento/peregrine/lib/talons/Link/useLink', () => {
+    return jest.fn(({ innerRef }) => {
+        return {
+            ref: innerRef
+        };
+    });
+});
+
+jest.mock('react-router-dom', () => {
+    return {
+        Link: jest.fn(() => {
+            return '<div id="original-link"></div>';
+        })
+    };
+});
+
+beforeEach(() => {
+    useLink.mockClear();
+});
+
+describe('#Link', () => {
+    test('passes data to talon', async () => {
+        await act(() => {
+            create(<Link prefetchType innerRef="foo" />);
+        });
+
+        expect(useLink).toHaveBeenCalledWith(
+            expect.objectContaining({
+                prefetchType: true,
+                innerRef: 'foo'
+            })
+        );
+    });
+
+    test('passes props to base link component', async () => {
+        await act(() => {
+            create(<Link foo="bar" />);
+        });
+
+        expect(RouterLink).toHaveBeenCalledWith(
+            expect.objectContaining({
+                foo: 'bar'
+            }),
+            {}
+        );
+    });
+});

package/lib/components/Link/index.js

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

package/lib/components/Link/link.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { bool } from 'prop-types';
+import useLink from '@magento/peregrine/lib/talons/Link/useLink';
+
+const removeProps = (props, exclude) => {
+    return Object.fromEntries(
+        Object.entries(props).filter(([name]) => !exclude.includes(name))
+    );
+};
+
+/**
+ * Use for links to pages within your app.
+ *
+ * @kind functional component
+ * @param {props} props React component props
+ * @returns {RouterLink} the `Link` component from `react-router-dom`. We add a `ref` to prefetch pages when the link enters the viewport.
+ */
+const Link = props => {
+    const talonProps = useLink(props);
+    const { ref } = talonProps;
+    const propsForBase = removeProps(props, ['prefetchType', 'innerRef']);
+
+    return <RouterLink {...propsForBase} innerRef={ref} />;
+};
+
+Link.defaultProps = {
+    prefetchType: false
+};
+
+/**
+ * @property {bool} [prefetchType=false] Determine if the link should be prefetched using `IntersectionObserver`.
+ */
+Link.propTypes = {
+    prefetchType: bool
+};
+
+export default Link;

package/lib/components/LinkButton/linkButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { oneOf, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './linkButton.css';
+import defaultClasses from './linkButton.module.css';
 import Button from '../Button';
 
 /**

package/lib/components/LinkButton/{linkButton.css → linkButton.module.css}

@@ -1,5 +1,5 @@
 .root {
-    composes: root from '../clickable.css';
+    composes: root from '../clickable.module.css';
     color: rgb(var(--venia-brand-color-1-700));
     font-size: var(--venia-global-fontSize-200);
     font-weight: var(--venia-global-fontWeight-semibold);

package/lib/components/LoadingIndicator/index.js

@@ -1,2 +1,3 @@
 export { default } from './indicator';
 export { default as fullPageLoadingIndicator } from './static';
+export { default as Spinner } from './spinner';

package/lib/components/LoadingIndicator/indicator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import defaultClasses from './indicator.css';
+import defaultClasses from './indicator.module.css';
 import { useStyle } from '../../classify';
 import { Loader as LoaderIcon } from 'react-feather';
 import Icon from '../Icon';

package/lib/components/{PageLoadingIndicator/indicator.js → LoadingIndicator/spinner.js}

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import defaultClasses from './indicator.css';
+import defaultClasses from './spinner.module.css';
 import { useStyle } from '../../classify';
 import { RotateCw as LoaderIcon } from 'react-feather';
 import Icon from '../Icon';
 
-const PageLoadingIndicator = props => {
+const Spinner = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     return (
@@ -19,4 +19,4 @@ const PageLoadingIndicator = props => {
     );
 };
 
-export default PageLoadingIndicator;
+export default Spinner;

package/lib/components/Logo/logo.js

@@ -8,7 +8,6 @@ import logo from './VeniaLogo.svg';
 /**
  * A component that renders a logo in the header.
  *
- * @typedef Logo
  * @kind functional component
  *
  * @param {props} props React component props
@@ -35,14 +34,14 @@ const Logo = props => {
 };
 
 /**
- * Props for {@link Logo}
+ * Props for the Logo component.
  *
- * @typedef props
+ * @kind props
  *
- * @property {Object} classes An object containing the class names for the
- * Logo component.
- * @property {string} classes.logo classes for logo
- * @property {number} height the height of the logo.
+ * @property {Object} classes An object containing the class names for the Logo component.
+ * @property {string} classes.logo Classes for logo
+ * @property {number} [height=18] Height of the logo.
+ * @property {number} [width=102] Width of the logo.
  */
 Logo.propTypes = {
     classes: PropTypes.shape({

package/lib/components/MagentoRoute/magentoRoute.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useMagentoRoute } from '@magento/peregrine/lib/talons/MagentoRoute';
-
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
-import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
+import RootShimmerComponent from '../../RootComponents/Shimmer';
 
 const MESSAGES = new Map()
     .set(
@@ -17,16 +16,23 @@ const MagentoRoute = () => {
     const talonProps = useMagentoRoute();
     const {
         component: RootComponent,
-        id,
         isLoading,
         isNotFound,
-        isRedirect
+        isRedirect,
+        shimmer,
+        initial,
+        ...componentData
     } = talonProps;
 
     if (isLoading || isRedirect) {
-        return fullPageLoadingIndicator;
+        // Show root component shimmer
+        if (shimmer) {
+            return <RootShimmerComponent type={shimmer} />;
+        }
+
+        return initial ? null : <RootShimmerComponent />;
     } else if (RootComponent) {
-        return <RootComponent id={id} />;
+        return <RootComponent {...componentData} />;
     } else if (isNotFound) {
         return (
             <ErrorView

package/lib/components/Main/main.js

@@ -5,7 +5,7 @@ import { useScrollLock } from '@magento/peregrine';
 import { useStyle } from '../../classify';
 import Footer from '../Footer';
 import Header from '../Header';
-import defaultClasses from './main.css';
+import defaultClasses from './main.module.css';
 
 const Main = props => {
     const { children, isMasked } = props;

package/lib/components/Mask/mask.js

@@ -1,9 +1,17 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
-
 import { useStyle } from '../../classify';
-import defaultClasses from './mask.css';
-
+import defaultClasses from './mask.module.css';
+
+/**
+ * A component that masks content.
+ *
+ * @param {props} props React component props
+ * @param {Object} props.classes - CSS classes to override element styles.
+ * @param {callback} props.dismiss Handler for the onClick() event
+ * @param {callback} props.isActive True if the mask is in an active state. False otherwise.
+ * @returns {React.Element} A React component that will mask content.
+ *
+ */
 const Mask = props => {
     const { dismiss, isActive } = props;
     const classes = useStyle(defaultClasses, props.classes);
@@ -13,49 +21,3 @@ const Mask = props => {
 };
 
 export default Mask;
-
-// /**
-//  * A component that masks content.
-//  *
-//  * @class Mask
-//  * @extends {Component}
-//  *
-//  * @typedef Mask
-//  * @kind class component
-//  *
-//  * @returns {React.Element} A React component that will mask content.
-//  */
-// class Mask extends Component {
-//     /**
-//      * Props for {@link Mask}
-//      *
-//      * @typedef props
-//      *
-//      * @property {Object} classes An object containing the class names for the
-//      * Mask component.
-//      * @property {string} classes.root classes for root container
-//      * @property {string} classes.root_action classes for root container if
-//      * the `isActive` property is `true`.
-//      * @property {Function} dismiss the handler for on the `onClick` event
-//      * handler.
-//      * @property {boolean} isActive whether the mask is in an active state
-//      * or not.
-//      */
-//     static propTypes = {
-//         classes: PropTypes.shape({
-//             root: PropTypes.string,
-//             root_active: PropTypes.string
-//         }),
-//         dismiss: PropTypes.func,
-//         isActive: PropTypes.bool
-//     };
-
-//     render() {
-//         const { classes, dismiss, isActive } = this.props;
-//         const className = isActive ? classes.root_active : classes.root;
-
-//         return <button className={className} onClick={dismiss} />;
-//     }
-// }
-
-// export default classify(defaultClasses)(Mask);