@magento/venia-ui 11.6.0-alpha.13 → 11.6.0-alpha.14

package/lib/components/CheckoutPage/OrderConfirmationPage/createAccount.js

@@ -179,7 +179,7 @@ const CreateAccount = props => {
                 <GoogleReCaptcha {...recaptchaWidgetProps} />
                 <div className={classes.actions}>
                     <Button
-                        disabled={isDisabled}
+                        disabled={Boolean(isDisabled)}
                         type="submit"
                         className={classes.create_account_button}
                         data-cy="OrderConfirmationPage-CreateAccount-createAccountButton"

package/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -173,7 +173,7 @@ exports[`CheckoutPage renders an error and disables review order button if there
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span
@@ -537,7 +537,7 @@ exports[`CheckoutPage renders checkout content for guest on desktop 1`] = `
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span
@@ -679,7 +679,7 @@ exports[`CheckoutPage renders checkout content for guest on mobile 1`] = `
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span

package/lib/components/CheckoutPage/checkoutPage.js

@@ -177,6 +177,7 @@ const CheckoutPage = props => {
                     className={classes.signInButton}
                     data-cy="CheckoutPage-signInButton"
                     onClick={toggleSignInContent}
+                    onTouchStart={toggleSignInContent}
                     priority="normal"
                 >
                     <FormattedMessage
@@ -282,6 +283,7 @@ const CheckoutPage = props => {
             checkoutStep === CHECKOUT_STEP.REVIEW ? (
                 <Button
                     onClick={handlePlaceOrder}
+                    onTouchStart={handlePlaceOrder}
                     onKeyDown={handlePlaceOrderEnterKeyPress}
                     priority="high"
                     className={classes.place_order_button}

package/lib/components/FilterModal/FilterList/filterDefault.js

@@ -57,7 +57,7 @@ const FilterDefault = props => {
             field={`${label}-${value_index}`}
             fieldValue={!!isSelected}
             label={title}
-            ariaLabel={ariaLabel}
+            aria-label={ariaLabel}
             data-cy="FilterDefault-checkbox"
             onClick={onMouseDown}
             {...restProps}

package/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -45,7 +45,7 @@ const FilterItemRadio = props => {
             value={value}
             onChange={handleOnchange}
             data-cy="FilterDefault-radio"
-            ariaLabel={ariaLabel}
+            aria-label={ariaLabel}
         />
     );
 

package/lib/components/FilterModal/FilterList/filterList.js

@@ -36,8 +36,8 @@ const FilterList = props => {
         var maxRange = Number(items[items.length - 1].value.split('_')[1]);
         if (filterState !== undefined) {
             const filterArray = [...filterState];
-            var currentMinVal = Number(filterArray[0].value.split('_')[0]);
-            var currentMaxVal = Number(filterArray[0].value.split('_')[1]);
+            var currentMinVal = Number(filterArray[0]?.value?.split('_')[0]);
+            var currentMaxVal = Number(filterArray[0]?.value?.split('_')[1]);
         }
     }
 

package/lib/components/FilterModal/filterFooter.js

@@ -26,6 +26,7 @@ const FilterFooter = props => {
             <Button
                 disabled={!touched}
                 onClick={applyFilters}
+                onTouchStart={applyFilters}
                 data-cy="FilterFooter-button"
                 aria-label={buttonLabel}
                 aria-disabled={!touched}

package/lib/components/FilterModal/filterModal.js

@@ -80,7 +80,7 @@ const FilterModal = props => {
             <LinkButton
                 type="button"
                 onClick={handleReset}
-                ariaLabel={clearAllAriaLabel}
+                aria-label={clearAllAriaLabel}
                 data-cy="FilterModal-clearButton"
             >
                 <FormattedMessage

package/lib/components/FilterModalOpenButton/filterModalOpenButton.js

@@ -24,6 +24,7 @@ const FilterModalOpenButton = props => {
             }}
             data-cy="FilterModalOpenButton-button"
             onClick={handleOpen}
+            onTouchStart={handleOpen}
             onKeyDown={handleKeypress}
             type="button"
             aria-live="polite"

package/lib/components/OrderHistoryPage/OrderDetails/items.js

@@ -13,7 +13,7 @@ const Items = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     const itemsComponent = items.map(item => (
-        <Item key={item.id} {...item} {...imagesData[item.product_sku]} />
+        <Item key={item.id} {...item} {...imagesData[0][item.product_sku]} />
     ));
 
     return (

package/lib/components/OrderHistoryPage/OrderDetails/orderDetails.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { arrayOf, number, shape, string } from 'prop-types';
+import PropTypes, { shape, string, number, arrayOf } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
 import { Printer } from 'react-feather';
@@ -38,6 +38,8 @@ const OrderDetails = props => {
 
     const hasTotals = total.grand_total && total.grand_total.currency;
 
+    const imagesArray = Array.isArray(imagesData) ? imagesData : [imagesData];
+
     return (
         <div className={classes.root}>
             <div className={classes.shippingInformationContainer}>
@@ -64,7 +66,7 @@ const OrderDetails = props => {
             </div>
             <div className={classes.itemsContainer}>
                 <ConditionalWrapper condition={items && items.length}>
-                    <Items data={{ imagesData, items }} />
+                    <Items data={{ imagesData: imagesArray, items }} />
                 </ConditionalWrapper>
             </div>
             <div className={classes.orderTotalContainer}>
@@ -91,8 +93,6 @@ const OrderDetails = props => {
     );
 };
 
-export default OrderDetails;
-
 OrderDetails.propTypes = {
     classes: shape({
         root: string,
@@ -105,7 +105,18 @@ OrderDetails.propTypes = {
         printButton: string,
         printLabel: string
     }),
-    imagesData: arrayOf(
+    imagesData: PropTypes.oneOfType([
+        arrayOf(
+            shape({
+                id: number,
+                sku: string,
+                thumbnail: shape({
+                    url: string
+                }),
+                url_key: string,
+                url_suffix: string
+            })
+        ),
         shape({
             id: number,
             sku: string,
@@ -115,7 +126,7 @@ OrderDetails.propTypes = {
             url_key: string,
             url_suffix: string
         })
-    ),
+    ]),
     orderData: shape({
         billing_address: shape({
             city: string,
@@ -205,3 +216,5 @@ OrderDetails.propTypes = {
         })
     })
 };
+
+export default OrderDetails;

package/lib/components/OrderHistoryPage/collapsedImageGallery.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { arrayOf, object, shape, string } from 'prop-types';
+import PropTypes from 'prop-types';
 
 import { useStyle } from '../../classify';
 import Image from '../Image';
@@ -27,7 +27,7 @@ const CollapsedImageGallery = props => {
 
                     return (
                         <Image
-                            key={Object.keys(items)[index]}
+                            key={name || index}
                             alt={name}
                             src={url}
                             width={48}
@@ -58,9 +58,9 @@ const CollapsedImageGallery = props => {
 export default CollapsedImageGallery;
 
 CollapsedImageGallery.propTypes = {
-    classes: shape({
-        root: string,
-        remainderCount: string
+    classes: PropTypes.shape({
+        root: PropTypes.string,
+        remainderCount: PropTypes.string
     }),
-    items: arrayOf(object)
+    items: PropTypes.object.isRequired
 };

package/lib/components/ProductSort/productSort.js

@@ -185,6 +185,7 @@ const ProductSort = props => {
                     root_lowPriority: classes.sortButton
                 }}
                 onClick={handleSortClick}
+                onTouchStart={handleSortClick}
                 data-cy="ProductSort-sortButton"
                 onKeyDown={handleKeypress}
                 aria-label={result}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "11.6.0-alpha.13",
+  "version": "11.6.0-alpha.14",
   "publishConfig": {
     "access": "public"
   },
@@ -80,8 +80,8 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "14.5.1-alpha.13",
-    "@magento/pwa-buildpack": "11.5.4-alpha.13",
+    "@magento/peregrine": "14.5.1-alpha.14",
+    "@magento/pwa-buildpack": "11.5.4-alpha.14",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.43.0",
     "graphql": "~15.5.0",