@magento/venia-ui 9.6.0-beta.1 → 9.7.0-alpha.1

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

@@ -175,6 +175,8 @@ const talonProps = {
     handleAddToCart: mockHandleAddToCart,
     handleSelectionChange: mockHandleSelectionChange,
     isOutOfStock: false,
+    isEverythingOutOfStock: false,
+    outOfStockVariants: [],
     isAddToCartDisabled: false,
     isSupportedProductType: true,
     mediaGalleryEntries: [],
@@ -356,3 +358,17 @@ test('it renders message with unsupported product type', () => {
 
     expect(tree.toJSON()).toMatchSnapshot();
 });
+
+test('it renders message with everything out of stock', () => {
+    useProductFullDetail.mockReturnValue({
+        ...talonProps,
+        isEverythingOutOfStock: true,
+        isAddToCartDisabled: true
+    });
+
+    const tree = createTestInstance(
+        <ProductFullDetail product={mockConfigurableProduct} />
+    );
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -47,6 +47,8 @@ const ProductFullDetail = props => {
         handleAddToCart,
         handleSelectionChange,
         isOutOfStock,
+        isEverythingOutOfStock,
+        outOfStockVariants,
         isAddToCartDisabled,
         isSupportedProductType,
         mediaGalleryEntries,
@@ -64,6 +66,8 @@ const ProductFullDetail = props => {
             <Options
                 onSelectionChange={handleSelectionChange}
                 options={product.configurable_options}
+                isEverythingOutOfStock={isEverythingOutOfStock}
+                outOfStockVariants={outOfStockVariants}
             />
         </Suspense>
     ) : null;
@@ -167,27 +171,40 @@ const ProductFullDetail = props => {
         };
     }, [customAttributes, productDetails.sku, formatMessage]);
 
-    const cartCallToActionText = !isOutOfStock ? (
-        <FormattedMessage
-            id="productFullDetail.addItemToCart"
-            defaultMessage="Add to Cart"
-        />
-    ) : (
-        <FormattedMessage
-            id="productFullDetail.itemOutOfStock"
-            defaultMessage="Out of Stock"
-        />
-    );
-
+    const cartCallToActionText =
+        !isEverythingOutOfStock || !isOutOfStock ? (
+            <FormattedMessage
+                id="productFullDetail.addItemToCart"
+                defaultMessage="Add to Cart"
+            />
+        ) : (
+            <FormattedMessage
+                id="productFullDetail.itemOutOfStock"
+                defaultMessage="Out of Stock"
+            />
+        );
+    // Error message for screen reader
     const cartActionContent = isSupportedProductType ? (
-        <Button
-            data-cy="ProductFullDetail-addToCartButton"
-            disabled={isAddToCartDisabled}
-            priority="high"
-            type="submit"
-        >
-            {cartCallToActionText}
-        </Button>
+        <section className={classes.actButton}>
+            <Button
+                data-cy="ProductFullDetail-addToCartButton"
+                disabled={isAddToCartDisabled}
+                aria-disabled={isAddToCartDisabled}
+                aria-label={
+                    isEverythingOutOfStock
+                        ? formatMessage({
+                              id: 'productFullDetail.outOfStockProduct',
+                              defaultMessage:
+                                  'This item is currently out of stock'
+                          })
+                        : ''
+                }
+                priority="high"
+                type="submit"
+            >
+                {cartCallToActionText}
+            </Button>
+        </section>
     ) : (
         <div className={classes.unavailableContainer}>
             <Info />

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

@@ -197,3 +197,6 @@
     composes: text-subtle from global;
     composes: w-full from global;
 }
+.actButton {
+    composes: mt-sm from global;
+}

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

@@ -35,6 +35,57 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 </button>
 `;
 
+exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`] = `
+<button
+  className="root_outOfStock"
+  disabled={true}
+  onClick={[Function]}
+  style={
+    Object {
+      "--venia-swatch-bg": "#123123",
+    }
+  }
+  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 "_outOfStock" to className if isOptionOutOfStock is true 1`] = `
+<button
+  className="root_outOfStock"
+  disabled={true}
+  onClick={[Function]}
+  style={
+    Object {
+      "--venia-swatch-bg": "#123123",
+    }
+  }
+  title="red"
+  type="button"
+/>
+`;
+
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
   className="root_selected"

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

@@ -13,6 +13,34 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 </button>
 `;
 
+exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`] = `
+<button
+  className="root_outOfStock"
+  disabled={true}
+  onClick={[Function]}
+  title="red"
+  type="button"
+>
+  <span>
+    red
+  </span>
+</button>
+`;
+
+exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] = `
+<button
+  className="root_outOfStock"
+  disabled={true}
+  onClick={[Function]}
+  title="red"
+  type="button"
+>
+  <span>
+    red
+  </span>
+</button>
+`;
+
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
   className="root_selected"

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

@@ -27,6 +27,10 @@ test('renders a Swatch correctly', () => {
     expect(component.root.findByType('button').props.className).not.toContain(
         '_focused'
     );
+
+    expect(component.root.findByType('button').props.className).not.toContain(
+        '_outOfStock'
+    );
     expect(component).toMatchSnapshot();
 });
 
@@ -59,6 +63,34 @@ test('appends "_focused" to className if hasFocus is true', () => {
     expect(component).toMatchSnapshot();
 });
 
+test('appends "_outOfStock" to className if isEverythingOutOfStock is true', () => {
+    const props = {
+        ...defaultProps,
+        isEverythingOutOfStock: true
+    };
+    const component = testRenderer.create(<Swatch {...props} />);
+
+    expect(component.root.findByType('button').props.className).toContain(
+        '_outOfStock'
+    );
+
+    expect(component).toMatchSnapshot();
+});
+
+test('appends "_outOfStock" to className if isOptionOutOfStock is true', () => {
+    const props = {
+        ...defaultProps,
+        isOptionOutOfStock: true
+    };
+    const component = testRenderer.create(<Swatch {...props} />);
+
+    expect(component.root.findByType('button').props.className).toContain(
+        '_outOfStock'
+    );
+
+    expect(component).toMatchSnapshot();
+});
+
 test('renders an icon if isSelected is true', () => {
     const props = {
         ...defaultProps,
@@ -70,3 +102,23 @@ test('renders an icon if isSelected is true', () => {
     expect(() => component.root.findByType(Icon)).not.toThrow();
     expect(component).toMatchSnapshot();
 });
+
+test('button is disabled if isEverythingOutOfStock is true', () => {
+    const props = {
+        ...defaultProps,
+        isEverythingOutOfStock: true
+    };
+    const component = testRenderer.create(<Swatch {...props} />);
+
+    expect(component.root.findByType('button').props.disabled).toBeTruthy;
+});
+
+test('button is disabled if isOptionOutOfStock is true', () => {
+    const props = {
+        ...defaultProps,
+        isOptionOutOfStock: true
+    };
+    const component = testRenderer.create(<Swatch {...props} />);
+
+    expect(component.root.findByType('button').props.disabled).toBeTruthy;
+});

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

@@ -54,3 +54,51 @@ test('appends "_focused" to className if hasFocus is true', () => {
 
     expect(component).toMatchSnapshot();
 });
+
+test('appends "_outOfStock" to className if isEverythingOutOfStock is true', () => {
+    const props = {
+        ...defaultProps,
+        isEverythingOutOfStock: true
+    };
+    const component = testRenderer.create(<Tile {...props} />);
+
+    expect(component.root.findByType('button').props.className).toContain(
+        '_outOfStock'
+    );
+
+    expect(component).toMatchSnapshot();
+});
+
+test('appends "_outOfStock" to className if isOptionOutOfStock is true', () => {
+    const props = {
+        ...defaultProps,
+        isOptionOutOfStock: true
+    };
+    const component = testRenderer.create(<Tile {...props} />);
+
+    expect(component.root.findByType('button').props.className).toContain(
+        '_outOfStock'
+    );
+
+    expect(component).toMatchSnapshot();
+});
+
+test('button is disabled if isEverythingOutOfStock is true', () => {
+    const props = {
+        ...defaultProps,
+        isEverythingOutOfStock: true
+    };
+    const component = testRenderer.create(<Tile {...props} />);
+
+    expect(component.root.findByType('button').props.disabled).toBeTruthy;
+});
+
+test('button is disabled if isOptionOutOfStock is true', () => {
+    const props = {
+        ...defaultProps,
+        isOptionOutOfStock: true
+    };
+    const component = testRenderer.create(<Tile {...props} />);
+
+    expect(component.root.findByType('button').props.disabled).toBeTruthy;
+});

package/lib/components/ProductOptions/option.js

@@ -34,7 +34,9 @@ const Option = props => {
         label,
         onSelectionChange,
         selectedValue,
-        values
+        values,
+        isEverythingOutOfStock,
+        outOfStockVariants
     } = props;
 
     const talonProps = useOption({
@@ -66,6 +68,8 @@ const Option = props => {
                 selectedValue={initialSelection}
                 items={values}
                 onSelectionChange={handleSelectionChange}
+                isEverythingOutOfStock={isEverythingOutOfStock}
+                outOfStockVariants={outOfStockVariants}
             />
             <dl className={classes.selection}>
                 <dt

package/lib/components/ProductOptions/options.js

@@ -5,11 +5,19 @@ import Option from './option';
 import { useOptions } from '@magento/peregrine/lib/talons/ProductOptions/useOptions';
 
 const Options = props => {
-    const { classes, onSelectionChange, options, selectedValues = [] } = props;
+    const {
+        classes,
+        onSelectionChange,
+        options,
+        selectedValues = [],
+        isEverythingOutOfStock,
+        outOfStockVariants
+    } = props;
 
     const talonProps = useOptions({
         onSelectionChange,
-        selectedValues
+        selectedValues,
+        options
     });
 
     const { handleSelectionChange, selectedValueMap } = talonProps;
@@ -22,6 +30,8 @@ const Options = props => {
             key={option.attribute_id}
             onSelectionChange={handleSelectionChange}
             selectedValue={selectedValueMap.get(option.label)}
+            isEverythingOutOfStock={isEverythingOutOfStock}
+            outOfStockVariants={outOfStockVariants}
         />
     ));
 };

package/lib/components/ProductOptions/swatch.js

@@ -18,8 +18,16 @@ import defaultClasses from './swatch.module.css';
 
 import { useSwatch } from '@magento/peregrine/lib/talons/ProductOptions/useSwatch';
 
-const getClassName = (name, isSelected, hasFocus) =>
-    `${name}${isSelected ? '_selected' : ''}${hasFocus ? '_focused' : ''}`;
+const getClassName = (
+    name,
+    isSelected,
+    hasFocus,
+    isOptionOutOfStock,
+    isEverythingOutOfStock
+) =>
+    `${name}${isSelected ? '_selected' : ''}${hasFocus ? '_focused' : ''}${
+        isEverythingOutOfStock || isOptionOutOfStock ? '_outOfStock' : ''
+    }`;
 
 // Swatches _must_ have a 1x1 aspect ratio to match the UI.
 const SWATCH_WIDTH = 48;
@@ -30,7 +38,9 @@ const Swatch = props => {
         isSelected,
         item: { label, value_index, swatch_data },
         onClick,
-        style
+        style,
+        isEverythingOutOfStock,
+        isOptionOutOfStock
     } = props;
 
     const talonProps = useSwatch({
@@ -74,7 +84,16 @@ const Swatch = props => {
         });
     }
 
-    const className = classes[getClassName('root', isSelected, hasFocus)];
+    const className =
+        classes[
+            getClassName(
+                'root',
+                isSelected,
+                hasFocus,
+                isOptionOutOfStock,
+                isEverythingOutOfStock
+            )
+        ];
 
     return (
         <button
@@ -84,8 +103,11 @@ const Swatch = props => {
             title={label}
             type="button"
             data-cy="Swatch-root"
+            disabled={isEverythingOutOfStock || isOptionOutOfStock}
         >
-            <Icon classes={{ root: checkStyle }} src={CheckIcon} />
+            {!isOptionOutOfStock && (
+                <Icon classes={{ root: checkStyle }} src={CheckIcon} />
+            )}
         </button>
     );
 };

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

@@ -36,3 +36,20 @@
     composes: checked;
     opacity: 0;
 }
+
+.root_outOfStock,
+.root_selected_outOfStock {
+    composes: root;
+    composes: opacity-40 from global;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-gray-400 from global;
+}
+.root_outOfStock:after,
+.root_selected_outOfStock:after {
+    content: '';
+    position: absolute;
+    border-top: 2px solid rgb(var(--venia-global-color-gray-400));
+    width: 62px;
+    transform: rotate(-45deg);
+}

package/lib/components/ProductOptions/swatchList.js

@@ -6,25 +6,46 @@ import { useStyle } from '../../classify';
 import defaultClasses from './swatchList.module.css';
 
 const SwatchList = props => {
-    const { getItemKey, selectedValue = {}, items, onSelectionChange } = props;
+    const {
+        getItemKey,
+        selectedValue = {},
+        items,
+        onSelectionChange,
+        isEverythingOutOfStock,
+        outOfStockVariants
+    } = props;
 
     const classes = useStyle(defaultClasses, props.classes);
-
     const swatches = useMemo(
         () =>
             items.map(item => {
                 const isSelected = item.label === selectedValue.label;
-
+                let isOptionOutOfStock;
+                if (outOfStockVariants && outOfStockVariants.length > 0) {
+                    const flatOutOfStockArray = outOfStockVariants.flat();
+                    isOptionOutOfStock = flatOutOfStockArray.includes(
+                        item.value_index
+                    );
+                }
                 return (
                     <Swatch
                         key={getItemKey(item)}
                         isSelected={isSelected}
                         item={item}
                         onClick={onSelectionChange}
+                        isEverythingOutOfStock={isEverythingOutOfStock}
+                        isOptionOutOfStock={isOptionOutOfStock}
                     />
                 );
             }),
-        [getItemKey, selectedValue.label, items, onSelectionChange]
+        [
+            getItemKey,
+            selectedValue.label,
+            items,
+            onSelectionChange,
+            isEverythingOutOfStock,
+            outOfStockVariants
+        ]
     );
 
     return <div className={classes.root}>{swatches}</div>;

package/lib/components/ProductOptions/tile.js

@@ -5,15 +5,25 @@ import { useStyle } from '../../classify';
 import defaultClasses from './tile.module.css';
 import { useTile } from '@magento/peregrine/lib/talons/ProductOptions/useTile';
 
-const getClassName = (name, isSelected, hasFocus) =>
-    `${name}${isSelected ? '_selected' : ''}${hasFocus ? '_focused' : ''}`;
+const getClassName = (
+    name,
+    isSelected,
+    hasFocus,
+    isOptionOutOfStock,
+    isEverythingOutOfStock
+) =>
+    `${name}${isSelected ? '_selected' : ''}${hasFocus ? '_focused' : ''}${
+        isEverythingOutOfStock || isOptionOutOfStock ? '_outOfStock' : ''
+    }`;
 
 const Tile = props => {
     const {
         hasFocus,
         isSelected,
         item: { label, value_index },
-        onClick
+        onClick,
+        isEverythingOutOfStock,
+        isOptionOutOfStock
     } = props;
 
     const talonProps = useTile({
@@ -22,9 +32,17 @@ const Tile = props => {
     });
 
     const { handleClick } = talonProps;
-
     const classes = useStyle(defaultClasses, props.classes);
-    const className = classes[getClassName('root', isSelected, hasFocus)];
+    const className =
+        classes[
+            getClassName(
+                'root',
+                isSelected,
+                hasFocus,
+                isOptionOutOfStock,
+                isEverythingOutOfStock
+            )
+        ];
 
     return (
         <button
@@ -33,6 +51,7 @@ const Tile = props => {
             title={label}
             type="button"
             data-cy="Tile-button"
+            disabled={isEverythingOutOfStock || isOptionOutOfStock}
         >
             <span>{label}</span>
         </button>

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

@@ -9,6 +9,7 @@
     composes: px-2xs from global;
     composes: py-0 from global;
     composes: rounded-sm from global;
+    position: relative;
 }
 
 .root_selected {
@@ -25,3 +26,22 @@
 .root_selected_focused {
     composes: root_selected;
 }
+
+.root_outOfStock,
+.root_selected_outOfStock {
+    composes: root;
+    composes: bg-disabledTile from global;
+    composes: opacity-50 from global;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-gray-400 from global;
+    composes: text-gray-600 from global;
+}
+.root_outOfStock:after,
+.root_selected_outOfStock:after {
+    content: '';
+    position: absolute;
+    border-top: 2px solid rgb(var(--venia-global-color-gray-400));
+    width: 62px;
+    transform: rotate(-45deg);
+}

package/lib/components/ProductOptions/tileList.js

@@ -6,7 +6,14 @@ import { useStyle } from '../../classify';
 import defaultClasses from './tileList.module.css';
 
 const TileList = props => {
-    const { getItemKey, selectedValue = {}, items, onSelectionChange } = props;
+    const {
+        getItemKey,
+        selectedValue = {},
+        items,
+        onSelectionChange,
+        isEverythingOutOfStock,
+        outOfStockVariants
+    } = props;
 
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -14,6 +21,13 @@ const TileList = props => {
         () =>
             items.map(item => {
                 const isSelected = item.label === selectedValue.label;
+                let isOptionOutOfStock;
+                if (outOfStockVariants && outOfStockVariants.length > 0) {
+                    const flatOutOfStockArray = outOfStockVariants.flat();
+                    isOptionOutOfStock = flatOutOfStockArray.includes(
+                        item.value_index
+                    );
+                }
 
                 return (
                     <Tile
@@ -21,10 +35,19 @@ const TileList = props => {
                         isSelected={isSelected}
                         item={item}
                         onClick={onSelectionChange}
+                        isEverythingOutOfStock={isEverythingOutOfStock}
+                        isOptionOutOfStock={isOptionOutOfStock}
                     />
                 );
             }),
-        [getItemKey, selectedValue.label, items, onSelectionChange]
+        [
+            getItemKey,
+            selectedValue.label,
+            items,
+            onSelectionChange,
+            isEverythingOutOfStock,
+            outOfStockVariants
+        ]
     );
 
     return <div className={classes.root}>{tiles}</div>;

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

@@ -3,7 +3,6 @@
 exports[`renders correctly 1`] = `
 <div
   aria-busy="false"
-  aria-live="polite"
 >
   <button
     disabled={false}

package/lib/components/ProductSort/productSort.js

@@ -162,7 +162,6 @@ const ProductSort = props => {
             ref={elementRef}
             className={classes.root}
             data-cy="ProductSort-root"
-            aria-live="polite"
             aria-busy="false"
         >
             <Button