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

package/lib/components/CategoryList/categoryTile.js

@@ -6,16 +6,17 @@ import { useCategoryTile } from '@magento/peregrine/lib/talons/CategoryList/useC
 
 import { useStyle } from '../../classify';
 import Image from '../Image';
-import defaultClasses from './categoryTile.css';
+import defaultClasses from './categoryTile.module.css';
 
 const IMAGE_WIDTH = 80;
 
 const CategoryTile = props => {
     const talonProps = useCategoryTile({
-        item: props.item
+        item: props.item,
+        storeConfig: props.storeConfig
     });
 
-    const { image, item } = talonProps;
+    const { image, item, handleClick } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -41,7 +42,7 @@ const CategoryTile = props => {
     ]);
 
     return (
-        <Link className={classes.root} to={item.url}>
+        <Link className={classes.root} to={item.url} onClick={handleClick}>
             {imagePreview}
             <span className={classes.name}>{item.name}</span>
         </Link>
@@ -66,6 +67,9 @@ CategoryTile.propTypes = {
         image: string,
         imageContainer: string,
         name: string
-    })
+    }),
+    storeConfig: shape({
+        category_url_suffix: string.isRequired
+    }).isRequired
 };
 export default CategoryTile;

package/lib/components/CategoryTree/__tests__/categoryLeaf.spec.js

@@ -11,10 +11,10 @@ const props = {
     category: {
         id: 1,
         name: 'One',
-        url_path: 'one',
-        url_suffix: '.html'
+        url_path: 'one'
     },
-    onNavigate: jest.fn()
+    onNavigate: jest.fn(),
+    categoryUrlSuffix: '.html'
 };
 
 test('renders correctly', () => {

package/lib/components/CategoryTree/categoryBranch.js

@@ -3,7 +3,7 @@ import { func, number, shape, string } from 'prop-types';
 import { useCategoryBranch } from '@magento/peregrine/lib/talons/CategoryTree';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './categoryBranch.css';
+import defaultClasses from './categoryBranch.module.css';
 
 const Branch = props => {
     const { category, setCategoryId } = props;

package/lib/components/CategoryTree/categoryBranch.module.css

@@ -0,0 +1,11 @@
+.root {
+    composes: root from './categoryLeaf.module.css';
+}
+
+.target {
+    composes: target from './categoryLeaf.module.css';
+}
+
+.text {
+    composes: text from './categoryLeaf.module.css';
+}

package/lib/components/CategoryTree/categoryLeaf.js

@@ -6,14 +6,14 @@ import { useCategoryLeaf } from '@magento/peregrine/lib/talons/CategoryTree';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './categoryLeaf.css';
+import defaultClasses from './categoryLeaf.module.css';
 
 const Leaf = props => {
-    const { category, onNavigate } = props;
-    const { name, url_path, url_suffix, children } = category;
+    const { category, onNavigate, categoryUrlSuffix } = props;
+    const { name, url_path, children } = category;
     const classes = useStyle(defaultClasses, props.classes);
     const { handleClick } = useCategoryLeaf({ onNavigate });
-    const destination = resourceUrl(`/${url_path}${url_suffix || ''}`);
+    const destination = resourceUrl(`/${url_path}${categoryUrlSuffix || ''}`);
 
     const leafLabel =
         children && children.length ? (
@@ -53,5 +53,6 @@ Leaf.propTypes = {
         target: string,
         text: string
     }),
-    onNavigate: func.isRequired
+    onNavigate: func.isRequired,
+    categoryUrlSuffix: string
 };

package/lib/components/CategoryTree/categoryTree.js

@@ -5,7 +5,7 @@ import { useCategoryTree } from '@magento/peregrine/lib/talons/CategoryTree';
 import { useStyle } from '../../classify';
 import Branch from './categoryBranch';
 import Leaf from './categoryLeaf';
-import defaultClasses from './categoryTree.css';
+import defaultClasses from './categoryTree.module.css';
 
 const Tree = props => {
     const { categoryId, onNavigate, setCategoryId, updateCategories } = props;
@@ -15,7 +15,7 @@ const Tree = props => {
         updateCategories
     });
 
-    const { data, childCategories } = talonProps;
+    const { data, childCategories, categoryUrlSuffix } = talonProps;
     const classes = useStyle(defaultClasses, props.classes);
 
     // for each child category, render a direct link if it has no children
@@ -24,7 +24,12 @@ const Tree = props => {
         ? Array.from(childCategories, childCategory => {
               const [id, { category, isLeaf }] = childCategory;
               return isLeaf ? (
-                  <Leaf key={id} category={category} onNavigate={onNavigate} />
+                  <Leaf
+                      key={id}
+                      category={category}
+                      onNavigate={onNavigate}
+                      categoryUrlSuffix={categoryUrlSuffix}
+                  />
               ) : (
                   <Branch
                       key={id}

package/lib/components/Checkbox/__tests__/__snapshots__/checkbox.spec.js.snap

@@ -23,13 +23,13 @@ exports[`renders the correct tree 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

package/lib/components/Checkbox/checkbox.js

@@ -1,15 +1,12 @@
 import React, { Fragment, useEffect } from 'react';
 import { node, shape, string } from 'prop-types';
-import {
-    Checkbox as InformedCheckbox,
-    useFieldApi,
-    useFieldState
-} from 'informed';
+import { Checkbox as InformedCheckbox, useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useStyle } from '../../classify';
 import { Message } from '../Field';
 import { CheckSquare, Square } from 'react-feather';
-import defaultClasses from './checkbox.css';
+import defaultClasses from './checkbox.module.css';
 
 /* TODO: change lint config to use `label-has-associated-control` */
 /* eslint-disable jsx-a11y/label-has-for */

package/lib/components/Checkout/Receipt/__tests__/__snapshots__/receipt.spec.js.snap

@@ -27,6 +27,17 @@ exports[`renders a Receipt component correctly 1`] = `
       className="root_highPriority"
       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

package/lib/components/Checkout/Receipt/receipt.js

@@ -5,7 +5,7 @@ import { useReceipt } from '@magento/peregrine/lib/talons/Checkout/Receipt/useRe
 
 import { useStyle } from '../../../classify';
 import Button from '../../Button';
-import defaultClasses from './receipt.css';
+import defaultClasses from './receipt.module.css';
 
 /**
  * A component that displays some basic information about an order and has

package/lib/components/Checkout/__tests__/__snapshots__/addressForm.spec.js.snap

@@ -387,6 +387,18 @@ exports[`renders an AddressForm component 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
@@ -399,6 +411,17 @@ exports[`renders an AddressForm component 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="button"
     >
       <span
@@ -798,6 +821,18 @@ exports[`renders validation block with message if address is incorrect 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
@@ -810,6 +845,17 @@ exports[`renders validation block with message if address is incorrect 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="button"
     >
       <span

package/lib/components/Checkout/__tests__/__snapshots__/checkoutButton.spec.js.snap

@@ -3,6 +3,17 @@
 exports[`renders a Checkout Button component 1`] = `
 <button
   disabled={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>
@@ -41,6 +52,17 @@ exports[`renders a Checkout Button component 1`] = `
 exports[`renders a disabled Checkout Button component 1`] = `
 <button
   disabled={true}
+  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/Checkout/__tests__/__snapshots__/overview.spec.js.snap

@@ -145,6 +145,17 @@ Array [
       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="button"
     >
       <span
@@ -157,6 +168,17 @@ Array [
       className="root_lowPriority"
       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
@@ -314,6 +336,17 @@ Array [
       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="button"
     >
       <span
@@ -326,6 +359,17 @@ Array [
       className="root_lowPriority"
       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
@@ -483,6 +527,17 @@ Array [
       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="button"
     >
       <span
@@ -495,6 +550,17 @@ Array [
       className="root_lowPriority"
       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

package/lib/components/Checkout/__tests__/__snapshots__/paymentsForm.spec.js.snap

@@ -45,13 +45,13 @@ exports[`renders a PaymentsForm 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"
           >
             <polyline
@@ -79,6 +79,18 @@ exports[`renders a PaymentsForm component 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
@@ -91,6 +103,17 @@ exports[`renders a PaymentsForm component 1`] = `
       className="root_lowPriority"
       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
@@ -148,13 +171,13 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 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
@@ -493,6 +516,18 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 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
@@ -505,6 +540,17 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
       className="root_lowPriority"
       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

package/lib/components/Checkout/__tests__/__snapshots__/shippingform.spec.js.snap

@@ -31,6 +31,18 @@ exports[`renders a shipping form 1`] = `
   <div>
     <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>
@@ -40,6 +52,17 @@ exports[`renders a shipping form 1`] = `
     <button
       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>
@@ -74,6 +97,18 @@ exports[`renders no initial value and no shipping methods if no availableShippin
   <div>
     <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>
@@ -83,6 +118,17 @@ exports[`renders no initial value and no shipping methods if no availableShippin
     <button
       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>

package/lib/components/Checkout/addressForm.js

@@ -13,7 +13,7 @@ import {
 import Button from '../Button';
 import Field from '../Field';
 import TextInput from '../TextInput';
-import defaultClasses from './addressForm.css';
+import defaultClasses from './addressForm.module.css';
 import { gql } from '@apollo/client';
 
 const fields = [

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

@@ -2,15 +2,15 @@
 }
 
 .heading {
-    composes: heading from './flow.css';
+    composes: heading from './flow.module.css';
 }
 
 .body {
-    composes: body from './flow.css';
+    composes: body from './flow.module.css';
 }
 
 .footer {
-    composes: footer from './flow.css';
+    composes: footer from './flow.module.css';
 }
 
 /* fields */

package/lib/components/Checkout/braintreeDropin.js

@@ -13,7 +13,7 @@
 import React, { useEffect, useState } from 'react';
 import { bool, func, shape, string } from 'prop-types';
 
-import defaultClasses from './braintreeDropin.css';
+import defaultClasses from './braintreeDropin.module.css';
 import { useStyle } from '../../classify';
 
 const authorization = process.env.CHECKOUT_BRAINTREE_TOKEN;

package/lib/components/Checkout/checkoutButton.js

@@ -5,7 +5,7 @@ import { Lock as LockIcon } from 'react-feather';
 import { useStyle } from '../../classify';
 import Button from '../Button';
 import Icon from '../Icon';
-import defaultClasses from './checkoutButton.css';
+import defaultClasses from './checkoutButton.module.css';
 
 const CheckoutButton = props => {
     const { disabled, onClick, classes: propsClasses } = props;

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

@@ -1,5 +1,5 @@
 .icon {
-    composes: root from '../Icon/icon.css';
+    composes: root from '../Icon/icon.module.css';
     --stroke: white;
     margin-top: -2px;
 }

package/lib/components/Checkout/flow.js

@@ -13,7 +13,7 @@ import CheckoutButton from './checkoutButton';
 import Form from './form';
 import Receipt from './Receipt';
 
-import defaultClasses from './flow.css';
+import defaultClasses from './flow.module.css';
 
 const ErrorIcon = <Icon src={AlertCircleIcon} attrs={{ width: 18 }} />;