@arcteryx/components-cart
Advanced tools
Comparing version 1.1.12 to 1.1.13-alpha.5
@@ -6,2 +6,13 @@ # Change Log | ||
## [1.1.13](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@1.1.12...@arcteryx/components-cart@1.1.13) (2020-03-06) | ||
### Bug Fixes | ||
* Change cart item overflow-x to auto preventing useless scrollbars on windows ([085ad09](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/085ad09558f21ded3044ffafbc163569461de0f5)) | ||
## [1.1.12](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@1.1.11...@arcteryx/components-cart@1.1.12) (2020-03-05) | ||
@@ -8,0 +19,0 @@ |
@@ -651,7 +651,4 @@ 'use strict'; | ||
var CartHeader = function CartHeader(_ref) { | ||
var cart = _ref.cart, | ||
isNarrow = _ref.isNarrow, | ||
isFlyIn = _ref.isFlyIn, | ||
isSidebar = _ref.isSidebar; | ||
var CartCount = function CartCount(_ref) { | ||
var totalItems = _ref.totalItems; | ||
@@ -661,9 +658,25 @@ var _useTranslation = reactI18next.useTranslation(), | ||
return React__default.createElement(React__default.Fragment, null, t("My Cart"), " ", React__default.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", t("Item", { | ||
count: totalItems | ||
}), ")")); | ||
}; | ||
var CartHeader = function CartHeader(_ref2) { | ||
var cart = _ref2.cart, | ||
isNarrow = _ref2.isNarrow, | ||
isFlyIn = _ref2.isFlyIn, | ||
isSidebar = _ref2.isSidebar; | ||
var _useTranslation2 = reactI18next.useTranslation(), | ||
t = _useTranslation2.t; | ||
return React__default.createElement(Header, { | ||
isNarrow: isNarrow | ||
}, isSidebar || isFlyIn ? React__default.createElement(H2, null, t("My Cart"), " ", React__default.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", cart.totalItems, " ", t("Item"), ")")) : React__default.createElement(H1, null, t("My Cart"), " ", React__default.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", cart.totalItems, " ", t("Item"), ")")), React__default.createElement(H4, null, t("Quantity")), React__default.createElement(H4, null, t("Price")), React__default.createElement(H4, null, t("Remove"))); | ||
}, isSidebar || isFlyIn ? React__default.createElement(H2, null, React__default.createElement(CartCount, { | ||
totalItems: cart.totalItems | ||
})) : React__default.createElement(H1, null, React__default.createElement(CartCount, { | ||
totalItems: cart.totalItems | ||
})), React__default.createElement(H4, null, t("Quantity")), React__default.createElement(H4, null, t("Price")), React__default.createElement(H4, null, t("Remove"))); | ||
}; | ||
@@ -786,3 +799,3 @@ | ||
function _templateObject4$3() { | ||
var data = _taggedTemplateLiteral(["\n padding-bottom: 150px;\n overflow-y: scroll;\n overflow-x: hidden;\n "]); | ||
var data = _taggedTemplateLiteral(["\n padding-bottom: 150px;\n overflow-y: auto;\n overflow-x: hidden;\n "]); | ||
@@ -789,0 +802,0 @@ _templateObject4$3 = function _templateObject4() { |
@@ -643,7 +643,4 @@ import React, { useContext } from 'react'; | ||
var CartHeader = function CartHeader(_ref) { | ||
var cart = _ref.cart, | ||
isNarrow = _ref.isNarrow, | ||
isFlyIn = _ref.isFlyIn, | ||
isSidebar = _ref.isSidebar; | ||
var CartCount = function CartCount(_ref) { | ||
var totalItems = _ref.totalItems; | ||
@@ -653,9 +650,25 @@ var _useTranslation = useTranslation(), | ||
return React.createElement(React.Fragment, null, t("My Cart"), " ", React.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", t("Item", { | ||
count: totalItems | ||
}), ")")); | ||
}; | ||
var CartHeader = function CartHeader(_ref2) { | ||
var cart = _ref2.cart, | ||
isNarrow = _ref2.isNarrow, | ||
isFlyIn = _ref2.isFlyIn, | ||
isSidebar = _ref2.isSidebar; | ||
var _useTranslation2 = useTranslation(), | ||
t = _useTranslation2.t; | ||
return React.createElement(Header, { | ||
isNarrow: isNarrow | ||
}, isSidebar || isFlyIn ? React.createElement(H2, null, t("My Cart"), " ", React.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", cart.totalItems, " ", t("Item"), ")")) : React.createElement(H1, null, t("My Cart"), " ", React.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", cart.totalItems, " ", t("Item"), ")")), React.createElement(H4, null, t("Quantity")), React.createElement(H4, null, t("Price")), React.createElement(H4, null, t("Remove"))); | ||
}, isSidebar || isFlyIn ? React.createElement(H2, null, React.createElement(CartCount, { | ||
totalItems: cart.totalItems | ||
})) : React.createElement(H1, null, React.createElement(CartCount, { | ||
totalItems: cart.totalItems | ||
})), React.createElement(H4, null, t("Quantity")), React.createElement(H4, null, t("Price")), React.createElement(H4, null, t("Remove"))); | ||
}; | ||
@@ -778,3 +791,3 @@ | ||
function _templateObject4$3() { | ||
var data = _taggedTemplateLiteral(["\n padding-bottom: 150px;\n overflow-y: scroll;\n overflow-x: hidden;\n "]); | ||
var data = _taggedTemplateLiteral(["\n padding-bottom: 150px;\n overflow-y: auto;\n overflow-x: hidden;\n "]); | ||
@@ -781,0 +794,0 @@ _templateObject4$3 = function _templateObject4() { |
@@ -647,7 +647,4 @@ (function (global, factory) { | ||
var CartHeader = function CartHeader(_ref) { | ||
var cart = _ref.cart, | ||
isNarrow = _ref.isNarrow, | ||
isFlyIn = _ref.isFlyIn, | ||
isSidebar = _ref.isSidebar; | ||
var CartCount = function CartCount(_ref) { | ||
var totalItems = _ref.totalItems; | ||
@@ -657,9 +654,25 @@ var _useTranslation = reactI18next.useTranslation(), | ||
return React__default.createElement(React__default.Fragment, null, t("My Cart"), " ", React__default.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", t("Item", { | ||
count: totalItems | ||
}), ")")); | ||
}; | ||
var CartHeader = function CartHeader(_ref2) { | ||
var cart = _ref2.cart, | ||
isNarrow = _ref2.isNarrow, | ||
isFlyIn = _ref2.isFlyIn, | ||
isSidebar = _ref2.isSidebar; | ||
var _useTranslation2 = reactI18next.useTranslation(), | ||
t = _useTranslation2.t; | ||
return React__default.createElement(Header, { | ||
isNarrow: isNarrow | ||
}, isSidebar || isFlyIn ? React__default.createElement(H2, null, t("My Cart"), " ", React__default.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", cart.totalItems, " ", t("Item"), ")")) : React__default.createElement(H1, null, t("My Cart"), " ", React__default.createElement("span", { | ||
className: "qa-total-items" | ||
}, "(", cart.totalItems, " ", t("Item"), ")")), React__default.createElement(H4, null, t("Quantity")), React__default.createElement(H4, null, t("Price")), React__default.createElement(H4, null, t("Remove"))); | ||
}, isSidebar || isFlyIn ? React__default.createElement(H2, null, React__default.createElement(CartCount, { | ||
totalItems: cart.totalItems | ||
})) : React__default.createElement(H1, null, React__default.createElement(CartCount, { | ||
totalItems: cart.totalItems | ||
})), React__default.createElement(H4, null, t("Quantity")), React__default.createElement(H4, null, t("Price")), React__default.createElement(H4, null, t("Remove"))); | ||
}; | ||
@@ -782,3 +795,3 @@ | ||
function _templateObject4$3() { | ||
var data = _taggedTemplateLiteral(["\n padding-bottom: 150px;\n overflow-y: scroll;\n overflow-x: hidden;\n "]); | ||
var data = _taggedTemplateLiteral(["\n padding-bottom: 150px;\n overflow-y: auto;\n overflow-x: hidden;\n "]); | ||
@@ -785,0 +798,0 @@ _templateObject4$3 = function _templateObject4() { |
{ | ||
"name": "@arcteryx/components-cart", | ||
"version": "1.1.12", | ||
"version": "1.1.13-alpha.5+91f5477", | ||
"description": "Arcteryx Cart", | ||
@@ -18,3 +18,3 @@ "source": "src/index.js", | ||
"license": "ISC", | ||
"gitHead": "e5de3ec4c62ad99f617f71fc5ca27e2d6d65d120", | ||
"gitHead": "91f54779efd37dae232be54a49c5510ce9dd6243", | ||
"peerDependencies": { | ||
@@ -26,3 +26,5 @@ "@arcteryx/components-contexts": "^1.1.0" | ||
"@arcteryx/components-price": "^1.0.6", | ||
"i18next": "^19.0.2" | ||
"i18next": "^19.3.2", | ||
"i18next-fetch-backend": "^2.2.0", | ||
"react-i18next": "^11.3.3" | ||
}, | ||
@@ -29,0 +31,0 @@ "files": [ |
@@ -6,3 +6,2 @@ import React, { useState, useEffect } from "react"; | ||
import { Button } from "@arcteryx/components-button"; | ||
import { useTranslation } from "react-i18next"; | ||
@@ -18,3 +17,3 @@ const label = "Add Product to Cart"; | ||
value: 800.0, | ||
currency: "CAD", | ||
currency: "USD", | ||
}, | ||
@@ -36,7 +35,7 @@ size: "M", | ||
value: 800.0, | ||
currency: "CAD", | ||
currency: "USD", | ||
}, | ||
itemTotalPrice: { | ||
value: 800.0, | ||
currency: "CAD", | ||
currency: "USD", | ||
}, | ||
@@ -54,3 +53,3 @@ items: [ | ||
value: 1000, | ||
currency: "CAD", | ||
currency: "USD", | ||
}, | ||
@@ -71,3 +70,3 @@ size: "M", | ||
value: 170.0, | ||
currency: "CAD", | ||
currency: "USD", | ||
}, | ||
@@ -89,3 +88,3 @@ size: "36", | ||
value: 170.0, | ||
currency: "CAD", | ||
currency: "USD", | ||
}, | ||
@@ -106,3 +105,3 @@ size: "36", | ||
value: 1300.0, | ||
currency: "CAD", | ||
currency: "USD", | ||
}, | ||
@@ -117,18 +116,2 @@ size: "REG", | ||
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 Wrap = styled.div` | ||
@@ -161,6 +144,6 @@ max-width: ${props => props.width || "100%"}; | ||
export const FlyInCart = () => { | ||
const { t } = useTranslation(); | ||
return ( | ||
<Wrap width="375px" height="100vh" center noborder nopadding> | ||
<CartShell isFlyIn cart={cart} cta={<Button context="Secure-Checkout">{t("Secure Checkout")}</Button>}> | ||
{/* So for some reason we can't use i18next t() in a story, it breaks things. Just use Lorem Ipsum for now */} | ||
<CartShell isFlyIn cart={cart} cta={<Button context="Secure-Checkout">Lorem Ipsum</Button>}> | ||
{cart.items.map((product, i) => ( | ||
@@ -176,7 +159,7 @@ <Item key={i} isFlyIn product={product} canEdit isFlyIn /> | ||
const [data, setData] = useState(cart); | ||
const { t } = useTranslation(); | ||
return ( | ||
<Wrap width="930px" center noborder> | ||
<CartShell cart={data} cta={<Button context="Secure-Checkout">{t("Secure Checkout")}</Button>}> | ||
{/* So for some reason we can't use i18next t() in a story, it breaks things. Just use Lorem Ipsum for now */} | ||
<CartShell cart={data} cta={<Button context="Secure-Checkout">Lorem Ipsum</Button>}> | ||
{data.items.map((product, i) => ( | ||
@@ -183,0 +166,0 @@ <Item key={i} product={product} canEdit /> |
@@ -32,2 +32,11 @@ import React from "react"; | ||
const CartCount = ({ totalItems }) => { | ||
const { t } = useTranslation(); | ||
return ( | ||
<> | ||
{t("My Cart")} <span className="qa-total-items">({t("Item", { count: totalItems })})</span> | ||
</> | ||
); | ||
}; | ||
const CartHeader = ({ cart, isNarrow, isFlyIn, isSidebar }) => { | ||
@@ -40,13 +49,7 @@ const { t } = useTranslation(); | ||
<H2> | ||
{t("My Cart")}{" "} | ||
<span className="qa-total-items"> | ||
({cart.totalItems} {t("Item")}) | ||
</span> | ||
<CartCount totalItems={cart.totalItems} /> | ||
</H2> | ||
) : ( | ||
<H1> | ||
{t("My Cart")}{" "} | ||
<span className="qa-total-items"> | ||
({cart.totalItems} {t("Item")}) | ||
</span> | ||
<CartCount totalItems={cart.totalItems} /> | ||
</H1> | ||
@@ -53,0 +56,0 @@ )} |
@@ -22,3 +22,3 @@ import React from "react"; | ||
padding-bottom: 150px; | ||
overflow-y: scroll; | ||
overflow-y: auto; | ||
overflow-x: hidden; | ||
@@ -25,0 +25,0 @@ `}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
290012
3283
6
2
1
+ Addedi18next-fetch-backend@^2.2.0
+ Addedreact-i18next@^11.3.3
+ Addedhtml-parse-stringify@3.0.1(transitive)
+ Addedi18next-fetch-backend@2.3.1(transitive)
+ Addedreact-i18next@11.18.6(transitive)
+ Addedvoid-elements@3.1.0(transitive)
Updatedi18next@^19.3.2