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

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

@@ -153,6 +153,9 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -280,6 +283,9 @@ exports[`it does not render options if the product is not a ConfigurableProduct
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -441,6 +447,9 @@ exports[`it renders an error for an invalid cart 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -602,6 +611,9 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -764,6 +776,9 @@ Array [
       <strong>
         BTTF123
       </strong>
+      <CustomAttributes
+        customAttributes={Object {}}
+      />
     </section>
   </form>,
 ]
@@ -922,6 +937,9 @@ exports[`it renders correctly 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1079,6 +1097,9 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1236,6 +1257,9 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1393,6 +1417,9 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1554,6 +1581,9 @@ exports[`it renders form level errors 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1724,6 +1754,9 @@ exports[`it renders message with unsupported product type 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -1851,6 +1884,9 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;
@@ -2010,6 +2046,9 @@ exports[`renders a WishlistButton with props 1`] = `
     <strong>
       BTTF123
     </strong>
+    <CustomAttributes
+      customAttributes={Object {}}
+    />
   </section>
 </form>
 `;

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

@@ -30,6 +30,7 @@ jest.mock('../../CartPage/ProductListing/quantity', () => ({
     QuantityFields: () => 'QuantityFields'
 }));
 jest.mock('../../RichContent/richContent', () => 'RichContent');
+jest.mock('../CustomAttributes', () => 'CustomAttributes');
 
 jest.mock('../../../classify');
 
@@ -187,7 +188,8 @@ const talonProps = {
             currency: 'USD',
             value: 3.5
         }
-    }
+    },
+    customAttributes: {}
 };
 
 test('it renders correctly', () => {

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -16,6 +16,7 @@ import FormError from '../FormError';
 import { QuantityFields } from '../CartPage/ProductListing/quantity';
 import RichContent from '../RichContent/richContent';
 import { ProductOptionsShimmer } from '../ProductOptions';
+import CustomAttributes from './CustomAttributes';
 import defaultClasses from './productFullDetail.module.css';
 
 const WishlistButton = React.lazy(() => import('../Wishlist/AddToListButton'));
@@ -50,6 +51,7 @@ const ProductFullDetail = props => {
         isSupportedProductType,
         mediaGalleryEntries,
         productDetails,
+        customAttributes,
         wishlistButtonProps
     } = talonProps;
     const { formatMessage } = useIntl();
@@ -139,7 +141,12 @@ const ProductFullDetail = props => {
     );
 
     const cartActionContent = isSupportedProductType ? (
-        <Button disabled={isAddToCartDisabled} priority="high" type="submit">
+        <Button
+            data-cy="ProductFullDetail-addToCartButton"
+            disabled={isAddToCartDisabled}
+            priority="high"
+            type="submit"
+        >
             {cartCallToActionText}
         </Button>
     ) : (
@@ -159,9 +166,16 @@ const ProductFullDetail = props => {
     return (
         <Fragment>
             {breadcrumbs}
-            <Form className={classes.root} onSubmit={handleAddToCart}>
+            <Form
+                className={classes.root}
+                data-cy="ProductFullDetail-root"
+                onSubmit={handleAddToCart}
+            >
                 <section className={classes.title}>
-                    <h1 className={classes.productName}>
+                    <h1
+                        className={classes.productName}
+                        data-cy="ProductFullDetail-productName"
+                    >
                         {productDetails.name}
                     </h1>
                     <p className={classes.productPrice}>
@@ -217,6 +231,7 @@ const ProductFullDetail = props => {
                         />
                     </span>
                     <strong>{productDetails.sku}</strong>
+                    <CustomAttributes customAttributes={customAttributes} />
                 </section>
             </Form>
         </Fragment>

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

@@ -17,7 +17,7 @@ exports[`renders Option component correctly 1`] = `
       className="selectionLabel"
     >
       <mock-FormattedMessage
-        defaultMessage="Selected Foo:"
+        defaultMessage="Selected {label}:"
         id="productOptions.selectedLabel"
         values={
           Object {

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

@@ -20,7 +20,7 @@ Array [
         className="selectionLabel"
       >
         <mock-FormattedMessage
-          defaultMessage="Selected option-1:"
+          defaultMessage="Selected {label}:"
           id="productOptions.selectedLabel"
           values={
             Object {
@@ -52,7 +52,7 @@ Array [
         className="selectionLabel"
       >
         <mock-FormattedMessage
-          defaultMessage="Selected option-1:"
+          defaultMessage="Selected {label}:"
           id="productOptions.selectedLabel"
           values={
             Object {

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

@@ -11,7 +11,28 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
   }
   title="red"
   type="button"
-/>
+>
+  <span
+    className="root"
+  >
+    <svg
+      className="icon"
+      fill="none"
+      height={24}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="20 6 9 17 4 12"
+      />
+    </svg>
+  </span>
+</button>
 `;
 
 exports[`appends "_selected" to className if isSelected is true 1`] = `
@@ -60,7 +81,28 @@ exports[`renders a Swatch correctly 1`] = `
   }
   title="red"
   type="button"
-/>
+>
+  <span
+    className="root"
+  >
+    <svg
+      className="icon"
+      fill="none"
+      height={24}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="20 6 9 17 4 12"
+      />
+    </svg>
+  </span>
+</button>
 `;
 
 exports[`renders an icon if isSelected is true 1`] = `

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

@@ -14,6 +14,27 @@ exports[`renders SwatchList component correctly 1`] = `
     }
     title="foo"
     type="button"
-  />
+  >
+    <span
+      className="root"
+    >
+      <svg
+        className="icon"
+        fill="none"
+        height={24}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <polyline
+          points="20 6 9 17 4 12"
+        />
+      </svg>
+    </span>
+  </button>
 </div>
 `;

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

@@ -20,8 +20,6 @@ const defaultProps = {
 test('renders a Swatch correctly', () => {
     const component = testRenderer.create(<Swatch {...defaultProps} />);
 
-    expect(() => component.root.findByType(Icon)).toThrow();
-
     expect(component.root.findByType('button').props.className).not.toContain(
         '_selected'
     );

package/lib/components/ProductOptions/option.js

@@ -59,7 +59,7 @@ const Option = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="ProductOptions-Option-root">
             <span className={classes.title}>{label}</span>
             <ValueList
                 getItemKey={getItemKey}
@@ -71,7 +71,7 @@ const Option = props => {
                 <dt className={classes.selectionLabel}>
                     <FormattedMessage
                         id="productOptions.selectedLabel"
-                        defaultMessage={`Selected ${label}:`}
+                        defaultMessage="Selected {label}:"
                         values={{ label }}
                     />
                 </dt>

package/lib/components/ProductOptions/swatch.js

@@ -40,12 +40,13 @@ const Swatch = props => {
 
     const { handleClick } = talonProps;
 
-    const icon = useMemo(() => {
-        return isSelected ? <Icon src={CheckIcon} /> : null;
-    }, [isSelected]);
-
     const classes = useStyle(defaultClasses, props.classes);
 
+    const checkStyle = useMemo(
+        () => (isSelected ? classes.checked : classes.unchecked),
+        [classes.checked, classes.unchecked, isSelected]
+    );
+
     let finalStyle = style;
 
     if (swatch_data) {
@@ -82,8 +83,9 @@ const Swatch = props => {
             style={finalStyle}
             title={label}
             type="button"
+            data-cy="Swatch-root"
         >
-            {icon}
+            <Icon classes={{ root: checkStyle }} src={CheckIcon} />
         </button>
     );
 };

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

@@ -19,3 +19,14 @@
 .root_selected_focused {
     composes: root_selected;
 }
+
+.checked {
+    opacity: 1;
+    transition-property: opacity;
+    transition-duration: 256ms;
+}
+
+.unchecked {
+    composes: checked;
+    opacity: 0;
+}

package/lib/components/ProductOptions/tile.js

@@ -32,6 +32,7 @@ const Tile = props => {
             onClick={handleClick}
             title={label}
             type="button"
+            data-cy="Tile-button"
         >
             <span>{label}</span>
         </button>

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<button
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+>
+  <span>
+    <span>
+      relevance
+    </span>
+  </span>
+</button>
+`;

package/lib/components/ProductSort/__tests__/sortItem.spec.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import SortItem from '../sortItem';
+
+const mockOnClick = jest.fn();
+
+const defaultProps = {
+    active: false,
+    onClick: mockOnClick,
+    sortItem: {
+        id: 'foo',
+        text: 'relevance'
+    }
+};
+
+const Component = () => <SortItem {...defaultProps} />;
+
+test('renders correctly', () => {
+    const instance = createTestInstance(<Component />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('calls onClick handler on mousedown event', () => {
+    const component = createTestInstance(<Component />);
+    const { root } = component;
+    const eventMock = {
+        button: 0
+    };
+
+    root.findByType('button').props.onMouseDown(eventMock);
+    expect(mockOnClick).toHaveBeenCalled();
+});
+
+test('it does not call onClick handler on right mousedown event', () => {
+    const component = createTestInstance(<Component />);
+    const { root } = component;
+    const eventMock = {
+        button: 1
+    };
+
+    root.findByType('button').props.onMouseDown(eventMock);
+    expect(mockOnClick).not.toHaveBeenCalled();
+});
+
+test('calls onClick handler on keyboard Enter or space press', () => {
+    const component = createTestInstance(<Component />);
+    const { root } = component;
+
+    root.findByType('button').props.onKeyDown({
+        key: 'Enter',
+        preventDefault: jest.fn()
+    });
+
+    root.findByType('button').props.onKeyDown({
+        key: ' ',
+        preventDefault: jest.fn()
+    });
+
+    expect(mockOnClick).toHaveBeenCalledTimes(2);
+});

package/lib/components/ProductSort/productSort.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback } from 'react';
 import { ChevronDown as ArrowDown } from 'react-feather';
-import { FormattedMessage } from 'react-intl';
-import { array, arrayOf, shape, string, oneOf } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { array, arrayOf, shape, string } from 'prop-types';
 import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
 
 import { useStyle } from '../../classify';
@@ -15,6 +15,34 @@ const ProductSort = props => {
     const { availableSortMethods, sortProps } = props;
     const [currentSort, setSort] = sortProps;
     const { elementRef, expanded, setExpanded } = useDropdown();
+    const { formatMessage, locale } = useIntl();
+
+    const orderSortingList = useCallback(
+        list => {
+            return list.sort((a, b) => {
+                return a.text.localeCompare(b.text, locale, {
+                    sensitivity: 'base'
+                });
+            });
+        },
+        [locale]
+    );
+
+    const sortMethodsFromConfig = availableSortMethods
+        ? availableSortMethods
+              .map(method => {
+                  const { value, label } = method;
+                  if (value !== 'price' && value !== 'position') {
+                      return {
+                          id: `sortItem.${value}`,
+                          text: label,
+                          attribute: value,
+                          sortDirection: 'ASC'
+                      };
+                  }
+              })
+              .filter(method => !!method)
+        : null;
 
     // click event for menu items
     const handleItemClick = useCallback(
@@ -36,7 +64,52 @@ const ProductSort = props => {
             return null;
         }
 
-        const itemElements = Array.from(availableSortMethods, sortItem => {
+        const defaultSortMethods = [
+            {
+                id: 'sortItem.relevance',
+                text: formatMessage({
+                    id: 'sortItem.relevance',
+                    defaultMessage: 'Best Match'
+                }),
+                attribute: 'relevance',
+                sortDirection: 'DESC'
+            },
+            {
+                id: 'sortItem.position',
+                text: formatMessage({
+                    id: 'sortItem.position',
+                    defaultMessage: 'Position'
+                }),
+                attribute: 'position',
+                sortDirection: 'ASC'
+            },
+            {
+                id: 'sortItem.priceDesc',
+                text: formatMessage({
+                    id: 'sortItem.priceDesc',
+                    defaultMessage: 'Price: High to Low'
+                }),
+                attribute: 'price',
+                sortDirection: 'DESC'
+            },
+            {
+                id: 'sortItem.priceAsc',
+                text: formatMessage({
+                    id: 'sortItem.priceAsc',
+                    defaultMessage: 'Price: Low to High'
+                }),
+                attribute: 'price',
+                sortDirection: 'ASC'
+            }
+        ];
+
+        const allSortingMethods = sortMethodsFromConfig
+            ? orderSortingList(
+                  [sortMethodsFromConfig, defaultSortMethods].flat()
+              )
+            : defaultSortMethods;
+
+        const itemElements = Array.from(allSortingMethods, sortItem => {
             const { attribute, sortDirection } = sortItem;
             const isActive =
                 currentSort.sortAttribute === attribute &&
@@ -60,13 +133,15 @@ const ProductSort = props => {
             </div>
         );
     }, [
-        availableSortMethods,
         classes.menu,
         classes.menuItem,
         currentSort.sortAttribute,
         currentSort.sortDirection,
         expanded,
-        handleItemClick
+        formatMessage,
+        handleItemClick,
+        orderSortingList,
+        sortMethodsFromConfig
     ]);
 
     // expand or collapse on click
@@ -78,6 +153,7 @@ const ProductSort = props => {
         <div
             ref={elementRef}
             className={classes.root}
+            data-cy="ProductSort-root"
             aria-live="polite"
             aria-busy="false"
         >
@@ -87,6 +163,7 @@ const ProductSort = props => {
                     root_lowPriority: classes.sortButton
                 }}
                 onClick={handleSortClick}
+                data-cy="ProductSort-sortButton"
             >
                 <span className={classes.mobileText}>
                     <FormattedMessage
@@ -116,8 +193,6 @@ const ProductSort = props => {
     );
 };
 
-const sortDirections = oneOf(['ASC', 'DESC']);
-
 ProductSort.propTypes = {
     classes: shape({
         menuItem: string,
@@ -127,42 +202,11 @@ ProductSort.propTypes = {
     }),
     availableSortMethods: arrayOf(
         shape({
-            text: string,
-            id: string,
-            attribute: string,
-            sortDirection: sortDirections
+            label: string,
+            value: string
         })
     ),
     sortProps: array
 };
 
-ProductSort.defaultProps = {
-    availableSortMethods: [
-        {
-            text: 'Position',
-            id: 'sortItem.position',
-            attribute: 'position',
-            sortDirection: 'ASC'
-        },
-        {
-            id: 'sortItem.relevance',
-            text: 'Best Match',
-            attribute: 'relevance',
-            sortDirection: 'DESC'
-        },
-        {
-            id: 'sortItem.priceAsc',
-            text: 'Price: Low to High',
-            attribute: 'price',
-            sortDirection: 'ASC'
-        },
-        {
-            id: 'sortItem.priceDesc',
-            text: 'Price: High to Low',
-            attribute: 'price',
-            sortDirection: 'DESC'
-        }
-    ]
-};
-
 export default ProductSort;