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

package/lib/components/Gallery/__tests__/gallery.shimmer.spec.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { mockShimmer } from '../item.shimmer';
+import ShimmerComponent from '../gallery.shimmer';
+
+const mockItemClasses = {
+    test: 'test-class'
+};
+
+const mockItems = Array.from({ length: 8 }).fill(null);
+
+jest.mock('../item.shimmer', () => {
+    const mockedShimmer = jest.fn(() => null);
+
+    return {
+        __esModule: true,
+        default: mockedShimmer,
+        mockShimmer: mockedShimmer
+    };
+});
+
+jest.mock('../../../classify', () => ({
+    useStyle: (...classes) => Object.assign({}, ...classes)
+}));
+
+let passedProps = {};
+
+const givenDefaultProps = () => {
+    passedProps = {};
+};
+
+const givenMultipleItems = () => {
+    passedProps = {
+        items: mockItems
+    };
+};
+
+const givenClassesAndItems = () => {
+    givenMultipleItems();
+
+    passedProps = {
+        ...passedProps,
+        itemProps: {
+            classes: mockItemClasses
+        }
+    };
+};
+
+describe('#Gallery Shimmer', () => {
+    beforeEach(() => {
+        mockShimmer.mockClear();
+
+        givenDefaultProps();
+    });
+
+    test('renders Item Shimmer component for each item', () => {
+        givenMultipleItems();
+        createTestInstance(<ShimmerComponent {...passedProps} />);
+
+        expect(mockItems.length).toBeGreaterThan(0);
+        expect(mockShimmer).toHaveBeenCalledTimes(mockItems.length);
+    });
+
+    test('passes merged class to Shimmer component', () => {
+        givenClassesAndItems();
+        createTestInstance(<ShimmerComponent {...passedProps} />);
+
+        expect(mockShimmer).toHaveBeenCalledWith(
+            expect.objectContaining({
+                classes: expect.objectContaining({ ...mockItemClasses })
+            }),
+            expect.any(Object)
+        );
+    });
+});

package/lib/components/Gallery/__tests__/gallery.spec.js

@@ -22,6 +22,9 @@ jest.mock('@magento/peregrine/lib/talons/Gallery/useGallery', () => ({
     useGallery: () => ({ storeConfig: jest.fn().mockName('storeConfig') })
 }));
 jest.mock('../../../classify');
+jest.mock('../addToCartButton', () => props => (
+    <mock-AddToCartButton {...props} />
+));
 
 const classes = { root: 'foo' };
 const items = [
@@ -31,15 +34,19 @@ const items = [
         small_image: {
             url: '/test/product/1.png'
         },
-        price: {
-            regularPrice: {
-                amount: {
+        stock_status: 'IN_STOCK',
+        type_id: 'simple',
+        __typename: 'SimpleProduct',
+        price_range: {
+            maximum_price: {
+                regular_price: {
                     value: 100,
                     currency: 'USD'
                 }
             }
         },
-        url_key: 'test-product1'
+        url_key: 'test-product1',
+        sku: 'sku-test-product1'
     },
     {
         id: 2,
@@ -47,15 +54,19 @@ const items = [
         small_image: {
             url: '/test/product/2.png'
         },
-        price: {
-            regularPrice: {
-                amount: {
+        stock_status: 'OUT_OF_STOCK',
+        type_id: 'simple',
+        __typename: 'SimpleProduct',
+        price_range: {
+            maximum_price: {
+                regular_price: {
                     value: 100,
                     currency: 'USD'
                 }
             }
         },
-        url_key: 'test-product2'
+        url_key: 'test-product2',
+        sku: 'sku-test-product2'
     }
 ];
 

package/lib/components/Gallery/__tests__/item.spec.js

@@ -16,6 +16,9 @@ jest.mock('@magento/peregrine/lib/talons/Image/useImage', () => {
     };
 });
 jest.mock('../../../classify');
+jest.mock('../../Gallery/addToCartButton', () => props => (
+    <mock-AddToCartButton {...props} />
+));
 
 const classes = {
     image: 'a',
@@ -38,11 +41,15 @@ const validItem = {
     small_image: {
         url: '/foo/bar/pic.png'
     },
+    stock_status: 'IN_STOCK',
+    type_id: 'simple',
+    __typename: 'SimpleProduct',
     url_key: 'strive-shoulder-pack',
     url_suffix: '.html',
-    price: {
-        regularPrice: {
-            amount: {
+    sku: 'sku-123',
+    price_range: {
+        maximum_price: {
+            regular_price: {
                 value: 21,
                 currency: 'USD'
             }
@@ -50,12 +57,19 @@ const validItem = {
     }
 };
 
+const defaultProps = {
+    classes,
+    storeConfig: {
+        product_url_suffix: '.html'
+    }
+};
+
 /**
  * STATE 0: awaiting item data
  * `item` is `null` or `undefined`
  */
 test('renders a placeholder item while awaiting item', () => {
-    const wrapper = createTestInstance(<Item classes={classes} />);
+    const wrapper = createTestInstance(<Item {...defaultProps} />);
     expect(wrapper.toJSON()).toMatchSnapshot();
 });
 
@@ -66,7 +80,7 @@ test('renders a placeholder item while awaiting item', () => {
 test('renders correctly with valid item data', () => {
     const wrapper = createTestInstance(
         <MemoryRouter>
-            <Item classes={classes} item={validItem} />
+            <Item item={validItem} {...defaultProps} />
         </MemoryRouter>
     );
     expect(wrapper.toJSON()).toMatchSnapshot();

package/lib/components/Gallery/addToCartButton.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { string, number, shape } from 'prop-types';
+import { useAddToCartButton } from '@magento/peregrine/lib/talons/Gallery/useAddToCartButton';
+import { ShoppingBag, XSquare } from 'react-feather';
+import Icon from '../Icon';
+import Button from '../Button';
+import { mergeClasses } from '../../classify';
+import defaultClasses from './addToCartButton.module.css';
+
+const AddToCartIcon = (
+    <Icon
+        classes={{ icon: defaultClasses.icon }}
+        src={ShoppingBag}
+        attrs={{ width: 16 }}
+    />
+);
+const OutOfStockIcon = (
+    <Icon
+        classes={{ icon: defaultClasses.icon }}
+        src={XSquare}
+        attrs={{ width: 16 }}
+    />
+);
+
+const AddToCartButton = props => {
+    const talonProps = useAddToCartButton({
+        item: props.item
+    });
+    const { handleAddToCart, isDisabled, isInStock } = talonProps;
+    const { formatMessage } = useIntl();
+
+    const classes = mergeClasses(defaultClasses, props.classes);
+
+    const buttonInStock = (
+        <Button
+            aria-label={formatMessage({
+                id: 'addToCartButton.addItemToCartAriaLabel',
+                defaultMessage: 'Add to Cart'
+            })}
+            className={classes.root}
+            disabled={isDisabled}
+            onPress={handleAddToCart}
+            priority="high"
+            type="button"
+        >
+            {AddToCartIcon}
+            <span className={classes.text}>
+                <FormattedMessage
+                    id="addToCartButton.addItemToCart"
+                    defaultMessage="ADD TO CART"
+                />
+            </span>
+        </Button>
+    );
+
+    const buttonOutOfStock = (
+        <Button
+            aria-label={formatMessage({
+                id: 'addToCartButton.itemOutOfStockAriaLabel',
+                defaultMessage: 'Out of Stock'
+            })}
+            className={classes.root}
+            disabled={isDisabled}
+            onPress={handleAddToCart}
+            priority="high"
+            type="button"
+        >
+            {OutOfStockIcon}
+            <span className={classes.text}>
+                <FormattedMessage
+                    id="addToCartButton.itemOutOfStock"
+                    defaultMessage="OUT OF STOCK"
+                />
+            </span>
+        </Button>
+    );
+
+    return isInStock ? buttonInStock : buttonOutOfStock;
+};
+
+export default AddToCartButton;
+
+AddToCartButton.propTypes = {
+    classes: shape({
+        root: string,
+        root_selected: string
+    }),
+    item: shape({
+        id: number,
+        name: string,
+        small_image: shape({
+            url: string
+        }),
+        stock_status: string.isRequired,
+        type_id: string.isRequired,
+        url_key: string.isRequired,
+        url_suffix: string,
+        sku: string.isRequired,
+        price: shape({
+            regularPrice: shape({
+                amount: shape({
+                    value: number,
+                    currency: string
+                })
+            })
+        })
+    })
+};

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

@@ -0,0 +1,36 @@
+.root {
+    composes: root_highPriority from '../Button/button.module.css';
+    margin-left: -0.5rem;
+    min-height: 2rem;
+    padding: 0 0.5rem;
+    align-self: center;
+}
+
+.icon {
+    display: none;
+    stroke: #fff;
+}
+
+.text {
+    display: inline;
+}
+
+@media (max-width: 640px) {
+    .root {
+        min-width: 8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .root {
+        min-width: 6.125rem;
+    }
+
+    .icon {
+        display: inline;
+    }
+
+    .text {
+        display: none;
+    }
+}

package/lib/components/Gallery/gallery.js

@@ -3,7 +3,8 @@ import { string, shape, array } from 'prop-types';
 
 import { useStyle } from '../../classify';
 import GalleryItem from './item';
-import defaultClasses from './gallery.css';
+import GalleryItemShimmer from './item.shimmer';
+import defaultClasses from './gallery.module.css';
 import { useGallery } from '@magento/peregrine/lib/talons/Gallery/useGallery';
 
 /**
@@ -22,7 +23,7 @@ const Gallery = props => {
         () =>
             items.map((item, index) => {
                 if (item === null) {
-                    return <GalleryItem key={index} />;
+                    return <GalleryItemShimmer key={index} />;
                 }
                 return (
                     <GalleryItem
@@ -36,7 +37,7 @@ const Gallery = props => {
     );
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} aria-live="polite" aria-busy="false">
             <div className={classes.items}>{galleryItems}</div>
         </div>
     );

package/lib/components/Gallery/gallery.shimmer.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { shape, string, array, object } from 'prop-types';
+import { useStyle } from '../../classify';
+
+import GalleryItemShimmer from './item.shimmer';
+import defaultClasses from './gallery.module.css';
+
+const GalleryShimmer = props => {
+    const { items, itemProps } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <div className={classes.items}>
+                {items.map((item, index) => (
+                    <GalleryItemShimmer key={index} {...itemProps} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+GalleryShimmer.defaultProps = {
+    items: [],
+    itemProps: {}
+};
+
+GalleryShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        items: string
+    }),
+    items: array,
+    itemProps: shape({
+        classes: object
+    })
+};
+
+export default GalleryShimmer;

package/lib/components/Gallery/index.js

@@ -1 +1,3 @@
 export { default } from './gallery';
+export { default as GalleryShimmer } from './gallery.shimmer';
+export { default as GalleryItemShimmer } from './item.shimmer';

package/lib/components/Gallery/item.js

@@ -1,17 +1,21 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Info } from 'react-feather';
 import { string, number, shape } from 'prop-types';
 import { Link } from 'react-router-dom';
 import Price from '@magento/venia-ui/lib/components/Price';
 import { UNCONSTRAINED_SIZE_KEY } from '@magento/peregrine/lib/talons/Image/useImage';
 import { useGalleryItem } from '@magento/peregrine/lib/talons/Gallery/useGalleryItem';
-import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 import { useStyle } from '../../classify';
 import Image from '../Image';
-import defaultClasses from './item.css';
+import GalleryItemShimmer from './item.shimmer';
+import defaultClasses from './item.module.css';
 import WishlistGalleryButton from '../Wishlist/AddToListButton';
 
+import AddToCartbutton from '../Gallery/addToCartButton';
+
 // The placeholder image is 4:5, so we should make sure to size our product
 // images appropriately.
 const IMAGE_WIDTH = 300;
@@ -22,44 +26,48 @@ const IMAGE_WIDTHS = new Map()
     .set(640, IMAGE_WIDTH)
     .set(UNCONSTRAINED_SIZE_KEY, 840);
 
-const ItemPlaceholder = ({ classes }) => (
-    <div className={classes.root_pending}>
-        <div className={classes.images_pending}>
-            <Image
-                alt="Placeholder for gallery item image"
-                classes={{
-                    image: classes.image_pending,
-                    root: classes.imageContainer
-                }}
-                src={transparentPlaceholder}
-            />
-        </div>
-        <div className={classes.name_pending} />
-        <div className={classes.price_pending} />
-    </div>
-);
-
 const GalleryItem = props => {
-    const { handleLinkClick, item, wishlistButtonProps } = useGalleryItem(
-        props
-    );
+    const {
+        handleLinkClick,
+        item,
+        wishlistButtonProps,
+        isSupportedProductType
+    } = useGalleryItem(props);
+
+    const { storeConfig } = props;
+
+    const productUrlSuffix = storeConfig && storeConfig.product_url_suffix;
 
     const classes = useStyle(defaultClasses, props.classes);
 
     if (!item) {
-        return <ItemPlaceholder classes={classes} />;
+        return <GalleryItemShimmer classes={classes} />;
     }
 
-    const { name, price, small_image, url_key, url_suffix } = item;
+    const { name, price_range, small_image, url_key } = item;
     const { url: smallImageURL } = small_image;
-    const productLink = resourceUrl(`/${url_key}${url_suffix || ''}`);
+    const productLink = resourceUrl(`/${url_key}${productUrlSuffix || ''}`);
 
     const wishlistButton = wishlistButtonProps ? (
         <WishlistGalleryButton {...wishlistButtonProps} />
     ) : null;
 
+    const addButton = isSupportedProductType ? (
+        <AddToCartbutton item={item} />
+    ) : (
+        <div className={classes.unavailableContainer}>
+            <Info />
+            <p>
+                <FormattedMessage
+                    id={'galleryItem.unavailableProduct'}
+                    defaultMessage={'Currently unavailable for purchase.'}
+                />
+            </p>
+        </div>
+    );
+
     return (
-        <div className={classes.root}>
+        <div className={classes.root} aria-live="polite" aria-busy="false">
             <Link
                 onClick={handleLinkClick}
                 to={productLink}
@@ -69,6 +77,8 @@ const GalleryItem = props => {
                     alt={name}
                     classes={{
                         image: classes.image,
+                        loaded: classes.imageLoaded,
+                        notLoaded: classes.imageNotLoaded,
                         root: classes.imageContainer
                     }}
                     height={IMAGE_HEIGHT}
@@ -85,11 +95,18 @@ const GalleryItem = props => {
             </Link>
             <div className={classes.price}>
                 <Price
-                    value={price.regularPrice.amount.value}
-                    currencyCode={price.regularPrice.amount.currency}
+                    value={price_range.maximum_price.regular_price.value}
+                    currencyCode={
+                        price_range.maximum_price.regular_price.currency
+                    }
                 />
             </div>
-            <div className={classes.actionsContainer}>{wishlistButton}</div>
+
+            <div className={classes.actionsContainer}>
+                {' '}
+                {addButton}
+                {wishlistButton}
+            </div>
         </div>
     );
 };
@@ -97,17 +114,13 @@ const GalleryItem = props => {
 GalleryItem.propTypes = {
     classes: shape({
         image: string,
+        imageLoaded: string,
+        imageNotLoaded: string,
         imageContainer: string,
-        imagePlaceholder: string,
-        image_pending: string,
         images: string,
-        images_pending: string,
         name: string,
-        name_pending: string,
         price: string,
-        price_pending: string,
-        root: string,
-        root_pending: string
+        root: string
     }),
     item: shape({
         id: number.isRequired,
@@ -115,10 +128,14 @@ GalleryItem.propTypes = {
         small_image: shape({
             url: string.isRequired
         }),
+        stock_status: string.isRequired,
+        type_id: string.isRequired,
         url_key: string.isRequired,
-        price: shape({
-            regularPrice: shape({
-                amount: shape({
+        url_suffix: string,
+        sku: string.isRequired,
+        price_range: shape({
+            maximum_price: shape({
+                regular_price: shape({
                     value: number.isRequired,
                     currency: string.isRequired
                 }).isRequired
@@ -126,7 +143,8 @@ GalleryItem.propTypes = {
         }).isRequired
     }),
     storeConfig: shape({
-        magento_wishlist_general_is_enabled: string.isRequired
+        magento_wishlist_general_is_enabled: string.isRequired,
+        product_url_suffix: string.isRequired
     })
 };
 

package/lib/components/Gallery/{item.css → item.module.css}

@@ -17,23 +17,29 @@
     display: block;
     height: 100%;
     object-fit: contain;
-    opacity: 1;
-    transition-duration: 512ms;
-    transition-property: opacity, visibility;
-    transition-timing-function: ease-out;
-    visibility: visible;
+    transition: opacity 512ms ease-out;
     width: 100%;
 }
 
+.imageLoaded {
+    composes: loaded from '../Image/image.module.css';
+    opacity: 1;
+}
+
+.imageNotLoaded {
+    composes: notLoaded from '../Image/image.module.css';
+    opacity: 0;
+}
+
 .imagePlaceholder {
     composes: image;
     background-color: rgb(var(--venia-global-color-gray));
 }
 
 .actionsContainer {
-    column-gap: 0.5rem;
+    column-gap: 1rem;
     display: flex;
-    justify-content: space-between;
+    padding-left: 0.5rem;
 }
 
 .actionsContainer:empty {
@@ -50,28 +56,16 @@
     min-height: 1rem;
 }
 
-/* state: pending */
-
-.root_pending {
-    composes: root;
-}
-
-.image_pending {
-    composes: image;
-    background-color: rgb(var(--venia-global-color-gray));
-}
-
-.images_pending {
-    composes: images;
-}
-
-.name_pending {
-    composes: name;
+.unavailableContainer {
+    align-items: center;
     background-color: rgb(var(--venia-global-color-gray));
-}
-
-.price_pending {
-    composes: price;
-    background-color: rgb(var(--venia-global-color-gray));
-    width: 3rem;
+    color: rgb(var(--venia-global-color-gray-700));
+    column-gap: 0.5rem;
+    display: grid;
+    font-style: italic;
+    grid-auto-flow: column;
+    justify-content: start;
+    padding: 0.75rem;
+    width: 100%;
+    font-size: var(--venia-global-fontSize-100);
 }