@arcteryx/components-button - npm Package Compare versions

Comparing version 1.27.8 to 1.27.9

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [1.27.9](https://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.27.5...@arcteryx/components-button@1.27.9) (2020-02-06)
+
+**Note:** Version bump only for package @arcteryx/components-button
+
+
+
+
+
 ## [1.27.8](https://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.27.5...@arcteryx/components-button@1.27.8) (2020-02-06)
@@ -8,0 +16,0 @@

dist/cjs/index.js

@@ -1,12 +0,14 @@
-'use strict';
+"use strict";
 
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, "__esModule", { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+function _interopDefault(ex) {
+  return ex && typeof ex === "object" && "default" in ex ? ex["default"] : ex;
+}
 
-var React = _interopDefault(require('react'));
-var styled = require('styled-components');
+var React = _interopDefault(require("react"));
+var styled = require("styled-components");
 var styled__default = _interopDefault(styled);
-var PropTypes = _interopDefault(require('prop-types'));
-var cx = _interopDefault(require('classnames'));
+var PropTypes = _interopDefault(require("prop-types"));
+var cx = _interopDefault(require("classnames"));
 
@@ -19,3 +21,3 @@ function _defineProperty(obj, key, value) {
       configurable: true,
-      writable: true
+      writable: true,
     });
@@ -30,15 +32,17 @@ } else {
 function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+  _extends =
+    Object.assign ||
+    function(target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
         }
       }
-    }
 
-    return target;
-  };
+      return target;
+    };
 
@@ -89,11 +93,15 @@ return _extends.apply(this, arguments);
 
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
+  return Object.freeze(
+    Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw),
+      },
+    })
+  );
 }
 
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n      &::after {\n        content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n        width: 10px;\n        height: 10px;\n        margin-left: 10px;\n        display: inline-block;\n      }\n    "]);
+  var data = _taggedTemplateLiteral([
+    "\n      &::after {\n        content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n        width: 10px;\n        height: 10px;\n        margin-left: 10px;\n        display: inline-block;\n      }\n    ",
+  ]);
 
@@ -108,3 +116,5 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n      &:disabled,\n      &.is-disabled {\n        opacity: 0.3;\n        color: #ccc;\n        cursor: not-allowed;\n      }\n    "]);
+  var data = _taggedTemplateLiteral([
+    "\n      &:disabled,\n      &.is-disabled {\n        opacity: 0.3;\n        color: #ccc;\n        cursor: not-allowed;\n      }\n    ",
+  ]);
 
@@ -119,3 +129,14 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  color: ", ";\n  text-decoration: ", ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ", ";\n  min-width: 142px;\n  width: 100%;\n  height: 45px;\n  font: 16px/16px \"Avenir LT W01 65 Medium\", arial, sans-serif;\n  line-height: 1.7em;\n  padding: 8px 20px;\n  margin: 0 0 1.5em 0;\n  text-transform: uppercase;\n  cursor: pointer;\n  background-color: ", "; \n  max-width:  ", "; \n  &:hover {\n    border: none;\n    background-image: linear-gradient(#373737, black);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:active {\n    border: none;\n    text-decoration: none;\n    background-image: linear-gradient(black, #373737);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ", ";\n  }\n\n  ", ";\n}\n  ", ";\n  }\n\n\n  /* Inverted, Secondary-cta buttons */\n  &.button--Secondary-cta {\n    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteral([
+    "\n  position: relative;\n  display: inline-block;\n  color: ",
+    ";\n  text-decoration: ",
+    ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ",
+    ';\n  min-width: 142px;\n  width: 100%;\n  height: 45px;\n  font: 16px/16px "Avenir LT W01 65 Medium", arial, sans-serif;\n  line-height: 1.7em;\n  padding: 8px 20px;\n  margin: 0 0 1.5em 0;\n  text-transform: uppercase;\n  cursor: pointer;\n  background-color: ',
+    "; \n  max-width:  ",
+    "; \n  &:hover {\n    border: none;\n    background-image: linear-gradient(#373737, black);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ",
+    ";\n  }\n\n  &:active {\n    border: none;\n    text-decoration: none;\n    background-image: linear-gradient(black, #373737);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ",
+    ";\n  }\n\n  ",
+    ";\n}\n  ",
+    ";\n  }\n\n\n  /* Inverted, Secondary-cta buttons */\n  &.button--Secondary-cta {\n    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n",
+  ]);
 
@@ -128,21 +149,32 @@ _templateObject = function _templateObject() {
 }
-var ButtonWrapper = styled__default.button(_templateObject(), function (props) {
-  return props.context === "Subtle" || props.context === "Secondary-cta" ? "black" : "white";
-}, function (props) {
-  return props.context === "Secondary-cta" ? "underline" : "none";
-}, function (props) {
-  return props.context === "Subtle" ? "1px solid black" : "none";
-}, function (props) {
-  return props.context === "Subtle" || props.context === "Secondary-cta" ? "white" : "black";
-}, function (props) {
-  return props.context === "Add-To-Cart" ? "inherit" : "213px";
-}, function (props) {
-  return props.context === "Secondary-cta" ? "black" : "white";
-}, function (props) {
-  return props.context === "Secondary-cta" ? "black" : "white";
-}, function (props) {
-  return props.disabled && styled.css(_templateObject2());
-}, function (props) {
-  return props.context === "Secure-Checkout" && styled.css(_templateObject3());
-});
+var ButtonWrapper = styled__default.button(
+  _templateObject(),
+  function(props) {
+    return props.context === "Subtle" || props.context === "Secondary-cta" ? "black" : "white";
+  },
+  function(props) {
+    return props.context === "Secondary-cta" ? "underline" : "none";
+  },
+  function(props) {
+    return props.context === "Subtle" ? "1px solid black" : "none";
+  },
+  function(props) {
+    return props.context === "Subtle" || props.context === "Secondary-cta" ? "white" : "black";
+  },
+  function(props) {
+    return props.context === "Add-To-Cart" ? "inherit" : "213px";
+  },
+  function(props) {
+    return props.context === "Secondary-cta" ? "black" : "white";
+  },
+  function(props) {
+    return props.context === "Secondary-cta" ? "black" : "white";
+  },
+  function(props) {
+    return props.disabled && styled.css(_templateObject2());
+  },
+  function(props) {
+    return props.context === "Secure-Checkout" && styled.css(_templateObject3());
+  }
+);
 
@@ -153,25 +185,53 @@ var Button = function Button(_ref) {
   var market = _ref.market,
-      context = _ref.context,
-      type = _ref.type,
-      size = _ref.size,
-      isDisabled = _ref.isDisabled,
-      onClick = _ref.onClick,
-      className = _ref.className,
-      id = _ref.id,
-      style = _ref.style,
-      children = _ref.children,
-      otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
+    context = _ref.context,
+    type = _ref.type,
+    size = _ref.size,
+    isDisabled = _ref.isDisabled,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    id = _ref.id,
+    style = _ref.style,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, [
+      "market",
+      "context",
+      "type",
+      "size",
+      "isDisabled",
+      "onClick",
+      "className",
+      "id",
+      "style",
+      "children",
+    ]);
 
   var baseClass = "button";
-  var rootClass = cx(baseClass, className, (_cx = {}, _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market), _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context), _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size), _defineProperty(_cx, "disabled", isDisabled), _defineProperty(_cx, "is-disabled", isDisabled), _cx));
-  return React.createElement(ButtonWrapper, _extends({
-    id: id,
-    className: rootClass,
-    type: type,
-    style: style,
-    onClick: onClick,
-    size: size,
-    market: market,
-    context: context
-  }, otherProps), children);
+  var rootClass = cx(
+    baseClass,
+    className,
+    ((_cx = {}),
+    _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market),
+    _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context),
+    _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size),
+    _defineProperty(_cx, "disabled", isDisabled),
+    _defineProperty(_cx, "is-disabled", isDisabled),
+    _cx)
+  );
+  return React.createElement(
+    ButtonWrapper,
+    _extends(
+      {
+        id: id,
+        className: rootClass,
+        type: type,
+        style: style,
+        onClick: onClick,
+        size: size,
+        market: market,
+        context: context,
+      },
+      otherProps
+    ),
+    children
+  );
 };
@@ -186,3 +246,3 @@
   onClick: null,
-  style: {}
+  style: {},
 };
@@ -204,3 +264,3 @@ Button.propTypes = {
   style: PropTypes.object,
-  children: PropTypes.node
+  children: PropTypes.node,
 };
@@ -207,0 +267,0 @@

dist/es/index.js

@@ -1,5 +0,5 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
+import React from "react";
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import cx from "classnames";
 
@@ -12,3 +12,3 @@ function _defineProperty(obj, key, value) {
       configurable: true,
-      writable: true
+      writable: true,
     });
@@ -23,15 +23,17 @@ } else {
 function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+  _extends =
+    Object.assign ||
+    function(target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
         }
       }
-    }
 
-    return target;
-  };
+      return target;
+    };
 
@@ -82,11 +84,15 @@ return _extends.apply(this, arguments);
 
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
+  return Object.freeze(
+    Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw),
+      },
+    })
+  );
 }
 
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n      &::after {\n        content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n        width: 10px;\n        height: 10px;\n        margin-left: 10px;\n        display: inline-block;\n      }\n    "]);
+  var data = _taggedTemplateLiteral([
+    "\n      &::after {\n        content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n        width: 10px;\n        height: 10px;\n        margin-left: 10px;\n        display: inline-block;\n      }\n    ",
+  ]);
 
@@ -101,3 +107,5 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n      &:disabled,\n      &.is-disabled {\n        opacity: 0.3;\n        color: #ccc;\n        cursor: not-allowed;\n      }\n    "]);
+  var data = _taggedTemplateLiteral([
+    "\n      &:disabled,\n      &.is-disabled {\n        opacity: 0.3;\n        color: #ccc;\n        cursor: not-allowed;\n      }\n    ",
+  ]);
 
@@ -112,3 +120,14 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  color: ", ";\n  text-decoration: ", ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ", ";\n  min-width: 142px;\n  width: 100%;\n  height: 45px;\n  font: 16px/16px \"Avenir LT W01 65 Medium\", arial, sans-serif;\n  line-height: 1.7em;\n  padding: 8px 20px;\n  margin: 0 0 1.5em 0;\n  text-transform: uppercase;\n  cursor: pointer;\n  background-color: ", "; \n  max-width:  ", "; \n  &:hover {\n    border: none;\n    background-image: linear-gradient(#373737, black);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:active {\n    border: none;\n    text-decoration: none;\n    background-image: linear-gradient(black, #373737);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ", ";\n  }\n\n  ", ";\n}\n  ", ";\n  }\n\n\n  /* Inverted, Secondary-cta buttons */\n  &.button--Secondary-cta {\n    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteral([
+    "\n  position: relative;\n  display: inline-block;\n  color: ",
+    ";\n  text-decoration: ",
+    ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ",
+    ';\n  min-width: 142px;\n  width: 100%;\n  height: 45px;\n  font: 16px/16px "Avenir LT W01 65 Medium", arial, sans-serif;\n  line-height: 1.7em;\n  padding: 8px 20px;\n  margin: 0 0 1.5em 0;\n  text-transform: uppercase;\n  cursor: pointer;\n  background-color: ',
+    "; \n  max-width:  ",
+    "; \n  &:hover {\n    border: none;\n    background-image: linear-gradient(#373737, black);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ",
+    ";\n  }\n\n  &:active {\n    border: none;\n    text-decoration: none;\n    background-image: linear-gradient(black, #373737);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ",
+    ";\n  }\n\n  ",
+    ";\n}\n  ",
+    ";\n  }\n\n\n  /* Inverted, Secondary-cta buttons */\n  &.button--Secondary-cta {\n    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n",
+  ]);
 
@@ -121,21 +140,32 @@ _templateObject = function _templateObject() {
 }
-var ButtonWrapper = styled.button(_templateObject(), function (props) {
-  return props.context === "Subtle" || props.context === "Secondary-cta" ? "black" : "white";
-}, function (props) {
-  return props.context === "Secondary-cta" ? "underline" : "none";
-}, function (props) {
-  return props.context === "Subtle" ? "1px solid black" : "none";
-}, function (props) {
-  return props.context === "Subtle" || props.context === "Secondary-cta" ? "white" : "black";
-}, function (props) {
-  return props.context === "Add-To-Cart" ? "inherit" : "213px";
-}, function (props) {
-  return props.context === "Secondary-cta" ? "black" : "white";
-}, function (props) {
-  return props.context === "Secondary-cta" ? "black" : "white";
-}, function (props) {
-  return props.disabled && css(_templateObject2());
-}, function (props) {
-  return props.context === "Secure-Checkout" && css(_templateObject3());
-});
+var ButtonWrapper = styled.button(
+  _templateObject(),
+  function(props) {
+    return props.context === "Subtle" || props.context === "Secondary-cta" ? "black" : "white";
+  },
+  function(props) {
+    return props.context === "Secondary-cta" ? "underline" : "none";
+  },
+  function(props) {
+    return props.context === "Subtle" ? "1px solid black" : "none";
+  },
+  function(props) {
+    return props.context === "Subtle" || props.context === "Secondary-cta" ? "white" : "black";
+  },
+  function(props) {
+    return props.context === "Add-To-Cart" ? "inherit" : "213px";
+  },
+  function(props) {
+    return props.context === "Secondary-cta" ? "black" : "white";
+  },
+  function(props) {
+    return props.context === "Secondary-cta" ? "black" : "white";
+  },
+  function(props) {
+    return props.disabled && css(_templateObject2());
+  },
+  function(props) {
+    return props.context === "Secure-Checkout" && css(_templateObject3());
+  }
+);
 
@@ -146,25 +176,53 @@ var Button = function Button(_ref) {
   var market = _ref.market,
-      context = _ref.context,
-      type = _ref.type,
-      size = _ref.size,
-      isDisabled = _ref.isDisabled,
-      onClick = _ref.onClick,
-      className = _ref.className,
-      id = _ref.id,
-      style = _ref.style,
-      children = _ref.children,
-      otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
+    context = _ref.context,
+    type = _ref.type,
+    size = _ref.size,
+    isDisabled = _ref.isDisabled,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    id = _ref.id,
+    style = _ref.style,
+    children = _ref.children,
+    otherProps = _objectWithoutProperties(_ref, [
+      "market",
+      "context",
+      "type",
+      "size",
+      "isDisabled",
+      "onClick",
+      "className",
+      "id",
+      "style",
+      "children",
+    ]);
 
   var baseClass = "button";
-  var rootClass = cx(baseClass, className, (_cx = {}, _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market), _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context), _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size), _defineProperty(_cx, "disabled", isDisabled), _defineProperty(_cx, "is-disabled", isDisabled), _cx));
-  return React.createElement(ButtonWrapper, _extends({
-    id: id,
-    className: rootClass,
-    type: type,
-    style: style,
-    onClick: onClick,
-    size: size,
-    market: market,
-    context: context
-  }, otherProps), children);
+  var rootClass = cx(
+    baseClass,
+    className,
+    ((_cx = {}),
+    _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market),
+    _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context),
+    _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size),
+    _defineProperty(_cx, "disabled", isDisabled),
+    _defineProperty(_cx, "is-disabled", isDisabled),
+    _cx)
+  );
+  return React.createElement(
+    ButtonWrapper,
+    _extends(
+      {
+        id: id,
+        className: rootClass,
+        type: type,
+        style: style,
+        onClick: onClick,
+        size: size,
+        market: market,
+        context: context,
+      },
+      otherProps
+    ),
+    children
+  );
 };
@@ -179,3 +237,3 @@
   onClick: null,
-  style: {}
+  style: {},
 };
@@ -197,3 +255,3 @@ Button.propTypes = {
   style: PropTypes.object,
-  children: PropTypes.node
+  children: PropTypes.node,
 };
@@ -200,0 +258,0 @@

dist/umd/index.js

@@ -1,11 +0,14 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('prop-types'), require('classnames')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'prop-types', 'classnames'], factory) :
-  (factory((global.ARCTERYX = {}),global.React,global.styled,global.PropTypes,global.cx));
-}(this, (function (exports,React,styled,PropTypes,cx) { 'use strict';
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined"
+    ? factory(exports, require("react"), require("styled-components"), require("prop-types"), require("classnames"))
+    : typeof define === "function" && define.amd
+    ? define(["exports", "react", "styled-components", "prop-types", "classnames"], factory)
+    : factory((global.ARCTERYX = {}), global.React, global.styled, global.PropTypes, global.cx);
+})(this, function(exports, React, styled, PropTypes, cx) {
+  "use strict";
 
-  React = React && React.hasOwnProperty('default') ? React['default'] : React;
-  var styled__default = 'default' in styled ? styled['default'] : styled;
-  PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
-  cx = cx && cx.hasOwnProperty('default') ? cx['default'] : cx;
+  React = React && React.hasOwnProperty("default") ? React["default"] : React;
+  var styled__default = "default" in styled ? styled["default"] : styled;
+  PropTypes = PropTypes && PropTypes.hasOwnProperty("default") ? PropTypes["default"] : PropTypes;
+  cx = cx && cx.hasOwnProperty("default") ? cx["default"] : cx;
 
@@ -18,3 +21,3 @@ function _defineProperty(obj, key, value) {
         configurable: true,
-        writable: true
+        writable: true,
       });
@@ -29,15 +32,17 @@ } else {
   function _extends() {
-    _extends = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+    _extends =
+      Object.assign ||
+      function(target) {
+        for (var i = 1; i < arguments.length; i++) {
+          var source = arguments[i];
 
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
+          for (var key in source) {
+            if (Object.prototype.hasOwnProperty.call(source, key)) {
+              target[key] = source[key];
+            }
           }
         }
-      }
 
-      return target;
-    };
+        return target;
+      };
 
@@ -88,11 +93,15 @@ return _extends.apply(this, arguments);
 
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
+    return Object.freeze(
+      Object.defineProperties(strings, {
+        raw: {
+          value: Object.freeze(raw),
+        },
+      })
+    );
   }
 
   function _templateObject3() {
-    var data = _taggedTemplateLiteral(["\n      &::after {\n        content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n        width: 10px;\n        height: 10px;\n        margin-left: 10px;\n        display: inline-block;\n      }\n    "]);
+    var data = _taggedTemplateLiteral([
+      "\n      &::after {\n        content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n        width: 10px;\n        height: 10px;\n        margin-left: 10px;\n        display: inline-block;\n      }\n    ",
+    ]);
 
@@ -107,3 +116,5 @@ _templateObject3 = function _templateObject3() {
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n      &:disabled,\n      &.is-disabled {\n        opacity: 0.3;\n        color: #ccc;\n        cursor: not-allowed;\n      }\n    "]);
+    var data = _taggedTemplateLiteral([
+      "\n      &:disabled,\n      &.is-disabled {\n        opacity: 0.3;\n        color: #ccc;\n        cursor: not-allowed;\n      }\n    ",
+    ]);
 
@@ -118,3 +129,14 @@ _templateObject2 = function _templateObject2() {
   function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  color: ", ";\n  text-decoration: ", ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ", ";\n  min-width: 142px;\n  width: 100%;\n  height: 45px;\n  font: 16px/16px \"Avenir LT W01 65 Medium\", arial, sans-serif;\n  line-height: 1.7em;\n  padding: 8px 20px;\n  margin: 0 0 1.5em 0;\n  text-transform: uppercase;\n  cursor: pointer;\n  background-color: ", "; \n  max-width:  ", "; \n  &:hover {\n    border: none;\n    background-image: linear-gradient(#373737, black);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:active {\n    border: none;\n    text-decoration: none;\n    background-image: linear-gradient(black, #373737);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ", ";\n  }\n\n  ", ";\n}\n  ", ";\n  }\n\n\n  /* Inverted, Secondary-cta buttons */\n  &.button--Secondary-cta {\n    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral([
+      "\n  position: relative;\n  display: inline-block;\n  color: ",
+      ";\n  text-decoration: ",
+      ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ",
+      ';\n  min-width: 142px;\n  width: 100%;\n  height: 45px;\n  font: 16px/16px "Avenir LT W01 65 Medium", arial, sans-serif;\n  line-height: 1.7em;\n  padding: 8px 20px;\n  margin: 0 0 1.5em 0;\n  text-transform: uppercase;\n  cursor: pointer;\n  background-color: ',
+      "; \n  max-width:  ",
+      "; \n  &:hover {\n    border: none;\n    background-image: linear-gradient(#373737, black);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ",
+      ";\n  }\n\n  &:active {\n    border: none;\n    text-decoration: none;\n    background-image: linear-gradient(black, #373737);\n    transition: background-color 400ms ease-in;\n    text-decoration: none;\n    color: ",
+      ";\n  }\n\n  ",
+      ";\n}\n  ",
+      ";\n  }\n\n\n  /* Inverted, Secondary-cta buttons */\n  &.button--Secondary-cta {\n    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n",
+    ]);
 
@@ -127,21 +149,32 @@ _templateObject = function _templateObject() {
   }
-  var ButtonWrapper = styled__default.button(_templateObject(), function (props) {
-    return props.context === "Subtle" || props.context === "Secondary-cta" ? "black" : "white";
-  }, function (props) {
-    return props.context === "Secondary-cta" ? "underline" : "none";
-  }, function (props) {
-    return props.context === "Subtle" ? "1px solid black" : "none";
-  }, function (props) {
-    return props.context === "Subtle" || props.context === "Secondary-cta" ? "white" : "black";
-  }, function (props) {
-    return props.context === "Add-To-Cart" ? "inherit" : "213px";
-  }, function (props) {
-    return props.context === "Secondary-cta" ? "black" : "white";
-  }, function (props) {
-    return props.context === "Secondary-cta" ? "black" : "white";
-  }, function (props) {
-    return props.disabled && styled.css(_templateObject2());
-  }, function (props) {
-    return props.context === "Secure-Checkout" && styled.css(_templateObject3());
-  });
+  var ButtonWrapper = styled__default.button(
+    _templateObject(),
+    function(props) {
+      return props.context === "Subtle" || props.context === "Secondary-cta" ? "black" : "white";
+    },
+    function(props) {
+      return props.context === "Secondary-cta" ? "underline" : "none";
+    },
+    function(props) {
+      return props.context === "Subtle" ? "1px solid black" : "none";
+    },
+    function(props) {
+      return props.context === "Subtle" || props.context === "Secondary-cta" ? "white" : "black";
+    },
+    function(props) {
+      return props.context === "Add-To-Cart" ? "inherit" : "213px";
+    },
+    function(props) {
+      return props.context === "Secondary-cta" ? "black" : "white";
+    },
+    function(props) {
+      return props.context === "Secondary-cta" ? "black" : "white";
+    },
+    function(props) {
+      return props.disabled && styled.css(_templateObject2());
+    },
+    function(props) {
+      return props.context === "Secure-Checkout" && styled.css(_templateObject3());
+    }
+  );
 
@@ -152,25 +185,53 @@ var Button = function Button(_ref) {
     var market = _ref.market,
-        context = _ref.context,
-        type = _ref.type,
-        size = _ref.size,
-        isDisabled = _ref.isDisabled,
-        onClick = _ref.onClick,
-        className = _ref.className,
-        id = _ref.id,
-        style = _ref.style,
-        children = _ref.children,
-        otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
+      context = _ref.context,
+      type = _ref.type,
+      size = _ref.size,
+      isDisabled = _ref.isDisabled,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      id = _ref.id,
+      style = _ref.style,
+      children = _ref.children,
+      otherProps = _objectWithoutProperties(_ref, [
+        "market",
+        "context",
+        "type",
+        "size",
+        "isDisabled",
+        "onClick",
+        "className",
+        "id",
+        "style",
+        "children",
+      ]);
 
     var baseClass = "button";
-    var rootClass = cx(baseClass, className, (_cx = {}, _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market), _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context), _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size), _defineProperty(_cx, "disabled", isDisabled), _defineProperty(_cx, "is-disabled", isDisabled), _cx));
-    return React.createElement(ButtonWrapper, _extends({
-      id: id,
-      className: rootClass,
-      type: type,
-      style: style,
-      onClick: onClick,
-      size: size,
-      market: market,
-      context: context
-    }, otherProps), children);
+    var rootClass = cx(
+      baseClass,
+      className,
+      ((_cx = {}),
+      _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market),
+      _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context),
+      _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size),
+      _defineProperty(_cx, "disabled", isDisabled),
+      _defineProperty(_cx, "is-disabled", isDisabled),
+      _cx)
+    );
+    return React.createElement(
+      ButtonWrapper,
+      _extends(
+        {
+          id: id,
+          className: rootClass,
+          type: type,
+          style: style,
+          onClick: onClick,
+          size: size,
+          market: market,
+          context: context,
+        },
+        otherProps
+      ),
+      children
+    );
   };
@@ -185,3 +246,3 @@
     onClick: null,
-    style: {}
+    style: {},
   };
@@ -203,3 +264,3 @@ Button.propTypes = {
     style: PropTypes.object,
-    children: PropTypes.node
+    children: PropTypes.node,
   };
@@ -209,5 +270,4 @@
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+  Object.defineProperty(exports, "__esModule", { value: true });
+});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@arcteryx/components-button",
-  "version": "1.27.8",
+  "version": "1.27.9",
   "description": "Arcteryx Button",
@@ -18,3 +18,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "7ba99f591c4c1283535b6ee103bc3f3d2e0a836d"
+  "gitHead": "c75f236b38d80f2a0eae1fb2a6820072d2b12e86"
 }

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

148603

increased by0.89%

Lines of code

2463

increased by7.27%

No dependency changes