@magento/venia-ui 9.4.0 → 9.5.0-alpha.1

package/lib/components/SearchBar/suggestedProduct.js

@@ -1,12 +1,12 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import { func, number, shape, string } from 'prop-types';
 import { Link } from 'react-router-dom';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import Price from '@magento/venia-ui/lib/components/Price';
 import { useStyle } from '../../classify';
 
 import Image from '../Image';
 import defaultClasses from './suggestedProduct.module.css';
+import { useSuggestedProduct } from '@magento/peregrine/lib/talons/SearchBar';
 
 const IMAGE_WIDTH = 60;
 
@@ -19,29 +19,21 @@ const SuggestedProduct = props => {
         onNavigate,
         price,
         price_range,
-        url_suffix
+        url_suffix,
+        sku
     } = props;
 
-    const handleClick = useCallback(() => {
-        if (typeof onNavigate === 'function') {
-            onNavigate();
-        }
-    }, [onNavigate]);
-
-    const uri = useMemo(() => resourceUrl(`/${url_key}${url_suffix || ''}`), [
+    const talonProps = useSuggestedProduct({
+        name,
+        price,
+        price_range,
+        onNavigate,
         url_key,
-        url_suffix
-    ]);
+        url_suffix,
+        sku
+    });
 
-    // fall back to deprecated field if price range is unavailable
-    const priceProps = {
-        currencyCode:
-            price_range?.maximum_price?.final_price?.currency ||
-            price.regularPrice.amount.currency,
-        value:
-            price_range?.maximum_price?.final_price?.value ||
-            price.regularPrice.amount.value
-    };
+    const { priceProps, handleClick, uri } = talonProps;
 
     return (
         <Link
@@ -83,6 +75,13 @@ SuggestedProduct.propTypes = {
             final_price: shape({
                 currency: string,
                 value: number
+            }),
+            regular_price: shape({
+                currency: string,
+                value: number
+            }),
+            discount: shape({
+                amount_off: number
             })
         })
     }),

package/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap

@@ -21,6 +21,8 @@ exports[`Search Page Component error view does not render when data is present 1
           id="searchPage.searchTermEmpty"
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -90,6 +92,7 @@ exports[`Search Page Component error view renders when data is not present and n
       />
     </div>
     <div
+      aria-live="polite"
       className="noResult"
     >
       <mock-FormattedMessage
@@ -133,6 +136,8 @@ exports[`Search Page Component filter button/modal does not render if there are
           id="searchPage.searchTermEmpty"
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -210,6 +215,8 @@ exports[`Search Page Component filter button/modal renders when there are filter
           id="searchPage.searchTermEmpty"
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -443,6 +450,7 @@ exports[`Search Page Component search results does not render if data returned h
       <SortedByContainerShimmer />
     </div>
     <div
+      aria-live="polite"
       className="noResult"
     >
       <mock-FormattedMessage
@@ -486,6 +494,8 @@ exports[`Search Page Component search results heading renders a generic message
           id="searchPage.searchTermEmpty"
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           1 items
@@ -594,6 +604,8 @@ exports[`Search Page Component search results heading renders a specific message
           }
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           1 items
@@ -764,6 +776,8 @@ exports[`Search Page Component sort button/container does not render if total co
           id="searchPage.searchTermEmpty"
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -774,6 +788,7 @@ exports[`Search Page Component sort button/container does not render if total co
       />
     </div>
     <div
+      aria-live="polite"
       className="noResult"
     >
       <mock-FormattedMessage
@@ -817,6 +832,8 @@ exports[`Search Page Component sort button/container renders when total count >
           id="searchPage.searchTermEmpty"
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           1 items
@@ -918,6 +935,8 @@ exports[`Search Page Component total count renders 0 items if data.products.tota
           id="searchPage.searchTermEmpty"
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -928,6 +947,7 @@ exports[`Search Page Component total count renders 0 items if data.products.tota
       />
     </div>
     <div
+      aria-live="polite"
       className="noResult"
     >
       <mock-FormattedMessage
@@ -971,6 +991,8 @@ exports[`Search Page Component total count renders results from data 1`] = `
           id="searchPage.searchTermEmpty"
         />
         <span
+          aria-busy="true"
+          aria-live="polite"
           className="totalPages"
         >
           1 items

package/lib/components/SearchPage/searchPage.js

@@ -55,7 +55,7 @@ const SearchPage = props => {
 
         if (!data && error) {
             return (
-                <div className={classes.noResult}>
+                <div aria-live="polite" className={classes.noResult}>
                     <FormattedMessage
                         id={'searchPage.noResult'}
                         defaultMessage={
@@ -72,7 +72,11 @@ const SearchPage = props => {
 
         if (data.products.items.length === 0) {
             return (
-                <div className={classes.noResult} data-cy="SearchPage-noResult">
+                <div
+                    aria-live="polite"
+                    className={classes.noResult}
+                    data-cy="SearchPage-noResult"
+                >
                     <FormattedMessage
                         id={'searchPage.noResultImportant'}
                         defaultMessage={'No results found!'}
@@ -169,7 +173,11 @@ const SearchPage = props => {
 
     const itemCountHeading =
         data && !loading ? (
-            <span className={classes.totalPages}>
+            <span
+                aria-live="polite"
+                aria-busy="true"
+                className={classes.totalPages}
+            >
                 {formatMessage(
                     {
                         id: 'searchPage.totalPages',

package/lib/components/SignIn/__tests__/signIn.spec.js

@@ -63,6 +63,10 @@ jest.mock('@magento/peregrine/lib/hooks/useAwaitQuery', () => {
     return { useAwaitQuery };
 });
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
 const props = {
     setDefaultUsername: jest.fn(),
     showCreateAccount: jest.fn(),

package/lib/components/SortedByContainer/sortedByContainer.module.css

@@ -2,8 +2,6 @@
     composes: pb-xs from global;
     composes: text-center from global;
     composes: text-sm from global;
-    composes: text-subtle from global;
-
     composes: lg_hidden from global;
 }
 

package/lib/components/StoreCodeRoute/__tests__/storeCodeRoute.spec.js

@@ -18,7 +18,7 @@ beforeEach(() => {
     global.AVAILABLE_STORE_VIEWS = [
         {
             base_currency_code: 'USD',
-            code: 'default',
+            store_code: 'default',
             default_display_currency_code: 'USD',
             id: 1,
             locale: 'en_US',
@@ -27,7 +27,7 @@ beforeEach(() => {
         },
         {
             base_currency_code: 'EUR',
-            code: 'french',
+            store_code: 'french',
             default_display_currency_code: 'EUR',
             id: 2,
             locale: 'fr_FR',

package/lib/components/StoreCodeRoute/storeCodeRoute.js

@@ -17,9 +17,9 @@ const StoreCodeRoute = () => {
     const storeSecureBaseMediaUrl = useMemo(() => ({}), []);
 
     AVAILABLE_STORE_VIEWS.forEach(store => {
-        storeCodes.push(store.code);
-        storeCurrencies[store.code] = store.default_display_currency_code;
-        storeSecureBaseMediaUrl[store.code] = store.secure_base_media_url;
+        storeCodes.push(store.store_code);
+        storeCurrencies[store.store_code] = store.default_display_currency_code;
+        storeSecureBaseMediaUrl[store.store_code] = store.secure_base_media_url;
     });
 
     // Sort by length (longest first) to avoid false hits ie "en" matching just

package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistPage.spec.js.snap

@@ -5,6 +5,7 @@ exports[`empty single wishlist 1`] = `
   className="root"
 >
   <h1
+    aria-live="polite"
     className="heading"
   >
     <mock-FormattedMessage
@@ -29,6 +30,7 @@ exports[`renders a single wishlist without visibility toggle 1`] = `
   className="root"
 >
   <h1
+    aria-live="polite"
     className="heading"
   >
     <mock-FormattedMessage
@@ -61,6 +63,7 @@ exports[`renders disabled feature error 1`] = `
   className="root"
 >
   <h1
+    aria-live="polite"
     className="heading"
   >
     <mock-FormattedMessage
@@ -91,6 +94,7 @@ exports[`renders general fetch error 1`] = `
   className="root"
 >
   <h1
+    aria-live="polite"
     className="heading"
   >
     <mock-FormattedMessage
@@ -203,6 +207,7 @@ exports[`renders wishlist data 1`] = `
   className="root"
 >
   <h1
+    aria-live="polite"
     className="heading"
   >
     <mock-FormattedMessage

package/lib/components/WishlistPage/wishlistPage.js

@@ -81,7 +81,11 @@ const WishlistPage = props => {
 
     return (
         <div className={classes.root} data-cy="Wishlist-root">
-            <h1 className={classes.heading} data-cy="WishlistPage-heading">
+            <h1
+                aria-live="polite"
+                className={classes.heading}
+                data-cy="WishlistPage-heading"
+            >
                 <FormattedMessage
                     values={{ count: wishlists.length }}
                     id={'wishlistPage.headingText'}

package/lib/index.module.css

@@ -123,3 +123,17 @@
     cursor: default;
     touch-action: none;
 }
+
+:global(.braintree-sheet__content--form
+        .braintree-form__field-group
+        .braintree-form__field
+        .braintree-form__hosted-field
+        input.braintree-form__raw-input) {
+    color: #8f8f8f !important;
+}
+
+:global(.braintree-sheet__content--form
+        .braintree-form__field-group
+        .braintree-form__descriptor) {
+    color: #757575 !important;
+}

package/lib/targets/__tests__/venia-ui-targets.spec.js

@@ -67,7 +67,7 @@ test('uses RichContentRenderers to inject a default strategy into RichContent',
                 AVAILABLE_STORE_VIEWS: `[
                 {
                     base_currency_code: 'USD',
-                    code: 'default',
+                    store_code: 'default',
                     default_display_currency_code: 'USD',
                     id: 1,
                     locale: 'en_US',
@@ -75,7 +75,7 @@ test('uses RichContentRenderers to inject a default strategy into RichContent',
                 },
                 {
                     base_currency_code: 'EUR',
-                    code: 'french',
+                    store_code: 'french',
                     default_display_currency_code: 'EUR',
                     id: 2,
                     locale: 'fr_FR',

package/lib/tokens.module.css

@@ -8,7 +8,7 @@
 
     /* color */
     --venia-global-color-blue-100: 194 200 255;
-    --venia-global-color-blue-400: 61 132 255;
+    --venia-global-color-blue-400: 71 139 255;
     /* --venia-global-color-blue-500: 51 109 255; */
     /* --venia-global-color-blue-600: 41 84 255; */
     --venia-global-color-blue-700: 31 57 255;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "9.4.0",
+  "version": "9.5.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -51,7 +51,7 @@
     "uuid": "~8.3.2"
   },
   "devDependencies": {
-    "@apollo/client": "~3.4.0",
+    "@apollo/client": "~3.5.0",
     "@babel/cli": "~7.2.3",
     "@babel/core": "~7.15.0",
     "@babel/plugin-proposal-class-properties": "~7.14.5",
@@ -78,10 +78,10 @@
     "redux": "~4.0.1"
   },
   "peerDependencies": {
-    "@apollo/client": "~3.4.0",
+    "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.2.1",
-    "@magento/peregrine": "~12.4.0",
-    "@magento/pwa-buildpack": "~11.3.0",
+    "@magento/peregrine": "12.5.0-alpha.1",
+    "@magento/pwa-buildpack": "11.4.0-alpha.1",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.16.0",
     "graphql": "~15.5.0",