@arcteryx/components-cart - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.0.4](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@1.0.3...@arcteryx/components-cart@1.0.4) (2020-02-21)
+
+
+### Bug Fixes
+
+* rework cart to have set item widths to match headings on cart page ([70f78d2](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/70f78d20905ac88f72cc0be7a36928412f1011d0))
+
+
+
+
+
 ## [1.0.3](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@1.0.2...@arcteryx/components-cart@1.0.3) (2020-02-21)
@@ -8,0 +19,0 @@

dist/cjs/index.js

@@ -85,3 +85,3 @@ 'use strict';
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n"]);
+  var data = _taggedTemplateLiteral(["\n  color: ", ";\n"]);
 
@@ -96,3 +96,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n  color: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 85 Heavy\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 18px;\n  text-transform: uppercase;\n  display: block;\n"]);
 
@@ -107,3 +107,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 85 Heavy\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 18px;\n  text-transform: uppercase;\n  display: block;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n  @media screen and (max-width: 700px) {\n    display: none;\n  }\n"]);
 
@@ -118,3 +118,3 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n  @media screen and (max-width: 700px) {\n    display: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  width: 35%;\n  ", "\n  width: 60%;\n  order: 1;\n  ", "\n"]);
 
@@ -129,3 +129,3 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  font-size: 15px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  font-size: 15px;\n"]);
 
@@ -139,10 +139,14 @@ _templateObject = function _templateObject() {
 var Info = styled.div(_templateObject());
-var Thumbnail = styled.a(_templateObject2(), function (props) {
+var Wrap = styled.div(_templateObject2(), function (props) {
+  return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
+}, function (props) {
+  return !props.isFlyInCart && "}";
+});
+var Thumbnail = styled.a(_templateObject3(), function (props) {
   return props.isFlyInCart ? "none" : "inline-block";
 });
-var Name = styled.span(_templateObject3());
-var ColorWrap = styled.span(_templateObject4(), function (props) {
+var Name = styled.span(_templateObject4());
+var ColorWrap = styled.span(_templateObject5(), function (props) {
   return props.colorHex;
 });
-var Wrap = styled.div(_templateObject5());
 
@@ -189,3 +193,3 @@ var ProductInfo = function ProductInfo(_ref) {
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  min-width: 68px;\n  display: flex;\n  align-items: center;\n"]);
+  var data = _taggedTemplateLiteral(["\n  min-width: 68px;\n  width: 21%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  width: 50%;\n  order: 3;\n  justify-content: flex-start;\n  ", "\n"]);
 
@@ -198,3 +202,7 @@ _templateObject$1 = function _templateObject() {
 }
-var Wrap$1 = styled.div(_templateObject$1());
+var Wrap$1 = styled.div(_templateObject$1(), function (props) {
+  return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
+}, function (props) {
+  return !props.isFlyInCart && "}";
+});
 var Button = styled.button(_templateObject2$1(), function (props) {
@@ -270,3 +278,3 @@ return props.count == 1 ? "#999" : "#000";
 function _templateObject5$1() {
-  var data = _taggedTemplateLiteral(["\n  @media screen and (min-width: 700px) {\n    display: ", ";\n  }\n  display: inline-block;\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  @media screen and (min-width: 700px) {\n    display: ", ";\n  }\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  width: 20%;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n"]);
 
@@ -281,3 +289,3 @@ _templateObject5$1 = function _templateObject5() {
 function _templateObject4$1() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  flex: 1 1 20%;\n  min-height: 60px;\n  ", "\n  min-height: 90px;\n  flex-direction: ", ";\n  flex: ", ";\n  align-items: ", ";\n  justify-content: space-between;\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  line-height: initial;\n  text-align: center;\n  cursor: pointer;\n  width: 21%;\n  &:before {\n    content: \"\xD7\";\n    font-size: 22px;\n    font-weight: 700;\n    line-height: 0;\n    text-decoration: none;\n  }\n  ", "\n  width: 20%;\n  order: 2;\n  text-align: right;\n  ", "\n"]);
 
@@ -292,3 +300,3 @@ _templateObject4$1 = function _templateObject4() {
 function _templateObject3$2() {
-  var data = _taggedTemplateLiteral(["\n  line-height: initial;\n  text-align: end;\n  cursor: pointer;\n  &:before {\n    content: \"\xD7\";\n    font-size: 22px;\n    font-weight: 700;\n    line-height: 0;\n    text-decoration: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  line-height: 1;\n  width: 21%;\n  text-align: center;\n  ", "\n  width: 40%;\n  order: 4;\n  text-align: right;\n  ", "\n"]);
 
@@ -303,3 +311,3 @@ _templateObject3$2 = function _templateObject3() {
 function _templateObject2$2() {
-  var data = _taggedTemplateLiteral(["\n  line-height: 1;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  width: 100%;\n  ", "\n  align-items: flex-start;\n  ", "\n"]);
 
@@ -314,3 +322,3 @@ _templateObject2$2 = function _templateObject2() {
 function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0 0 2em 0;\n  height: auto;\n  min-height: 90px;\n  display: flex;\n  justify-content: normal;\n  align-items: center;\n  flex-wrap: wrap;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0 0 2em 0;\n  height: auto;\n  min-height: 90px;\n"]);
 
@@ -324,15 +332,15 @@ _templateObject$2 = function _templateObject() {
 var Wrap$2 = styled.div(_templateObject$2());
-var Price = styled.p(_templateObject2$2());
-var Remove = styled.div(_templateObject3$2());
-var FlexWrapper = styled.div(_templateObject4$1(), function (props) {
-  return props.align === "end" ? "space-evenly" : "space-between";
+var ItemWrap = styled.div(_templateObject2$2(), function (props) {
+  return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
 }, function (props) {
+  return !props.isFlyInCart && "}";
+});
+var Price = styled.p(_templateObject3$2(), function (props) {
   return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
 }, function (props) {
-  return props.reverse ? "column-reverse" : "column";
+  return !props.isFlyInCart && "}";
+});
+var Remove = styled.div(_templateObject4$1(), function (props) {
+  return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
 }, function (props) {
-  return props.align === "end" ? "1 1 10%" : "1 1 40%";
-}, function (props) {
-  return props.align;
-}, function (props) {
   return !props.isFlyInCart && "}";
@@ -372,6 +380,3 @@ });
     alt: product.name
-  })), React__default.createElement(FlexWrapper, {
-    isFlyInCart: isFlyInCart,
-    align: "start"
-  }, React__default.createElement(ProductInfo, _extends({
+  })), React__default.createElement(ItemWrap, null, React__default.createElement(ProductInfo, _extends({
     isFlyInCart: isFlyInCart
@@ -384,7 +389,3 @@ }, product)), React__default.createElement(Quantity, {
     handleDecrement: handleDecrement
-  })), React__default.createElement(FlexWrapper, {
-    isFlyInCart: isFlyInCart,
-    align: "end",
-    reverse: true
-  }, React__default.createElement(Price, null, product.price), canEdit && React__default.createElement(Remove, {
+  }), React__default.createElement(Price, null, product.price), canEdit && React__default.createElement(Remove, {
     title: "remove",
@@ -391,0 +392,0 @@ onClick: function onClick() {

dist/es/index.js

@@ -78,3 +78,3 @@ import React, { useState } from 'react';
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n"]);
+  var data = _taggedTemplateLiteral(["\n  color: ", ";\n"]);
 
@@ -89,3 +89,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n  color: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 85 Heavy\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 18px;\n  text-transform: uppercase;\n  display: block;\n"]);
 
@@ -100,3 +100,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 85 Heavy\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 18px;\n  text-transform: uppercase;\n  display: block;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n  @media screen and (max-width: 700px) {\n    display: none;\n  }\n"]);
 
@@ -111,3 +111,3 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n  @media screen and (max-width: 700px) {\n    display: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  width: 35%;\n  ", "\n  width: 60%;\n  order: 1;\n  ", "\n"]);
 
@@ -122,3 +122,3 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  font-size: 15px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  font-size: 15px;\n"]);
 
@@ -132,10 +132,14 @@ _templateObject = function _templateObject() {
 var Info = styled.div(_templateObject());
-var Thumbnail = styled.a(_templateObject2(), function (props) {
+var Wrap = styled.div(_templateObject2(), function (props) {
+  return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
+}, function (props) {
+  return !props.isFlyInCart && "}";
+});
+var Thumbnail = styled.a(_templateObject3(), function (props) {
   return props.isFlyInCart ? "none" : "inline-block";
 });
-var Name = styled.span(_templateObject3());
-var ColorWrap = styled.span(_templateObject4(), function (props) {
+var Name = styled.span(_templateObject4());
+var ColorWrap = styled.span(_templateObject5(), function (props) {
   return props.colorHex;
 });
-var Wrap = styled.div(_templateObject5());
 
@@ -182,3 +186,3 @@ var ProductInfo = function ProductInfo(_ref) {
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  min-width: 68px;\n  display: flex;\n  align-items: center;\n"]);
+  var data = _taggedTemplateLiteral(["\n  min-width: 68px;\n  width: 21%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  width: 50%;\n  order: 3;\n  justify-content: flex-start;\n  ", "\n"]);
 
@@ -191,3 +195,7 @@ _templateObject$1 = function _templateObject() {
 }
-var Wrap$1 = styled.div(_templateObject$1());
+var Wrap$1 = styled.div(_templateObject$1(), function (props) {
+  return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
+}, function (props) {
+  return !props.isFlyInCart && "}";
+});
 var Button = styled.button(_templateObject2$1(), function (props) {
@@ -263,3 +271,3 @@ return props.count == 1 ? "#999" : "#000";
 function _templateObject5$1() {
-  var data = _taggedTemplateLiteral(["\n  @media screen and (min-width: 700px) {\n    display: ", ";\n  }\n  display: inline-block;\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  @media screen and (min-width: 700px) {\n    display: ", ";\n  }\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  width: 20%;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n"]);
 
@@ -274,3 +282,3 @@ _templateObject5$1 = function _templateObject5() {
 function _templateObject4$1() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  flex: 1 1 20%;\n  min-height: 60px;\n  ", "\n  min-height: 90px;\n  flex-direction: ", ";\n  flex: ", ";\n  align-items: ", ";\n  justify-content: space-between;\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  line-height: initial;\n  text-align: center;\n  cursor: pointer;\n  width: 21%;\n  &:before {\n    content: \"\xD7\";\n    font-size: 22px;\n    font-weight: 700;\n    line-height: 0;\n    text-decoration: none;\n  }\n  ", "\n  width: 20%;\n  order: 2;\n  text-align: right;\n  ", "\n"]);
 
@@ -285,3 +293,3 @@ _templateObject4$1 = function _templateObject4() {
 function _templateObject3$2() {
-  var data = _taggedTemplateLiteral(["\n  line-height: initial;\n  text-align: end;\n  cursor: pointer;\n  &:before {\n    content: \"\xD7\";\n    font-size: 22px;\n    font-weight: 700;\n    line-height: 0;\n    text-decoration: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  line-height: 1;\n  width: 21%;\n  text-align: center;\n  ", "\n  width: 40%;\n  order: 4;\n  text-align: right;\n  ", "\n"]);
 
@@ -296,3 +304,3 @@ _templateObject3$2 = function _templateObject3() {
 function _templateObject2$2() {
-  var data = _taggedTemplateLiteral(["\n  line-height: 1;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  width: 100%;\n  ", "\n  align-items: flex-start;\n  ", "\n"]);
 
@@ -307,3 +315,3 @@ _templateObject2$2 = function _templateObject2() {
 function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0 0 2em 0;\n  height: auto;\n  min-height: 90px;\n  display: flex;\n  justify-content: normal;\n  align-items: center;\n  flex-wrap: wrap;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0 0 2em 0;\n  height: auto;\n  min-height: 90px;\n"]);
 
@@ -317,15 +325,15 @@ _templateObject$2 = function _templateObject() {
 var Wrap$2 = styled.div(_templateObject$2());
-var Price = styled.p(_templateObject2$2());
-var Remove = styled.div(_templateObject3$2());
-var FlexWrapper = styled.div(_templateObject4$1(), function (props) {
-  return props.align === "end" ? "space-evenly" : "space-between";
+var ItemWrap = styled.div(_templateObject2$2(), function (props) {
+  return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
 }, function (props) {
+  return !props.isFlyInCart && "}";
+});
+var Price = styled.p(_templateObject3$2(), function (props) {
   return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
 }, function (props) {
-  return props.reverse ? "column-reverse" : "column";
+  return !props.isFlyInCart && "}";
+});
+var Remove = styled.div(_templateObject4$1(), function (props) {
+  return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
 }, function (props) {
-  return props.align === "end" ? "1 1 10%" : "1 1 40%";
-}, function (props) {
-  return props.align;
-}, function (props) {
   return !props.isFlyInCart && "}";
@@ -365,6 +373,3 @@ });
     alt: product.name
-  })), React.createElement(FlexWrapper, {
-    isFlyInCart: isFlyInCart,
-    align: "start"
-  }, React.createElement(ProductInfo, _extends({
+  })), React.createElement(ItemWrap, null, React.createElement(ProductInfo, _extends({
     isFlyInCart: isFlyInCart
@@ -377,7 +382,3 @@ }, product)), React.createElement(Quantity, {
     handleDecrement: handleDecrement
-  })), React.createElement(FlexWrapper, {
-    isFlyInCart: isFlyInCart,
-    align: "end",
-    reverse: true
-  }, React.createElement(Price, null, product.price), canEdit && React.createElement(Remove, {
+  }), React.createElement(Price, null, product.price), canEdit && React.createElement(Remove, {
     title: "remove",
@@ -384,0 +385,0 @@ onClick: function onClick() {

dist/umd/index.js

@@ -84,3 +84,3 @@ (function (global, factory) {
   function _templateObject5() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n"]);
+    var data = _taggedTemplateLiteral(["\n  color: ", ";\n"]);
 
@@ -95,3 +95,3 @@ _templateObject5 = function _templateObject5() {
   function _templateObject4() {
-    var data = _taggedTemplateLiteral(["\n  color: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 85 Heavy\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 18px;\n  text-transform: uppercase;\n  display: block;\n"]);
 
@@ -106,3 +106,3 @@ _templateObject4 = function _templateObject4() {
   function _templateObject3() {
-    var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 85 Heavy\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 18px;\n  text-transform: uppercase;\n  display: block;\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n  @media screen and (max-width: 700px) {\n    display: none;\n  }\n"]);
 
@@ -117,3 +117,3 @@ _templateObject3 = function _templateObject3() {
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n  @media screen and (max-width: 700px) {\n    display: none;\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  width: 35%;\n  ", "\n  width: 60%;\n  order: 1;\n  ", "\n"]);
 
@@ -128,3 +128,3 @@ _templateObject2 = function _templateObject2() {
   function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  font-size: 15px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  font-size: 15px;\n"]);
 
@@ -138,10 +138,14 @@ _templateObject = function _templateObject() {
   var Info = styled.div(_templateObject());
-  var Thumbnail = styled.a(_templateObject2(), function (props) {
+  var Wrap = styled.div(_templateObject2(), function (props) {
+    return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
+  }, function (props) {
+    return !props.isFlyInCart && "}";
+  });
+  var Thumbnail = styled.a(_templateObject3(), function (props) {
     return props.isFlyInCart ? "none" : "inline-block";
   });
-  var Name = styled.span(_templateObject3());
-  var ColorWrap = styled.span(_templateObject4(), function (props) {
+  var Name = styled.span(_templateObject4());
+  var ColorWrap = styled.span(_templateObject5(), function (props) {
     return props.colorHex;
   });
-  var Wrap = styled.div(_templateObject5());
 
@@ -188,3 +192,3 @@ var ProductInfo = function ProductInfo(_ref) {
   function _templateObject$1() {
-    var data = _taggedTemplateLiteral(["\n  min-width: 68px;\n  display: flex;\n  align-items: center;\n"]);
+    var data = _taggedTemplateLiteral(["\n  min-width: 68px;\n  width: 21%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n  width: 50%;\n  order: 3;\n  justify-content: flex-start;\n  ", "\n"]);
 
@@ -197,3 +201,7 @@ _templateObject$1 = function _templateObject() {
   }
-  var Wrap$1 = styled.div(_templateObject$1());
+  var Wrap$1 = styled.div(_templateObject$1(), function (props) {
+    return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
+  }, function (props) {
+    return !props.isFlyInCart && "}";
+  });
   var Button = styled.button(_templateObject2$1(), function (props) {
@@ -269,3 +277,3 @@ return props.count == 1 ? "#999" : "#000";
   function _templateObject5$1() {
-    var data = _taggedTemplateLiteral(["\n  @media screen and (min-width: 700px) {\n    display: ", ";\n  }\n  display: inline-block;\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  @media screen and (min-width: 700px) {\n    display: ", ";\n  }\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  margin-right: 0.5em;\n  width: 20%;\n  img {\n    max-width: 60px;\n    min-width: 50px;\n    width: 100%;\n  }\n"]);
 
@@ -280,3 +288,3 @@ _templateObject5$1 = function _templateObject5() {
   function _templateObject4$1() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  flex: 1 1 20%;\n  min-height: 60px;\n  ", "\n  min-height: 90px;\n  flex-direction: ", ";\n  flex: ", ";\n  align-items: ", ";\n  justify-content: space-between;\n\n  ", "\n"]);
+    var data = _taggedTemplateLiteral(["\n  line-height: initial;\n  text-align: center;\n  cursor: pointer;\n  width: 21%;\n  &:before {\n    content: \"\xD7\";\n    font-size: 22px;\n    font-weight: 700;\n    line-height: 0;\n    text-decoration: none;\n  }\n  ", "\n  width: 20%;\n  order: 2;\n  text-align: right;\n  ", "\n"]);
 
@@ -291,3 +299,3 @@ _templateObject4$1 = function _templateObject4() {
   function _templateObject3$2() {
-    var data = _taggedTemplateLiteral(["\n  line-height: initial;\n  text-align: end;\n  cursor: pointer;\n  &:before {\n    content: \"\xD7\";\n    font-size: 22px;\n    font-weight: 700;\n    line-height: 0;\n    text-decoration: none;\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  line-height: 1;\n  width: 21%;\n  text-align: center;\n  ", "\n  width: 40%;\n  order: 4;\n  text-align: right;\n  ", "\n"]);
 
@@ -302,3 +310,3 @@ _templateObject3$2 = function _templateObject3() {
   function _templateObject2$2() {
-    var data = _taggedTemplateLiteral(["\n  line-height: 1;\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n  width: 100%;\n  ", "\n  align-items: flex-start;\n  ", "\n"]);
 
@@ -313,3 +321,3 @@ _templateObject2$2 = function _templateObject2() {
   function _templateObject$2() {
-    var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0 0 2em 0;\n  height: auto;\n  min-height: 90px;\n  display: flex;\n  justify-content: normal;\n  align-items: center;\n  flex-wrap: wrap;\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0 0 2em 0;\n  height: auto;\n  min-height: 90px;\n"]);
 
@@ -323,15 +331,15 @@ _templateObject$2 = function _templateObject() {
   var Wrap$2 = styled.div(_templateObject$2());
-  var Price = styled.p(_templateObject2$2());
-  var Remove = styled.div(_templateObject3$2());
-  var FlexWrapper = styled.div(_templateObject4$1(), function (props) {
-    return props.align === "end" ? "space-evenly" : "space-between";
+  var ItemWrap = styled.div(_templateObject2$2(), function (props) {
+    return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
   }, function (props) {
+    return !props.isFlyInCart && "}";
+  });
+  var Price = styled.p(_templateObject3$2(), function (props) {
     return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
   }, function (props) {
-    return props.reverse ? "column-reverse" : "column";
+    return !props.isFlyInCart && "}";
+  });
+  var Remove = styled.div(_templateObject4$1(), function (props) {
+    return !props.isFlyInCart && "@media screen and (max-width: 700px) {";
   }, function (props) {
-    return props.align === "end" ? "1 1 10%" : "1 1 40%";
-  }, function (props) {
-    return props.align;
-  }, function (props) {
     return !props.isFlyInCart && "}";
@@ -371,6 +379,3 @@ });
       alt: product.name
-    })), React__default.createElement(FlexWrapper, {
-      isFlyInCart: isFlyInCart,
-      align: "start"
-    }, React__default.createElement(ProductInfo, _extends({
+    })), React__default.createElement(ItemWrap, null, React__default.createElement(ProductInfo, _extends({
       isFlyInCart: isFlyInCart
@@ -383,7 +388,3 @@ }, product)), React__default.createElement(Quantity, {
       handleDecrement: handleDecrement
-    })), React__default.createElement(FlexWrapper, {
-      isFlyInCart: isFlyInCart,
-      align: "end",
-      reverse: true
-    }, React__default.createElement(Price, null, product.price), canEdit && React__default.createElement(Remove, {
+    }), React__default.createElement(Price, null, product.price), canEdit && React__default.createElement(Remove, {
       title: "remove",
@@ -390,0 +391,0 @@ onClick: function onClick() {

package.json

 {
   "name": "@arcteryx/components-cart",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Arcteryx Cart",
@@ -18,3 +18,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "a4a83f5b1c3d87f2a6a91c3c519a365dc1abf75b"
+  "gitHead": "e903dd063c9e6b5ae388e46299d2290b411dba7d"
 }

src/Cart.stories.js

@@ -62,2 +62,33 @@ import React from "react";
 
+const Header = styled.div`
+  display: flex;
+  text-transform: uppercase;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 0px;
+  border-bottom: 1px solid #ccc;
+  h3 {
+    width: 35%;
+  }
+  div {
+    width: 21%;
+    text-align: center;
+  }
+`;
+
+const CartHeader = () => {
+  const quantity = 1;
+  return (
+    <Header>
+      <h3>
+        My Cart <span>({quantity} Item)</span>
+      </h3>
+
+      <div class="quantity">Quantity</div>
+      <div class="price">Price</div>
+      <div class="remove">remove</div>
+    </Header>
+  );
+};
+
 export const Item = () => {
@@ -68,2 +99,3 @@ const canEdit = boolean("Cart is Editable", true);
       <Wrap>
+        <CartHeader />
         {productData.map((product, i) => (
@@ -70,0 +102,0 @@ <CartItem key={i} product={product} canEdit={canEdit} />

src/components/CartItem.js

@@ -8,2 +8,3 @@ import React, { useState } from "react";
 const Wrap = styled.div`
+  display: flex;
   box-sizing: border-box;
@@ -14,6 +15,12 @@ width: 100%;
   min-height: 90px;
+`;
+const ItemWrap = styled.div`
   display: flex;
-  justify-content: normal;
+  justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
+  width: 100%;
+  ${props => !props.isFlyInCart && "@media screen and (max-width: 700px) {"}
+  align-items: flex-start;
+  ${props => !props.isFlyInCart && "}"}
 `;
@@ -23,2 +30,9 @@
   line-height: 1;
+  width: 21%;
+  text-align: center;
+  ${props => !props.isFlyInCart && "@media screen and (max-width: 700px) {"}
+  width: 40%;
+  order: 4;
+  text-align: right;
+  ${props => !props.isFlyInCart && "}"}
 `;
@@ -28,4 +42,5 @@
   line-height: initial;
-  text-align: end;
+  text-align: center;
   cursor: pointer;
+  width: 21%;
   &:before {
@@ -38,18 +53,6 @@ content: "×";
   }
-`;
-
-const FlexWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: ${props => (props.align === "end" ? "space-evenly" : "space-between")};
-  align-items: center;
-  flex: 1 1 20%;
-  min-height: 60px;
   ${props => !props.isFlyInCart && "@media screen and (max-width: 700px) {"}
-  min-height: 90px;
-  flex-direction: ${props => (props.reverse ? "column-reverse" : "column")};
-  flex: ${props => (props.align === "end" ? "1 1 10%" : "1 1 40%")};
-  align-items: ${props => props.align};
-  justify-content: space-between;
-
+  width: 20%;
+  order: 2;
+  text-align: right;
   ${props => !props.isFlyInCart && "}"}
@@ -62,5 +65,7 @@ `;
   }
-  display: inline-block;
+  display: flex;
+  align-items: center;
   flex: 1 0 0;
   margin-right: 0.5em;
+  width: 20%;
   img {
@@ -72,3 +77,2 @@ max-width: 60px;
 `;
-
 const CartItem = ({ product, handleRemove, canEdit, handleIncrement, handleDecrement, isFlyInCart }) => {
@@ -88,3 +92,3 @@ const [remove, removeItem] = useState(false);
       </MobileThumbnail>
-      <FlexWrapper isFlyInCart={isFlyInCart} align="start">
+      <ItemWrap>
         <ProductInfo isFlyInCart={isFlyInCart} {...product} />
@@ -98,8 +102,6 @@ <Quantity
         />
-      </FlexWrapper>
 
-      <FlexWrapper isFlyInCart={isFlyInCart} align="end" reverse={true}>
         <Price>{product.price}</Price>
         {canEdit && <Remove title="remove" onClick={() => removeFromCart()} />}
-      </FlexWrapper>
+      </ItemWrap>
     </Wrap>
@@ -106,0 +108,0 @@ );

src/components/ProductInfo.js

@@ -8,8 +8,17 @@ import React from "react";
   justify-content: center;
+  align-items: flex-start;
   font-size: 15px;
 `;
 
+const Wrap = styled.div`
+  display: flex;
+  width: 35%;
+  ${props => !props.isFlyInCart && "@media screen and (max-width: 700px) {"}
+  width: 60%;
+  order: 1;
+  ${props => !props.isFlyInCart && "}"}
+`;
+
 const Thumbnail = styled.a`
   display: ${props => (props.isFlyInCart ? "none" : "inline-block")};
-  flex: 1 0 0;
   margin-right: 0.5em;
@@ -38,6 +47,2 @@ img {
 
-const Wrap = styled.div`
-  display: flex;
-`;
-
 const ProductInfo = ({ image, colorHex, color, name, size, link, isFlyInCart }) => (
@@ -44,0 +49,0 @@ <Wrap>

src/components/Quantity.js

@@ -7,4 +7,11 @@ import React, { useState } from "react";
   min-width: 68px;
+  width: 21%;
   display: flex;
   align-items: center;
+  justify-content: center;
+  ${props => !props.isFlyInCart && "@media screen and (max-width: 700px) {"}
+  width: 50%;
+  order: 3;
+  justify-content: flex-start;
+  ${props => !props.isFlyInCart && "}"}
 `;
@@ -11,0 +18,0 @@ const Button = styled.button`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

196210

increased by2.06%

Lines of code

1938

increased by2.59%

No dependency changes