@magento/venia-ui 9.0.0 → 9.2.0-alpha.1

package/lib/components/Gallery/item.js

@@ -15,6 +15,8 @@ import defaultClasses from './item.module.css';
 import WishlistGalleryButton from '../Wishlist/AddToListButton';
 
 import AddToCartbutton from '../Gallery/addToCartButton';
+// eslint-disable-next-line no-unused-vars
+import Rating from '../Rating';
 
 // The placeholder image is 4:5, so we should make sure to size our product
 // images appropriately.
@@ -44,7 +46,9 @@ const GalleryItem = props => {
         return <GalleryItemShimmer classes={classes} />;
     }
 
-    const { name, price_range, small_image, url_key } = item;
+    // eslint-disable-next-line no-unused-vars
+    const { name, price_range, small_image, url_key, rating_summary } = item;
+
     const { url: smallImageURL } = small_image;
     const productLink = resourceUrl(`/${url_key}${productUrlSuffix || ''}`);
 
@@ -53,7 +57,7 @@ const GalleryItem = props => {
     ) : null;
 
     const addButton = isSupportedProductType ? (
-        <AddToCartbutton item={item} />
+        <AddToCartbutton item={item} urlSuffix={productUrlSuffix} />
     ) : (
         <div className={classes.unavailableContainer}>
             <Info />
@@ -66,6 +70,12 @@ const GalleryItem = props => {
         </div>
     );
 
+    // Hide the Rating component until it is updated with the new look and feel (PWA-2512).
+    const ratingAverage = null;
+    // const ratingAverage = rating_summary ? (
+    //     <Rating rating={rating_summary} />
+    // ) : null;
+
     return (
         <div className={classes.root} aria-live="polite" aria-busy="false">
             <Link
@@ -85,11 +95,13 @@ const GalleryItem = props => {
                     resource={smallImageURL}
                     widths={IMAGE_WIDTHS}
                 />
+                {ratingAverage}
             </Link>
             <Link
                 onClick={handleLinkClick}
                 to={productLink}
                 className={classes.name}
+                data-cy="GalleryItem-name"
             >
                 <span>{name}</span>
             </Link>
@@ -124,14 +136,14 @@ GalleryItem.propTypes = {
     }),
     item: shape({
         id: number.isRequired,
+        uid: string.isRequired,
         name: string.isRequired,
         small_image: shape({
             url: string.isRequired
         }),
         stock_status: string.isRequired,
-        type_id: string.isRequired,
+        __typename: string.isRequired,
         url_key: string.isRequired,
-        url_suffix: string,
         sku: string.isRequired,
         price_range: shape({
             maximum_price: shape({

package/lib/components/Gallery/item.module.css

@@ -7,6 +7,7 @@
 .images {
     display: grid;
     grid-template-areas: 'main';
+    position: relative;
 }
 
 .imageContainer {
@@ -38,7 +39,8 @@
 
 .actionsContainer {
     column-gap: 1rem;
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto;
     padding-left: 0.5rem;
 }
 

package/lib/components/Head/index.js

@@ -42,8 +42,9 @@ export const Title = props => {
 
 const STORE_NAME_QUERY = gql`
     query getStoreName {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             store_name
         }
     }

package/lib/components/Header/__tests__/header.spec.js

@@ -78,7 +78,7 @@ beforeAll(() => {
                 }
             ],
             storeConfig: {
-                id: 1,
+                store_code: 'default',
                 category_url_suffix: '.html'
             }
         }

package/lib/components/Header/accountTrigger.js

@@ -42,6 +42,7 @@ const AccountTrigger = props => {
                     })}
                     className={classes.trigger}
                     onClick={handleTriggerClick}
+                    data-cy="AccountTrigger-trigger"
                 >
                     <AccountChip
                         fallbackText={formatMessage({

package/lib/components/Header/cartTrigger.js

@@ -44,7 +44,9 @@ const CartTrigger = props => {
         : classes.triggerContainer;
 
     const maybeItemCounter = itemCount ? (
-        <span className={classes.counter}>{itemCountDisplay}</span>
+        <span className={classes.counter} data-cy="CartTrigger-counter">
+            {itemCountDisplay}
+        </span>
     ) : null;
 
     const cartTrigger = hideCartTrigger ? null : (
@@ -57,6 +59,7 @@ const CartTrigger = props => {
                     aria-label={buttonAriaLabel}
                     className={classes.trigger}
                     onClick={handleTriggerClick}
+                    data-cy="CartTrigger-trigger"
                 >
                     <Icon src={ShoppingCartIcon} />
                     {maybeItemCounter}

package/lib/components/Header/currencySwitcher.module.css

@@ -1,10 +1,10 @@
 .root {
+    composes: p-0 from global;
     align-items: center;
     display: grid;
     justify-items: end;
     margin: 0 auto;
     max-width: var(--venia-global-maxWidth);
-    padding: 0.5rem 1rem;
     position: relative;
 }
 

package/lib/components/Header/header.js

@@ -56,7 +56,7 @@ const Header = props => {
                     <CurrencySwitcher />
                 </div>
             </div>
-            <header className={rootClass}>
+            <header className={rootClass} data-cy="Header-root">
                 <div className={classes.toolbar}>
                     <div className={classes.primaryActions}>
                         <NavTrigger />

package/lib/components/Header/header.module.css

@@ -1,19 +1,45 @@
 .root {
-    background-color: rgb(var(--venia-global-color-gray-50));
-    box-shadow: 0 2px rgb(var(--venia-global-color-gray-100));
-    display: grid;
-    grid-auto-columns: 100%;
-    justify-items: center;
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    width: 100%;
-    z-index: 10;
-    --header-height: 5rem;
+    composes: auto-cols-fr from global;
+    composes: bg-white from global;
+    composes: border-b from global;
+    composes: border-neutral-l1 from global;
+    composes: grid from global;
+    composes: h-auto from global;
+    composes: justify-center from global;
+    composes: px-4 from global;
+    composes: top-0 from global;
+    composes: sticky from global;
+    composes: w-full from global;
+    composes: z-10 from global;
+}
+
+/* Large screen styles */
+.root {
+    composes: lg_px-8 from global;
+}
+
+.switchers {
+    composes: auto-cols-max from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-end from global;
+    composes: max-w-desktop from global;
+    composes: mx-auto from global;
+    composes: relative from global;
+    composes: w-full from global;
+    composes: z-11 from global;
+}
+
+.switchersContainer {
+    composes: bg-gray-100 from global;
+    composes: hidden from global;
+    composes: px-8 from global;
+    composes: w-full from global;
 }
 
+/* Large screen styles */
 .switchersContainer {
-    display: none;
+    composes: sm_block from global;
 }
 
 .open {
@@ -25,90 +51,84 @@
 }
 
 .toolbar {
-    z-index: 3;
-    align-content: center;
-    align-items: center;
-    display: grid;
-    grid-template-areas: 'primary title secondary';
-    grid-template-columns: 1fr auto 1fr;
-    grid-template-rows: 3rem;
-    justify-items: center;
-    max-width: var(--venia-global-maxWidth);
-    min-height: var(--venia-global-header-minHeight);
-    padding: 0 0.5rem;
-    width: 100%;
-}
-
-@media (min-width: 641px) {
-    .switchers {
-        display: grid;
-        grid-auto-flow: column;
-        grid-auto-columns: max-content;
-        justify-content: flex-end;
-        max-width: var(--venia-global-maxWidth);
-        width: 100%;
-        position: relative;
-        z-index: 11;
-        margin: 0 auto;
-    }
-
-    .switchersContainer {
-        display: block;
-        width: 100%;
-        background-color: rgb(var(--venia-global-color-gray-100));
-    }
-
-    .toolbar {
-        grid-template-areas: 'primary title secondary';
-        grid-template-columns: auto auto 1fr;
-        min-height: var(--venia-global-header-minHeight);
-        padding: 0 1rem;
-    }
+    composes: border-0 from global;
+    composes: content-center from global;
+    composes: gap-x-4 from global;
+    composes: grid from global;
+    composes: grid-cols-3 from global;
+    composes: grid-rows-header from global;
+    composes: h-14 from global;
+    composes: items-center from global;
+    composes: justify-self-center from global;
+    composes: max-w-desktop from global;
+    composes: min-height-header from global;
+    composes: w-full from global;
+    composes: z-3 from global;
+}
+
+/* Large screen styles */
+.toolbar {
+    composes: lg_h-20 from global;
+    composes: lg_gap-x-8 from global;
+    composes: lg_grid-cols-12 from global;
+    composes: lg_min-height-header from global;
 }
 
 .logo {
-    grid-area: title;
+    composes: h-full from global;
 }
 
 .primaryActions {
-    grid-area: primary;
-    justify-self: start;
-    display: grid;
-    grid-auto-flow: column;
-    align-items: center;
+    composes: col-start-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-self-start from global;
+    composes: row-start-1 from global;
+    composes: self-center from global;
+}
+
+.logoContainer {
+    composes: col-start-2 from global;
+    composes: justify-self-center from global;
+    composes: my-4 from global;
+}
+
+/* Large screen styles */
+.logoContainer {
+    composes: lg_col-end-3 from global;
+    composes: lg_col-start-1 from global;
+    composes: lg_justify-self-start from global;
+    composes: lg_mr-8 from global;
+    composes: lg_row-start-1 from global;
 }
 
 .secondaryActions {
-    grid-area: secondary;
-    width: max-content;
-    display: grid;
-    grid-auto-flow: column;
-    justify-items: end;
-    align-items: center;
-    justify-self: end;
-}
-
-@media (min-width: 641px) {
-    .logoContainer {
-        grid-column: 2/ 3;
-        grid-row: 1 / 1;
-    }
+    composes: col-start-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-end from global;
+    composes: justify-self-end from global;
+    composes: w-max from global;
+}
 
-    .secondaryActions {
-        column-gap: 1rem;
-    }
+/* Large screen styles */
+.secondaryActions {
+    composes: lg_col-end-13 from global;
+    composes: lg_col-start-10 from global;
+    composes: lg_gap-x-4 from global;
 }
 
 .searchFallback {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 0.5rem;
-    padding: 0 1rem;
+    composes: flex from global;
+    composes: justify-center from global;
+    composes: mb-2 from global;
+    composes: px-4 from global;
 }
 
 .input {
     composes: input from '../TextInput/textInput.module.css';
-    max-width: 24rem;
+    composes: max-w-sm from global;
 }
 
 .loader,
@@ -125,10 +145,10 @@
 }
 
 .loader {
+    composes: relative from global;
     color: rgb(var(--venia-global-color-gray-dark));
     font-size: var(--dot-font-size);
     margin: var(--dot-shadow-offset) auto 0;
-    position: relative;
     transform: translateZ(0);
     animation-delay: -0.16s;
 }
@@ -151,22 +171,6 @@
     left: 3.5em;
 }
 
-@media (min-width: 1024px) {
-    .logoContainer {
-        grid-column: 1 / 2;
-        grid-row: 1 / 1;
-    }
-
-    .secondaryActions {
-        grid-column: 4 / 5;
-        grid-row: 1 / 1;
-    }
-
-    .toolbar {
-        grid-template-columns: 0.5fr 0.5fr 3fr 1fr;
-    }
-}
-
 @keyframes pulse {
     0%,
     80%,

package/lib/components/Header/navTrigger.js

@@ -19,6 +19,7 @@ const NavigationTrigger = props => {
     return (
         <button
             className={classes.root}
+            data-cy="Header-NavigationTrigger-root"
             aria-label={formatMessage({
                 id: 'navigationTrigger.ariaLabel',
                 defaultMessage: 'Toggle navigation panel'

package/lib/components/Header/searchTrigger.js

@@ -30,6 +30,7 @@ const SearchTrigger = React.forwardRef((props, ref) => {
     return (
         <button
             className={searchClass}
+            data-cy="SearchTrigger-button"
             aria-label={searchText}
             onClick={handleClick}
             ref={ref}

package/lib/components/LegacyMiniCart/cartOptions.gql.js

@@ -2,9 +2,10 @@ import { gql } from '@apollo/client';
 import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
 
 export const REMOVE_ITEM_MUTATION = gql`
-    mutation RemoveItemForOptions($cartId: String!, $itemId: Int!) {
-        removeItemFromCart(input: { cart_id: $cartId, cart_item_id: $itemId })
-            @connection(key: "removeItemFromCart") {
+    mutation RemoveItemForOptions($cartId: String!, $itemId: ID!) {
+        removeItemFromCart(
+            input: { cart_id: $cartId, cart_item_uid: $itemId }
+        ) {
             cart {
                 id
                 # If this mutation causes "free" to become available we need to know.
@@ -22,15 +23,15 @@ export const REMOVE_ITEM_MUTATION = gql`
 export const UPDATE_ITEM_MUTATION = gql`
     mutation updateItemInCart(
         $cartId: String!
-        $itemId: Int!
+        $itemId: ID!
         $quantity: Float!
     ) {
         updateCartItems(
             input: {
                 cart_id: $cartId
-                cart_items: [{ cart_item_id: $itemId, quantity: $quantity }]
+                cart_items: [{ cart_item_uid: $itemId, quantity: $quantity }]
             }
-        ) @connection(key: "updateCartItems") {
+        ) {
             cart {
                 id
                 # If this mutation causes "free" to become available we need to know.

package/lib/components/LegacyMiniCart/cartOptions.js

@@ -154,7 +154,7 @@ export const GET_CART_DETAILS_QUERY = gql`
         cart(cart_id: $cartId) {
             id
             items {
-                id
+                uid
                 prices {
                     price {
                         value

package/lib/components/LegacyMiniCart/editFormFragment.gql.js

@@ -1,17 +1,20 @@
 import { gql } from '@apollo/client';
 
 export const EditFormFragment = gql`
+    # eslint-disable-next-line @graphql-eslint/require-id-when-available
     fragment EditFormFragment on ProductInterface {
-        id
+        uid
         name
         sku
         url_key
         __typename
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         ... on ConfigurableProduct {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             configurable_options {
                 attribute_code
                 attribute_id
-                id
+                uid
                 label
                 values {
                     default_label
@@ -32,8 +35,9 @@ export const EditFormFragment = gql`
                     code
                     value_index
                 }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
+                    uid
                     media_gallery_entries {
                         id
                         disabled

package/lib/components/LegacyMiniCart/kebab.js

@@ -18,6 +18,7 @@ const Kebab = props => {
         <div className={classes.root}>
             <button
                 className={classes.kebab}
+                data-cy="Kebab-button"
                 onClick={handleKebabClick}
                 ref={kebabRef}
             >

package/lib/components/LegacyMiniCart/product.js

@@ -131,7 +131,7 @@ export const GET_CART_DETAILS_QUERY = gql`
         cart(cart_id: $cartId) {
             id
             items {
-                id
+                uid
                 prices {
                     price {
                         value

package/lib/components/LegacyMiniCart/productOptions.js

@@ -19,7 +19,12 @@ const ProductOptions = props => {
                         <dt className={classes.optionName}>
                             {optionLabelString}
                         </dt>
-                        <dd className={classes.optionValue}>{value_label}</dd>
+                        <dd
+                            className={classes.optionValue}
+                            data-cy="ProductOptions-optionValue"
+                        >
+                            {value_label}
+                        </dd>
                     </div>
                 );
             }),

package/lib/components/LegacyMiniCart/section.js

@@ -17,9 +17,16 @@ const icons = new Map()
     .set('Trash', TrashIcon);
 
 const Section = props => {
-    const { icon, isFilled, onClick, text } = props;
-
-    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        icon,
+        isFilled,
+        onClick,
+        text,
+        classes: propClasses,
+        ...restProps
+    } = props;
+
+    const classes = useStyle(defaultClasses, propClasses);
     const iconClasses = { root: classes.icon };
     const iconSrc = icons.get(icon);
 
@@ -28,8 +35,11 @@ const Section = props => {
     }
 
     return (
-        <li className={classes.menuItem}>
-            <button onMouseDown={onClick}>
+        <li className={classes.menuItem} {...restProps}>
+            <button
+                onMouseDown={onClick}
+                data-cy="LegacyMiniCart-Section-button"
+            >
                 <Icon classes={iconClasses} size={16} src={iconSrc} />
                 <span className={classes.text}>{text}</span>
             </button>

package/lib/components/Link/link.js

@@ -10,11 +10,13 @@ const removeProps = (props, exclude) => {
 };
 
 /**
- * Use for links to pages within your app.
- *
  * @kind functional component
- * @param {props} props React component props
- * @returns {RouterLink} the `Link` component from `react-router-dom`. We add a `ref` to prefetch pages when the link enters the viewport.
+ *
+ * @property {bool} prefetchType `true` activates prefetching the target page when the link becomes visible in the viewport.
+ * @property {string} to From [react-router-dom Link](https://knowbody.github.io/react-router-docs/api/Link.html). The absolute path to the target page of the link. Uses the `to` prop from the `react-router-dom Link`.
+ *
+ * @example <caption>Basic usage</caption>
+ * <Link prefetchType={true} to="/about/">About Us</Link>
  */
 const Link = props => {
     const talonProps = useLink(props);

package/lib/components/Mask/mask.js

@@ -13,11 +13,11 @@ import defaultClasses from './mask.module.css';
  *
  */
 const Mask = props => {
-    const { dismiss, isActive } = props;
-    const classes = useStyle(defaultClasses, props.classes);
+    const { dismiss, isActive, classes: propClasses, ...restProps } = props;
+    const classes = useStyle(defaultClasses, propClasses);
     const className = isActive ? classes.root_active : classes.root;
 
-    return <button className={className} onClick={dismiss} />;
+    return <button className={className} onClick={dismiss} {...restProps} />;
 };
 
 export default Mask;

package/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js

@@ -29,6 +29,7 @@ jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenuItem', () => ({
         return {
             isFocused: false,
             isActive: false,
+            handleMenuItemFocus: jest.fn(),
             handleCloseSubMenu: jest.fn(),
             isMenuActive: false,
             handleKeyDown: mockHandleKeyDown

package/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenu.spec.js.snap

@@ -14,6 +14,9 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
 >
   <div
     className="megaMenuItem"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
   >
     <a
       aria-label="Category: Women. 1 sub-categories"
@@ -76,6 +79,9 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
   </div>
   <div
     className="megaMenuItem"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
   >
     <a
       className="megaMenuLink"
@@ -88,6 +94,9 @@ exports[`#MegaMenu renders menu if in viewport 1`] = `
   </div>
   <div
     className="megaMenuItem"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchStart={[Function]}
   >
     <a
       className="megaMenuLink"

package/lib/components/MegaMenu/__tests__/__snapshots__/MegaMenuItem.spec.js.snap

@@ -3,6 +3,9 @@
 exports[`Mega menu item renders correctly it does not render submenu when item does not have children 1`] = `
 <div
   className="megaMenuItem"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchStart={[Function]}
 >
   <mock-Submenu
     categoryUrlSuffix=".html"
@@ -34,6 +37,9 @@ exports[`Mega menu item renders correctly it does not render submenu when item d
 exports[`Mega menu item renders correctly it renders correctly 1`] = `
 <div
   className="megaMenuItem"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchStart={[Function]}
 >
   <mock-Submenu
     categoryUrlSuffix=".html"