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

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js

@@ -13,8 +13,7 @@ import FormError from '../../../FormError';
 import Region from '../../../Region';
 import Postcode from '../../../Postcode';
 import TextInput from '../../../TextInput';
-import defaultClasses from './guestForm.css';
-import GuestFormOperations from './guestForm.gql';
+import defaultClasses from './guestForm.module.css';
 
 const GuestForm = props => {
     const {
@@ -27,7 +26,6 @@ const GuestForm = props => {
 
     const talonProps = useGuestForm({
         afterSubmit,
-        ...GuestFormOperations,
         onCancel,
         onSuccess,
         shippingData

package/lib/components/CheckoutPage/ShippingInformation/__tests__/__snapshots__/editModal.spec.js.snap

@@ -26,13 +26,13 @@ exports[`renders closed modal 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
@@ -84,13 +84,13 @@ exports[`renders open modal 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/CheckoutPage/ShippingInformation/__tests__/__snapshots__/shippingInformation.spec.js.snap

@@ -19,6 +19,17 @@ exports[`renders card state with customer data 1`] = `
       className="editButton"
       disabled={false}
       onClick={[MockFunction handleEditShipping]}
+      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
@@ -80,6 +91,17 @@ exports[`renders card state with guest data 1`] = `
       className="editButton"
       disabled={false}
       onClick={[MockFunction handleEditShipping]}
+      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/ShippingInformation/card.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { arrayOf, shape, string } from 'prop-types';
 
 import { useStyle } from '../../../classify';
-import defaultClasses from './card.css';
+import defaultClasses from './card.module.css';
 
 const Card = props => {
     const { classes: propClasses, shippingData } = props;

package/lib/components/CheckoutPage/ShippingInformation/editModal.js

@@ -8,7 +8,7 @@ import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
 import { Portal } from '../../Portal';
 import AddressForm from './AddressForm';
-import defaultClasses from './editModal.css';
+import defaultClasses from './editModal.module.css';
 
 const EditModal = props => {
     const { classes: propClasses, shippingData, onSuccess } = props;

package/lib/components/CheckoutPage/ShippingInformation/shippingInformation.js

@@ -9,8 +9,7 @@ import Icon from '../../Icon';
 import LoadingIndicator from '../../LoadingIndicator';
 import AddressForm from './AddressForm';
 import Card from './card';
-import defaultClasses from './shippingInformation.css';
-import ShippingInformationOperations from './shippingInformation.gql';
+import defaultClasses from './shippingInformation.module.css';
 import LinkButton from '../../LinkButton';
 
 const EditModal = React.lazy(() => import('./editModal'));
@@ -24,8 +23,7 @@ const ShippingInformation = props => {
     } = props;
     const talonProps = useShippingInformation({
         onSave,
-        toggleActiveContent,
-        ...ShippingInformationOperations
+        toggleActiveContent
     });
     const {
         doneEditing,

package/lib/components/CheckoutPage/ShippingInformation/{shippingInformation.css → shippingInformation.module.css}

@@ -49,7 +49,7 @@
 }
 
 .loading {
-    composes: root from '../../LoadingIndicator/indicator.css';
+    composes: root from '../../LoadingIndicator/indicator.module.css';
     text-align: center;
 }
 

package/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/completedView.spec.js.snap

@@ -22,6 +22,17 @@ exports[`it renders an error when selectedShippingMethod is missing 1`] = `
         className="editButton"
         disabled={false}
         onClick={false}
+        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
@@ -92,6 +103,17 @@ exports[`it renders correctly 1`] = `
         className="editButton"
         disabled={false}
         onClick={false}
+        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/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap

@@ -43,13 +43,13 @@ exports[`it disables inputs when the page is updating 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"
           >
             <circle
@@ -93,6 +93,18 @@ exports[`it disables inputs when the page is updating 1`] = `
       <button
         className="root_normalPriority"
         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
@@ -152,13 +164,13 @@ exports[`it 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"
           >
             <circle
@@ -202,6 +214,18 @@ exports[`it renders correctly 1`] = `
       <button
         className="root_normalPriority"
         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/ShippingMethod/__tests__/__snapshots__/updateModal.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
@@ -107,13 +107,13 @@ exports[`it disables the submit button while loading 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"
                   >
                     <circle
@@ -159,6 +159,17 @@ exports[`it disables the submit button while loading 1`] = `
               className="root_lowPriority"
               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="reset"
             >
               <span
@@ -173,6 +184,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
@@ -232,13 +255,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
@@ -293,13 +316,13 @@ exports[`it 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"
                   >
                     <circle
@@ -345,6 +368,17 @@ exports[`it renders correctly 1`] = `
               className="root_lowPriority"
               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="reset"
             >
               <span
@@ -359,6 +393,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/CheckoutPage/ShippingMethod/__tests__/shippingMethod.spec.js

@@ -3,16 +3,16 @@ import { createTestInstance } from '@magento/peregrine';
 import {
     displayStates,
     useShippingMethod
-} from '@magento/peregrine/lib/talons/CheckoutPage/useShippingMethod';
+} from '@magento/peregrine/lib/talons/CheckoutPage/ShippingMethod/useShippingMethod';
 
 import ShippingMethod from '../shippingMethod';
 
 jest.mock('../../../../classify');
 jest.mock(
-    '@magento/peregrine/lib/talons/CheckoutPage/useShippingMethod',
+    '@magento/peregrine/lib/talons/CheckoutPage/ShippingMethod/useShippingMethod',
     () => {
         const useShippingMethodTalon = jest.requireActual(
-            '@magento/peregrine/lib/talons/CheckoutPage/useShippingMethod'
+            '@magento/peregrine/lib/talons/CheckoutPage/ShippingMethod/useShippingMethod'
         );
         const spy = jest.spyOn(useShippingMethodTalon, 'useShippingMethod');
 

package/lib/components/CheckoutPage/ShippingMethod/completedView.js

@@ -7,7 +7,7 @@ import Price from '@magento/venia-ui/lib/components/Price';
 
 import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
-import defaultClasses from './completedView.css';
+import defaultClasses from './completedView.module.css';
 import LinkButton from '../../LinkButton';
 
 const CompletedView = props => {

package/lib/components/CheckoutPage/ShippingMethod/shippingMethod.js

@@ -6,7 +6,7 @@ import { Form } from 'informed';
 import {
     displayStates,
     useShippingMethod
-} from '@magento/peregrine/lib/talons/CheckoutPage/useShippingMethod';
+} from '@magento/peregrine/lib/talons/CheckoutPage/ShippingMethod/useShippingMethod';
 
 import { useStyle } from '../../../classify';
 import Button from '../../Button';
@@ -15,9 +15,7 @@ import LoadingIndicator from '../../LoadingIndicator';
 import CompletedView from './completedView';
 import ShippingRadios from './shippingRadios';
 import UpdateModal from './updateModal';
-import defaultClasses from './shippingMethod.css';
-
-import shippingMethodOperations from './shippingMethod.gql';
+import defaultClasses from './shippingMethod.module.css';
 
 const initializingContents = (
     <LoadingIndicator>
@@ -34,8 +32,7 @@ const ShippingMethod = props => {
     const talonProps = useShippingMethod({
         onSave,
         onSuccess,
-        setPageIsUpdating,
-        ...shippingMethodOperations
+        setPageIsUpdating
     });
 
     const {

package/lib/components/CheckoutPage/ShippingMethod/shippingRadios.js

@@ -5,7 +5,7 @@ import { arrayOf, bool, number, shape, string } from 'prop-types';
 import { useStyle } from '../../../classify';
 import RadioGroup from '../../RadioGroup';
 import ShippingRadio from '../../CartPage/PriceAdjustments/ShippingMethods/shippingRadio';
-import defaultClasses from './shippingRadios.css';
+import defaultClasses from './shippingRadios.module.css';
 
 const ShippingRadios = props => {
     const { disabled, shippingMethods } = props;

package/lib/components/CheckoutPage/ShippingMethod/{shippingRadios.css → shippingRadios.module.css}

@@ -16,7 +16,7 @@
 
 .radioRoot {
     /* We explicitly want one radio item per row. */
-    composes: root from '../../RadioGroup/radioGroup.css';
+    composes: root from '../../RadioGroup/radioGroup.module.css';
     grid-template-columns: auto;
 }
 

package/lib/components/CheckoutPage/ShippingMethod/updateModal.js

@@ -6,7 +6,7 @@ import { useStyle } from '../../../classify';
 import Dialog from '../../Dialog';
 import FormError from '../../FormError';
 import ShippingRadios from './shippingRadios';
-import defaultClasses from './updateModal.css';
+import defaultClasses from './updateModal.module.css';
 
 const UpdateModal = props => {
     const {