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

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

@@ -52,6 +52,7 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -79,6 +80,7 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -97,32 +99,38 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      disabled={true}
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={true}
+        aria-label=""
+        className="root_highPriority"
+        disabled={true}
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -243,32 +251,38 @@ exports[`it does not render options if the product is not a ConfigurableProduct
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -378,6 +392,7 @@ exports[`it renders an error for an invalid cart 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -405,6 +420,7 @@ exports[`it renders an error for an invalid cart 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -423,32 +439,38 @@ exports[`it renders an error for an invalid cart 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -558,6 +580,7 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -585,6 +608,7 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -603,32 +627,38 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -739,6 +769,7 @@ Array [
       className="options"
     >
       <require('../ProductOptions')
+        isEverythingOutOfStock={false}
         onSelectionChange={[MockFunction]}
         options={
           Array [
@@ -766,6 +797,7 @@ Array [
             },
           ]
         }
+        outOfStockVariants={Array []}
       />
     </section>
     <section
@@ -784,32 +816,38 @@ Array [
     <section
       className="actions"
     >
-      <button
-        className="root_highPriority"
-        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="submit"
+      <section
+        className="actButton"
       >
-        <span
-          className="content"
+        <button
+          aria-disabled={false}
+          aria-label=""
+          className="root_highPriority"
+          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="submit"
         >
-          <mock-FormattedMessage
-            defaultMessage="Add to Cart"
-            id="productFullDetail.addItemToCart"
-          />
-        </span>
-      </button>
+          <span
+            className="content"
+          >
+            <mock-FormattedMessage
+              defaultMessage="Add to Cart"
+              id="productFullDetail.addItemToCart"
+            />
+          </span>
+        </button>
+      </section>
       <require('../Wishlist/AddToListButton') />
     </section>
     <section
@@ -916,6 +954,7 @@ exports[`it renders correctly 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -943,6 +982,7 @@ exports[`it renders correctly 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -961,32 +1001,38 @@ exports[`it renders correctly 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -1092,6 +1138,7 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -1119,6 +1166,7 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -1137,32 +1185,38 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -1268,6 +1322,7 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -1295,6 +1350,7 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -1313,32 +1369,38 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -1444,6 +1506,7 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -1471,6 +1534,7 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -1489,42 +1553,48 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
-    >
-      <span
-        className="content"
-      >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
-    <require('../Wishlist/AddToListButton') />
-  </section>
-  <section
-    className="description"
-  >
-    <span
-      className="descriptionTitle"
+    <section
+      className="actButton"
     >
-      <mock-FormattedMessage
-        defaultMessage="Description"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
+      >
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
+    <require('../Wishlist/AddToListButton') />
+  </section>
+  <section
+    className="description"
+  >
+    <span
+      className="descriptionTitle"
+    >
+      <mock-FormattedMessage
+        defaultMessage="Description"
         id="productFullDetail.description"
       />
     </span>
@@ -1624,6 +1694,7 @@ exports[`it renders form level errors 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -1651,6 +1722,7 @@ exports[`it renders form level errors 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -1669,32 +1741,222 @@ exports[`it renders form level errors 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
+    <require('../Wishlist/AddToListButton') />
+  </section>
+  <section
+    className="description"
+  >
+    <span
+      className="descriptionTitle"
+    >
+      <mock-FormattedMessage
+        defaultMessage="Description"
+        id="productFullDetail.description"
+      />
+    </span>
+    <RichContent
+      html="Powers the Delorean"
+    />
+  </section>
+  <section
+    className="details"
+  >
+    <span
+      className="detailsTitle"
+    >
+      <mock-FormattedMessage
+        defaultMessage="Details"
+        id="productFullDetail.details"
+      />
+    </span>
+    <CustomAttributes
+      customAttributes={
+        Array [
+          Object {
+            "attribute_metadata": Object {
+              "label": "SKU",
+              "ui_input": Object {
+                "ui_input_type": "TEXT",
+              },
+              "uid": "attribute_sku",
+              "used_in_components": Array [
+                "PRODUCT_DETAILS_PAGE",
+              ],
+            },
+            "entered_attribute_value": Object {
+              "value": "BTTF123",
+            },
+          },
+        ]
+      }
+    />
+  </section>
+</form>
+`;
+
+exports[`it renders message with everything out of stock 1`] = `
+<form
+  className="root"
+  onKeyDown={[Function]}
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <section
+    className="imageCarousel"
+  >
+    <ProductImageCarousel
+      images={Array []}
+    />
+  </section>
+  <section
+    className="title"
+  >
+    <h1
+      aria-live="polite"
+      className="productName"
+    >
+      Flux Capacitor
+    </h1>
+    <p
+      className="productPrice"
+    >
+      <span>
+        $
+      </span>
+      <span>
+        3
+      </span>
+      <span>
+        .
       </span>
-    </button>
+      <span>
+        50
+      </span>
+    </p>
+  </section>
+  <FormError
+    classes={
+      Object {
+        "root": "formErrors",
+      }
+    }
+    errors={Array []}
+  />
+  <section
+    className="options"
+  >
+    <require('../ProductOptions')
+      isEverythingOutOfStock={true}
+      onSelectionChange={[MockFunction]}
+      options={
+        Array [
+          Object {
+            "attribute_code": "configurable_option",
+            "attribute_id": "1",
+            "id": 1,
+            "label": "Configurable Option",
+            "values": Array [
+              Object {
+                "default_label": "Option 1",
+                "label": "Option 1",
+                "store_label": "Option 1",
+                "use_default_value": true,
+                "value_index": 1,
+              },
+              Object {
+                "default_label": "Option 2",
+                "label": "Option 2",
+                "store_label": "Option 2",
+                "use_default_value": true,
+                "value_index": 2,
+              },
+            ],
+          },
+        ]
+      }
+      outOfStockVariants={Array []}
+    />
+  </section>
+  <section
+    className="quantity"
+  >
+    <span
+      className="quantityTitle"
+    >
+      <mock-FormattedMessage
+        defaultMessage="Quantity"
+        id="global.quantity"
+      />
+    </span>
+    QuantityStepper
+  </section>
+  <section
+    className="actions"
+  >
+    <section
+      className="actButton"
+    >
+      <button
+        aria-disabled={true}
+        aria-label="This item is currently out of stock"
+        className="root_highPriority"
+        disabled={true}
+        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="submit"
+      >
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -1800,6 +2062,7 @@ exports[`it renders message with unsupported product type 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -1827,6 +2090,7 @@ exports[`it renders message with unsupported product type 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -2004,32 +2268,38 @@ exports[`out of stock disabled CTA button is rendered if out of stock 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      disabled={true}
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={true}
+        aria-label=""
+        className="root_highPriority"
+        disabled={true}
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Out of Stock"
-          id="productFullDetail.itemOutOfStock"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton') />
   </section>
   <section
@@ -2135,6 +2405,7 @@ exports[`renders a WishlistButton with props 1`] = `
     className="options"
   >
     <require('../ProductOptions')
+      isEverythingOutOfStock={false}
       onSelectionChange={[MockFunction]}
       options={
         Array [
@@ -2162,6 +2433,7 @@ exports[`renders a WishlistButton with props 1`] = `
           },
         ]
       }
+      outOfStockVariants={Array []}
     />
   </section>
   <section
@@ -2180,32 +2452,38 @@ exports[`renders a WishlistButton with props 1`] = `
   <section
     className="actions"
   >
-    <button
-      className="root_highPriority"
-      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="submit"
+    <section
+      className="actButton"
     >
-      <span
-        className="content"
+      <button
+        aria-disabled={false}
+        aria-label=""
+        className="root_highPriority"
+        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="submit"
       >
-        <mock-FormattedMessage
-          defaultMessage="Add to Cart"
-          id="productFullDetail.addItemToCart"
-        />
-      </span>
-    </button>
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Add to Cart"
+            id="productFullDetail.addItemToCart"
+          />
+        </span>
+      </button>
+    </section>
     <require('../Wishlist/AddToListButton')
       foo="bar"
     />