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

package/lib/components/ProductSort/{productSort.css → productSort.module.css}

@@ -34,7 +34,7 @@
 }
 
 .sortButton {
-    composes: root_lowPriority from '../../components/Button/button.css';
+    composes: root_lowPriority from '../../components/Button/button.module.css';
     min-width: 6.25rem;
 }
 
@@ -48,12 +48,12 @@
 }
 
 .desktopIconWrapper {
-    composes: root from '../Icon/icon.css';
+    composes: root from '../Icon/icon.module.css';
     transform: translateX(10px);
 }
 
 .desktopIcon {
-    composes: icon from '../Icon/icon.css';
+    composes: icon from '../Icon/icon.module.css';
     stroke: rgb(var(--venia-global-color-gray-500));
 }
 

package/lib/components/ProductSort/productSort.shimmer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '../../classify';
+
+import Shimmer from '../Shimmer';
+import defaultClasses from './productSort.shimmer.module.css';
+
+const ProductSortShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer
+                classes={{ root_button: classes.sortButtonShimmer }}
+                type="button"
+            />
+        </div>
+    );
+};
+
+ProductSortShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        sortButtonShimmer: string
+    })
+};
+
+export default ProductSortShimmer;

package/lib/components/ProductSort/productSort.shimmer.module.css

@@ -0,0 +1,14 @@
+.root {
+    composes: root from './productSort.module.css';
+}
+
+.sortButtonShimmer {
+    composes: root_button from '../Shimmer/shimmer.module.css';
+    composes: sortButton from './productSort.module.css';
+}
+
+@media (min-width: 1024px) {
+    .sortButtonShimmer {
+        min-width: 12rem;
+    }
+}

package/lib/components/ProductSort/sortItem.js

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

package/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap

@@ -18,13 +18,13 @@ exports[`disables all child radios when disable prop is truthy 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"
         >
           <circle
@@ -49,13 +49,13 @@ exports[`disables all child radios when disable prop is truthy 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"
         >
           <circle
@@ -80,13 +80,13 @@ exports[`disables all child radios when disable prop is truthy 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"
         >
           <circle
@@ -111,13 +111,13 @@ exports[`disables all child radios when disable prop is truthy 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"
         >
           <circle
@@ -142,13 +142,13 @@ exports[`disables all child radios when disable prop is truthy 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"
         >
           <circle
@@ -173,13 +173,13 @@ exports[`disables all child radios when disable prop is truthy 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"
         >
           <circle
@@ -204,13 +204,13 @@ exports[`disables all child radios when disable prop is truthy 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"
         >
           <circle
@@ -235,13 +235,13 @@ exports[`disables all child radios when disable prop is truthy 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"
         >
           <circle
@@ -277,13 +277,13 @@ exports[`renders as expected 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"
         >
           <circle
@@ -307,13 +307,13 @@ exports[`renders as expected 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"
         >
           <circle
@@ -337,13 +337,13 @@ exports[`renders as expected 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"
         >
           <circle
@@ -367,13 +367,13 @@ exports[`renders as expected 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"
         >
           <circle
@@ -397,13 +397,13 @@ exports[`renders as expected 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"
         >
           <circle
@@ -427,13 +427,13 @@ exports[`renders as expected 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"
         >
           <circle
@@ -457,13 +457,13 @@ exports[`renders as expected 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"
         >
           <circle
@@ -488,13 +488,13 @@ exports[`renders as expected 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"
         >
           <circle

package/lib/components/RadioGroup/radio.js

@@ -4,7 +4,7 @@ import { node, shape, string } from 'prop-types';
 import { Radio as InformedRadio } from 'informed';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './radio.css';
+import defaultClasses from './radio.module.css';
 
 /* TODO: change lint config to use `label-has-associated-control` */
 /* eslint-disable jsx-a11y/label-has-for */

package/lib/components/RadioGroup/radioGroup.js

@@ -1,11 +1,12 @@
 import React, { Fragment } from 'react';
 import { arrayOf, number, node, oneOfType, shape, string } from 'prop-types';
-import { RadioGroup as InformedRadioGroup, useFieldState } from 'informed';
+import { RadioGroup as InformedRadioGroup } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useStyle } from '../../classify';
 import { Message } from '../Field';
 import Radio from './radio';
-import defaultClasses from './radioGroup.css';
+import defaultClasses from './radioGroup.module.css';
 
 const RadioGroup = props => {
     const {

package/lib/components/Region/region.js

@@ -7,7 +7,7 @@ import { useStyle } from '../../classify';
 import Field from '../Field';
 import Select from '../Select';
 import TextInput from '../TextInput';
-import defaultClasses from './region.css';
+import defaultClasses from './region.module.css';
 import { GET_REGIONS_QUERY } from './region.gql';
 
 /**

package/lib/components/RichContent/richContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useStyle } from '../../classify';
-import defaultClasses from './richContent.css';
+import defaultClasses from './richContent.module.css';
 import { shape, string } from 'prop-types';
 import richContentRenderers from './richContentRenderers';
 

package/lib/components/RichText/richText.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './richText.css';
+import defaultClasses from './richText.module.css';
 
 const toHTML = str => ({ __html: str });
 

package/lib/components/Routes/__tests__/authRoute.spec.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { createTestInstance } from '@magento/peregrine';
+
+import AuthRoute from '../authRoute';
+
+jest.mock('react-router-dom', () => ({
+    Redirect: props => <mock-Redirect {...props} />,
+    Route: props => <mock-Route {...props} />,
+    useLocation: jest.fn(() => ({ from: '/from' }))
+}));
+
+jest.mock('@magento/peregrine/lib/context/user', () => ({
+    useUserContext: jest.fn(() => [{ isSignedIn: false }])
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <AuthRoute {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        redirectTo: '/',
+        children: []
+    };
+};
+
+const givenSignedIn = () => {
+    useUserContext.mockReturnValueOnce([{ isSignedIn: true }]);
+};
+
+describe('#AuthRoute', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('redirects the user on protected route if not signed in', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Route)).toThrow();
+        expect(() => root.findByType(Redirect)).not.toThrow();
+    });
+
+    it('renders Route on protected route if signed in', () => {
+        givenSignedIn();
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(Route)).not.toThrow();
+        expect(() => root.findByType(Redirect)).toThrow();
+    });
+});

package/lib/components/Routes/authRoute.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { node, string } from 'prop-types';
+import { Redirect, Route, useLocation } from 'react-router-dom';
+
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+const AuthRoute = props => {
+    const { redirectTo, children, ...rest } = props;
+    const { pathname } = useLocation();
+    const [{ isSignedIn }] = useUserContext();
+
+    if (!isSignedIn) {
+        return (
+            <Redirect
+                to={{
+                    pathname: redirectTo,
+                    // Keep path in memory to redirect user there when signed in
+                    state: { from: pathname }
+                }}
+            />
+        );
+    }
+
+    return <Route {...rest}>{children}</Route>;
+};
+
+AuthRoute.defaultProps = {
+    redirectTo: '/'
+};
+
+AuthRoute.propTypes = {
+    redirectTo: string,
+    children: node
+};
+
+export default AuthRoute;

package/lib/components/Routes/routes.js

@@ -1,10 +1,10 @@
 import React, { Suspense } from 'react';
 import { Route, Switch, useLocation } from 'react-router-dom';
 
+import { useScrollTopOnChange } from '@magento/peregrine/lib/hooks/useScrollTopOnChange';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import HomePage from '../HomePage';
 import MagentoRoute from '../MagentoRoute';
-import { useScrollTopOnChange } from '@magento/peregrine/lib/hooks/useScrollTopOnChange';
 
 const Routes = () => {
     const { pathname } = useLocation();
@@ -34,3 +34,5 @@ const Routes = () => {
 };
 
 export default Routes;
+const availableRoutes = [];
+export { availableRoutes };

package/lib/components/SavedPaymentsPage/__tests__/__snapshots__/creditCard.spec.js.snap

@@ -29,6 +29,17 @@ exports[`renders delete confirmation 1`] = `
       className="root_normalPriority"
       disabled={true}
       onClick={[MockFunction toggleDeleteConfirmation]}
+      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
@@ -87,6 +98,17 @@ exports[`renders delete confirmation 1`] = `
       className="root_normalPriorityNegative"
       disabled={true}
       onClick={[MockFunction handleDeletePayment]}
+      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
@@ -102,6 +124,17 @@ exports[`renders delete confirmation 1`] = `
       className="root_lowPriority"
       disabled={true}
       onClick={[MockFunction toggleDeleteConfirmation]}
+      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
@@ -122,7 +155,16 @@ Object {
   "dismissable": true,
   "icon": <Icon
     size={20}
-    src={[Function]}
+    src={
+      Object {
+        "$$typeof": Symbol(react.forward_ref),
+        "propTypes": Object {
+          "color": [Function],
+          "size": [Function],
+        },
+        "render": [Function],
+      }
+    }
   />,
   "message": "Something went wrong deleting this payment method. Please refresh and try again.",
   "timeout": 7000,
@@ -159,6 +201,17 @@ exports[`should render properly 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction toggleDeleteConfirmation]}
+      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
@@ -217,6 +270,17 @@ exports[`should render properly 1`] = `
       className="root_normalPriorityNegative"
       disabled={false}
       onClick={[MockFunction handleDeletePayment]}
+      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
@@ -232,6 +296,17 @@ exports[`should render properly 1`] = `
       className="root_lowPriority"
       disabled={false}
       onClick={[MockFunction toggleDeleteConfirmation]}
+      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/SavedPaymentsPage/creditCard.js

@@ -13,7 +13,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import Button from '../Button';
 import Icon from '../Icon';
 import LinkButton from '../LinkButton';
-import defaultClasses from './creditCard.css';
+import defaultClasses from './creditCard.module.css';
 
 /**
  * Enumerated list of supported credit card types from

package/lib/components/SavedPaymentsPage/{creditCard.css → creditCard.module.css}

@@ -37,7 +37,7 @@
 }
 
 .deleteButton {
-    composes: root from '../LinkButton/linkButton.css';
+    composes: root from '../LinkButton/linkButton.module.css';
     text-decoration: none;
 }
 
@@ -73,13 +73,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;
 }