feat: Added mdi-material-icons for plus minus icons, cleaned up Quant…

…ityInput styles, added QuantityInput to CartItem example

package.json

@@ -99,6 +99,7 @@
     "lodash.get": "^4.4.2",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
+    "mdi-material-ui": "^5.1.1",
     "polished": "^1.9.2",
     "react": "16.4.0",
     "react-dom": "16.4.0",

package/src/components/CartItem/v1/CartItem.md

@@ -23,7 +23,7 @@ const item = {
     CartItemDetailComponent: CartItemDetail,
     CartItemStockWarningComponent: StockWarning,
     CartItemPriceComponent: Price,
-    CartItemQuantityInputComponent: () => "Quantity Input"
+    CartItemQuantityInputComponent: QuantityInput
   }}
   item={item}
 />

package/src/components/QuantityInput/v1/QuantityInput.js

@@ -4,31 +4,32 @@ import { withStyles } from "@material-ui/core/styles";
 import ButtonBase from "@material-ui/core/ButtonBase";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import TextField from "@material-ui/core/TextField";
+import Minus from "mdi-material-ui/Minus";
+import Plus from "mdi-material-ui/Plus";
 import { applyTheme } from "../../../utils";
 
 const styles = (theme) => ({
   incrementButton: {
     backgroundColor: "#fafafa",
-    boxSizing: "border-box",
-    color: "#3c3c3c",
-    fontSize: "1rem",
-    lineHieght: 1,
+    boxSizing: "inherit",
+    color: "#666666",
+    fontSize: "12px",
     padding: 6
   },
   quantityContainer: {
-    padding: 0,
     border: `1px solid #d9d9d9`,
+    borderRadius: "2px",
     boxSizing: "border-box",
-    backgroundColor: theme.palette.common.white,
-    borderRadius: "2px"
+    overflow: "hidden",
+    padding: 0
   },
   quantityInput: {
     borderLeft: `1px solid #d9d9d9`,
     borderRight: `1px solid #d9d9d9`,
-    boxSizing: "border-box",
+    boxSizing: "inherit",
     color: "#3c3c3c",
     fontSize: "12px",
-    width: "40px",
+    maxWidth: "40px",
     textAlign: "center",
     "&:focus": {
       borderColor: "#80bdff",
@@ -96,7 +97,7 @@ class QuantityInput extends Component {
                 onClick={this.handleDecrementButton}
                 className={incrementButton}
               >
-                <i className="fa fa-minus" />
+                <Minus />
               </ButtonBase>
             </InputAdornment>
           ),
@@ -108,7 +109,7 @@ class QuantityInput extends Component {
                 onClick={this.handleIncrementButton}
                 className={incrementButton}
               >
-                <i className="fa fa-plus" />
+                <Plus />
               </ButtonBase>
             </InputAdornment>
           ),

yarn.lock

@@ -5999,6 +5999,10 @@ mdast-util-compact@^1.0.0:
     unist-util-modify-children "^1.0.0"
     unist-util-visit "^1.1.0"
 
+mdi-material-ui@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/mdi-material-ui/-/mdi-material-ui-5.1.1.tgz#5cbe5afb44705fd14cb4517019d9778ccf48454f"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"