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

package/lib/components/Checkout/form.js

@@ -11,7 +11,7 @@ import Icon from '../Icon';
 import LoadingIndicator from '../LoadingIndicator';
 import EditableForm from './editableForm';
 import Overview from './overview';
-import defaultClasses from './form.css';
+import defaultClasses from './form.module.css';
 
 const ErrorIcon = <Icon src={AlertCircleIcon} attrs={{ width: 18 }} />;
 const loadingText = 'Loading Checkout...';

package/lib/components/Checkout/{form.css → form.module.css}

@@ -2,13 +2,13 @@
 }
 
 .body {
-    composes: body from './flow.css';
+    composes: body from './flow.module.css';
     grid-gap: 0;
     padding: 0;
 }
 
 .footer {
-    composes: footer from './flow.css';
+    composes: footer from './flow.module.css';
 }
 
 .informationPrompt {

package/lib/components/Checkout/label.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { bool, node, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './label.css';
+import defaultClasses from './label.module.css';
 
 const Label = props => {
     const { children, plain, ...restProps } = props;

package/lib/components/Checkout/paymentsForm.js

@@ -3,7 +3,7 @@ import { Form } from 'informed';
 import { array, bool, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './paymentsForm.css';
+import defaultClasses from './paymentsForm.module.css';
 import PaymentsFormItems from './paymentsFormItems';
 import { usePaymentsForm } from '@magento/peregrine/lib/talons/Checkout/usePaymentsForm';
 

package/lib/components/Checkout/{paymentsForm.css → paymentsForm.module.css}

@@ -2,16 +2,16 @@
 }
 
 .heading {
-    composes: heading from './flow.css';
+    composes: heading from './flow.module.css';
 }
 
 .body {
-    composes: body from './flow.css';
+    composes: body from './flow.module.css';
     height: 30rem;
 }
 
 .footer {
-    composes: footer from './flow.css';
+    composes: footer from './flow.module.css';
 }
 
 .textInput {

package/lib/components/Checkout/section.js

@@ -4,7 +4,7 @@ import { Edit2 as EditIcon } from 'react-feather';
 
 import { useStyle } from '../../classify';
 import Icon from '../Icon';
-import defaultClasses from './section.css';
+import defaultClasses from './section.module.css';
 
 const editIconAttrs = {
     color: 'black',

package/lib/components/Checkout/shippingForm.js

@@ -7,7 +7,7 @@ import Label from './label';
 import Select from '../Select';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './shippingForm.css';
+import defaultClasses from './shippingForm.module.css';
 import { useShippingForm } from '@magento/peregrine/lib/talons/Checkout/useShippingForm';
 
 const ShippingForm = props => {

package/lib/components/Checkout/shippingForm.module.css

@@ -0,0 +1,19 @@
+.root {
+}
+
+.heading {
+    composes: heading from './flow.module.css';
+}
+
+.body {
+    composes: body from './flow.module.css';
+}
+
+.footer {
+    composes: footer from './flow.module.css';
+}
+
+/* fields */
+.shippingMethod {
+    grid-column-end: span 1;
+}

package/lib/components/CheckoutPage/AddressBook/__tests__/__snapshots__/addressBook.spec.js.snap

@@ -9,7 +9,16 @@ Object {
         "width": 18,
       }
     }
-    src={[Function]}
+    src={
+      Object {
+        "$$typeof": Symbol(react.forward_ref),
+        "propTypes": Object {
+          "color": [Function],
+          "size": [Function],
+        },
+        "render": [Function],
+      }
+    }
   />,
   "message": "Error Message",
   "timeout": 10000,
@@ -37,6 +46,17 @@ Array [
         className="root_lowPriority"
         disabled={false}
         onClick={[MockFunction handleCancel]}
+        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
@@ -52,6 +72,17 @@ Array [
         className="root_highPriority"
         disabled={false}
         onClick={[MockFunction handleApplyAddress]}
+        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
@@ -107,6 +138,17 @@ Array [
         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
@@ -187,6 +229,17 @@ Array [
         className="root_lowPriority"
         disabled={true}
         onClick={[MockFunction handleCancel]}
+        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
@@ -202,6 +255,17 @@ Array [
         className="root_highPriority"
         disabled={true}
         onClick={[MockFunction handleApplyAddress]}
+        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
@@ -221,6 +285,17 @@ Array [
         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

package/lib/components/CheckoutPage/AddressBook/addressBook.js

@@ -7,8 +7,7 @@ import { useAddressBook } from '@magento/peregrine/lib/talons/CheckoutPage/Addre
 
 import { useStyle } from '../../../classify';
 import Button from '../../Button';
-import defaultClasses from './addressBook.css';
-import AddressBookOperations from './addressBook.gql';
+import defaultClasses from './addressBook.module.css';
 import AddressCard from './addressCard';
 import Icon from '../../Icon';
 import LinkButton from '../../LinkButton';
@@ -33,7 +32,6 @@ const AddressBook = props => {
     } = props;
 
     const talonProps = useAddressBook({
-        ...AddressBookOperations,
         toggleActiveContent,
         onSuccess
     });
@@ -70,26 +68,29 @@ const AddressBook = props => {
     const rootClass =
         activeContent === 'addressBook' ? classes.root_active : classes.root;
 
-    const addAddressButton = (
-        <LinkButton
-            className={classes.addButton}
-            key="addAddressButton"
-            onClick={handleAddAddress}
-        >
-            <Icon
-                size={24}
-                src={PlusSquare}
-                classes={{
-                    icon: classes.addIcon
-                }}
-            />
-            <span className={classes.addText}>
-                <FormattedMessage
-                    id={'addressBook.addNewAddresstext'}
-                    defaultMessage={'Add New Address'}
+    const addAddressButton = useMemo(
+        () => (
+            <LinkButton
+                className={classes.addButton}
+                key="addAddressButton"
+                onClick={handleAddAddress}
+            >
+                <Icon
+                    size={24}
+                    src={PlusSquare}
+                    classes={{
+                        icon: classes.addIcon
+                    }}
                 />
-            </span>
-        </LinkButton>
+                <span className={classes.addText}>
+                    <FormattedMessage
+                        id={'addressBook.addNewAddresstext'}
+                        defaultMessage={'Add New Address'}
+                    />
+                </span>
+            </LinkButton>
+        ),
+        [classes.addButton, classes.addIcon, classes.addText, handleAddAddress]
     );
 
     const addressElements = useMemo(() => {

package/lib/components/CheckoutPage/AddressBook/addressCard.js

@@ -6,7 +6,7 @@ import { useAddressCard } from '@magento/peregrine/lib/talons/CheckoutPage/Addre
 
 import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
-import defaultClasses from './addressCard.css';
+import defaultClasses from './addressCard.module.css';
 
 const AddressCard = props => {
     const {

package/lib/components/CheckoutPage/BillingAddress/__tests__/billingAddress.spec.js

@@ -5,7 +5,7 @@ import Country from '@magento/venia-ui/lib/components/Country';
 
 import BillingAddress from '../billingAddress';
 
-import classes from '../billingAddress.css';
+import classes from '../billingAddress.module.css';
 
 jest.mock('@magento/venia-ui/lib/classify');
 jest.mock(

package/lib/components/CheckoutPage/BillingAddress/billingAddress.js

@@ -11,7 +11,7 @@ import TextInput from '@magento/venia-ui/lib/components/TextInput';
 import FormError from '@magento/venia-ui/lib/components/FormError';
 import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
 
-import defaultClasses from './billingAddress.css';
+import defaultClasses from './billingAddress.module.css';
 
 import { useBillingAddress } from '@magento/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress';
 

package/lib/components/CheckoutPage/GuestSignIn/__tests__/__snapshots__/guestSignIn.spec.js.snap

@@ -28,6 +28,17 @@ exports[`renders CreateAccount component 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction handleBackToCheckout]}
+      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
@@ -70,6 +81,17 @@ exports[`renders ForgotPassword component 1`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction handleBackToCheckout]}
+      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
@@ -114,6 +136,17 @@ exports[`renders SignIn component 2`] = `
       className="root_normalPriority"
       disabled={false}
       onClick={[MockFunction handleBackToCheckout]}
+      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/CheckoutPage/GuestSignIn/guestSignIn.js

@@ -8,7 +8,7 @@ import CreateAccount from '@magento/venia-ui/lib/components/CreateAccount';
 import ForgotPassword from '@magento/venia-ui/lib/components/ForgotPassword';
 import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
 import SignIn from '@magento/venia-ui/lib/components/SignIn';
-import defaultClasses from './guestSignIn.css';
+import defaultClasses from './guestSignIn.module.css';
 
 const GuestSignIn = props => {
     const { isActive, toggleActiveContent } = props;

package/lib/components/CheckoutPage/GuestSignIn/{guestSignIn.css → guestSignIn.module.css}

@@ -22,15 +22,15 @@
 }
 
 .signInRoot {
-    composes: root from '../../SignIn/signIn.css';
+    composes: root from '../../SignIn/signIn.module.css';
 }
 
 .forgotPasswordRoot {
-    composes: root from '../../ForgotPassword/forgotPassword.css';
+    composes: root from '../../ForgotPassword/forgotPassword.module.css';
 }
 
 .createAccountRoot {
-    composes: root from '../../CreateAccount/createAccount.css';
+    composes: root from '../../CreateAccount/createAccount.module.css';
 }
 
 @media (max-width: 960px) {

package/lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/itemsReview.spec.js.snap

@@ -20,7 +20,7 @@ exports[`Snapshot test 1`] = `
           alt="Jillian Top"
           className="undefined undefined"
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={100}
         />
         <img
@@ -84,7 +84,7 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
           alt="Juno Sweater"
           className="undefined undefined"
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={100}
         />
         <img
@@ -148,7 +148,7 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
           alt="Angelina Tank Dress"
           className="undefined undefined"
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={100}
         />
         <img

package/lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/showAllButton.spec.js.snap

@@ -14,13 +14,13 @@ exports[`Snapshot test 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"
       >
         <polyline

package/lib/components/CheckoutPage/ItemsReview/item.js

@@ -6,7 +6,7 @@ import Image from '../../Image';
 import { useStyle } from '../../../classify';
 import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
 
-import defaultClasses from './item.css';
+import defaultClasses from './item.module.css';
 
 const Item = props => {
     const {

package/lib/components/CheckoutPage/ItemsReview/itemsReview.js

@@ -8,7 +8,7 @@ import ShowAllButton from './showAllButton';
 import LoadingIndicator from '../../LoadingIndicator';
 import { useStyle } from '../../../classify';
 
-import defaultClasses from './itemsReview.css';
+import defaultClasses from './itemsReview.module.css';
 
 /**
  * Renders a list of items in an order.

package/lib/components/CheckoutPage/ItemsReview/showAllButton.js

@@ -5,7 +5,7 @@ import { ChevronDown as ArrowDown } from 'react-feather';
 import Icon from '../../Icon';
 import { useStyle } from '../../../classify';
 
-import defaultClasses from './showAllButton.css';
+import defaultClasses from './showAllButton.module.css';
 
 const ShowAllButton = props => {
     const { onClick } = props;

package/lib/components/CheckoutPage/ItemsReview/{showAllButton.css → showAllButton.module.css}

@@ -19,6 +19,6 @@
 }
 
 .arrowDown {
-    composes: root from '../../Icon/icon.css';
+    composes: root from '../../Icon/icon.module.css';
     --stroke: rgb(var(--venia-brand-color-1-700));
 }

package/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap

@@ -189,6 +189,17 @@ exports[`CreateAccount renders CreateAccount component 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
@@ -196,13 +207,13 @@ exports[`CreateAccount renders CreateAccount component 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
@@ -244,13 +255,13 @@ exports[`CreateAccount renders CreateAccount component 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
@@ -279,6 +290,18 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
       <button
         className="create_account_button"
         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
@@ -488,6 +511,17 @@ exports[`CreateAccount renders errors 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
@@ -495,13 +529,13 @@ exports[`CreateAccount renders 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"
               >
                 <path
@@ -543,13 +577,13 @@ exports[`CreateAccount renders 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
@@ -578,6 +612,18 @@ exports[`CreateAccount renders errors 1`] = `
       <button
         className="create_account_button"
         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/CheckoutPage/OrderConfirmationPage/createAccount.js

@@ -20,7 +20,7 @@ import FormError from '../../FormError';
 import TextInput from '../../TextInput';
 import Password from '../../Password';
 
-import defaultClasses from './createAccount.css';
+import defaultClasses from './createAccount.module.css';
 
 const CreateAccount = props => {
     const { formatMessage } = useIntl();