@arcteryx/components-button - npm Package Compare versions

Comparing version 1.35.0 to 1.36.0-test.0

dist/cjs/index.js

@@ -7,3 +7,2 @@ 'use strict';
 var styled = require('styled-components');
-var PropTypes = require('prop-types');
 var cx = require('classnames');
@@ -15,46 +14,26 @@
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
-  return target;
+  return t;
 }
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
 
@@ -112,4 +91,3 @@ const LoadingIcon = styled__default["default"].span`
 
-const _excluded = ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href", "width"];
-const ButtonWrapper = styled__default["default"].div`
+const ButtonWrapper = styled__default["default"].div `
   position: relative;
@@ -120,3 +98,3 @@ display: inline-flex;
   width: ${props => widthValue(props)};
-  max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};
+  max-width: ${props => (props.context === ADDTOCART && "400px") || (props.context === SECURE && "100%")};
   height: 3rem;
@@ -135,3 +113,3 @@ padding: 0 1rem;
   font-weight: 400;
-  text-transform: ${props => props.context === STANDARD || !props.href ? "uppercase" : "none"};
+  text-transform: ${props => (props.context === STANDARD || !props.href ? "uppercase" : "none")};
   word-break: keep-all;
@@ -143,7 +121,7 @@ cursor: pointer;
   &:active {
-    border: ${props => props.context === SECONDARY ? "1px solid var(--colour-black)" : "1px solid transparent"};
+    border: ${props => (props.context === SECONDARY ? "1px solid var(--colour-black)" : "1px solid transparent")};
     background-image: linear-gradient(var(--colour-black), var(--background-gradient));
     transition: background-color 400ms ease-in;
     text-decoration: none;
-    color: ${props => props.context === SECONDARY ? "var(--colour-black)" : "var(--colour-white)"};
+    color: ${props => (props.context === SECONDARY ? "var(--colour-black)" : "var(--colour-white)")};
   }
@@ -162,7 +140,7 @@
 
-
-  ${props => props.disabled && styled.css`
+  ${props => props.disabled &&
+    styled.css `
       &:disabled,
       &.disabled {
-        color: ${() => props.context === SECONDARY ? "var(--colour-grey-inactive)" : "var(--colour-white)"};
+        color: ${() => (props.context === SECONDARY ? "var(--colour-grey-inactive)" : "var(--colour-white)")};
         cursor: not-allowed;
@@ -178,3 +156,4 @@ background-color: ${() => props.context === SECONDARY ? "var(--colour-grey-background)" : "var(--colour-grey-inactive)"};
 
-  ${props => props.context === SECURE && styled.css`
+  ${props => props.context === SECURE &&
+    styled.css `
       &::after {
@@ -191,4 +170,4 @@ content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
   &.button--Secondary-cta {
-    border: ${props => Boolean(props.href) ? "none" : "1px solid transparent"};
-    text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
+    border: ${props => (Boolean(props.href) ? "none" : "1px solid transparent")};
+    text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     &:hover,
@@ -199,7 +178,6 @@ &:active,
       color: var(--colour-black);
-      border: ${props => Boolean(props.href) ? "none" : "1px solid var(--colour-black)"};
-      font-weight: ${props => Boolean(props.href) ? "600" : "400"};
+      border: ${props => (Boolean(props.href) ? "none" : "1px solid var(--colour-black)")};
+      font-weight: ${props => (Boolean(props.href) ? "600" : "400")};
       cursor: pointer;
-      text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
-      
+      text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     }
@@ -210,8 +188,9 @@ &.disabled {
       cursor: not-allowed;
-      background-color: ${props => Boolean(props.href) ? "transparent" : "var(--colour-grey-background)"};
+      background-color: ${props => (Boolean(props.href) ? "transparent" : "var(--colour-grey-background)")};
       font-weight: 400;
-      text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
+      text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     }
   }
-  ${props => props.context === FINDINSTORE && styled.css`
+  ${props => props.context === FINDINSTORE &&
+    styled.css `
       display: flex;
@@ -239,3 +218,4 @@ align-items: center;
 
-  ${props => props.context === EMAIL && styled.css`
+  ${props => props.context === EMAIL &&
+    styled.css `
       display: inline-flex;
@@ -252,3 +232,4 @@ justify-content: center;
 
-  ${props => props.context === ADDTOCART && styled.css`
+  ${props => props.context === ADDTOCART &&
+    styled.css `
       display: inline-flex;
@@ -265,92 +246,31 @@ justify-content: center;
 `;
-const StyledIconWrapper = styled__default["default"].span`
+const StyledIconWrapper = styled__default["default"].span `
   margin-left: 5px;
   margin-right: 5px;
 `;
-const IconButton = _ref => {
-  let {
-    icon
-  } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, null, icon);
+const IconButton = ({ children }) => {
+    return React__default["default"].createElement(StyledIconWrapper, null, children);
 };
-const Button = _ref2 => {
-  let {
-      market,
-      context,
-      type,
-      size,
-      IconButtonLeft,
-      IconButtonRight,
-      disabled,
-      isWaiting,
-      onClick,
-      className,
-      id,
-      style,
-      children,
-      href = "",
-      width
-    } = _ref2,
-    otherProps = _objectWithoutProperties(_ref2, _excluded);
-  const baseClass = "button";
-  const rootClass = cx__default["default"](baseClass, className, {
-    [`${baseClass}--${market}`]: market,
-    [`${baseClass}--${context}`]: context,
-    [`${baseClass}--${size}`]: size,
-    disabled,
-    waiting: isWaiting,
-    "is-waiting": isWaiting
-  });
-  const isAnchorElement = Boolean(href);
-  const as = isAnchorElement ? "a" : "button";
-  const hasIconButtonLeft = Boolean(IconButtonLeft);
-  const hasIconButtonRight = Boolean(IconButtonRight);
-  return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, _extends({
-    as: as,
-    id: id,
-    href: isAnchorElement ? href : undefined,
-    className: rootClass,
-    type: isAnchorElement ? undefined : type,
-    style: style,
-    onClick: onClick,
-    size: size,
-    market: market,
-    context: context,
-    disabled: disabled,
-    width: width
-  }, otherProps), isWaiting && /*#__PURE__*/React__default["default"].createElement(LoadingIcon, {
-    "data-testid": "loading-icon"
-  }), !isWaiting && hasIconButtonLeft && /*#__PURE__*/React__default["default"].createElement(IconButton, {
-    icon: IconButtonLeft
-  }), /*#__PURE__*/React__default["default"].createElement("span", null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React__default["default"].createElement(IconButton, {
-    icon: IconButtonRight
-  }));
+const Button = (_a) => {
+    var { market = "Outdoor", context = "Standard", type = "button", size, IconButtonLeft, IconButtonRight, onClick, className, id, style = {}, children, href = "", width, isWaiting = false, disabled = false } = _a, otherProps = __rest(_a, ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "onClick", "className", "id", "style", "children", "href", "width", "isWaiting", "disabled"]);
+    const baseClass = "button";
+    const rootClass = cx__default["default"](baseClass, className, {
+        [`${baseClass}--${market}`]: market,
+        [`${baseClass}--${context}`]: context,
+        [`${baseClass}--${size}`]: size,
+        disabled,
+        waiting: isWaiting,
+        "is-waiting": isWaiting,
+    });
+    const isAnchorElement = Boolean(href);
+    const as = isAnchorElement ? "a" : "button";
+    return (React__default["default"].createElement(ButtonWrapper, Object.assign({ as: as, id: id, href: isAnchorElement ? href : undefined, className: rootClass, type: isAnchorElement ? undefined : type, style: style, onClick: onClick, size: size, market: market, context: context, disabled: disabled, width: width }, otherProps),
+        isWaiting && React__default["default"].createElement(LoadingIcon, { "data-testid": "loading-icon" }),
+        !isWaiting && IconButtonLeft && React__default["default"].createElement(IconButton, null, IconButtonLeft),
+        React__default["default"].createElement("span", null, children),
+        !isWaiting && IconButtonRight && React__default["default"].createElement(IconButton, null, IconButtonRight)));
 };
 Button.displayName = "Button";
-Button.defaultProps = {
-  context: "Standard",
-  market: "Outdoor",
-  type: "button",
-  disabled: false,
-  isWaiting: false,
-  onClick: null,
-  style: {}
-};
-Button.propTypes = {
-  context: PropTypes__default["default"].oneOf(["Standard", "Inverted", "Subtle", "Secondary-cta", "Secure-checkout", "Add-To-Cart", "Find-In-Store", "Email"]),
-  type: PropTypes__default["default"].string,
-  market: PropTypes__default["default"].oneOf(["Outdoor", "Leaf", "Veilance"]),
-  id: PropTypes__default["default"].string,
-  size: PropTypes__default["default"].oneOf(["xs", "sm", "md", "lg"]),
-  disabled: PropTypes__default["default"].bool,
-  isWaiting: PropTypes__default["default"].bool,
-  onClick: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].object,
-  children: PropTypes__default["default"].node,
-  IconButtonLeft: PropTypes__default["default"].node,
-  IconButtonRight: PropTypes__default["default"].node
-};
 
 exports.Button = Button;
 //# sourceMappingURL=index.js.map

dist/es/index.js

 import React from 'react';
 import styled, { css } from 'styled-components';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
-  return target;
+  return t;
 }
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
 
@@ -99,4 +79,3 @@ const LoadingIcon = styled.span`
 
-const _excluded = ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href", "width"];
-const ButtonWrapper = styled.div`
+const ButtonWrapper = styled.div `
   position: relative;
@@ -107,3 +86,3 @@ display: inline-flex;
   width: ${props => widthValue(props)};
-  max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};
+  max-width: ${props => (props.context === ADDTOCART && "400px") || (props.context === SECURE && "100%")};
   height: 3rem;
@@ -122,3 +101,3 @@ padding: 0 1rem;
   font-weight: 400;
-  text-transform: ${props => props.context === STANDARD || !props.href ? "uppercase" : "none"};
+  text-transform: ${props => (props.context === STANDARD || !props.href ? "uppercase" : "none")};
   word-break: keep-all;
@@ -130,7 +109,7 @@ cursor: pointer;
   &:active {
-    border: ${props => props.context === SECONDARY ? "1px solid var(--colour-black)" : "1px solid transparent"};
+    border: ${props => (props.context === SECONDARY ? "1px solid var(--colour-black)" : "1px solid transparent")};
     background-image: linear-gradient(var(--colour-black), var(--background-gradient));
     transition: background-color 400ms ease-in;
     text-decoration: none;
-    color: ${props => props.context === SECONDARY ? "var(--colour-black)" : "var(--colour-white)"};
+    color: ${props => (props.context === SECONDARY ? "var(--colour-black)" : "var(--colour-white)")};
   }
@@ -149,7 +128,7 @@
 
-
-  ${props => props.disabled && css`
+  ${props => props.disabled &&
+    css `
       &:disabled,
       &.disabled {
-        color: ${() => props.context === SECONDARY ? "var(--colour-grey-inactive)" : "var(--colour-white)"};
+        color: ${() => (props.context === SECONDARY ? "var(--colour-grey-inactive)" : "var(--colour-white)")};
         cursor: not-allowed;
@@ -165,3 +144,4 @@ background-color: ${() => props.context === SECONDARY ? "var(--colour-grey-background)" : "var(--colour-grey-inactive)"};
 
-  ${props => props.context === SECURE && css`
+  ${props => props.context === SECURE &&
+    css `
       &::after {
@@ -178,4 +158,4 @@ content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
   &.button--Secondary-cta {
-    border: ${props => Boolean(props.href) ? "none" : "1px solid transparent"};
-    text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
+    border: ${props => (Boolean(props.href) ? "none" : "1px solid transparent")};
+    text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     &:hover,
@@ -186,7 +166,6 @@ &:active,
       color: var(--colour-black);
-      border: ${props => Boolean(props.href) ? "none" : "1px solid var(--colour-black)"};
-      font-weight: ${props => Boolean(props.href) ? "600" : "400"};
+      border: ${props => (Boolean(props.href) ? "none" : "1px solid var(--colour-black)")};
+      font-weight: ${props => (Boolean(props.href) ? "600" : "400")};
       cursor: pointer;
-      text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
-      
+      text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     }
@@ -197,8 +176,9 @@ &.disabled {
       cursor: not-allowed;
-      background-color: ${props => Boolean(props.href) ? "transparent" : "var(--colour-grey-background)"};
+      background-color: ${props => (Boolean(props.href) ? "transparent" : "var(--colour-grey-background)")};
       font-weight: 400;
-      text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
+      text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     }
   }
-  ${props => props.context === FINDINSTORE && css`
+  ${props => props.context === FINDINSTORE &&
+    css `
       display: flex;
@@ -226,3 +206,4 @@ align-items: center;
 
-  ${props => props.context === EMAIL && css`
+  ${props => props.context === EMAIL &&
+    css `
       display: inline-flex;
@@ -239,3 +220,4 @@ justify-content: center;
 
-  ${props => props.context === ADDTOCART && css`
+  ${props => props.context === ADDTOCART &&
+    css `
       display: inline-flex;
@@ -252,92 +234,31 @@ justify-content: center;
 `;
-const StyledIconWrapper = styled.span`
+const StyledIconWrapper = styled.span `
   margin-left: 5px;
   margin-right: 5px;
 `;
-const IconButton = _ref => {
-  let {
-    icon
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledIconWrapper, null, icon);
+const IconButton = ({ children }) => {
+    return React.createElement(StyledIconWrapper, null, children);
 };
-const Button = _ref2 => {
-  let {
-      market,
-      context,
-      type,
-      size,
-      IconButtonLeft,
-      IconButtonRight,
-      disabled,
-      isWaiting,
-      onClick,
-      className,
-      id,
-      style,
-      children,
-      href = "",
-      width
-    } = _ref2,
-    otherProps = _objectWithoutProperties(_ref2, _excluded);
-  const baseClass = "button";
-  const rootClass = cx(baseClass, className, {
-    [`${baseClass}--${market}`]: market,
-    [`${baseClass}--${context}`]: context,
-    [`${baseClass}--${size}`]: size,
-    disabled,
-    waiting: isWaiting,
-    "is-waiting": isWaiting
-  });
-  const isAnchorElement = Boolean(href);
-  const as = isAnchorElement ? "a" : "button";
-  const hasIconButtonLeft = Boolean(IconButtonLeft);
-  const hasIconButtonRight = Boolean(IconButtonRight);
-  return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
-    as: as,
-    id: id,
-    href: isAnchorElement ? href : undefined,
-    className: rootClass,
-    type: isAnchorElement ? undefined : type,
-    style: style,
-    onClick: onClick,
-    size: size,
-    market: market,
-    context: context,
-    disabled: disabled,
-    width: width
-  }, otherProps), isWaiting && /*#__PURE__*/React.createElement(LoadingIcon, {
-    "data-testid": "loading-icon"
-  }), !isWaiting && hasIconButtonLeft && /*#__PURE__*/React.createElement(IconButton, {
-    icon: IconButtonLeft
-  }), /*#__PURE__*/React.createElement("span", null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React.createElement(IconButton, {
-    icon: IconButtonRight
-  }));
+const Button = (_a) => {
+    var { market = "Outdoor", context = "Standard", type = "button", size, IconButtonLeft, IconButtonRight, onClick, className, id, style = {}, children, href = "", width, isWaiting = false, disabled = false } = _a, otherProps = __rest(_a, ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "onClick", "className", "id", "style", "children", "href", "width", "isWaiting", "disabled"]);
+    const baseClass = "button";
+    const rootClass = cx(baseClass, className, {
+        [`${baseClass}--${market}`]: market,
+        [`${baseClass}--${context}`]: context,
+        [`${baseClass}--${size}`]: size,
+        disabled,
+        waiting: isWaiting,
+        "is-waiting": isWaiting,
+    });
+    const isAnchorElement = Boolean(href);
+    const as = isAnchorElement ? "a" : "button";
+    return (React.createElement(ButtonWrapper, Object.assign({ as: as, id: id, href: isAnchorElement ? href : undefined, className: rootClass, type: isAnchorElement ? undefined : type, style: style, onClick: onClick, size: size, market: market, context: context, disabled: disabled, width: width }, otherProps),
+        isWaiting && React.createElement(LoadingIcon, { "data-testid": "loading-icon" }),
+        !isWaiting && IconButtonLeft && React.createElement(IconButton, null, IconButtonLeft),
+        React.createElement("span", null, children),
+        !isWaiting && IconButtonRight && React.createElement(IconButton, null, IconButtonRight)));
 };
 Button.displayName = "Button";
-Button.defaultProps = {
-  context: "Standard",
-  market: "Outdoor",
-  type: "button",
-  disabled: false,
-  isWaiting: false,
-  onClick: null,
-  style: {}
-};
-Button.propTypes = {
-  context: PropTypes.oneOf(["Standard", "Inverted", "Subtle", "Secondary-cta", "Secure-checkout", "Add-To-Cart", "Find-In-Store", "Email"]),
-  type: PropTypes.string,
-  market: PropTypes.oneOf(["Outdoor", "Leaf", "Veilance"]),
-  id: PropTypes.string,
-  size: PropTypes.oneOf(["xs", "sm", "md", "lg"]),
-  disabled: PropTypes.bool,
-  isWaiting: PropTypes.bool,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  children: PropTypes.node,
-  IconButtonLeft: PropTypes.node,
-  IconButtonRight: PropTypes.node
-};
 
 export { Button };
 //# sourceMappingURL=index.js.map

dist/umd/index.js

 (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) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (function () {
-    var current = global.ARCTERYX && global.ARCTERYX.componentsbutton;
-    var exports = (global.ARCTERYX = global.ARCTERYX || {}, global.ARCTERYX.componentsbutton = {});
-    factory(exports, global.React, global.styled, global.PropTypes, global.cx);
-    exports.noConflict = function () { global.ARCTERYX.componentsbutton = current; return exports; };
-  })());
-})(this, (function (exports, React, styled, PropTypes, cx) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('classnames')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'classnames'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (function () {
+        var current = global.ARCTERYX && global.ARCTERYX.componentsbutton;
+        var exports = (global.ARCTERYX = global.ARCTERYX || {}, global.ARCTERYX.componentsbutton = {});
+        factory(exports, global.React, global.styled, global.cx);
+        exports.noConflict = function () { global.ARCTERYX.componentsbutton = current; return exports; };
+    })());
+})(this, (function (exports, React, styled, cx) { 'use strict';
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+    var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+    var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : 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];
-          }
-        }
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
       }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
+      return t;
     }
-    return target;
-  }
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-      for (i = 0; i < sourceSymbolKeys.length; i++) {
-        key = sourceSymbolKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-      }
-    }
-    return target;
-  }
 
-  const LoadingIcon = styled__default["default"].span`
+    const LoadingIcon = styled__default["default"].span`
   position: absolute;
@@ -85,31 +65,30 @@ left: 50%;
 
-  const SUBTLE = "Subtle";
-  const INVERTED = "Inverted";
-  const SECONDARY = "Secondary-cta";
-  const SECURE = "Secure-Checkout";
-  const ADDTOCART = "Add-To-Cart";
-  const EMAIL = "Email";
-  const FINDINSTORE = "Find-In-Store";
-  const STANDARD = "Standard";
+    const SUBTLE = "Subtle";
+    const INVERTED = "Inverted";
+    const SECONDARY = "Secondary-cta";
+    const SECURE = "Secure-Checkout";
+    const ADDTOCART = "Add-To-Cart";
+    const EMAIL = "Email";
+    const FINDINSTORE = "Find-In-Store";
+    const STANDARD = "Standard";
 
-  const widthValue = _ref => {
-    let {
-      width,
-      context
-    } = _ref;
-    if (width) {
-      return `${width}`;
-    }
-    switch (context) {
-      case ADDTOCART:
-      case EMAIL:
-      case SECURE:
-        return "100%;";
-      default:
-        return "auto";
-    }
-  };
+    const widthValue = _ref => {
+      let {
+        width,
+        context
+      } = _ref;
+      if (width) {
+        return `${width}`;
+      }
+      switch (context) {
+        case ADDTOCART:
+        case EMAIL:
+        case SECURE:
+          return "100%;";
+        default:
+          return "auto";
+      }
+    };
 
-  const _excluded = ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href", "width"];
-  const ButtonWrapper = styled__default["default"].div`
+    const ButtonWrapper = styled__default["default"].div `
   position: relative;
@@ -120,3 +99,3 @@ display: inline-flex;
   width: ${props => widthValue(props)};
-  max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};
+  max-width: ${props => (props.context === ADDTOCART && "400px") || (props.context === SECURE && "100%")};
   height: 3rem;
@@ -135,3 +114,3 @@ padding: 0 1rem;
   font-weight: 400;
-  text-transform: ${props => props.context === STANDARD || !props.href ? "uppercase" : "none"};
+  text-transform: ${props => (props.context === STANDARD || !props.href ? "uppercase" : "none")};
   word-break: keep-all;
@@ -143,7 +122,7 @@ cursor: pointer;
   &:active {
-    border: ${props => props.context === SECONDARY ? "1px solid var(--colour-black)" : "1px solid transparent"};
+    border: ${props => (props.context === SECONDARY ? "1px solid var(--colour-black)" : "1px solid transparent")};
     background-image: linear-gradient(var(--colour-black), var(--background-gradient));
     transition: background-color 400ms ease-in;
     text-decoration: none;
-    color: ${props => props.context === SECONDARY ? "var(--colour-black)" : "var(--colour-white)"};
+    color: ${props => (props.context === SECONDARY ? "var(--colour-black)" : "var(--colour-white)")};
   }
@@ -162,7 +141,7 @@
 
-
-  ${props => props.disabled && styled.css`
+  ${props => props.disabled &&
+    styled.css `
       &:disabled,
       &.disabled {
-        color: ${() => props.context === SECONDARY ? "var(--colour-grey-inactive)" : "var(--colour-white)"};
+        color: ${() => (props.context === SECONDARY ? "var(--colour-grey-inactive)" : "var(--colour-white)")};
         cursor: not-allowed;
@@ -178,3 +157,4 @@ background-color: ${() => props.context === SECONDARY ? "var(--colour-grey-background)" : "var(--colour-grey-inactive)"};
 
-  ${props => props.context === SECURE && styled.css`
+  ${props => props.context === SECURE &&
+    styled.css `
       &::after {
@@ -191,4 +171,4 @@ content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
   &.button--Secondary-cta {
-    border: ${props => Boolean(props.href) ? "none" : "1px solid transparent"};
-    text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
+    border: ${props => (Boolean(props.href) ? "none" : "1px solid transparent")};
+    text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     &:hover,
@@ -199,7 +179,6 @@ &:active,
       color: var(--colour-black);
-      border: ${props => Boolean(props.href) ? "none" : "1px solid var(--colour-black)"};
-      font-weight: ${props => Boolean(props.href) ? "600" : "400"};
+      border: ${props => (Boolean(props.href) ? "none" : "1px solid var(--colour-black)")};
+      font-weight: ${props => (Boolean(props.href) ? "600" : "400")};
       cursor: pointer;
-      text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
-      
+      text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     }
@@ -210,8 +189,9 @@ &.disabled {
       cursor: not-allowed;
-      background-color: ${props => Boolean(props.href) ? "transparent" : "var(--colour-grey-background)"};
+      background-color: ${props => (Boolean(props.href) ? "transparent" : "var(--colour-grey-background)")};
       font-weight: 400;
-      text-decoration-line: ${props => Boolean(props.href) ? "underline" : "none"};
+      text-decoration-line: ${props => (Boolean(props.href) ? "underline" : "none")};
     }
   }
-  ${props => props.context === FINDINSTORE && styled.css`
+  ${props => props.context === FINDINSTORE &&
+    styled.css `
       display: flex;
@@ -239,3 +219,4 @@ align-items: center;
 
-  ${props => props.context === EMAIL && styled.css`
+  ${props => props.context === EMAIL &&
+    styled.css `
       display: inline-flex;
@@ -252,3 +233,4 @@ justify-content: center;
 
-  ${props => props.context === ADDTOCART && styled.css`
+  ${props => props.context === ADDTOCART &&
+    styled.css `
       display: inline-flex;
@@ -265,96 +247,35 @@ justify-content: center;
 `;
-  const StyledIconWrapper = styled__default["default"].span`
+    const StyledIconWrapper = styled__default["default"].span `
   margin-left: 5px;
   margin-right: 5px;
 `;
-  const IconButton = _ref => {
-    let {
-      icon
-    } = _ref;
-    return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, null, icon);
-  };
-  const Button = _ref2 => {
-    let {
-        market,
-        context,
-        type,
-        size,
-        IconButtonLeft,
-        IconButtonRight,
-        disabled,
-        isWaiting,
-        onClick,
-        className,
-        id,
-        style,
-        children,
-        href = "",
-        width
-      } = _ref2,
-      otherProps = _objectWithoutProperties(_ref2, _excluded);
-    const baseClass = "button";
-    const rootClass = cx__default["default"](baseClass, className, {
-      [`${baseClass}--${market}`]: market,
-      [`${baseClass}--${context}`]: context,
-      [`${baseClass}--${size}`]: size,
-      disabled,
-      waiting: isWaiting,
-      "is-waiting": isWaiting
-    });
-    const isAnchorElement = Boolean(href);
-    const as = isAnchorElement ? "a" : "button";
-    const hasIconButtonLeft = Boolean(IconButtonLeft);
-    const hasIconButtonRight = Boolean(IconButtonRight);
-    return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, _extends({
-      as: as,
-      id: id,
-      href: isAnchorElement ? href : undefined,
-      className: rootClass,
-      type: isAnchorElement ? undefined : type,
-      style: style,
-      onClick: onClick,
-      size: size,
-      market: market,
-      context: context,
-      disabled: disabled,
-      width: width
-    }, otherProps), isWaiting && /*#__PURE__*/React__default["default"].createElement(LoadingIcon, {
-      "data-testid": "loading-icon"
-    }), !isWaiting && hasIconButtonLeft && /*#__PURE__*/React__default["default"].createElement(IconButton, {
-      icon: IconButtonLeft
-    }), /*#__PURE__*/React__default["default"].createElement("span", null, children), !isWaiting && hasIconButtonRight && /*#__PURE__*/React__default["default"].createElement(IconButton, {
-      icon: IconButtonRight
-    }));
-  };
-  Button.displayName = "Button";
-  Button.defaultProps = {
-    context: "Standard",
-    market: "Outdoor",
-    type: "button",
-    disabled: false,
-    isWaiting: false,
-    onClick: null,
-    style: {}
-  };
-  Button.propTypes = {
-    context: PropTypes__default["default"].oneOf(["Standard", "Inverted", "Subtle", "Secondary-cta", "Secure-checkout", "Add-To-Cart", "Find-In-Store", "Email"]),
-    type: PropTypes__default["default"].string,
-    market: PropTypes__default["default"].oneOf(["Outdoor", "Leaf", "Veilance"]),
-    id: PropTypes__default["default"].string,
-    size: PropTypes__default["default"].oneOf(["xs", "sm", "md", "lg"]),
-    disabled: PropTypes__default["default"].bool,
-    isWaiting: PropTypes__default["default"].bool,
-    onClick: PropTypes__default["default"].func,
-    className: PropTypes__default["default"].string,
-    style: PropTypes__default["default"].object,
-    children: PropTypes__default["default"].node,
-    IconButtonLeft: PropTypes__default["default"].node,
-    IconButtonRight: PropTypes__default["default"].node
-  };
+    const IconButton = ({ children }) => {
+        return React__default["default"].createElement(StyledIconWrapper, null, children);
+    };
+    const Button = (_a) => {
+        var { market = "Outdoor", context = "Standard", type = "button", size, IconButtonLeft, IconButtonRight, onClick, className, id, style = {}, children, href = "", width, isWaiting = false, disabled = false } = _a, otherProps = __rest(_a, ["market", "context", "type", "size", "IconButtonLeft", "IconButtonRight", "onClick", "className", "id", "style", "children", "href", "width", "isWaiting", "disabled"]);
+        const baseClass = "button";
+        const rootClass = cx__default["default"](baseClass, className, {
+            [`${baseClass}--${market}`]: market,
+            [`${baseClass}--${context}`]: context,
+            [`${baseClass}--${size}`]: size,
+            disabled,
+            waiting: isWaiting,
+            "is-waiting": isWaiting,
+        });
+        const isAnchorElement = Boolean(href);
+        const as = isAnchorElement ? "a" : "button";
+        return (React__default["default"].createElement(ButtonWrapper, Object.assign({ as: as, id: id, href: isAnchorElement ? href : undefined, className: rootClass, type: isAnchorElement ? undefined : type, style: style, onClick: onClick, size: size, market: market, context: context, disabled: disabled, width: width }, otherProps),
+            isWaiting && React__default["default"].createElement(LoadingIcon, { "data-testid": "loading-icon" }),
+            !isWaiting && IconButtonLeft && React__default["default"].createElement(IconButton, null, IconButtonLeft),
+            React__default["default"].createElement("span", null, children),
+            !isWaiting && IconButtonRight && React__default["default"].createElement(IconButton, null, IconButtonRight)));
+    };
+    Button.displayName = "Button";
 
-  exports.Button = Button;
+    exports.Button = Button;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+    Object.defineProperty(exports, '__esModule', { value: true });
 
 }));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@arcteryx/components-button",
-  "version": "1.35.0",
+  "version": "1.36.0-test.0",
   "description": "Arcteryx Button",
@@ -10,2 +10,3 @@ "source": "src/index.js",
   "jsnext:main": "dist/es/index.js",
+  "types": "dist/es/index.d.ts",
   "scripts": {
@@ -19,3 +20,3 @@ "build": "../node_modules/.bin/rollup -c ../scripts/rollup.config.js",
   "license": "ISC",
-  "gitHead": "82506a97efbde49982692619942e4d3efbfa8120",
+  "gitHead": "bd85fc01cd3cd7b5b81f7d35889beec1d0dc2fe2",
   "files": [
@@ -26,4 +27,4 @@ "dist",
   "devDependencies": {
-    "@arcteryx/components-icons": "^0.20.1"
+    "@arcteryx/components-icons": "^0.21.0-test.0"
   }
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

139710

increased by40.38%

Number of package files

46

increased by187.5%

Worsened metrics

Lines of code

1371

decreased by-8.23%

Number of low quality alerts

2

increased by100%

No dependency changes