@arcteryx/components-cart - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [3.0.0](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-cart@2.1.0...@arcteryx/components-cart@3.0.0) (2020-11-09)
+
+
+### Bug Fixes
+
+* **Flyout Cart:** U spelling ([cf7a161](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/cf7a16184d1e4daa168bb3fd2bd06ecbeae41929))
+
+
+### BREAKING CHANGES
+
+* **Flyout Cart:** Color to Colour
+
+
+
+
+
 # 2.1.0 (2020-10-28)
@@ -8,0 +24,0 @@

dist/cjs/index.js

@@ -14,2 +14,3 @@ 'use strict';
 var componentsContexts = require('@arcteryx/components-contexts');
+var styledComponentsBreakpoint = require('styled-components-breakpoint');
 
@@ -116,3 +117,3 @@ function _extends() {
 const ColorWrap = styled__default.span`
-  color: ${props => props.colorHex};
+  color: ${props => props.colourHex};
 `;
@@ -122,4 +123,4 @@
   image,
-  colorHex,
-  color,
+  colourHex,
+  colour,
   name,
@@ -146,4 +147,4 @@ size,
   className: "qa-cart-item-colour",
-  colorHex: colorHex
-}, color), " ", /*#__PURE__*/React__default.createElement("span", {
+  colourHex: colourHex
+}, colour), " ", /*#__PURE__*/React__default.createElement("span", {
   className: "qa-cart-item-size"
@@ -612,3 +613,3 @@ }, size), isNarrow && canEdit ? /*#__PURE__*/React__default.createElement(ProductMessage, {
   large: false,
-  textColor: "#000",
+  textColor: "var(--colour-copy)",
   market: "outdoor"
@@ -704,2 +705,9 @@ };
 
+const Breakpoint = styledComponentsBreakpoint.createBreakpoint({
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200
+});
 var GlobalStyles = styled.createGlobalStyle`
@@ -714,3 +722,2 @@
    */
-  --colour-copy: --colour-black;
   --colour-black: #000000;
@@ -723,2 +730,3 @@ --colour-white: #ffffff;
   --colour-grey-background: #e9e9e9;
+  --colour-copy: var(--colour-black);
 
@@ -728,5 +736,5 @@ --colour-red-3: #990000;
   --colour-red-1: #fbebeb;
-  --colour-red-warning: --colour-red-3;
-  --colour-red-medium: --colour-red-2;
-  --colour-red-background: --colour-red-1;
+  --colour-red-warning: var(--colour-red-3);
+  --colour-red-medium: var(--colour-red-2);
+  --colour-red-background: var(--colour-red-1);
 
@@ -736,5 +744,5 @@ --colour-yellow-3: #785e1c;
   --colour-yellow-1: #f8f2d5;
-  --colour-yellow-caution: --colour-yellow-3;
-  --colour-yellow-medium: --colour-yellow-2;
-  --colour-yellow-background: --colour-yellow-1;
+  --colour-yellow-caution: var(--colour-yellow-3);
+  --colour-yellow-medium: var(--colour-yellow-2);
+  --colour-yellow-background: var(--colour-yellow-1);
 
@@ -744,5 +752,5 @@ --colour-blue-3: #31668f;
   --colour-blue-1: #e3edf2;
-  --colour-blue-info: --colour-blue-3;
-  --colour-blue-focus: --colour-blue-2;
-  --colour-blue-background: --colour-blue-1;
+  --colour-blue-info: var(--colour-blue-3);
+  --colour-blue-focus: var(--colour-blue-2);
+  --colour-blue-background: var(--colour-blue-1);
 
@@ -752,5 +760,5 @@ --colour-green-3: #227733;
   --colour-green-1: #dff0d8;
-  --colour-green-success: --colour-green-3;
-  --colour-green-medium: --colour-green-2;
-  --colour-green-background: --colour-green-1;
+  --colour-green-success: var(--colour-green-3);
+  --colour-green-medium: var(--colour-green-2);
+  --colour-green-background: var(--colour-green-1);
 
@@ -779,8 +787,8 @@ /**
    */
-  --space-xs: --space-orange;
-  --space-s: --space-blue;
-  --space-m: --space-green;
-  --space-l: --space-purple;
-  --space-xl: --space-pink;
-  --space-xxl: --space-red;
+  --space-xs: var(--space-orange);
+  --space-s: var(--space-blue);
+  --space-m: var(--space-green);
+  --space-l: var(--space-purple);
+  --space-xl: var(--space-pink);
+  --space-xxl: var(--space-red);
 
@@ -790,2 +798,3 @@ /**
    */
+   --banner-height-xs: 10rem; /* 150px */
    --banner-height-sm: 12rem; /* 180px */
@@ -796,2 +805,16 @@ --banner-height-md: 13.333rem; /* 200px */
 
+   /**
+    * Common breakpoints
+    */
+   --breakpoint-sm: 576px;
+   --breakpoint-md: 768px;
+   --breakpoint-lg: 992px;
+   --breakpoint-xl: 1200px;
+   /**
+    * ProductTiles
+    */
+   --product-tile-2-col: 50%;
+   --product-tile-3-col: 33.33%;
+   --product-tile-4-col: 25%;
+
 }
@@ -839,3 +862,3 @@
   line-height: 1.5rem;
-  color: var(--color-copy);
+  color: var(--colour-copy);
   font-family: var(--font-urw);
@@ -883,3 +906,3 @@ font-weight: normal;
   max-width: 80ch;
-  color: var(--color-copy);
+  color: var(--colour-copy);
 
@@ -886,0 +909,0 @@ strong, b {

dist/es/index.js

@@ -6,2 +6,3 @@ import React, { useContext, Fragment } from 'react';
 import { SiteContext } from '@arcteryx/components-contexts';
+import { createBreakpoint } from 'styled-components-breakpoint';
 
@@ -108,3 +109,3 @@ function _extends() {
 const ColorWrap = styled.span`
-  color: ${props => props.colorHex};
+  color: ${props => props.colourHex};
 `;
@@ -114,4 +115,4 @@
   image,
-  colorHex,
-  color,
+  colourHex,
+  colour,
   name,
@@ -138,4 +139,4 @@ size,
   className: "qa-cart-item-colour",
-  colorHex: colorHex
-}, color), " ", /*#__PURE__*/React.createElement("span", {
+  colourHex: colourHex
+}, colour), " ", /*#__PURE__*/React.createElement("span", {
   className: "qa-cart-item-size"
@@ -604,3 +605,3 @@ }, size), isNarrow && canEdit ? /*#__PURE__*/React.createElement(ProductMessage, {
   large: false,
-  textColor: "#000",
+  textColor: "var(--colour-copy)",
   market: "outdoor"
@@ -696,2 +697,9 @@ };
 
+const Breakpoint = createBreakpoint({
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200
+});
 var GlobalStyles = createGlobalStyle`
@@ -706,3 +714,2 @@
    */
-  --colour-copy: --colour-black;
   --colour-black: #000000;
@@ -715,2 +722,3 @@ --colour-white: #ffffff;
   --colour-grey-background: #e9e9e9;
+  --colour-copy: var(--colour-black);
 
@@ -720,5 +728,5 @@ --colour-red-3: #990000;
   --colour-red-1: #fbebeb;
-  --colour-red-warning: --colour-red-3;
-  --colour-red-medium: --colour-red-2;
-  --colour-red-background: --colour-red-1;
+  --colour-red-warning: var(--colour-red-3);
+  --colour-red-medium: var(--colour-red-2);
+  --colour-red-background: var(--colour-red-1);
 
@@ -728,5 +736,5 @@ --colour-yellow-3: #785e1c;
   --colour-yellow-1: #f8f2d5;
-  --colour-yellow-caution: --colour-yellow-3;
-  --colour-yellow-medium: --colour-yellow-2;
-  --colour-yellow-background: --colour-yellow-1;
+  --colour-yellow-caution: var(--colour-yellow-3);
+  --colour-yellow-medium: var(--colour-yellow-2);
+  --colour-yellow-background: var(--colour-yellow-1);
 
@@ -736,5 +744,5 @@ --colour-blue-3: #31668f;
   --colour-blue-1: #e3edf2;
-  --colour-blue-info: --colour-blue-3;
-  --colour-blue-focus: --colour-blue-2;
-  --colour-blue-background: --colour-blue-1;
+  --colour-blue-info: var(--colour-blue-3);
+  --colour-blue-focus: var(--colour-blue-2);
+  --colour-blue-background: var(--colour-blue-1);
 
@@ -744,5 +752,5 @@ --colour-green-3: #227733;
   --colour-green-1: #dff0d8;
-  --colour-green-success: --colour-green-3;
-  --colour-green-medium: --colour-green-2;
-  --colour-green-background: --colour-green-1;
+  --colour-green-success: var(--colour-green-3);
+  --colour-green-medium: var(--colour-green-2);
+  --colour-green-background: var(--colour-green-1);
 
@@ -771,8 +779,8 @@ /**
    */
-  --space-xs: --space-orange;
-  --space-s: --space-blue;
-  --space-m: --space-green;
-  --space-l: --space-purple;
-  --space-xl: --space-pink;
-  --space-xxl: --space-red;
+  --space-xs: var(--space-orange);
+  --space-s: var(--space-blue);
+  --space-m: var(--space-green);
+  --space-l: var(--space-purple);
+  --space-xl: var(--space-pink);
+  --space-xxl: var(--space-red);
 
@@ -782,2 +790,3 @@ /**
    */
+   --banner-height-xs: 10rem; /* 150px */
    --banner-height-sm: 12rem; /* 180px */
@@ -788,2 +797,16 @@ --banner-height-md: 13.333rem; /* 200px */
 
+   /**
+    * Common breakpoints
+    */
+   --breakpoint-sm: 576px;
+   --breakpoint-md: 768px;
+   --breakpoint-lg: 992px;
+   --breakpoint-xl: 1200px;
+   /**
+    * ProductTiles
+    */
+   --product-tile-2-col: 50%;
+   --product-tile-3-col: 33.33%;
+   --product-tile-4-col: 25%;
+
 }
@@ -831,3 +854,3 @@
   line-height: 1.5rem;
-  color: var(--color-copy);
+  color: var(--colour-copy);
   font-family: var(--font-urw);
@@ -875,3 +898,3 @@ font-weight: normal;
   max-width: 80ch;
-  color: var(--color-copy);
+  color: var(--colour-copy);
 
@@ -878,0 +901,0 @@ strong, b {

dist/umd/index.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('prop-types'), require('react-i18next'), require('@arcteryx/components-contexts')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'prop-types', 'react-i18next', '@arcteryx/components-contexts'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('prop-types'), require('react-i18next'), require('@arcteryx/components-contexts'), require('styled-components-breakpoint')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'prop-types', 'react-i18next', '@arcteryx/components-contexts', 'styled-components-breakpoint'], factory) :
   (global = global || self, (function () {
     var current = global.ARCTERYX && global.ARCTERYX.componentscart;
     var exports = (global.ARCTERYX = global.ARCTERYX || {}, global.ARCTERYX.componentscart = {});
-    factory(exports, global.React, global.styled, global.PropTypes, global.reactI18next, global.componentsContexts);
+    factory(exports, global.React, global.styled, global.PropTypes, global.reactI18next, global.componentsContexts, global.styledComponentsBreakpoint);
     exports.noConflict = function () { global.ARCTERYX.componentscart = current; return exports; };
   }()));
-}(this, (function (exports, React, styled, PropTypes, reactI18next, componentsContexts) { 'use strict';
+}(this, (function (exports, React, styled, PropTypes, reactI18next, componentsContexts, styledComponentsBreakpoint) { 'use strict';
 
@@ -116,3 +116,3 @@ var React__default = 'default' in React ? React['default'] : React;
   const ColorWrap = styled__default.span`
-  color: ${props => props.colorHex};
+  color: ${props => props.colourHex};
 `;
@@ -122,4 +122,4 @@
     image,
-    colorHex,
-    color,
+    colourHex,
+    colour,
     name,
@@ -146,4 +146,4 @@ size,
     className: "qa-cart-item-colour",
-    colorHex: colorHex
-  }, color), " ", /*#__PURE__*/React__default.createElement("span", {
+    colourHex: colourHex
+  }, colour), " ", /*#__PURE__*/React__default.createElement("span", {
     className: "qa-cart-item-size"
@@ -612,3 +612,3 @@ }, size), isNarrow && canEdit ? /*#__PURE__*/React__default.createElement(ProductMessage, {
     large: false,
-    textColor: "#000",
+    textColor: "var(--colour-copy)",
     market: "outdoor"
@@ -704,2 +704,9 @@ };
 
+  const Breakpoint = styledComponentsBreakpoint.createBreakpoint({
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200
+  });
   var GlobalStyles = styled.createGlobalStyle`
@@ -714,3 +721,2 @@
    */
-  --colour-copy: --colour-black;
   --colour-black: #000000;
@@ -723,2 +729,3 @@ --colour-white: #ffffff;
   --colour-grey-background: #e9e9e9;
+  --colour-copy: var(--colour-black);
 
@@ -728,5 +735,5 @@ --colour-red-3: #990000;
   --colour-red-1: #fbebeb;
-  --colour-red-warning: --colour-red-3;
-  --colour-red-medium: --colour-red-2;
-  --colour-red-background: --colour-red-1;
+  --colour-red-warning: var(--colour-red-3);
+  --colour-red-medium: var(--colour-red-2);
+  --colour-red-background: var(--colour-red-1);
 
@@ -736,5 +743,5 @@ --colour-yellow-3: #785e1c;
   --colour-yellow-1: #f8f2d5;
-  --colour-yellow-caution: --colour-yellow-3;
-  --colour-yellow-medium: --colour-yellow-2;
-  --colour-yellow-background: --colour-yellow-1;
+  --colour-yellow-caution: var(--colour-yellow-3);
+  --colour-yellow-medium: var(--colour-yellow-2);
+  --colour-yellow-background: var(--colour-yellow-1);
 
@@ -744,5 +751,5 @@ --colour-blue-3: #31668f;
   --colour-blue-1: #e3edf2;
-  --colour-blue-info: --colour-blue-3;
-  --colour-blue-focus: --colour-blue-2;
-  --colour-blue-background: --colour-blue-1;
+  --colour-blue-info: var(--colour-blue-3);
+  --colour-blue-focus: var(--colour-blue-2);
+  --colour-blue-background: var(--colour-blue-1);
 
@@ -752,5 +759,5 @@ --colour-green-3: #227733;
   --colour-green-1: #dff0d8;
-  --colour-green-success: --colour-green-3;
-  --colour-green-medium: --colour-green-2;
-  --colour-green-background: --colour-green-1;
+  --colour-green-success: var(--colour-green-3);
+  --colour-green-medium: var(--colour-green-2);
+  --colour-green-background: var(--colour-green-1);
 
@@ -779,8 +786,8 @@ /**
    */
-  --space-xs: --space-orange;
-  --space-s: --space-blue;
-  --space-m: --space-green;
-  --space-l: --space-purple;
-  --space-xl: --space-pink;
-  --space-xxl: --space-red;
+  --space-xs: var(--space-orange);
+  --space-s: var(--space-blue);
+  --space-m: var(--space-green);
+  --space-l: var(--space-purple);
+  --space-xl: var(--space-pink);
+  --space-xxl: var(--space-red);
 
@@ -790,2 +797,3 @@ /**
    */
+   --banner-height-xs: 10rem; /* 150px */
    --banner-height-sm: 12rem; /* 180px */
@@ -796,2 +804,16 @@ --banner-height-md: 13.333rem; /* 200px */
 
+   /**
+    * Common breakpoints
+    */
+   --breakpoint-sm: 576px;
+   --breakpoint-md: 768px;
+   --breakpoint-lg: 992px;
+   --breakpoint-xl: 1200px;
+   /**
+    * ProductTiles
+    */
+   --product-tile-2-col: 50%;
+   --product-tile-3-col: 33.33%;
+   --product-tile-4-col: 25%;
+
 }
@@ -839,3 +861,3 @@
   line-height: 1.5rem;
-  color: var(--color-copy);
+  color: var(--colour-copy);
   font-family: var(--font-urw);
@@ -883,3 +905,3 @@ font-weight: normal;
   max-width: 80ch;
-  color: var(--color-copy);
+  color: var(--colour-copy);
 
@@ -886,0 +908,0 @@ strong, b {

package.json

 {
   "name": "@arcteryx/components-cart",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Arcteryx Cart",
@@ -18,3 +18,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "3f5930f8cf2dea943aedb40ca205464a9f09a245",
+  "gitHead": "e3a380041d406f04575a2328f03515b2f0c08fbd",
   "peerDependencies": {
@@ -21,0 +21,0 @@ "@arcteryx/components-contexts": "^1.1.0"

src/Cart.stories.js

@@ -1,2 +0,2 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { CartItem, CartShell } from "./index.js";
@@ -12,4 +12,2 @@ import styled from "styled-components";
     name: "Beta SV Jacket Men's",
-    color: "Yukon",
-    colorHex: "#cc0000",
     price: {
@@ -19,2 +17,4 @@ value: 800.0,
     },
+    colour: "Yukon",
+    colourHex: "#cc0000",
     size: "M",
@@ -48,4 +48,2 @@ quantity: 1,
       name: "Alpha SV Jacket Men's",
-      color: "Deep Blue",
-      colorHex: "#00008b",
       price: {
@@ -55,2 +53,4 @@ value: 1000,
       },
+      colour: "Deep Blue",
+      colourHex: "#00008b",
       size: "M",
@@ -65,4 +65,2 @@ link: "//arcteryx.com/shop/mens/beta-sv-jacket",
       name: "A2B Commuter Pant Men's",
-      color: "Pilot",
-      colorHex: "#777777",
       price: {
@@ -72,2 +70,4 @@ value: 170.0,
       },
+      colour: "Pilot",
+      colourHex: "#777777",
       size: "36",
@@ -83,4 +83,2 @@ link: "//arcteryx.com/shop/mens/beta-sv-jacket",
       name: "A2B Commuter Pant Men's",
-      color: "Pilot",
-      colorHex: "#777777",
       price: {
@@ -90,2 +88,4 @@ value: 170.0,
       },
+      colour: "Pilot",
+      colourHex: "#777777",
       size: "36",
@@ -100,4 +100,2 @@ link: "//arcteryx.com/shop/mens/beta-sv-jacket",
       name: "Voltair 30 Backpack",
-      color: "Cayenne",
-      colorHex: "#cc0000",
       price: {
@@ -107,2 +105,4 @@ value: 1300.0,
       },
+      colour: "Cayenne",
+      colourHex: "#cc0000",
       size: "REG",
@@ -133,4 +133,2 @@ link: "//arcteryx.com/shop/mens/beta-sv-jacket",
       name: "Alpha SV Jacket Men's",
-      color: "Deep Blue",
-      colorHex: "#00008b",
       price: {
@@ -140,2 +138,4 @@ value: 1000,
       },
+      colour: "Deep Blue",
+      colourHex: "#00008b",
       size: "M",
@@ -142,0 +142,0 @@ link: "//arcteryx.com/shop/mens/beta-sv-jacket",

src/components/Item/CartItem.test.js

@@ -16,4 +16,2 @@ import React from "react";
       name: "A2B Commuter Pant Men's",
-      color: "Pilot",
-      colorHex: "#777777",
       price: {
@@ -23,2 +21,4 @@ currency: "CAD",
       },
+      colour: "Pilot",
+      colourHex: "#777777",
       size: "36",
@@ -25,0 +25,0 @@ quantity: 1,

src/components/Item/ProductInfo.js

@@ -45,6 +45,6 @@ import React from "react";
 const ColorWrap = styled.span`
-  color: ${props => props.colorHex};
+  color: ${props => props.colourHex};
 `;
 
-const ProductInfo = ({ image, colorHex, color, name, size, link, isNarrow, canEdit, productNo, stockQuantity }) => (
+const ProductInfo = ({ image, colourHex, colour, name, size, link, isNarrow, canEdit, productNo, stockQuantity }) => (
   <Wrap isNarrow={isNarrow}>
@@ -59,4 +59,4 @@ <Thumbnail isNarrow={isNarrow} href={link}>
       <p>
-        <ColorWrap className="qa-cart-item-colour" colorHex={colorHex}>
-          {color}
+        <ColorWrap className="qa-cart-item-colour" colourHex={colourHex}>
+          {colour}
         </ColorWrap>{" "}
@@ -63,0 +63,0 @@ <span className="qa-cart-item-size">{size}</span>

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

367543

increased by1.18%

Lines of code

4529

increased by1.46%

No dependency changes