@arcteryx/components-cart - npm Package Compare versions

Comparing version 4.5.0 to 4.5.1

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [4.5.1](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@4.5.0...@arcteryx/components-cart@4.5.1) (2020-12-08)
+
+
+### Bug Fixes
+
+* TMS-730 fix storybook for fly in cart. ([a6345d8](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/a6345d8b0687d3d11623c48b94ed54472f33bd91))
+
+
+
+
+
 # [4.5.0](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@4.4.0...@arcteryx/components-cart@4.5.0) (2020-12-08)
@@ -8,0 +19,0 @@

dist/cjs/index.js

@@ -426,3 +426,3 @@ 'use strict';
   width: 100%;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 80%;
@@ -437,3 +437,3 @@ align-items: flex-start;
   text-align: center;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 40%;
@@ -457,3 +457,3 @@ order: 4;
   }
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 20%;
@@ -1169,3 +1169,3 @@ order: 2;
   width: 100%;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 100%;
@@ -1229,3 +1229,3 @@ max-width: 100%;
   justify-content: flex-end;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   border-top: 2px solid #000;
@@ -1552,17 +1552,21 @@ padding-top: 1em;
   cart
-}) => /*#__PURE__*/React__default.createElement(FlyInOverlay, null, /*#__PURE__*/React__default.createElement(FlyInContainer, {
-  isOpen: isOpen
-}, /*#__PURE__*/React__default.createElement(CartShell, {
-  isFlyIn: true,
-  cart: cart,
-  cta: /*#__PURE__*/React__default.createElement("a", {
-    href: "/cart"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    context: "Standard"
-  }, "View Cart"))
-}, cart === null || cart === void 0 ? void 0 : cart.products.map(product => /*#__PURE__*/React__default.createElement(CartProduct, {
-  product: product,
-  key: product.id
-})))));
+}) => {
+  var _cart$products;
 
+  return /*#__PURE__*/React__default.createElement(FlyInOverlay, null, /*#__PURE__*/React__default.createElement(FlyInContainer, {
+    isOpen: isOpen
+  }, /*#__PURE__*/React__default.createElement(CartShell, {
+    isFlyIn: true,
+    cart: cart,
+    cta: /*#__PURE__*/React__default.createElement("a", {
+      href: "/cart"
+    }, /*#__PURE__*/React__default.createElement(Button$1, {
+      context: "Standard"
+    }, "View Cart"))
+  }, cart === null || cart === void 0 ? void 0 : (_cart$products = cart.products) === null || _cart$products === void 0 ? void 0 : _cart$products.map(product => /*#__PURE__*/React__default.createElement(CartProduct, {
+    product: product,
+    key: product.id
+  })))));
+};
+
 exports.CartProduct = CartProduct;
@@ -1569,0 +1573,0 @@ exports.CartShell = CartShell;

dist/es/index.js

@@ -418,3 +418,3 @@ import React, { useContext } from 'react';
   width: 100%;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 80%;
@@ -429,3 +429,3 @@ align-items: flex-start;
   text-align: center;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 40%;
@@ -449,3 +449,3 @@ order: 4;
   }
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 20%;
@@ -1161,3 +1161,3 @@ order: 2;
   width: 100%;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 100%;
@@ -1221,3 +1221,3 @@ max-width: 100%;
   justify-content: flex-end;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   border-top: 2px solid #000;
@@ -1544,18 +1544,22 @@ padding-top: 1em;
   cart
-}) => /*#__PURE__*/React.createElement(FlyInOverlay, null, /*#__PURE__*/React.createElement(FlyInContainer, {
-  isOpen: isOpen
-}, /*#__PURE__*/React.createElement(CartShell, {
-  isFlyIn: true,
-  cart: cart,
-  cta: /*#__PURE__*/React.createElement("a", {
-    href: "/cart"
-  }, /*#__PURE__*/React.createElement(Button$1, {
-    context: "Standard"
-  }, "View Cart"))
-}, cart === null || cart === void 0 ? void 0 : cart.products.map(product => /*#__PURE__*/React.createElement(CartProduct, {
-  product: product,
-  key: product.id
-})))));
+}) => {
+  var _cart$products;
 
+  return /*#__PURE__*/React.createElement(FlyInOverlay, null, /*#__PURE__*/React.createElement(FlyInContainer, {
+    isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(CartShell, {
+    isFlyIn: true,
+    cart: cart,
+    cta: /*#__PURE__*/React.createElement("a", {
+      href: "/cart"
+    }, /*#__PURE__*/React.createElement(Button$1, {
+      context: "Standard"
+    }, "View Cart"))
+  }, cart === null || cart === void 0 ? void 0 : (_cart$products = cart.products) === null || _cart$products === void 0 ? void 0 : _cart$products.map(product => /*#__PURE__*/React.createElement(CartProduct, {
+    product: product,
+    key: product.id
+  })))));
+};
+
 export { CartProduct, CartShell, FlyInCart };
 //# sourceMappingURL=index.js.map

dist/umd/index.js

@@ -425,3 +425,3 @@ (function (global, factory) {
   width: 100%;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 80%;
@@ -436,3 +436,3 @@ align-items: flex-start;
   text-align: center;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 40%;
@@ -456,3 +456,3 @@ order: 4;
   }
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 20%;
@@ -1168,3 +1168,3 @@ order: 2;
   width: 100%;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 100%;
@@ -1228,3 +1228,3 @@ max-width: 100%;
   justify-content: flex-end;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   border-top: 2px solid #000;
@@ -1551,17 +1551,21 @@ padding-top: 1em;
     cart
-  }) => /*#__PURE__*/React__default.createElement(FlyInOverlay, null, /*#__PURE__*/React__default.createElement(FlyInContainer, {
-    isOpen: isOpen
-  }, /*#__PURE__*/React__default.createElement(CartShell, {
-    isFlyIn: true,
-    cart: cart,
-    cta: /*#__PURE__*/React__default.createElement("a", {
-      href: "/cart"
-    }, /*#__PURE__*/React__default.createElement(Button$1, {
-      context: "Standard"
-    }, "View Cart"))
-  }, cart === null || cart === void 0 ? void 0 : cart.products.map(product => /*#__PURE__*/React__default.createElement(CartProduct, {
-    product: product,
-    key: product.id
-  })))));
+  }) => {
+    var _cart$products;
 
+    return /*#__PURE__*/React__default.createElement(FlyInOverlay, null, /*#__PURE__*/React__default.createElement(FlyInContainer, {
+      isOpen: isOpen
+    }, /*#__PURE__*/React__default.createElement(CartShell, {
+      isFlyIn: true,
+      cart: cart,
+      cta: /*#__PURE__*/React__default.createElement("a", {
+        href: "/cart"
+      }, /*#__PURE__*/React__default.createElement(Button$1, {
+        context: "Standard"
+      }, "View Cart"))
+    }, cart === null || cart === void 0 ? void 0 : (_cart$products = cart.products) === null || _cart$products === void 0 ? void 0 : _cart$products.map(product => /*#__PURE__*/React__default.createElement(CartProduct, {
+      product: product,
+      key: product.id
+    })))));
+  };
+
   exports.CartProduct = CartProduct;
@@ -1568,0 +1572,0 @@ exports.CartShell = CartShell;

package.json

 {
   "name": "@arcteryx/components-cart",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "Arcteryx Cart",
@@ -18,5 +18,6 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "ad9c9133363602edf03fb634ade730b86432fb7e",
+  "gitHead": "a826de454216d4f1356c5787254c5ed7810b6e4a",
   "peerDependencies": {
     "@arcteryx/components-contexts": "^1.1.0",
+    "@arcteryx/container-cart": "^1.1.0",
     "@arcteryx/data-models": "^4.17.0"
@@ -23,0 +24,0 @@ },

src/Cart.stories.js

@@ -6,4 +6,5 @@ import { Button } from "@arcteryx/components-button";
 import { button } from "@storybook/addon-knobs/react";
+import { FlyInCartContainer, addToCart } from "../../container-cart/src";
 
-import { CartProduct, CartShell, FlyInCart as FlyInCartComponent } from "./index.js";
+import { CartProduct, CartShell } from "./index.js";
 import tasCart, { manyItems as manyTasItems } from '../__mocks__/tas.cart';
@@ -59,7 +60,11 @@ import mockTasServiceProvider from "../__mocks__/mockTasServiceProvider";
 export const FlyInCart = () => {
-  const [flyInOpen, setFlyInOpen] = useState(false);
+  const squamishHoodyNucleus = {
+    productNo: 25681,
+    sku: 437960
+  }
+  const cartService = mockTasServiceProvider()
   button(
     "Open",
     () => {
-      setFlyInOpen(true);
+      addToCart(squamishHoodyNucleus)
       return true;
@@ -69,12 +74,4 @@ },
   );
-  button(
-    "Close",
-    () => {
-      setFlyInOpen(false);
-      return true; // must return true to re-render storybook
-    },
-    "Fly In Cart"
-  );
   return (
-    <FlyInCartComponent isOpen={flyInOpen} cartTasService={mockTasServiceProvider()} />
+    <FlyInCartContainer cartService={cartService} />
   );
@@ -81,0 +78,0 @@ };

src/components/Cart/CartDetails.js

@@ -9,3 +9,3 @@ import React from "react";
   width: 100%;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 100%;
@@ -12,0 +12,0 @@ max-width: 100%;

src/components/Cart/CartFooter.js

@@ -12,3 +12,3 @@ import React from "react";
   justify-content: flex-end;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   border-top: 2px solid #000;
@@ -15,0 +15,0 @@ padding-top: 1em;

src/components/FlyInCart/FlyInCart.js

@@ -34,25 +34,25 @@ import React from "react";
 const FlyInCart = ({ isOpen, cart }) => (
-  <FlyInOverlay>
-    <FlyInContainer isOpen={isOpen}>
-      <CartShell
-        isFlyIn
-        cart={cart}
-        cta={
-          <a href={"/cart"}>
-            <Button context="Standard">View Cart</Button>
-          </a>
-        }
-      >
-        {cart?.products.map(product => (
-          <CartProduct
-            product={product}
-            key={product.id}
-          />
-        ))}
-      </CartShell>
-    </FlyInContainer>
-  </FlyInOverlay>
-)
+    <FlyInOverlay>
+      <FlyInContainer isOpen={isOpen}>
+        <CartShell
+          isFlyIn
+          cart={cart}
+          cta={
+            <a href={"/cart"}>
+              <Button context="Standard">View Cart</Button>
+            </a>
+          }
+        >
+          {cart?.products?.map(product => (
+            <CartProduct
+              product={product}
+              key={product.id}
+            />
+          ))}
+        </CartShell>
+      </FlyInContainer>
+    </FlyInOverlay>
+  )
 
 
 export default FlyInCart;

src/components/Item/CartProduct.js

@@ -30,3 +30,3 @@ import Price from "@arcteryx/components-price";
   width: 100%;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 80%;
@@ -42,3 +42,3 @@ align-items: flex-start;
   text-align: center;
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 40%;
@@ -63,3 +63,3 @@ order: 4;
   }
-  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"}
+  ${props => !props.isNarrow && "@media screen and (max-width: 700px) {"};
   width: 20%;
@@ -66,0 +66,0 @@ order: 2;

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

451266

increased by0.23%

Lines of code

5361

increased by0.11%

Worsened metrics

Dependency count

7

increased by16.67%

No dependency changes