Merge remote-tracking branch 'origin/master' into feat-300-nnnnat-add-viewerInfo

Author: rosshadden

docs/theming.md

@@ -0,0 +1,64 @@
+# Theming
+
+## Styling StarterKit and Material UI components
+
+Most of the components in the starter kit are based on the [Material UI](https://material-ui.com) components. As such, they can usually be customized using the same methods as the base Material UI components.
+
+### Changing theme variables
+
+Variables for customizing the theme are located in the `[src/lib/theme/reactionTheme.js](https://github.com/reactioncommerce/reaction-next-starterkit/blob/master/src/lib/theme/reactionTheme.js)  file. The [Material UI theme guide](https://material-ui.com/customization/themes/) has additional details on how to customize the theme.
+
+For example, you can change the various colors used for the primary color, fonts used, layout dimensions and more. All of the [default theme variables from Material UI](https://material-ui.com/customization/default-theme/) are available to override as well as any additional variables added for the Starter Kit itself.
+
+```js
+import { createMuiTheme } from "@material-ui/core/styles";
+
+const theme = createMuiTheme({
+  layout: {
+    mainContentMaxWidth: "1440px",
+    mainLoginMaxWidth: "1024px"
+  },
+  palette: {
+    primary: {
+      light: "#26B0F9",
+      main: "#1999DD",
+      dark: "#172F3C",
+      contrastText: "#FFFFFF"
+    },
+  ...
+```
+
+### Applying global overrides
+
+Styles for components can be overridden globally from the [src/lib/theme/reactionTheme.js](https://github.com/reactioncommerce/reaction-next-starterkit/blob/master/src/lib/theme/reactionTheme.js) file. **Before applying an override, consider updating the theme variables as it may provide you with better results.**
+
+When using overrides you cannot add additional class names that aren't already present in the original component. You can add override existing CSS properties or add new CSS properties that may not exist in the original component's style.
+
+Consult source code for that component you which to override for, both the style name used for overrides, as well as the class names that are available for customization.
+
+
+For more information on how to override styles please consult the [Material UI guide on overrides](https://material-ui.com/customization/overrides/).
+
+#### Theme overrides example
+
+To add custom overrides, simply add an `overrides` object to the theme. The `overrides` object contains a key which matches the component name with a prefix, and the value being an object with your overrides to apply to that component.
+
+- Starter Kit components are prefixed with `Sk` in the theme. e.g. `SkHeader`.
+- Material UI components are prefixed with `Mui` in the theme. e.g. `MuiAppBar`.
+
+**src/lib/theme/reactionTheme.js**
+
+```js
+import { createMuiTheme } from "@material-ui/core/styles";
+
+const theme = createMuiTheme({
+  overrides: {
+    // Override styles for the Starter kit header
+    SkHeader: { // Name of the component
+      appBar: { // Class name to override
+        backgroundColor: "green" // Property to add or override
+      }
+    }
+  },
+ ...
+```

package.json

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

src/components/AccountDropdown/AccountDropdown.js

@@ -19,7 +19,7 @@ const styles = (theme) => ({
   }
 });
 
-@withStyles(styles)
+@withStyles(styles, { name: "SkAccountDropdown" })
 @inject("authStore")
 @observer
 class AccountDropdown extends Component {

src/components/Breadcrumbs/Breadcrumbs.js

@@ -29,7 +29,7 @@ const styles = (theme) => ({
   }
 });
 
-@withStyles(styles)
+@withStyles(styles, { name: "SkBreadcrumbs" })
 class Breadcrumbs extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,

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

@@ -2,25 +2,25 @@
 
 exports[`tagGrid secondlevel tag 1`] = `
 <div
-  className="Breadcrumbs-container-1"
+  className="SkBreadcrumbs-container-1"
 >
   <a
-    className="Link-anchor-4"
+    className="SkLink-anchor-4"
     href="/"
     onClick={[Function]}
     onKeyDown={[Function]}
     role="link"
     tabIndex={0}
   >
     <span
-      className="Breadcrumbs-breadcrumbLink-2"
+      className="SkBreadcrumbs-breadcrumbLink-2"
     >
       Home
     </span>
   </a>
   <svg
     aria-hidden="true"
-    className="MuiSvgIcon-root-5 Breadcrumbs-breadcrumbIcon-3"
+    className="MuiSvgIcon-root-5 SkBreadcrumbs-breadcrumbIcon-3"
     color={undefined}
     focusable="false"
     role="presentation"
@@ -31,22 +31,22 @@ exports[`tagGrid secondlevel tag 1`] = `
     />
   </svg>
   <a
-    className="Link-anchor-4"
+    className="SkLink-anchor-4"
     href="/tag/tag-a"
     onClick={[Function]}
     onKeyDown={[Function]}
     role="link"
     tabIndex={0}
   >
     <span
-      className="Breadcrumbs-breadcrumbLink-2"
+      className="SkBreadcrumbs-breadcrumbLink-2"
     >
       Tag A
     </span>
   </a>
   <svg
     aria-hidden="true"
-    className="MuiSvgIcon-root-5 Breadcrumbs-breadcrumbIcon-3"
+    className="MuiSvgIcon-root-5 SkBreadcrumbs-breadcrumbIcon-3"
     color={undefined}
     focusable="false"
     role="presentation"
@@ -57,15 +57,15 @@ exports[`tagGrid secondlevel tag 1`] = `
     />
   </svg>
   <a
-    className="Link-anchor-4"
+    className="SkLink-anchor-4"
     href="/tag/tag-a-1"
     onClick={[Function]}
     onKeyDown={[Function]}
     role="link"
     tabIndex={0}
   >
     <span
-      className="Breadcrumbs-breadcrumbLink-2"
+      className="SkBreadcrumbs-breadcrumbLink-2"
     >
       Tag A-1
     </span>
@@ -75,25 +75,25 @@ exports[`tagGrid secondlevel tag 1`] = `
 
 exports[`tagGrid top level tag 1`] = `
 <div
-  className="Breadcrumbs-container-1"
+  className="SkBreadcrumbs-container-1"
 >
   <a
-    className="Link-anchor-4"
+    className="SkLink-anchor-4"
     href="/"
     onClick={[Function]}
     onKeyDown={[Function]}
     role="link"
     tabIndex={0}
   >
     <span
-      className="Breadcrumbs-breadcrumbLink-2"
+      className="SkBreadcrumbs-breadcrumbLink-2"
     >
       Home
     </span>
   </a>
   <svg
     aria-hidden="true"
-    className="MuiSvgIcon-root-5 Breadcrumbs-breadcrumbIcon-3"
+    className="MuiSvgIcon-root-5 SkBreadcrumbs-breadcrumbIcon-3"
     color={undefined}
     focusable="false"
     role="presentation"
@@ -104,15 +104,15 @@ exports[`tagGrid top level tag 1`] = `
     />
   </svg>
   <a
-    className="Link-anchor-4"
+    className="SkLink-anchor-4"
     href="/tag/tag-a"
     onClick={[Function]}
     onKeyDown={[Function]}
     role="link"
     tabIndex={0}
   >
     <span
-      className="Breadcrumbs-breadcrumbLink-2"
+      className="SkBreadcrumbs-breadcrumbLink-2"
     >
       Tag A
     </span>

src/components/Cart/Cart.js

@@ -10,7 +10,7 @@ const styles = () => ({
   }
 });
 
-@withStyles(styles)
+@withStyles(styles, { name: "SkCart" })
 @inject("uiStore")
 @observer
 class Cart extends Component {

src/components/CartItems/CartItems.js

@@ -17,7 +17,7 @@ const styles = (theme) => ({
   }
 });
 
-@withStyles(styles)
+@withStyles(styles, { name: "SkCartItems" })
 class CartItems extends Component {
   static propTypes = {
     classes: PropTypes.object,

src/components/CartPopover/CartPopover.js

@@ -64,7 +64,7 @@ const styles = (theme) => ({
   }
 });
 
-@withStyles(styles, { withTheme: true })
+@withStyles(styles, { withTheme: true, name: "SkCartPopover" })
 @inject("uiStore")
 @observer
 class CartPopover extends Component {

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

@@ -5,26 +5,26 @@ exports[`do not show cartpopover 1`] = `
   className="HiddenCss-mdUp-16"
 >
   <div
-    className="inject-CartPopover-with-uiStore-container-1 inject-CartPopover-with-uiStore-isContainerHidden-3"
+    className="SkCartPopover-container-1 SkCartPopover-isContainerHidden-3"
   >
     <div
-      className="MuiGrid-container-24 MuiGrid-spacing-xs-24-48 inject-CartPopover-with-uiStore-gridContainer-2"
+      className="MuiGrid-container-24 MuiGrid-spacing-xs-24-48 SkCartPopover-gridContainer-2"
     >
       <div
-        className="MuiGrid-item-25 MuiGrid-grid-xs-12-64 inject-CartPopover-with-uiStore-containerItem-5"
+        className="MuiGrid-item-25 MuiGrid-grid-xs-12-64 SkCartPopover-containerItem-5"
       >
         <img
           alt="Item Title"
-          className="inject-CartPopover-with-uiStore-addedToCartImg-6"
+          className="SkCartPopover-addedToCartImg-6"
           src="//placehold.it/100"
         />
         <span
-          className="MuiTypography-root-121 MuiTypography-body1-130 inject-CartPopover-with-uiStore-addedToCartText-8"
+          className="MuiTypography-root-121 MuiTypography-body1-130 SkCartPopover-addedToCartText-8"
         >
           10
            "
           <span
-            className="inject-CartPopover-with-uiStore-addedToCartItemName-7"
+            className="SkCartPopover-addedToCartItemName-7"
           >
             Item Title
           </span>
@@ -67,26 +67,26 @@ exports[`show cartpopover 1`] = `
   className="HiddenCss-mdUp-16"
 >
   <div
-    className="inject-CartPopover-with-uiStore-container-1 inject-CartPopover-with-uiStore-isContainerVisible-4"
+    className="SkCartPopover-container-1 SkCartPopover-isContainerVisible-4"
   >
     <div
-      className="MuiGrid-container-24 MuiGrid-spacing-xs-24-48 inject-CartPopover-with-uiStore-gridContainer-2"
+      className="MuiGrid-container-24 MuiGrid-spacing-xs-24-48 SkCartPopover-gridContainer-2"
     >
       <div
-        className="MuiGrid-item-25 MuiGrid-grid-xs-12-64 inject-CartPopover-with-uiStore-containerItem-5"
+        className="MuiGrid-item-25 MuiGrid-grid-xs-12-64 SkCartPopover-containerItem-5"
       >
         <img
           alt="Item Title"
-          className="inject-CartPopover-with-uiStore-addedToCartImg-6"
+          className="SkCartPopover-addedToCartImg-6"
           src="//placehold.it/100"
         />
         <span
-          className="MuiTypography-root-121 MuiTypography-body1-130 inject-CartPopover-with-uiStore-addedToCartText-8"
+          className="MuiTypography-root-121 MuiTypography-body1-130 SkCartPopover-addedToCartText-8"
         >
           10
            "
           <span
-            className="inject-CartPopover-with-uiStore-addedToCartItemName-7"
+            className="SkCartPopover-addedToCartItemName-7"
           >
             Item Title
           </span>

src/components/CheckoutActions/CheckoutActions.js

@@ -41,7 +41,7 @@ export default class CheckoutActions extends Component {
     // Omit firstName, lastName props as they are not in AddressInput type
     // The address form and GraphQL endpoint need to be made consistent
     const { firstName, lastName, ...rest } = address;
-    onSetShippingAddress({
+    return onSetShippingAddress({
       fullName: `${address.firstName} ${address.lastName}`,
       ...rest
     });
@@ -55,7 +55,7 @@ export default class CheckoutActions extends Component {
       fulfillmentMethodId: shippingMethod.selectedFulfillmentOption.fulfillmentMethod._id
     };
 
-    onSetFulfillmentOption(fulfillmentOption);
+    return onSetFulfillmentOption(fulfillmentOption);
   }
 
   setPaymentMethod = (stripeToken) => {
@@ -102,6 +102,10 @@ export default class CheckoutActions extends Component {
   }
 
   render() {
+    if (!this.props.cart) {
+      return null;
+    }
+
     const { cartStore: { stripeToken } } = this.props;
     const { checkout: { fulfillmentGroups, summary }, items } = this.props.cart;
     const shippingAddressSet = isShippingAddressSet(fulfillmentGroups);