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

package/lib/components/ProductImageCarousel/carousel.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { arrayOf, bool, number, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
 import {
     ChevronLeft as ChevronLeftIcon,
     ChevronRight as ChevronRightIcon
@@ -9,9 +10,10 @@ import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
 import { useProductImageCarousel } from '@magento/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel';
 
 import { useStyle } from '../../classify';
+import AriaButton from '../AriaButton';
 import Icon from '../Icon';
 import Image from '../Image';
-import defaultClasses from './carousel.css';
+import defaultClasses from './carousel.module.css';
 import Thumbnail from './thumbnail';
 
 const IMAGE_WIDTH = 640;
@@ -31,7 +33,7 @@ const IMAGE_WIDTH = 640;
  */
 const ProductImageCarousel = props => {
     const { images } = props;
-
+    const { formatMessage } = useIntl();
     const talonProps = useProductImageCarousel({
         images,
         imageWidth: IMAGE_WIDTH
@@ -52,7 +54,7 @@ const ProductImageCarousel = props => {
         () =>
             sortedImages.map((item, index) => (
                 <Thumbnail
-                    key={`${item.file}--${item.label}`}
+                    key={item.uid}
                     item={item}
                     itemIndex={index}
                     isActive={activeItemIndex === index}
@@ -90,13 +92,24 @@ const ProductImageCarousel = props => {
         );
     }
 
+    const previousButton = formatMessage({
+        id: 'productImageCarousel.previousButtonAriaLabel',
+        defaultMessage: 'Previous Image'
+    });
+
+    const nextButton = formatMessage({
+        id: 'productImageCarousel.nextButtonAriaLabel',
+        defaultMessage: 'Next Image'
+    });
+
     const chevronClasses = { root: classes.chevron };
     return (
         <div className={classes.root}>
             <div className={classes.carouselContainer}>
-                <button
+                <AriaButton
                     className={classes.previousButton}
-                    onClick={handlePrevious}
+                    onPress={handlePrevious}
+                    aria-label={previousButton}
                     type="button"
                 >
                     <Icon
@@ -104,11 +117,12 @@ const ProductImageCarousel = props => {
                         src={ChevronLeftIcon}
                         size={40}
                     />
-                </button>
+                </AriaButton>
                 {image}
-                <button
+                <AriaButton
                     className={classes.nextButton}
-                    onClick={handleNext}
+                    onPress={handleNext}
+                    aria-label={nextButton}
                     type="button"
                 >
                     <Icon
@@ -116,7 +130,7 @@ const ProductImageCarousel = props => {
                         src={ChevronRightIcon}
                         size={40}
                     />
-                </button>
+                </AriaButton>
             </div>
             <div className={classes.thumbnailList}>{thumbnails}</div>
         </div>
@@ -136,10 +150,11 @@ const ProductImageCarousel = props => {
  * @property {string} classes.previousButton classes for previous button
  * @property {string} classes.root classes for root container
  * @property {Object[]} images Product images input for Carousel
- * @property {string} images.label label for image
- * @property {string} image.position Position of image in Carousel
- * @property {bool} image.disabled Is image disabled
- * @property {string} image.file filePath of image
+ * @property {bool} images[].disabled Is image disabled
+ * @property {string} images[].file filePath of image
+ * @property {string} images[].uid the id of the image
+ * @property {string} images[].label label for image
+ * @property {string} images[].position Position of image in Carousel
  */
 ProductImageCarousel.propTypes = {
     classes: shape({
@@ -156,7 +171,8 @@ ProductImageCarousel.propTypes = {
             label: string,
             position: number,
             disabled: bool,
-            file: string.isRequired
+            file: string.isRequired,
+            uid: string.isRequired
         })
     ).isRequired
 };

package/lib/components/ProductImageCarousel/{carousel.css → carousel.module.css}

@@ -18,7 +18,11 @@
 }
 
 .currentImage {
+    display: block;
     width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
 }
 
 .currentImage_placeholder {
@@ -46,14 +50,14 @@
 }
 
 .chevron {
-    composes: root from '../Icon/icon.css';
+    composes: root from '../Icon/icon.module.css';
     align-self: center;
     border: 2px solid transparent;
 }
 
 .nextButton:focus > .chevron,
 .previousButton:focus > .chevron {
-    box-shadow: 0 0 4px 2px rgb(var(--venia-teal));
+    box-shadow: 0 0 4px 2px rgb(var(--venia-global-color-teal));
     border-radius: 0.5rem;
 }
 
@@ -88,4 +92,8 @@
         grid-template-columns: 1fr;
         margin-top: 0;
     }
+
+    .currentImage {
+        object-position: top center;
+    }
 }

package/lib/components/ProductImageCarousel/carousel.shimmer.js

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
+import { useStyle } from '../../classify';
+import Image from '../Image';
+import defaultClasses from './carousel.module.css';
+import defaultShimmerClasses from './carousel.shimmer.module.css';
+
+const CarouselShimmer = props => {
+    const classes = useStyle(
+        defaultClasses,
+        defaultShimmerClasses,
+        props.classes
+    );
+
+    const thumbnails = useMemo(() => {
+        return Array.from({ length: 3 })
+            .fill(null)
+            .map((value, index) => {
+                return (
+                    <div
+                        className={classes.thumnailRoot}
+                        key={`thumbnail-${index}`}
+                    >
+                        <Image
+                            alt={'...'}
+                            classes={{ image: classes.thumbnailImage }}
+                            src={transparentPlaceholder}
+                        />
+                    </div>
+                );
+            });
+    }, [classes]);
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.carouselContainer}>
+                <Image
+                    alt={'...'}
+                    classes={{
+                        image: classes.currentImage_placeholder,
+                        root: classes.imageContainer
+                    }}
+                    src={transparentPlaceholder}
+                />
+            </div>
+            <div className={classes.thumbnailList}>{thumbnails}</div>
+        </div>
+    );
+};
+
+export default CarouselShimmer;

package/lib/components/ProductImageCarousel/carousel.shimmer.module.css

@@ -0,0 +1,7 @@
+.thumbnailRoot {
+    composes: root from './thumbnail.module.css';
+}
+
+.thumbnailImage {
+    composes: image from './thumbnail.module.css';
+}

package/lib/components/ProductImageCarousel/thumbnail.js

@@ -6,7 +6,7 @@ import { useWindowSize } from '@magento/peregrine';
 import { useThumbnail } from '@magento/peregrine/lib/talons/ProductImageCarousel/useThumbnail';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './thumbnail.css';
+import defaultClasses from './thumbnail.module.css';
 import Image from '../Image';
 
 const DEFAULT_THUMBNAIL_HEIGHT = 170;
@@ -66,13 +66,14 @@ const Thumbnail = props => {
     }, [file, isDesktop, label, classes.image]);
 
     return (
-        <button
+        <span
             className={isActive ? classes.rootSelected : classes.root}
             onClick={handleClick}
-            type="button"
+            role="button"
+            aria-hidden="true"
         >
             {thumbnailImage}
-        </button>
+        </span>
     );
 };
 

package/lib/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap

@@ -4,13 +4,11 @@ exports[`renders Option component correctly 1`] = `
 <div
   className="root"
 >
-  <h3
+  <span
     className="title"
   >
-    <span>
-      Foo
-    </span>
-  </h3>
+    Foo
+  </span>
   <i />
   <dl
     className="selection"

package/lib/components/ProductOptions/__tests__/__snapshots__/options.spec.js.snap

@@ -5,13 +5,11 @@ Array [
   <div
     className="root"
   >
-    <h3
+    <span
       className="title"
     >
-      <span>
-        option-1
-      </span>
-    </h3>
+      option-1
+    </span>
     <div
       className="root"
     />
@@ -39,13 +37,11 @@ Array [
   <div
     className="root"
   >
-    <h3
+    <span
       className="title"
     >
-      <span>
-        option-1
-      </span>
-    </h3>
+      option-1
+    </span>
     <div
       className="root"
     />

package/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap

@@ -32,13 +32,13 @@ exports[`appends "_selected" to className if isSelected is true 1`] = `
     <svg
       className="icon"
       fill="none"
-      height="24"
+      height={24}
       stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth="2"
       viewBox="0 0 24 24"
-      width="24"
+      width={24}
       xmlns="http://www.w3.org/2000/svg"
     >
       <polyline
@@ -81,13 +81,13 @@ exports[`renders an icon if isSelected is true 1`] = `
     <svg
       className="icon"
       fill="none"
-      height="24"
+      height={24}
       stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth="2"
       viewBox="0 0 24 24"
-      width="24"
+      width={24}
       xmlns="http://www.w3.org/2000/svg"
     >
       <polyline

package/lib/components/ProductOptions/index.js

@@ -1 +1,2 @@
 export { default } from './options';
+export { default as ProductOptionsShimmer } from './options.shimmer';

package/lib/components/ProductOptions/option.js

@@ -14,7 +14,7 @@ import { useStyle } from '../../classify';
 import getOptionType from './getOptionType';
 import SwatchList from './swatchList';
 import TileList from './tileList';
-import defaultClasses from './option.css';
+import defaultClasses from './option.module.css';
 import { useOption } from '@magento/peregrine/lib/talons/ProductOptions/useOption';
 
 const getItemKey = ({ value_index }) => value_index;
@@ -60,9 +60,7 @@ const Option = props => {
 
     return (
         <div className={classes.root}>
-            <h3 className={classes.title}>
-                <span>{label}</span>
-            </h3>
+            <span className={classes.title}>{label}</span>
             <ValueList
                 getItemKey={getItemKey}
                 selectedValue={initialSelection}

package/lib/components/ProductOptions/{option.css → option.module.css}

@@ -9,6 +9,7 @@
     font-weight: 600;
     line-height: 1.5;
     margin-bottom: 1.5rem;
+    display: block;
 }
 
 .selection {

package/lib/components/ProductOptions/option.shimmer.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Shimmer from '../Shimmer';
+import { useStyle } from '../../classify';
+import defaultClasses from './option.module.css';
+import TileListShimmer from './tileList.shimmer';
+
+const OptionShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root}>
+            <h3 className={classes.title}>
+                <span>
+                    <Shimmer width="100%" />
+                </span>
+            </h3>
+            <TileListShimmer />
+            <div className={classes.selection}>
+                <Shimmer width="100%" />
+            </div>
+        </div>
+    );
+};
+
+export default OptionShimmer;

package/lib/components/ProductOptions/options.shimmer.js

@@ -0,0 +1,16 @@
+import React, { Fragment } from 'react';
+import OptionShimmer from './option.shimmer';
+
+const OPTION_COUNT = 2;
+
+export default () => {
+    return (
+        <Fragment>
+            {Array.from({ length: OPTION_COUNT })
+                .fill(null)
+                .map((item, index) => {
+                    return <OptionShimmer key={`product-option-${index}`} />;
+                })}
+        </Fragment>
+    );
+};

package/lib/components/ProductOptions/swatch.js

@@ -14,7 +14,7 @@ import { useStyle } from '../../classify';
 import Icon from '../Icon';
 import { Check as CheckIcon } from 'react-feather';
 
-import defaultClasses from './swatch.css';
+import defaultClasses from './swatch.module.css';
 
 import { useSwatch } from '@magento/peregrine/lib/talons/ProductOptions/useSwatch';
 

package/lib/components/ProductOptions/{swatch.css → swatch.module.css}

@@ -1,5 +1,5 @@
 .root {
-    composes: root from './tile.css';
+    composes: root from './tile.module.css';
     background: var(--venia-swatch-bg);
     border-color: rgba(0, 0, 0, 0.1);
     color: white;

package/lib/components/ProductOptions/swatchList.js

@@ -3,7 +3,7 @@ import { arrayOf, func, object, shape, string } from 'prop-types';
 import Swatch from './swatch';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './swatchList.css';
+import defaultClasses from './swatchList.module.css';
 
 const SwatchList = props => {
     const { getItemKey, selectedValue = {}, items, onSelectionChange } = props;

package/lib/components/ProductOptions/swatchList.module.css

@@ -0,0 +1,3 @@
+.root {
+    composes: root from './tileList.module.css';
+}

package/lib/components/ProductOptions/tile.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { bool, func, number, oneOfType, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './tile.css';
+import defaultClasses from './tile.module.css';
 import { useTile } from '@magento/peregrine/lib/talons/ProductOptions/useTile';
 
 const getClassName = (name, isSelected, hasFocus) =>

package/lib/components/ProductOptions/{tile.css → tile.module.css}

@@ -1,5 +1,5 @@
 .root {
-    composes: root from '../clickable.css';
+    composes: root from '../clickable.module.css';
     border: 1px solid rgb(var(--venia-global-color-text));
     border-radius: 2px;
     height: 3rem;

package/lib/components/ProductOptions/tileList.js

@@ -3,7 +3,7 @@ import { arrayOf, func, object, shape, string } from 'prop-types';
 import Tile from './tile';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './tileList.css';
+import defaultClasses from './tileList.module.css';
 
 const TileList = props => {
     const { getItemKey, selectedValue = {}, items, onSelectionChange } = props;

package/lib/components/ProductOptions/tileList.shimmer.js

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react';
+import { shape, string } from 'prop-types';
+import Shimmer from '../Shimmer';
+
+import { useStyle } from '../../classify';
+import defaultClasses from './tileList.module.css';
+
+const TileListShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const tiles = useMemo(() => {
+        return Array.from({ length: 3 })
+            .fill(null)
+            .map((value, index) => {
+                return <Shimmer width={3} height={3} key={`tile-${index}`} />;
+            });
+    }, []);
+
+    return <div className={classes.root}>{tiles}</div>;
+};
+
+TileListShimmer.defaultProps = {
+    classes: {}
+};
+
+TileListShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default TileListShimmer;

package/lib/components/ProductQuantity/quantity.js

@@ -5,7 +5,7 @@ import { arrayOf, number, shape, string } from 'prop-types';
 import { useStyle } from '../../classify';
 import Select from '../Select';
 import mockData from './mockData';
-import defaultClasses from './quantity.css';
+import defaultClasses from './quantity.module.css';
 
 const Quantity = props => {
     const { classes: propClasses, selectLabel, ...restProps } = props;

package/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap

@@ -1,10 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div>
+<div
+  aria-busy="false"
+  aria-live="polite"
+>
   <button
     disabled={false}
     onClick={[Function]}
+    onDragStart={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
     type="button"
   >
     <span>
@@ -26,13 +40,13 @@ exports[`renders correctly 1`] = `
         <span>
           <svg
             fill="none"
-            height="24"
+            height={24}
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"
             viewBox="0 0 24 24"
-            width="24"
+            width={24}
             xmlns="http://www.w3.org/2000/svg"
           >
             <polyline

package/lib/components/ProductSort/__tests__/productSort.shimmer.spec.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { mockShimmer } from '../../Shimmer';
+import ShimmerComponent from '../productSort.shimmer';
+
+const mockClassName = 'sortButtonShimmer';
+const mockClasses = {
+    [mockClassName]: 'test-class'
+};
+
+jest.mock('../../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 givenPassedClasses = () => {
+    passedProps = {
+        classes: mockClasses
+    };
+};
+
+describe('#productSort Shimmer', () => {
+    beforeEach(() => {
+        mockShimmer.mockClear();
+
+        givenDefaultProps();
+    });
+
+    test('renders Shimmer component', () => {
+        createTestInstance(<ShimmerComponent {...passedProps} />);
+
+        expect(mockShimmer).toHaveBeenCalled();
+    });
+
+    test('passes merged class to Shimmer component', () => {
+        givenPassedClasses();
+        createTestInstance(<ShimmerComponent {...passedProps} />);
+
+        expect(mockShimmer).toHaveBeenCalledWith(
+            expect.objectContaining({
+                classes: expect.objectContaining({
+                    root_button: mockClasses[mockClassName]
+                })
+            }),
+            expect.any(Object)
+        );
+    });
+});

package/lib/components/ProductSort/index.js

@@ -1 +1,2 @@
 export { default } from './productSort';
+export { default as ProductSortShimmer } from './productSort.shimmer';

package/lib/components/ProductSort/productSort.js

@@ -6,7 +6,7 @@ import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
 
 import { useStyle } from '../../classify';
 import SortItem from './sortItem';
-import defaultClasses from './productSort.css';
+import defaultClasses from './productSort.module.css';
 import Button from '../Button';
 import Icon from '../Icon';
 
@@ -75,7 +75,12 @@ const ProductSort = props => {
     };
 
     return (
-        <div ref={elementRef} className={classes.root}>
+        <div
+            ref={elementRef}
+            className={classes.root}
+            aria-live="polite"
+            aria-busy="false"
+        >
             <Button
                 priority={'low'}
                 classes={{