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

package/lib/components/ProductFullDetail/__tests__/__snapshots__/productFullDetail.spec.js.snap

@@ -7,10 +7,18 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -32,13 +40,6 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -182,10 +183,18 @@ exports[`it does not render options if the product is not a ConfigurableProduct
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -207,13 +216,6 @@ exports[`it does not render options if the product is not a ConfigurableProduct
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -327,10 +329,18 @@ exports[`it renders an error for an invalid cart 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -352,13 +362,6 @@ exports[`it renders an error for an invalid cart 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -506,10 +509,18 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -531,13 +542,6 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -690,10 +694,18 @@ Array [
     onReset={[Function]}
     onSubmit={[Function]}
   >
+    <section
+      className="imageCarousel"
+    >
+      <ProductImageCarousel
+        images={Array []}
+      />
+    </section>
     <section
       className="title"
     >
       <h1
+        aria-live="polite"
         className="productName"
       >
         Flux Capacitor
@@ -715,13 +727,6 @@ Array [
         </span>
       </p>
     </section>
-    <section
-      className="imageCarousel"
-    >
-      <ProductImageCarousel
-        images={Array []}
-      />
-    </section>
     <FormError
       classes={
         Object {
@@ -866,10 +871,18 @@ exports[`it renders correctly 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -891,13 +904,6 @@ exports[`it renders correctly 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1041,10 +1047,18 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1066,13 +1080,6 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1216,10 +1223,18 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1241,13 +1256,6 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1391,10 +1399,18 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1416,13 +1432,6 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1566,10 +1575,18 @@ exports[`it renders form level errors 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1591,13 +1608,6 @@ exports[`it renders form level errors 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1745,10 +1755,18 @@ exports[`it renders message with unsupported product type 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1770,13 +1788,6 @@ exports[`it renders message with unsupported product type 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -1933,10 +1944,18 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -1958,13 +1977,6 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {
@@ -2078,10 +2090,18 @@ exports[`renders a WishlistButton with props 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
   <section
     className="title"
   >
     <h1
+      aria-live="polite"
       className="productName"
     >
       Flux Capacitor
@@ -2103,13 +2123,6 @@ exports[`renders a WishlistButton with props 1`] = `
       </span>
     </p>
   </section>
-  <section
-    className="imageCarousel"
-  >
-    <ProductImageCarousel
-      images={Array []}
-    />
-  </section>
   <FormError
     classes={
       Object {

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -224,8 +224,12 @@ const ProductFullDetail = props => {
                 data-cy="ProductFullDetail-root"
                 onSubmit={handleAddToCart}
             >
+                <section className={classes.imageCarousel}>
+                    <Carousel images={mediaGalleryEntries} />
+                </section>
                 <section className={classes.title}>
                     <h1
+                        aria-live="polite"
                         className={classes.productName}
                         data-cy="ProductFullDetail-productName"
                     >
@@ -242,9 +246,6 @@ const ProductFullDetail = props => {
                     </p>
                     {shortDescription}
                 </section>
-                <section className={classes.imageCarousel}>
-                    <Carousel images={mediaGalleryEntries} />
-                </section>
                 <FormError
                     classes={{
                         root: classes.formErrors

package/lib/components/ProductFullDetail/productFullDetail.module.css

@@ -21,6 +21,10 @@
         grid-template-columns: minmax(0, 1.5625fr) minmax(0, 1fr);
         grid-template-rows: repeat(5, min-content) 1fr [fold];
     }
+
+    .title {
+        grid-template-columns: 1fr max-content;
+    }
 }
 
 .section {
@@ -33,7 +37,7 @@
     composes: my-0 from global;
     composes: mx-sm from global;
     composes: px-0 from global;
-    composes: py-sm from global;
+    composes: py-xs from global;
 }
 
 .sectionTitle {
@@ -46,16 +50,14 @@
 }
 
 .title {
-    composes: gap-xs from global;
+    composes: section;
+    composes: gap-2 from global;
     composes: grid from global;
     composes: items-center from global;
     composes: leading-normal from global;
     composes: px-sm from global;
     composes: py-xs from global;
     grid-area: title;
-    grid-template-columns: 1fr max-content;
-
-    composes: lg_p-sm from global;
 }
 
 .productName {
@@ -68,6 +70,7 @@
 
 .productPrice {
     composes: block from global;
+    composes: mb-2 from global;
 }
 
 .imageCarousel {

package/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap

@@ -6,6 +6,7 @@ exports[`renders correctly when there are existing saved payments 1`] = `
 >
   Title
   <h1
+    aria-live="polite"
     className="heading"
   >
     Saved Payments
@@ -37,6 +38,7 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
 >
   Title
   <h1
+    aria-live="polite"
     className="heading"
   >
     Saved Payments

package/lib/components/SavedPaymentsPage/savedPaymentsPage.js

@@ -55,7 +55,9 @@ const SavedPaymentsPage = props => {
     return (
         <div className={classes.root}>
             <StoreTitle>{title}</StoreTitle>
-            <h1 className={classes.heading}>{title}</h1>
+            <h1 aria-live="polite" className={classes.heading}>
+                {title}
+            </h1>
             <div className={classes.content}>{savedPaymentElements}</div>
             <div className={classes.noPayments}>{noSavedPayments}</div>
         </div>

package/lib/components/SearchBar/__tests__/autocomplete.spec.js

@@ -1,6 +1,9 @@
 import React from 'react';
+import { InMemoryCache } from '@apollo/client';
+import { MockedProvider } from '@apollo/client/testing';
 import { Form } from 'informed';
 import { createTestInstance } from '@magento/peregrine';
+import typePolicies from '@magento/peregrine/lib/Apollo/policies';
 
 import Autocomplete from '../autocomplete';
 import { IntlProvider } from 'react-intl';
@@ -8,13 +11,23 @@ import { IntlProvider } from 'react-intl';
 jest.mock('../../../classify');
 jest.mock('../suggestions', () => () => null);
 
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
+
+const cache = new InMemoryCache({
+    typePolicies
+});
+
 test('renders correctly', () => {
     const { root } = createTestInstance(
-        <IntlProvider locale="en-US">
-            <Form>
-                <Autocomplete visible={false} />
-            </Form>
-        </IntlProvider>
+        <MockedProvider addTypename={true} cache={cache}>
+            <IntlProvider locale="en-US">
+                <Form>
+                    <Autocomplete visible={false} />
+                </Form>
+            </IntlProvider>
+        </MockedProvider>
     );
 
     expect(root.findByProps({ className: 'root_hidden' })).toBeTruthy();
@@ -24,11 +37,13 @@ test('renders correctly', () => {
 
 test('renders correctly when visible', () => {
     const { root } = createTestInstance(
-        <IntlProvider locale="en-US">
-            <Form>
-                <Autocomplete visible={true} />
-            </Form>
-        </IntlProvider>
+        <MockedProvider addTypename={true} cache={cache}>
+            <IntlProvider locale="en-US">
+                <Form>
+                    <Autocomplete visible={true} />
+                </Form>
+            </IntlProvider>
+        </MockedProvider>
     );
 
     expect(root.findByProps({ className: 'root_visible' })).toBeTruthy();

package/lib/components/SearchBar/__tests__/suggestedProduct.spec.js

@@ -7,6 +7,9 @@ jest.mock('react-router-dom', () => ({
     Link: ({ children }) => children
 }));
 jest.mock('@magento/peregrine/lib/util/makeUrl');
+jest.mock('@magento/peregrine/lib/context/eventing', () => ({
+    useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
+}));
 
 const defaultProps = {
     handleOnProductOpen: jest.fn(),

package/lib/components/SearchBar/autocomplete.js

@@ -26,6 +26,7 @@ const GET_AUTOCOMPLETE_RESULTS = gql`
             items {
                 id
                 uid
+                sku
                 name
                 small_image {
                     url
@@ -46,6 +47,9 @@ const GET_AUTOCOMPLETE_RESULTS = gql`
                             currency
                             value
                         }
+                        discount {
+                            amount_off
+                        }
                     }
                 }
             }

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;
 
@@ -17,25 +17,23 @@ const SuggestedProduct = props => {
         small_image,
         name,
         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
+    });
 
-    const priceProps = {
-        currencyCode: price_range?.maximum_price?.final_price?.currency,
-        value: price_range?.maximum_price?.final_price?.value
-    };
+    const { priceProps, handleClick, uri } = talonProps;
 
     return (
         <Link
@@ -72,6 +70,21 @@ SuggestedProduct.propTypes = {
             })
         })
     }).isRequired,
+    price_range: shape({
+        maximum_price: shape({
+            final_price: shape({
+                currency: string,
+                value: number
+            }),
+            regular_price: shape({
+                currency: string,
+                value: number
+            }),
+            discount: shape({
+                amount_off: number
+            })
+        })
+    }),
     classes: shape({
         root: string,
         image: string,