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

Issue:
Price Component needs ability to render compareAtPrice above displayPrice
@nnnnat commented on [Tue Jun 26 2018](https://github.com/reactioncommerce/reaction-next-starterkit/issues/163)

The Price component needs the ability to render the `compareAtPrice` above the `displayPrice`.
![screen shot 2018-06-26 at 12 37 14 pm](https://user-images.githubusercontent.com/1135948/41929524-f055aa00-793d-11e8-9c19-65cc630e26ad.png)
![screen shot 2018-06-26 at 12 37 08 pm](https://user-images.githubusercontent.com/1135948/41929525-f0745c20-793d-11e8-8b6a-1287b9edf8f0.png)

I think this should just be a simple boolean prop something like `hasPriceBelow` to render the `displayPrice` below the `comparAtPrice`.



Pull request:
(feat): 128 nnnnat mini cart
Resolves #128
Resolves #95  
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
MiniCart component based on this [spec](https://github.com/reactioncommerce/reaction-next-starterkit/issues/128).

## Solution
* Created a new MiniCart component.
* Added an `isMiniCart` prop to the CartItems, CartItem and CartItemDetail components to adjust the style if being used inside a MiniCart.
* Fixed a few styles in other Cart components
* Added a `hasPriceBottom` prop to the Price component #95 

## Screenshots
No Scroll
![screen shot 2018-07-03 at 4 26 17 pm](https://user-images.githubusercontent.com/1135948/42245348-19a072b4-7ede-11e8-8a3c-992facbd728a.png)

With Scroll
![screen shot 2018-07-03 at 4 26 26 pm](https://user-images.githubusercontent.com/1135948/42245364-242f57ae-7ede-11e8-9c4e-ad28ad5b9c29.png)

## Notes
This component was built inside the comp-library so it has not been connected to the Cart button.

## Testing
1. Make sure it looks correct and works


Patch:
diff --git a/package/src/components/CartItem/v1/CartItem.js b/package/src/components/CartItem/v1/CartItem.js
index c9a9263c..0c01d880 100644
--- a/package/src/components/CartItem/v1/CartItem.js
+++ b/package/src/components/CartItem/v1/CartItem.js
@@ -43,15 +43,15 @@ const ItemContentDetailInfo = styled.div`
   flex: 1 1 100%;
 
   @media (min-width: 992px) {
-    flex: 1 1 auto;
+    flex: 1 1 ${({ isMiniCart }) => (isMiniCart ? "100%" : "auto")};
   }
 `;
 
 const ItemContentQuantityInput = styled.div`
-  margin: 0.5rem 0;
+  margin: 0.75rem 0 0.5rem;
 
   @media (min-width: 992px) {
-    margin: 0;
+    margin: ${({ isMiniCart }) => (isMiniCart ? "0.75rem 0 0.5rem" : "0")};
   }
 `;
 
@@ -63,7 +63,7 @@ const ItemContentPrice = styled.div`
 
   @media (min-width: 768px) {
     margin-left: 1.5rem;
-    position: relative;
+    position: ${({ isMiniCart }) => (isMiniCart ? "absolute" : "relative")};
   }
 `;
 
@@ -113,6 +113,10 @@ class CartItem extends Component {
        */
       CartItemQuantityInputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
     }),
+    /**
+     * Is in a MiniCart component
+     */
+    isMiniCart: PropTypes.bool,
     /**
      * CartItem data
      */
@@ -208,11 +212,11 @@ class CartItem extends Component {
   };
 
   renderImage() {
-    const { item: { imageUrl, productSlug } } = this.props;
+    const { isMiniCart, item: { imageUrl, productSlug } } = this.props;
     return (
       <a href={productSlug}>
         <picture>
-          <source srcSet={`${imageUrl}/150`} media="(min-width: 768px)" />
+          {isMiniCart ? "" : <source srcSet={`${imageUrl}/150`} media="(min-width: 768px)" />}
           <img src={`${imageUrl}/100`} alt="" style={{ display: "block" }} />
         </picture>
       </a>
@@ -227,6 +231,7 @@ class CartItem extends Component {
         CartItemPriceComponent,
         CartItemQuantityInputComponent
       },
+      isMiniCart,
       item: {
         attributes,
         currentQuantity,
@@ -243,8 +248,13 @@ class CartItem extends Component {
         <ItemContent>
           <ItemContentDetail>
             <ItemContentDetailInner>
-              <ItemContentDetailInfo>
-                <CartItemDetailComponent title={title} productSlug={productSlug} attributes={attributes} />
+              <ItemContentDetailInfo isMiniCart={isMiniCart}>
+                <CartItemDetailComponent
+                  title={title}
+                  productSlug={productSlug}
+                  attributes={attributes}
+                  isMiniCart={isMiniCart}
+                />
 
                 <CartItemStockWarningComponent
                   inventoryQuantity={currentQuantity}
@@ -252,7 +262,7 @@ class CartItem extends Component {
                 />
               </ItemContentDetailInfo>
 
-              <ItemContentQuantityInput>
+              <ItemContentQuantityInput isMiniCart={isMiniCart}>
                 <CartItemQuantityInputComponent value={quantity} onChange={this.handleChangeCartItemQuantity} />
               </ItemContentQuantityInput>
             </ItemContentDetailInner>
@@ -260,8 +270,12 @@ class CartItem extends Component {
             <ItemRemoveButton onClick={this.handleRemoveItemFromCart}>Remove</ItemRemoveButton>
           </ItemContentDetail>
 
-          <ItemContentPrice>
-            <CartItemPriceComponent displayPrice={displayPrice} displayCompareAtPrice={compareAtPrice} />
+          <ItemContentPrice isMiniCart={isMiniCart}>
+            <CartItemPriceComponent
+              displayPrice={displayPrice}
+              displayCompareAtPrice={compareAtPrice}
+              hasPriceBottom={isMiniCart}
+            />
           </ItemContentPrice>
         </ItemContent>
       </Item>
diff --git a/package/src/components/CartItem/v1/CartItem.md b/package/src/components/CartItem/v1/CartItem.md
index b7b03d91..4a002ffa 100644
--- a/package/src/components/CartItem/v1/CartItem.md
+++ b/package/src/components/CartItem/v1/CartItem.md
@@ -92,3 +92,34 @@ const item = {
   onRemoveItemFromCart={() => console.log("Item removed from cart")}
 />
 ```
+
+#### In Mini Cart
+```jsx
+const item = {
+  _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
+};
+
+<CartItem
+isMiniCart
+  components={{
+    CartItemDetailComponent: CartItemDetail,
+    CartItemStockWarningComponent: StockWarning,
+    CartItemPriceComponent: Price,
+    CartItemQuantityInputComponent: QuantityInput
+  }}
+  item={item}
+  onChangeCartItemQuantity={value => console.log("cart item quantity changed to", value)}
+  onRemoveItemFromCart={() => console.log("Item removed from cart")}
+/>
+```
diff --git a/package/src/components/CartItemDetail/v1/CartItemDetail.js b/package/src/components/CartItemDetail/v1/CartItemDetail.js
index 0e7231e2..7d017440 100644
--- a/package/src/components/CartItemDetail/v1/CartItemDetail.js
+++ b/package/src/components/CartItemDetail/v1/CartItemDetail.js
@@ -42,7 +42,7 @@ const Attributes = styled.div`
     display: none;
 
     @media (min-width: 768px) {
-      display: inline;
+      display: ${({ isMiniCart }) => (isMiniCart ? "none" : "inline")};
     }
   }
 `;
@@ -63,10 +63,10 @@ const Attr = styled.p`
   }
 
   @media (min-width: 768px) {
-    display: block;
+    display: ${({ isMiniCart }) => (isMiniCart ? "inline" : "block")};
 
     &:after {
-      content: "";
+      content: ${({ isMiniCart }) => (isMiniCart ? "','" : "''")};
     }
   }
 `;
@@ -86,6 +86,10 @@ class CartItemDetail extends Component {
          */
       value: PropTypes.string
     })),
+    /**
+     * Is in a MiniCart component
+     */
+    isMiniCart: PropTypes.bool,
     /**
      * Product slug of chosen item.
      */
@@ -98,13 +102,14 @@ class CartItemDetail extends Component {
 
   renderAttributes() {
     let { attributes } = this.props;
+    const { isMiniCart } = this.props;
     const { value: vendor } = attributes.find((attr) => attr.label === "vendor") || { value: undefined };
     attributes = attributes.filter((attr) => attr.label !== "vendor");
     return (
-      <Attributes>
+      <Attributes isMiniCart={isMiniCart}>
         {vendor ? <Vendor>{vendor}</Vendor> : null}
         {attributes.map(({ label, value }) => (
-          <Attr key={label}>
+          <Attr key={label} isMiniCart={isMiniCart}>
             <span>{label}:</span> {value}
           </Attr>
         ))}
diff --git a/package/src/components/CartItemDetail/v1/CartItemDetail.md b/package/src/components/CartItemDetail/v1/CartItemDetail.md
index 1e9387bd..c8cc560a 100644
--- a/package/src/components/CartItemDetail/v1/CartItemDetail.md
+++ b/package/src/components/CartItemDetail/v1/CartItemDetail.md
@@ -15,3 +15,9 @@ If a `CartItemAttribute` has a label of `"vendor"` the `CartItemDetail` componen
 const attributes = [{ label: "vendor", value: "Patagonia" }, { label: "Color", value: "Red" }, { label: "Size", value: "Medium" }];
 <CartItemDetail title="Amazing Product Title" productSlug="/product-slug" attributes={attributes} />
 ```
+
+#### In Mini Cart
+```jsx
+const attributes = [{ label: "vendor", value: "Patagonia" }, { label: "Color", value: "Red" }, { label: "Size", value: "Medium" }];
+<CartItemDetail title="Amazing Product Title" productSlug="/product-slug" attributes={attributes} isMiniCart />
+```
diff --git a/package/src/components/CartItems/v1/CartItems.js b/package/src/components/CartItems/v1/CartItems.js
index eaaeded2..d35f4f53 100644
--- a/package/src/components/CartItems/v1/CartItems.js
+++ b/package/src/components/CartItems/v1/CartItems.js
@@ -31,6 +31,10 @@ class CartItems extends Component {
        */
       CartItemQuantityInputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
     }),
+    /**
+     * Is in a MiniCart component
+     */
+    isMiniCart: PropTypes.bool,
     /**
      * CartItem data
      */
diff --git a/package/src/components/CartItems/v1/CartItems.md b/package/src/components/CartItems/v1/CartItems.md
index fb870a3c..e76cbafe 100644
--- a/package/src/components/CartItems/v1/CartItems.md
+++ b/package/src/components/CartItems/v1/CartItems.md
@@ -43,3 +43,45 @@ const components = {
 
 <CartItems items={items} components={components} onChangeCartItemQuantity={(value) => console.log("cart items new quantity", value)} onRemoveItemFromCart={(_id) => console.log("cart items remove this item", _id)}/>
 ```
+
+
+#### In Mini Cart
+```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)} isMiniCart />
+```
diff --git a/package/src/components/CartSummary/v1/CartSummary.js b/package/src/components/CartSummary/v1/CartSummary.js
index 6f87cd52..13bedbdb 100644
--- a/package/src/components/CartSummary/v1/CartSummary.js
+++ b/package/src/components/CartSummary/v1/CartSummary.js
@@ -10,37 +10,44 @@ const Table = styled.table`
 `;
 
 const Th = styled.th`
+  font-family: ${applyTheme("font_family")};
   text-align: left;
 `;
 
 const Thr = styled.th`
   text-align: right;
   color: ${applyTheme("color_black30")};
+  font-family: ${applyTheme("font_family")};
   font-weight: normal;
 `;
 
 const TdValue = styled.td`
+  font-family: ${applyTheme("font_family")};
   text-align: right;
   padding: 1rem 0;
   color: ${applyTheme("color_coolGrey500")};
 `;
 
 const Td = styled.td`
+  font-family: ${applyTheme("font_family")};
   padding: 1rem 0;
   color: ${applyTheme("color_coolGrey400")};
 `;
 
 const Title = styled.span`
+  font-family: ${applyTheme("font_family")};
   font-weight: ${applyTheme("font_weight_bold")};
   color: ${applyTheme("color_coolGrey500")};
 `;
 
 const Discount = styled.span`
+  font-family: ${applyTheme("font_family")};
   color: ${applyTheme("color_forestGreen300")};
   font-weight: ${applyTheme("font_weight_bold")};
 `;
 
 const Total = styled.span`
+  font-family: ${applyTheme("font_family")};
   font-weight: ${applyTheme("font_weight_bold")};
   color: ${applyTheme("color_coolGrey500")};
 `;
@@ -75,7 +82,7 @@ class CartSummary extends Component {
      * Quantity of products in shopping cart
      */
     itemsQuantity: PropTypes.number.isRequired
-  }
+  };
 
   renderDiscount = () => {
     const { displayDiscount } = this.props;
@@ -83,10 +90,12 @@ class CartSummary extends Component {
     return (
       <tr>
         <Td>Promo code applied</Td>
-        <TdValue><Discount>{displayDiscount}</Discount></TdValue>
+        <TdValue>
+          <Discount>{displayDiscount}</Discount>
+        </TdValue>
       </tr>
     );
-  }
+  };
 
   render() {
     const {
@@ -99,7 +108,7 @@ class CartSummary extends Component {
       itemsQuantity
     } = this.props;
 
-    const shipping = (isFreeShipping) ? "FREE" : displayShipping;
+    const shipping = isFreeShipping ? "FREE" : displayShipping;
     const tax = displayTax || "-";
     const discount = displayDiscount && this.renderDiscount();
 
@@ -108,13 +117,9 @@ class CartSummary extends Component {
         <thead>
           <tr>
             <Th>
-              <Title>
-                  Cart Summary
-              </Title>
+              <Title>Cart Summary</Title>
             </Th>
-            <Thr>
-              {itemsQuantity} items
-            </Thr>
+            <Thr>{itemsQuantity} items</Thr>
           </tr>
         </thead>
         <tbody>
@@ -133,7 +138,9 @@ class CartSummary extends Component {
           </tr>
           <tr>
             <Td>Total</Td>
-            <TdValue><Total>{displayTotal}</Total></TdValue>
+            <TdValue>
+              <Total>{displayTotal}</Total>
+            </TdValue>
           </tr>
         </tbody>
       </Table>
diff --git a/package/src/components/MiniCart/v1/MiniCart.js b/package/src/components/MiniCart/v1/MiniCart.js
new file mode 100644
index 00000000..d13de0cf
--- /dev/null
+++ b/package/src/components/MiniCart/v1/MiniCart.js
@@ -0,0 +1,213 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { applyTheme } from "../../../utils";
+
+const Cart = styled.div`
+  border: 1px solid ${applyTheme("color_black10")};
+  max-width: 360px;
+  overflow: hidden;
+`;
+
+const Items = styled.div`
+  max-height: 420px;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+
+const Footer = styled.div`
+  border-top: 1px solid ${applyTheme("color_black10")};
+  box-shadow: ${({ count }) => (count > 2 ? applyTheme("shadow_depth1") : "none")};
+  padding: 0 1rem 1rem;
+  position: relative;
+
+  span {
+    color: ${applyTheme("color_black30")};
+    display: block;
+    font-family: ${applyTheme("font_family")};
+    font-size: ${applyTheme("font_size_small")};
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.25;
+    letter-spacing: 0.3px;
+    margin: 0.5rem 0 0;
+    text-align: center;
+  }
+`;
+
+class MiniCart extends Component {
+  static propTypes = {
+    /**
+     * Cart data
+     */
+    cart: PropTypes.shape({
+      /**
+       * Cart checkout info
+       */
+      checkout: PropTypes.shape({
+        /**
+         * Checkout summary
+         */
+        summary: PropTypes.shape({
+          /**
+           * Checkout summary subtotal info
+           */
+          subtotal: PropTypes.shape({
+            /**
+             * Checkout summary subtotal display amount
+             */
+            displayAmmount: PropTypes.string
+          }),
+          /**
+           * Checkout summary tax info
+           */
+          tax: PropTypes.shape({
+            /**
+             * Checkout summary tax display amount
+             */
+            displayAmount: PropTypes.string
+          })
+        })
+      }),
+      /**
+       * 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,
+    /**
+     * Provided child components to display item data
+     */
+    components: PropTypes.shape({
+      /**
+       * CartCheckoutButton component
+       */
+      CartCheckoutButtonComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /**
+       * CartSummary component
+       */
+      CartSummaryComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+      /**
+       * 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])
+    }),
+    /**
+     * On cart item quantity change handler
+     */
+    onChangeCartItemQuantity: PropTypes.func,
+    /**
+     * On remove item from cart handler
+     */
+    onRemoveItemFromCart: PropTypes.func
+  };
+
+  static defaultProps = {
+    components: {
+      CartCheckoutButtonComponent: "Cart Checkout Button",
+      CartSummaryComponent: "Cart Summary",
+      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 {
+      cart: { checkout: { summary }, items },
+      components: {
+        ButtonComponent,
+        CartCheckoutButtonComponent,
+        CartItemsComponent,
+        CartSummaryComponent,
+        ...components
+      },
+      ...props
+    } = this.props;
+    return (
+      <Cart>
+        <Items>
+          <CartItemsComponent items={items} components={components} {...props} isMiniCart />
+        </Items>
+        <Footer count={items.length}>
+          <CartSummaryComponent displaySubtotal={summary.subtotal.displayAmount} />
+          <CartCheckoutButtonComponent components={{ Button: ButtonComponent }} />
+          <span>Shipping and tax calculated in checkout</span>
+        </Footer>
+      </Cart>
+    );
+  }
+}
+
+export default MiniCart;
diff --git a/package/src/components/MiniCart/v1/MiniCart.md b/package/src/components/MiniCart/v1/MiniCart.md
new file mode 100644
index 00000000..f107c3e0
--- /dev/null
+++ b/package/src/components/MiniCart/v1/MiniCart.md
@@ -0,0 +1,136 @@
+### MiniCart
+
+```jsx
+const checkout = {
+  summary: {
+    subtotal: {
+      displayAmount: "$25.00"
+    },
+    tax: {
+      displayAmount: "$2.50"
+    }
+  }
+}
+
+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 = {
+  CartCheckoutButtonComponent: () => <Button actionType="important" isFullWidth>Checkout</Button>,
+  CartSummaryComponent: MiniCartSummary,
+  CartItemsComponent: CartItems,
+  CartItemComponent: CartItem,
+  CartItemDetailComponent: CartItemDetail,
+  CartItemStockWarningComponent: StockWarning,
+  CartItemPriceComponent: Price,
+  CartItemQuantityInputComponent: QuantityInput
+};
+
+<MiniCart cart={{ checkout, items }} components={components} />
+```
+
+```jsx
+const checkout = {
+  summary: {
+    subtotal: {
+      displayAmount: "$25.00"
+    },
+    tax: {
+      displayAmount: "$2.50"
+    }
+  }
+}
+
+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
+},
+{
+  _id: "789",
+  attributes: [{ label: "vendor", value: "Everlane" }, { label: "Color", value: "White" }, { label: "Size", value: "Medium" }],
+  currentQuantity: 3,
+  imageUrl: "http://placehold.it",
+  isLowInventoryQuantity: false,
+  price: {
+    displayPrice: "$20.00"
+  },
+  productSlug: "/product-slug",
+  title: "A Product",
+  quantity: 2
+},
+{
+  _id: "112",
+  attributes: [{ label: "vendor", value: "Greats" }, { label: "Color", value: "Black" }, { label: "Size", value: "10" }],
+  currentQuantity: 500,
+  imageUrl: "http://placehold.it",
+  isLowInventoryQuantity: false,
+  price: {
+    displayPrice: "$150.00"
+  },
+  productSlug: "/product-slug",
+  title: "Another Product",
+  quantity: 1
+}];
+
+const components = {
+  CartCheckoutButtonComponent: () => <Button actionType="important" isFullWidth>Checkout</Button>,
+  CartSummaryComponent: MiniCartSummary,
+  CartItemsComponent: CartItems,
+  CartItemComponent: CartItem,
+  CartItemDetailComponent: CartItemDetail,
+  CartItemStockWarningComponent: StockWarning,
+  CartItemPriceComponent: Price,
+  CartItemQuantityInputComponent: QuantityInput
+};
+
+<MiniCart cart={{ checkout, items }} components={components} />
+```
diff --git a/package/src/components/MiniCart/v1/index.js b/package/src/components/MiniCart/v1/index.js
new file mode 100644
index 00000000..a3ee24af
--- /dev/null
+++ b/package/src/components/MiniCart/v1/index.js
@@ -0,0 +1,1 @@
+export { default } from "./MiniCart";
diff --git a/package/src/components/MiniCartSummary/v1/MiniCartSummary.js b/package/src/components/MiniCartSummary/v1/MiniCartSummary.js
index 6dc7a9ce..e8925e0e 100644
--- a/package/src/components/MiniCartSummary/v1/MiniCartSummary.js
+++ b/package/src/components/MiniCartSummary/v1/MiniCartSummary.js
@@ -5,7 +5,7 @@ import { applyTheme } from "../../../utils";
 
 const Table = styled.table`
   width: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
 `;
 
 const Td = styled.td`
@@ -42,7 +42,7 @@ class MiniCartSummary extends Component {
         <TdValue>{displayTax}</TdValue>
       </tr>
     );
-  }
+  };
 
   render() {
     const { displaySubtotal, displayTax } = this.props;
diff --git a/package/src/components/Price/v1/Price.js b/package/src/components/Price/v1/Price.js
index 8911a293..250e31ff 100644
--- a/package/src/components/Price/v1/Price.js
+++ b/package/src/components/Price/v1/Price.js
@@ -5,12 +5,14 @@ import { applyTheme } from "../../../utils";
 
 const Span = styled.span`
   display: block;
+  font-family: ${applyTheme("font_family")};
   font-size: ${applyTheme("font_size_small")};
 `;
 
 const Del = styled.del`
   color: ${applyTheme("color_disabled")};
   display: block;
+  font-family: ${applyTheme("font_family")};
   font-size: ${applyTheme("font_size_small")};
 `;
 
@@ -25,7 +27,11 @@ class Price extends Component {
      * The product's price.
      * This value is expected to have the currency symbol, i.e. $300.00
      */
-    displayPrice: PropTypes.string.isRequired
+    displayPrice: PropTypes.string.isRequired,
+    /**
+     * Renders price below the compare at price
+     */
+    hasPriceBottom: PropTypes.bool
   };
 
   renderCompareAtPrice = () => {
@@ -38,12 +44,13 @@ class Price extends Component {
   };
 
   render() {
-    const { displayCompareAtPrice, displayPrice } = this.props;
+    const { displayCompareAtPrice, displayPrice, hasPriceBottom } = this.props;
 
     return (
       <div>
-        <Span>{displayPrice}</Span>
+        {hasPriceBottom ? "" : <Span>{displayPrice}</Span>}
         {displayCompareAtPrice ? this.renderCompareAtPrice() : null}
+        {hasPriceBottom ? <Span>{displayPrice}</Span> : ""}
       </div>
     );
   }
diff --git a/package/src/components/Price/v1/Price.md b/package/src/components/Price/v1/Price.md
index c3587a12..00d503c0 100644
--- a/package/src/components/Price/v1/Price.md
+++ b/package/src/components/Price/v1/Price.md
@@ -24,3 +24,10 @@ The component expects string values of the prices to be strictly equal.
   <Price displayPrice="$300.00" displayCompareAtPrice="$300.00" />
 </div>
 ```
+
+#### Usage with the price below the compare at price.
+```jsx
+<div>
+  <Price displayPrice="$200.00" displayCompareAtPrice="$300.00" hasPriceBottom />
+</div>
+```
diff --git a/package/src/components/QuantityInput/v1/QuantityInput.js b/package/src/components/QuantityInput/v1/QuantityInput.js
index 1ca140df..be1915ef 100644
--- a/package/src/components/QuantityInput/v1/QuantityInput.js
+++ b/package/src/components/QuantityInput/v1/QuantityInput.js
@@ -18,6 +18,7 @@ const styles = () => ({
     border: "1px solid #d9d9d9",
     borderRadius: "2px",
     boxSizing: "border-box",
+    height: "30px",
     overflow: "hidden",
     padding: 0
   },
@@ -29,7 +30,8 @@ const styles = () => ({
     "boxSizing": "inherit",
     "color": "#3c3c3c",
     "fontSize": "12px",
-    "maxHeight": "30px",
+    "lineHeight": "2",
+    "height": "30px",
     "maxWidth": "40px",
     "textAlign": "center",
     "&:focus": {
@@ -122,7 +124,7 @@ class QuantityInput extends Component {
                 onClick={this.handleDecrementButton}
                 className={incrementButton}
               >
-                <Minus style={{ fontSize: "16px" }} />
+                <Minus style={{ fontSize: "14px" }} />
               </ButtonBase>
             </InputAdornment>
           ),
@@ -134,7 +136,7 @@ class QuantityInput extends Component {
                 onClick={this.handleIncrementButton}
                 className={incrementButton}
               >
-                <Plus style={{ fontSize: "16px" }} />
+                <Plus style={{ fontSize: "14px" }} />
               </ButtonBase>
             </InputAdornment>
           ),
diff --git a/package/src/components/StockWarning/v1/StockWarning.js b/package/src/components/StockWarning/v1/StockWarning.js
index a96df648..132ecf5f 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-family: ${applyTheme("font_family")};
   font-size: ${applyTheme("font_size_small")};
 `;
 
diff --git a/package/src/defaultComponentTheme.js b/package/src/defaultComponentTheme.js
index b07b04df..e8d816b3 100644
--- a/package/src/defaultComponentTheme.js
+++ b/package/src/defaultComponentTheme.js
@@ -149,6 +149,13 @@ const baseUnit = (size) => `${spacingBase * size}rem`;
  */
 const borderRadius = baseUnit(0.2);
 
+/**
+ * Default Theme Shadows
+ */
+const depth0 = "none";
+const depth1 = `0 0 1rem -0.5rem ${black50}`;
+const depth2 = `0 0 1rem ${black50}`;
+
 /**
  * Default Theme Elements
  */
@@ -158,8 +165,10 @@ const defaultStyles = {
   rui_color_disabled: black25,
   rui_color_black02: black02,
   rui_color_black05: black05,
+  rui_color_black10: black10,
   rui_color_black15: black15,
   rui_color_black30: black30,
+  rui_color_black50: black50,
   rui_color_black65: black65,
   rui_color_error: red,
   rui_color_stockWarning: red,
@@ -181,7 +190,8 @@ const defaultStyles = {
   rui_font_weight_bold: fontWeightBold,
   rui_leading_body: bodyLeading,
   rui_leading_header: headerLeading,
-  rui_leading_flat: flatLeading
+  rui_leading_flat: flatLeading,
+  rui_shadow_depth1: depth1
 };
 
 // buttons
diff --git a/styleguide.config.js b/styleguide.config.js
index 2841d930..a3b21b20 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -284,7 +284,7 @@ module.exports = {
           name: "Product"
         }),
         generateSection({
-          componentNames: ["CartEmptyMessage", "CartSummary", "MiniCartSummary", "CartItem", "CartItems", "CartItemDetail"],
+          componentNames: ["CartEmptyMessage", "CartSummary", "CartItem", "CartItems", "CartItemDetail", "MiniCartSummary", "MiniCart"],
           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 757b2070..a24bc698 100644
--- a/package/src/components/CartItem/v1/__snapshots__/CartItem.test.js.snap
+++ b/package/src/components/CartItem/v1/__snapshots__/CartItem.test.js.snap
@@ -67,7 +67,7 @@ exports[`basic snapshot with empty props 1`] = `
 }
 
 .c5 {
-  margin: 0.5rem 0;
+  margin: 0.75rem 0 0.5rem;
 }
 
 .c7 {
@@ -166,6 +166,7 @@ exports[`basic snapshot with empty props 1`] = `
         >
           <Cart Item Detail
             attributes={undefined}
+            isMiniCart={undefined}
             productSlug={undefined}
             title={undefined}
           />
@@ -196,6 +197,7 @@ exports[`basic snapshot with empty props 1`] = `
       <Cart Item Price
         displayCompareAtPrice={undefined}
         displayPrice={undefined}
+        hasPriceBottom={undefined}
       />
     </div>
   </div>
@@ -269,7 +271,7 @@ exports[`basic snapshot with props 1`] = `
 }
 
 .c5 {
-  margin: 0.5rem 0;
+  margin: 0.75rem 0 0.5rem;
 }
 
 .c7 {
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 0e936fbe..376adc27 100644
--- a/package/src/components/CartItemDetail/v1/__snapshots__/CartItemDetail.test.js.snap
+++ b/package/src/components/CartItemDetail/v1/__snapshots__/CartItemDetail.test.js.snap
@@ -68,7 +68,7 @@ exports[`basic snapshot with props 1`] = `
   }
 
   .c3:after {
-    content: "";
+    content: '';
   }
 }
 
@@ -187,7 +187,7 @@ exports[`basic snapshot with vendor attribute 1`] = `
   }
 
   .c4:after {
-    content: "";
+    content: '';
   }
 }
 
diff --git a/package/src/components/CartSummary/v1/__snapshots__/CartSummary.test.js.snap b/package/src/components/CartSummary/v1/__snapshots__/CartSummary.test.js.snap
index 74d88748..12e8812f 100644
--- a/package/src/components/CartSummary/v1/__snapshots__/CartSummary.test.js.snap
+++ b/package/src/components/CartSummary/v1/__snapshots__/CartSummary.test.js.snap
@@ -8,32 +8,38 @@ exports[`Displays a summary of the current items in the cart 1`] = `
 }
 
 .c1 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   text-align: left;
 }
 
 .c3 {
   text-align: right;
   color: #b3b3b3;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: normal;
 }
 
 .c5 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   text-align: right;
   padding: 1rem 0;
   color: #3c3c3c;
 }
 
 .c4 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   padding: 1rem 0;
   color: #3c5d6f;
 }
 
 .c2 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: 700;
   color: #3c3c3c;
 }
 
 .c6 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: 700;
   color: #3c3c3c;
 }
@@ -125,32 +131,38 @@ exports[`Displays a summary with FREE shipping 1`] = `
 }
 
 .c1 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   text-align: left;
 }
 
 .c3 {
   text-align: right;
   color: #b3b3b3;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: normal;
 }
 
 .c5 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   text-align: right;
   padding: 1rem 0;
   color: #3c3c3c;
 }
 
 .c4 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   padding: 1rem 0;
   color: #3c5d6f;
 }
 
 .c2 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: 700;
   color: #3c3c3c;
 }
 
 .c6 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: 700;
   color: #3c3c3c;
 }
@@ -242,37 +254,44 @@ exports[`Displays a summary with applied discount 1`] = `
 }
 
 .c1 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   text-align: left;
 }
 
 .c3 {
   text-align: right;
   color: #b3b3b3;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: normal;
 }
 
 .c5 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   text-align: right;
   padding: 1rem 0;
   color: #3c3c3c;
 }
 
 .c4 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   padding: 1rem 0;
   color: #3c5d6f;
 }
 
 .c2 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: 700;
   color: #3c3c3c;
 }
 
 .c6 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   color: #0db781;
   font-weight: 700;
 }
 
 .c7 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: 700;
   color: #3c3c3c;
 }
@@ -380,32 +399,38 @@ exports[`Displays a summary with calculated taxes 1`] = `
 }
 
 .c1 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   text-align: left;
 }
 
 .c3 {
   text-align: right;
   color: #b3b3b3;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: normal;
 }
 
 .c5 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   text-align: right;
   padding: 1rem 0;
   color: #3c3c3c;
 }
 
 .c4 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   padding: 1rem 0;
   color: #3c5d6f;
 }
 
 .c2 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: 700;
   color: #3c3c3c;
 }
 
 .c6 {
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-weight: 700;
   color: #3c3c3c;
 }
diff --git a/package/src/components/MiniCart/v1/MiniCart.test.js b/package/src/components/MiniCart/v1/MiniCart.test.js
new file mode 100644
index 00000000..4ca88b18
--- /dev/null
+++ b/package/src/components/MiniCart/v1/MiniCart.test.js
@@ -0,0 +1,71 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import MiniCart from "./MiniCart";
+
+const mockCheckout = {
+  summary: {
+    subtotal: {
+      displayAmount: "$25.00"
+    },
+    tax: {
+      displayAmount: "$2.50"
+    }
+  }
+};
+
+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 = {
+  ButtonComponent: () => "Button",
+  CartCheckoutButtonComponent: () => "Cart Checkout Button",
+  CartSummaryComponent: () => "Cart Summary",
+  CartItemsComponent: () => "Cart Items",
+  CartItemComponent: () => "Cart Item",
+  CartItemDetailComponent: () => "Cart Item Detail",
+  CartItemStockWarningComponent: () => "Cart Item Stock Warning",
+  CartItemPriceComponent: () => " Cart Item Price",
+  CartItemQuantityInputComponent: () => "Cart Item Quantity Input"
+};
+
+test("basic snapshot with props", () => {
+  const component = renderer.create(<MiniCart cart={{ checkout: mockCheckout, items: mockItems }} components={mockComponents} />);
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/package/src/components/MiniCart/v1/__snapshots__/MiniCart.test.js.snap b/package/src/components/MiniCart/v1/__snapshots__/MiniCart.test.js.snap
new file mode 100644
index 00000000..7b69fe8d
--- /dev/null
+++ b/package/src/components/MiniCart/v1/__snapshots__/MiniCart.test.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic snapshot with props 1`] = `
+.c0 {
+  border: 1px solid #e6e6e6;
+  max-width: 360px;
+  overflow: hidden;
+}
+
+.c1 {
+  max-height: 420px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.c2 {
+  border-top: 1px solid #e6e6e6;
+  box-shadow: none;
+  padding: 0 1rem 1rem;
+  position: relative;
+}
+
+.c2 span {
+  color: #b3b3b3;
+  display: block;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.25;
+  -webkit-letter-spacing: 0.3px;
+  -moz-letter-spacing: 0.3px;
+  -ms-letter-spacing: 0.3px;
+  letter-spacing: 0.3px;
+  margin: 0.5rem 0 0;
+  text-align: center;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    Cart Items
+  </div>
+  <div
+    className="c2"
+  >
+    Cart Summary
+    Cart Checkout Button
+    <span>
+      Shipping and tax calculated in checkout
+    </span>
+  </div>
+</div>
+`;
diff --git a/package/src/components/MiniCartSummary/v1/__snapshots__/MiniCartSummary.test.js.snap b/package/src/components/MiniCartSummary/v1/__snapshots__/MiniCartSummary.test.js.snap
index ec80415d..e3f5823f 100644
--- a/package/src/components/MiniCartSummary/v1/__snapshots__/MiniCartSummary.test.js.snap
+++ b/package/src/components/MiniCartSummary/v1/__snapshots__/MiniCartSummary.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Renders only subtotal + computed taxes 1`] = `
 .c0 {
   width: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
 }
 
 .c1 {
@@ -54,7 +54,7 @@ exports[`Renders only subtotal + computed taxes 1`] = `
 exports[`Renders only subtotal 1`] = `
 .c0 {
   width: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
 }
 
 .c1 {
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 368791a3..485638e1 100644
--- a/package/src/components/Price/v1/__snapshots__/Price.test.js.snap
+++ b/package/src/components/Price/v1/__snapshots__/Price.test.js.snap
@@ -5,12 +5,14 @@ exports[`Display error warning about required prop 1`] = `"Failed undefined type
 exports[`Renders price with a compare at price 1`] = `
 .c0 {
   display: block;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-size: 14px;
 }
 
 .c1 {
   color: #bfbfbf;
   display: block;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-size: 14px;
 }
 
@@ -25,12 +27,14 @@ exports[`Renders price with a compare at price 1`] = `
   >
     $400.00
   </del>
+  
 </div>
 `;
 
 exports[`Renders price without a compare at price 1`] = `
 .c0 {
   display: block;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-size: 14px;
 }
 
@@ -40,12 +44,14 @@ exports[`Renders price without a compare at price 1`] = `
   >
     $300.00
   </span>
+  
 </div>
 `;
 
 exports[`Renders price without a compare at price, due to the fact that the prices are equal. 1`] = `
 .c0 {
   display: block;
+  font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-size: 14px;
 }
 
@@ -55,5 +61,6 @@ exports[`Renders price without a compare at price, due to the fact that the pric
   >
     $300.00
   </span>
+  
 </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 5575dfa1..d4012b60 100644
--- a/package/src/components/QuantityInput/v1/__snapshots__/QuantityInput.test.js.snap
+++ b/package/src/components/QuantityInput/v1/__snapshots__/QuantityInput.test.js.snap
@@ -37,7 +37,7 @@ exports[`basic snapshot 1`] = `
           focusable="false"
           style={
             Object {
-              "fontSize": "16px",
+              "fontSize": "14px",
             }
           }
           viewBox="0 0 24 24"
@@ -104,7 +104,7 @@ exports[`basic snapshot 1`] = `
           focusable="false"
           style={
             Object {
-              "fontSize": "16px",
+              "fontSize": "14px",
             }
           }
           viewBox="0 0 24 24"
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 65edd639..2535a6ea 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-family: 'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
   font-size: 14px;
 }