Repository: reactioncommerce/reaction-component-library (js)

Issue:
Unable to change Select value when it was provided one via props.
Type: **minor**

**Describe the bug**
When the Select component is provided a value via props you can not change the value of the field.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to [staging](https://stoic-hodgkin-c0179e.netlify.com/#!/Select) scroll to the bottom of the page to the "Valid State" section
2. Click on Select and try to change the Input's value
4. The value will not update and the Select's dropdown will have the example code overlaying the select options.

**Expected behavior**
When the Select has been provided a value via props it should render with that value selected but also be changed when selecting a different option.

**Screenshots**
Code block overlay/z-index issue
<img width="525" alt="screen shot 2018-07-17 at 9 55 40 am" src="https://user-images.githubusercontent.com/1135948/42825434-a3de72f4-89a7-11e8-8a18-8529da6abcfe.png">

**Desktop (please complete the following information):**
 - OS: macOS
 - Browser chrome 67 && firefox 61

Pull request description:
(feat): 134 nnnnat cart items
Resolves #134  
Impact: **major**  
Type: **feature**

<!-- 📦🚀 This project is deployed with [semantic-release](https://github.com/semantic-release/semantic-release) -->

<!-- Any PR with commits that start with `feat:` or `fix:` will trigger new major or minor release respectively -->

## Component
Added a CartItems component based on these [specs](https://github.com/reactioncommerce/reaction-next-starterkit/issues/134)

## Screenshots
Desktop
![screen shot 2018-06-29 at 12 59 59 pm](https://user-images.githubusercontent.com/1135948/42107403-d0555f32-7b9c-11e8-9bb1-58264fbb26b6.png)

Mobile
![screen shot 2018-06-29 at 1 02 53 pm](https://user-images.githubusercontent.com/1135948/42107407-d4ae1d08-7b9c-11e8-8c8f-120aead808e7.png)

## Testing
1. Make sure it looks good and works

Patch:
diff --git a/.snyk b/.snyk
index d19842a0..ab80cf24 100644
--- a/.snyk
+++ b/.snyk
@@ -238,6 +238,6 @@ ignore:
         expires: '2018-07-15T03:19:00.834Z'
   'npm:ua-parser-js:20180227':
     - '*':
-        reason: Waiting on fbjs to update to the latest ua-parser-js version
-        expires: 2018-06-30T00:00:00.000Z
+        reason: Waiting on deps to update to the latest fbjs version
+        expires: 2018-07-15T00:00:00.000Z
 patch: {}
diff --git a/package/src/components/CartItem/v1/CartItem.js b/package/src/components/CartItem/v1/CartItem.js
index e49a2f0c..c9a9263c 100644
--- a/package/src/components/CartItem/v1/CartItem.js
+++ b/package/src/components/CartItem/v1/CartItem.js
@@ -11,6 +11,10 @@ const Item = styled.div`
   padding: 1rem;
   width: 100%;
 
+  &:first-of-type {
+    border-top: solid 1px ${applyTheme("color_black05")};
+  }
+
   > * {
     box-sizing: border-box;
   }
@@ -44,7 +48,7 @@ const ItemContentDetailInfo = styled.div`
 `;
 
 const ItemContentQuantityInput = styled.div`
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 
   @media (min-width: 992px) {
     margin: 0;
@@ -209,7 +213,7 @@ class CartItem extends Component {
       <a href={productSlug}>
         <picture>
           <source srcSet={`${imageUrl}/150`} media="(min-width: 768px)" />
-          <img src={`${imageUrl}/100`} alt="" />
+          <img src={`${imageUrl}/100`} alt="" style={{ display: "block" }} />
         </picture>
       </a>
     );
diff --git a/package/src/components/CartItemDetail/v1/CartItemDetail.js b/package/src/components/CartItemDetail/v1/CartItemDetail.js
index 78ddd580..0e7231e2 100644
--- a/package/src/components/CartItemDetail/v1/CartItemDetail.js
+++ b/package/src/components/CartItemDetail/v1/CartItemDetail.js
@@ -23,6 +23,10 @@ const Detail = styled.div`
   }
 `;
 
+const Title = styled.h3`
+  font-size: ${applyTheme("font_size_default")};
+`;
+
 const Vendor = styled.p`
   color: ${applyTheme("color_black65")};
   display: block;
@@ -112,9 +116,9 @@ class CartItemDetail extends Component {
     const { attributes, productSlug, title } = this.props;
     return (
       <Detail>
-        <h3>
+        <Title>
           <a href={productSlug}>{title}</a>
-        </h3>
+        </Title>
         {attributes ? this.renderAttributes() : ""}
       </Detail>
     );
diff --git a/package/src/components/CartItems/v1/CartItems.js b/package/src/components/CartItems/v1/CartItems.js
new file mode 100644
index 00000000..eaaeded2
--- /dev/null
+++ b/package/src/components/CartItems/v1/CartItems.js
@@ -0,0 +1,121 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const Items = styled.div``;
+
+class CartItems extends Component {
+  static propTypes = {
+    /**
+     * Provided child components to display item data
+     */
+    components: PropTypes.shape({
+      /**
+       * CartItem component
+       */
+      CartItemComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /**
+       * CartItemDetail component
+       */
+      CartItemDetailComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /**
+       * Stock warning component
+       */
+      CartItemStockWarningComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /**
+       * Price component
+       */
+      CartItemPriceComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /**
+       * QuantityInput component
+       */
+      CartItemQuantityInputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+    }),
+    /**
+     * CartItem data
+     */
+    items: PropTypes.arrayOf(PropTypes.shape({
+      /**
+         * The cart item ID
+         */
+      _id: PropTypes.string,
+      /**
+         * Array of additional attributes of the chosen item.
+         */
+      attributes: PropTypes.arrayOf(PropTypes.shape({
+        /**
+             * Attribute label (i.e. "Color").
+             */
+        label: PropTypes.string,
+        /**
+             *  Attribute value (i.e. "Red").
+             */
+        value: PropTypes.string
+      })),
+      /**
+         * Current stock quantity of item
+         */
+      currentQuantity: PropTypes.number,
+      /**
+         * Image url of chosen item
+         */
+      imageUrl: PropTypes.string,
+      /**
+         * Price object of chosen item
+         */
+      price: PropTypes.shape({
+        /**
+           * Chosen items compare at price
+           */
+        compareAtPrice: PropTypes.string,
+        /**
+           * Chosen items display price
+           */
+        displayPrice: PropTypes.string
+      }),
+      /**
+         * Chosen items slug
+         */
+      productSlug: PropTypes.string,
+      /**
+         * Chosen items title
+         */
+      title: PropTypes.string,
+      /**
+         * Quantity of chosen item in cart
+         */
+      quantity: PropTypes.number
+    })).isRequired,
+    /**
+     * On cart item quantity change handler
+     */
+    onChangeCartItemQuantity: PropTypes.func,
+    /**
+     * On remove item from cart handler
+     */
+    onRemoveItemFromCart: PropTypes.func
+  };
+
+  static defaultProps = {
+    components: {
+      CartItemComponent: "Cart Item",
+      CartItemDetailComponent: "Cart Item Detail",
+      CartItemStockWarningComponent: "Cart Item Stock Warning",
+      CartItemPriceComponent: "Cart Item Price",
+      CartItemQuantityInputComponent: "Cart Item Quantity Input"
+    },
+    onChangeCartItemQuantity() {},
+    onRemoveItemFromCart() {}
+  };
+
+  render() {
+    const { items, components: { CartItemComponent, ...components }, ...props } = this.props;
+    return (
+      <Items>
+        {items.map((item) => <CartItemComponent key={item._id} item={item} components={components} {...props} />)}
+      </Items>
+    );
+  }
+}
+
+export default CartItems;
diff --git a/package/src/components/CartItems/v1/CartItems.md b/package/src/components/CartItems/v1/CartItems.md
new file mode 100644
index 00000000..fb870a3c
--- /dev/null
+++ b/package/src/components/CartItems/v1/CartItems.md
@@ -0,0 +1,45 @@
+### CartItems
+
+### Overview
+This component renders a list of items that are in a customers cart.
+
+#### Basic Usage
+```jsx
+const items = [{
+  _id: "123",
+  attributes: [{ label: "vendor", value: "Patagonia" }, { label: "Color", value: "Red" }, { label: "Size", value: "Medium" }],
+  currentQuantity: 3,
+  imageUrl: "http://placehold.it",
+  isLowInventoryQuantity: true,
+  price: {
+    displayPrice: "$20.00",
+    compareAtPrice: "$45.00"
+  },
+  productSlug: "/product-slug",
+  title: "A Great Product",
+  quantity: 2
+},
+{
+  _id: "456",
+  attributes: [{ label: "vendor", value: "Nike" }, { label: "Color", value: "Black" }, { label: "Size", value: "10" }],
+  currentQuantity: 500,
+  imageUrl: "http://placehold.it",
+  isLowInventoryQuantity: false,
+  price: {
+    displayPrice: "$78.00"
+  },
+  productSlug: "/product-slug",
+  title: "Another Great Product",
+  quantity: 1
+}];
+
+const components = {
+  CartItemComponent: CartItem,
+  CartItemDetailComponent: CartItemDetail,
+  CartItemStockWarningComponent: StockWarning,
+  CartItemPriceComponent: Price,
+  CartItemQuantityInputComponent: QuantityInput
+};
+
+<CartItems items={items} components={components} onChangeCartItemQuantity={(value) => console.log("cart items new quantity", value)} onRemoveItemFromCart={(_id) => console.log("cart items remove this item", _id)}/>
+```
diff --git a/package/src/components/CartItems/v1/index.js b/package/src/components/CartItems/v1/index.js
new file mode 100644
index 00000000..58a4362e
--- /dev/null
+++ b/package/src/components/CartItems/v1/index.js
@@ -0,0 +1,1 @@
+export { default } from "./CartItems";
diff --git a/package/src/components/Price/v1/Price.js b/package/src/components/Price/v1/Price.js
index ead3938b..8911a293 100644
--- a/package/src/components/Price/v1/Price.js
+++ b/package/src/components/Price/v1/Price.js
@@ -5,11 +5,13 @@ import { applyTheme } from "../../../utils";
 
 const Span = styled.span`
   display: block;
+  font-size: ${applyTheme("font_size_small")};
 `;
 
 const Del = styled.del`
-  display: block;
   color: ${applyTheme("color_disabled")};
+  display: block;
+  font-size: ${applyTheme("font_size_small")};
 `;
 
 class Price extends Component {
@@ -24,7 +26,7 @@ class Price extends Component {
      * This value is expected to have the currency symbol, i.e. $300.00
      */
     displayPrice: PropTypes.string.isRequired
-  }
+  };
 
   renderCompareAtPrice = () => {
     const { displayCompareAtPrice, displayPrice } = this.props;
@@ -32,21 +34,15 @@ class Price extends Component {
     // If there is no price difference, don't render compare at price.
     if (displayPrice === displayCompareAtPrice) return null;
 
-    return (
-      <Del>
-        {displayCompareAtPrice}
-      </Del>
-    );
-  }
+    return <Del>{displayCompareAtPrice}</Del>;
+  };
 
   render() {
     const { displayCompareAtPrice, displayPrice } = this.props;
 
     return (
       <div>
-        <Span>
-          {displayPrice}
-        </Span>
+        <Span>{displayPrice}</Span>
         {displayCompareAtPrice ? this.renderCompareAtPrice() : null}
       </div>
     );
diff --git a/package/src/components/QuantityInput/v1/QuantityInput.js b/package/src/components/QuantityInput/v1/QuantityInput.js
index 3ec43b5d..1ca140df 100644
--- a/package/src/components/QuantityInput/v1/QuantityInput.js
+++ b/package/src/components/QuantityInput/v1/QuantityInput.js
@@ -22,11 +22,14 @@ const styles = () => ({
     padding: 0
   },
   quantityInput: {
+    "appearance": "none",
     "borderLeft": "1px solid #d9d9d9",
     "borderRight": "1px solid #d9d9d9",
+    "borderRadius": 0,
     "boxSizing": "inherit",
     "color": "#3c3c3c",
     "fontSize": "12px",
+    "maxHeight": "30px",
     "maxWidth": "40px",
     "textAlign": "center",
     "&:focus": {
@@ -119,7 +122,7 @@ class QuantityInput extends Component {
                 onClick={this.handleDecrementButton}
                 className={incrementButton}
               >
-                <Minus />
+                <Minus style={{ fontSize: "16px" }} />
               </ButtonBase>
             </InputAdornment>
           ),
@@ -131,7 +134,7 @@ class QuantityInput extends Component {
                 onClick={this.handleIncrementButton}
                 className={incrementButton}
               >
-                <Plus />
+                <Plus style={{ fontSize: "16px" }} />
               </ButtonBase>
             </InputAdornment>
           ),
diff --git a/package/src/components/StockWarning/v1/StockWarning.js b/package/src/components/StockWarning/v1/StockWarning.js
index 3aeedb9e..a96df648 100644
--- a/package/src/components/StockWarning/v1/StockWarning.js
+++ b/package/src/components/StockWarning/v1/StockWarning.js
@@ -5,6 +5,7 @@ import { applyTheme } from "../../../utils";
 
 const Span = styled.div`
   color: ${applyTheme("color_stockWarning")};
+  font-size: ${applyTheme("font_size_small")};
 `;
 
 class StockWarning extends Component {
@@ -25,9 +26,7 @@ class StockWarning extends Component {
 
     if (!isLowInventoryQuantity) return null;
 
-    return (
-      <Span>Only { inventoryQuantity } in stock</Span>
-    );
+    return <Span>Only {inventoryQuantity} in stock</Span>;
   }
 }
 
diff --git a/package/src/defaultComponentTheme.js b/package/src/defaultComponentTheme.js
index 5a6aff65..b07b04df 100644
--- a/package/src/defaultComponentTheme.js
+++ b/package/src/defaultComponentTheme.js
@@ -175,6 +175,7 @@ const defaultStyles = {
   rui_color_white: white,
   rui_font_family: fontFamily,
   rui_font_size_small: fontSize14,
+  rui_font_size_default: fontSize16,
   rui_font_weight_light: fontWeightLight,
   rui_font_weight_normal: fontWeightRegular,
   rui_font_weight_bold: fontWeightBold,
diff --git a/styleguide.config.js b/styleguide.config.js
index e1a875c9..23196cf2 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -279,7 +279,7 @@ module.exports = {
           name: "Product"
         }),
         generateSection({
-          componentNames: ["CartCheckoutButton", "CartEmptyMessage", "CartSummary", "MiniCartSummary", "CartItem", "CartItemDetail"],
+          componentNames: ["CartCheckoutButton", "CartEmptyMessage", "CartSummary", "MiniCartSummary", "CartItem", "CartItems", "CartItemDetail"],
           content: "styleguide/src/sections/Cart.md",
           name: "Cart"
         }),


Test patch:
diff --git a/package/src/components/CartItem/v1/__snapshots__/CartItem.test.js.snap b/package/src/components/CartItem/v1/__snapshots__/CartItem.test.js.snap
index c8b45062..757b2070 100644
--- a/package/src/components/CartItem/v1/__snapshots__/CartItem.test.js.snap
+++ b/package/src/components/CartItem/v1/__snapshots__/CartItem.test.js.snap
@@ -16,6 +16,10 @@ exports[`basic snapshot with empty props 1`] = `
   width: 100%;
 }
 
+.c0:first-of-type {
+  border-top: solid 1px #f5f5f5;
+}
+
 .c0 > * {
   box-sizing: border-box;
 }
@@ -63,7 +67,7 @@ exports[`basic snapshot with empty props 1`] = `
 }
 
 .c5 {
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .c7 {
@@ -140,6 +144,11 @@ exports[`basic snapshot with empty props 1`] = `
       <img
         alt=""
         src="undefined/100"
+        style={
+          Object {
+            "display": "block",
+          }
+        }
       />
     </picture>
   </a>
@@ -209,6 +218,10 @@ exports[`basic snapshot with props 1`] = `
   width: 100%;
 }
 
+.c0:first-of-type {
+  border-top: solid 1px #f5f5f5;
+}
+
 .c0 > * {
   box-sizing: border-box;
 }
@@ -256,7 +269,7 @@ exports[`basic snapshot with props 1`] = `
 }
 
 .c5 {
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .c7 {
@@ -333,6 +346,11 @@ exports[`basic snapshot with props 1`] = `
       <img
         alt=""
         src="http://placehold.it/100"
+        style={
+          Object {
+            "display": "block",
+          }
+        }
       />
     </picture>
   </a>
diff --git a/package/src/components/CartItemDetail/v1/__snapshots__/CartItemDetail.test.js.snap b/package/src/components/CartItemDetail/v1/__snapshots__/CartItemDetail.test.js.snap
index d5f72239..0e936fbe 100644
--- a/package/src/components/CartItemDetail/v1/__snapshots__/CartItemDetail.test.js.snap
+++ b/package/src/components/CartItemDetail/v1/__snapshots__/CartItemDetail.test.js.snap
@@ -29,14 +29,18 @@ exports[`basic snapshot with props 1`] = `
 }
 
 .c1 {
+  font-size: 16px;
+}
+
+.c2 {
   margin-bottom: 0.5rem;
 }
 
-.c1 span {
+.c2 span {
   display: none;
 }
 
-.c2 {
+.c3 {
   color: #595959;
   display: inline;
   font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
@@ -44,26 +48,26 @@ exports[`basic snapshot with props 1`] = `
   margin: 0 0.05rem 0 0;
 }
 
-.c2:after {
+.c3:after {
   content: ",";
 }
 
-.c2:last-of-type:after {
+.c3:last-of-type:after {
   content: "";
 }
 
 @media (min-width:768px) {
-  .c1 span {
+  .c2 span {
     display: inline;
   }
 }
 
 @media (min-width:768px) {
-  .c2 {
+  .c3 {
     display: block;
   }
 
-  .c2:after {
+  .c3:after {
     content: "";
   }
 }
@@ -71,7 +75,9 @@ exports[`basic snapshot with props 1`] = `
 <div
   className="c0"
 >
-  <h3>
+  <h3
+    className="c1"
+  >
     <a
       href="/product-slug"
     >
@@ -79,10 +85,10 @@ exports[`basic snapshot with props 1`] = `
     </a>
   </h3>
   <div
-    className="c1"
+    className="c2"
   >
     <p
-      className="c2"
+      className="c3"
     >
       <span>
         Color
@@ -92,7 +98,7 @@ exports[`basic snapshot with props 1`] = `
       Red
     </p>
     <p
-      className="c2"
+      className="c3"
     >
       <span>
         Size
@@ -133,7 +139,11 @@ exports[`basic snapshot with vendor attribute 1`] = `
   color: #5d8ea9;
 }
 
-.c2 {
+.c1 {
+  font-size: 16px;
+}
+
+.c3 {
   color: #595959;
   display: block;
   font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
@@ -141,15 +151,15 @@ exports[`basic snapshot with vendor attribute 1`] = `
   margin: 0;
 }
 
-.c1 {
+.c2 {
   margin-bottom: 0.5rem;
 }
 
-.c1 span {
+.c2 span {
   display: none;
 }
 
-.c3 {
+.c4 {
   color: #595959;
   display: inline;
   font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
@@ -157,26 +167,26 @@ exports[`basic snapshot with vendor attribute 1`] = `
   margin: 0 0.05rem 0 0;
 }
 
-.c3:after {
+.c4:after {
   content: ",";
 }
 
-.c3:last-of-type:after {
+.c4:last-of-type:after {
   content: "";
 }
 
 @media (min-width:768px) {
-  .c1 span {
+  .c2 span {
     display: inline;
   }
 }
 
 @media (min-width:768px) {
-  .c3 {
+  .c4 {
     display: block;
   }
 
-  .c3:after {
+  .c4:after {
     content: "";
   }
 }
@@ -184,7 +194,9 @@ exports[`basic snapshot with vendor attribute 1`] = `
 <div
   className="c0"
 >
-  <h3>
+  <h3
+    className="c1"
+  >
     <a
       href="/product-slug"
     >
@@ -192,15 +204,15 @@ exports[`basic snapshot with vendor attribute 1`] = `
     </a>
   </h3>
   <div
-    className="c1"
+    className="c2"
   >
     <p
-      className="c2"
+      className="c3"
     >
       Patagonia
     </p>
     <p
-      className="c3"
+      className="c4"
     >
       <span>
         Color
@@ -210,7 +222,7 @@ exports[`basic snapshot with vendor attribute 1`] = `
       Red
     </p>
     <p
-      className="c3"
+      className="c4"
     >
       <span>
         Size
@@ -251,10 +263,16 @@ exports[`basic snapshot without props 1`] = `
   color: #5d8ea9;
 }
 
+.c1 {
+  font-size: 16px;
+}
+
 <div
   className="c0"
 >
-  <h3>
+  <h3
+    className="c1"
+  >
     <a
       href={undefined}
     />
diff --git a/package/src/components/CartItems/v1/CartItems.test.js b/package/src/components/CartItems/v1/CartItems.test.js
new file mode 100644
index 00000000..b77e8e53
--- /dev/null
+++ b/package/src/components/CartItems/v1/CartItems.test.js
@@ -0,0 +1,62 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import CartItems from "./CartItems";
+
+test("basic snapshot with empty props", () => {
+  const component = renderer.create(<CartItems items={[]} />);
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test("basic snapshot with props", () => {
+  const mockItems = [
+    {
+      _id: "123",
+      attributes: [
+        { label: "vendor", value: "Patagonia" },
+        { label: "Color", value: "Red" },
+        { label: "Size", value: "Medium" }
+      ],
+      currentQuantity: 3,
+      imageUrl: "http://placehold.it",
+      isLowInventoryQuantity: true,
+      price: {
+        displayPrice: "$20.00",
+        compareAtPrice: "$45.00"
+      },
+      productSlug: "/product-slug",
+      title: "A Great Product",
+      quantity: 2
+    },
+    {
+      _id: "456",
+      attributes: [
+        { label: "vendor", value: "Nike" },
+        { label: "Color", value: "Black" },
+        { label: "Size", value: "10" }
+      ],
+      currentQuantity: 500,
+      imageUrl: "http://placehold.it",
+      isLowInventoryQuantity: false,
+      price: {
+        displayPrice: "$78.00"
+      },
+      productSlug: "/product-slug",
+      title: "Another Great Product",
+      quantity: 1
+    }
+  ];
+  const mockComponents = {
+    CartItemComponent: () => "Cart Item",
+    CartItemDetailComponent: () => "Cart Item Detail",
+    CartItemStockWarningComponent: () => "Cart Item Stock Warning",
+    CartItemPriceComponent: () => " Cart Item Price",
+    CartItemQuantityInputComponent: () => "Cart Item Quantity Input"
+  };
+
+  const component = renderer.create(<CartItems items={mockItems} components={mockComponents} />);
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/package/src/components/CartItems/v1/__snapshots__/CartItems.test.js.snap b/package/src/components/CartItems/v1/__snapshots__/CartItems.test.js.snap
new file mode 100644
index 00000000..fcdf7713
--- /dev/null
+++ b/package/src/components/CartItems/v1/__snapshots__/CartItems.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic snapshot with empty props 1`] = `
+<div
+  className=""
+/>
+`;
+
+exports[`basic snapshot with props 1`] = `
+<div
+  className=""
+>
+  Cart Item
+  Cart Item
+</div>
+`;
diff --git a/package/src/components/Price/v1/__snapshots__/Price.test.js.snap b/package/src/components/Price/v1/__snapshots__/Price.test.js.snap
index e179e3a9..368791a3 100644
--- a/package/src/components/Price/v1/__snapshots__/Price.test.js.snap
+++ b/package/src/components/Price/v1/__snapshots__/Price.test.js.snap
@@ -5,11 +5,13 @@ exports[`Display error warning about required prop 1`] = `"Failed undefined type
 exports[`Renders price with a compare at price 1`] = `
 .c0 {
   display: block;
+  font-size: 14px;
 }
 
 .c1 {
-  display: block;
   color: #bfbfbf;
+  display: block;
+  font-size: 14px;
 }
 
 <div>
@@ -29,6 +31,7 @@ exports[`Renders price with a compare at price 1`] = `
 exports[`Renders price without a compare at price 1`] = `
 .c0 {
   display: block;
+  font-size: 14px;
 }
 
 <div>
@@ -43,6 +46,7 @@ exports[`Renders price without a compare at price 1`] = `
 exports[`Renders price without a compare at price, due to the fact that the prices are equal. 1`] = `
 .c0 {
   display: block;
+  font-size: 14px;
 }
 
 <div>
diff --git a/package/src/components/QuantityInput/v1/__snapshots__/QuantityInput.test.js.snap b/package/src/components/QuantityInput/v1/__snapshots__/QuantityInput.test.js.snap
index 0a1d3d36..5575dfa1 100644
--- a/package/src/components/QuantityInput/v1/__snapshots__/QuantityInput.test.js.snap
+++ b/package/src/components/QuantityInput/v1/__snapshots__/QuantityInput.test.js.snap
@@ -35,6 +35,11 @@ exports[`basic snapshot 1`] = `
           className="MuiSvgIcon-root-27"
           color={undefined}
           focusable="false"
+          style={
+            Object {
+              "fontSize": "16px",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g>
@@ -97,6 +102,11 @@ exports[`basic snapshot 1`] = `
           className="MuiSvgIcon-root-27"
           color={undefined}
           focusable="false"
+          style={
+            Object {
+              "fontSize": "16px",
+            }
+          }
           viewBox="0 0 24 24"
         >
           <g>
diff --git a/package/src/components/StockWarning/v1/__snapshots__/StockWarning.test.js.snap b/package/src/components/StockWarning/v1/__snapshots__/StockWarning.test.js.snap
index 4956d0d5..65edd639 100644
--- a/package/src/components/StockWarning/v1/__snapshots__/StockWarning.test.js.snap
+++ b/package/src/components/StockWarning/v1/__snapshots__/StockWarning.test.js.snap
@@ -7,6 +7,7 @@ exports[`Renders nothing when stock level is normal 1`] = `null`;
 exports[`Renders stock warning when inventory is low 1`] = `
 .c0 {
   color: #cd3f4c;
+  font-size: 14px;
 }
 
 <div