Merge pull request #325 from reactioncommerce/chore-update-component-lib

chore: updated component library, and changed some styles accordingly

Author: rosshadden

package.json

@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^3.1.0",
-    "@reactioncommerce/components": "^0.39.1",
+    "@reactioncommerce/components": "0.39.1",
     "@reactioncommerce/components-context": "^1.0.0",
     "@segment/snippet": "^4.3.1",
     "apollo-cache-inmemory": "^1.1.11",

src/components/CheckoutSummary/CheckoutSummary.js

@@ -1,9 +1,17 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import Grid from "@material-ui/core/Grid";
-import CartSummary from "@reactioncommerce/components/CartSummary/v1";
 import CartItems from "components/CartItems";
+import CartSummary from "@reactioncommerce/components/CartSummary/v1";
+import Grid from "@material-ui/core/Grid";
+import PropTypes from "prop-types";
+import React, { Component } from "react";
+import { withStyles } from "@material-ui/core/styles";
 
+const styles = (theme) => ({
+  summary: {
+    borderTop: theme.palette.borders.default
+  }
+});
+
+@withStyles(styles, { name: "SkCheckoutSummary" })
 class CheckoutSummary extends Component {
   static propTypes = {
     cart: PropTypes.shape({
@@ -70,7 +78,7 @@ class CheckoutSummary extends Component {
   }
 
   renderCartSummary() {
-    const { cart } = this.props;
+    const { cart, classes } = this.props;
 
     if (cart && cart.checkout && cart.checkout.summary) {
       const {
@@ -80,7 +88,7 @@ class CheckoutSummary extends Component {
       } = cart.checkout.summary;
 
       return (
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.summary}>
           <CartSummary
             isDense
             displayShipping={fulfillmentTotal && fulfillmentTotal.displayAmount}

src/components/CheckoutSummary/CheckoutSummary.test.js

@@ -1,5 +1,7 @@
 import React from "react";
 import renderer from "react-test-renderer";
+import { MuiThemeProvider } from "@material-ui/core/styles";
+import theme from "lib/theme/reactionTheme";
 import { ComponentsProvider } from "@reactioncommerce/components-context";
 import components from "../../lib/theme/components";
 import CheckoutSummary from "./CheckoutSummary";
@@ -66,9 +68,11 @@ const testCart = {
 test("basic snapshot", () => {
   const component = renderer.create((
     <ComponentsProvider value={components}>
-      <CheckoutSummary
-        cart={testCart}
-      />
+      <MuiThemeProvider theme={theme}>
+        <CheckoutSummary
+          cart={testCart}
+        />
+      </MuiThemeProvider>
     </ComponentsProvider>
   ));
 

src/components/CheckoutSummary/__snapshots__/CheckoutSummary.test.js.snap

@@ -3,10 +3,10 @@
 exports[`basic snapshot 1`] = `
 <aside>
   <div
-    className="MuiGrid-container-1 MuiGrid-spacing-xs-24-25"
+    className="MuiGrid-container-2 MuiGrid-spacing-xs-24-26"
   >
     <div
-      className="MuiGrid-item-2 MuiGrid-grid-xs-12-41"
+      className="MuiGrid-item-3 MuiGrid-grid-xs-12-42"
     >
       <div
         className="CartItems__Items-gEXRwN gdnVAG"
@@ -218,7 +218,7 @@ exports[`basic snapshot 1`] = `
       </div>
     </div>
     <div
-      className="MuiGrid-item-2 MuiGrid-grid-xs-12-41"
+      className="MuiGrid-item-3 MuiGrid-grid-xs-12-42 SkCheckoutSummary-summary-1"
     >
       <table
         className="CartSummary__Table-cWcArh gWGRvE"

src/pages/cart.js

@@ -32,6 +32,10 @@ const styles = (theme) => ({
     fontWeight: theme.typography.fontWeightRegular,
     marginTop: "1.6rem",
     marginBottom: "3.1rem"
+  },
+  itemWrapper: {
+    borderTop: theme.palette.borders.default,
+    borderBottom: theme.palette.borders.default
   }
 });
 
@@ -92,13 +96,15 @@ class CartPage extends Component {
     if (cart && Array.isArray(cart.items) && cart.items.length) {
       return (
         <Grid item xs={12} md={8}>
-          <CartItems
-            hasMoreCartItems={hasMoreCartItems}
-            onLoadMoreCartItems={loadMoreCartItems}
-            items={cart.items}
-            onChangeCartItemQuantity={this.handleItemQuantityChange}
-            onRemoveItemFromCart={this.handleRemoveItem}
-          />
+          <div className={classes.itemWrapper}>
+            <CartItems
+              hasMoreCartItems={hasMoreCartItems}
+              onLoadMoreCartItems={loadMoreCartItems}
+              items={cart.items}
+              onChangeCartItemQuantity={this.handleItemQuantityChange}
+              onRemoveItemFromCart={this.handleRemoveItem}
+            />
+          </div>
         </Grid>
       );
     }

yarn.lock

@@ -943,7 +943,7 @@
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@reactioncommerce/components-context/-/components-context-1.0.0.tgz#587764cf0d1b0312c786b8e4657379de02e13845"
 
-"@reactioncommerce/components@^0.39.1":
+"@reactioncommerce/[email protected]":
   version "0.39.1"
   resolved "https://registry.yarnpkg.com/@reactioncommerce/components/-/components-0.39.1.tgz#1fe5f7e1797d4f5c6c6b6ee0c9000fa39e150a6b"
   dependencies: