@arcteryx/components-button - npm Package Compare versions

Comparing version 1.31.0 to 1.32.0

dist/cjs/index.js

@@ -5,15 +5,18 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
+var React = 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 = require('prop-types');
+var cx = require('classnames');
 
+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);
+
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _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) {
@@ -25,9 +28,6 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -38,3 +38,2 @@ if (source == null) return {};
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
@@ -45,16 +44,10 @@ key = sourceKeys[i];
   }
-
   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++) {
@@ -67,7 +60,6 @@ key = sourceSymbolKeys[i];
   }
-
   return target;
 }
 
-const LoadingIcon = styled__default.span`
+const LoadingIcon = styled__default["default"].span`
   position: absolute;
@@ -96,2 +88,3 @@ left: 50%;
 
+const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"];
 const SUBTLE = "Subtle";
@@ -103,3 +96,3 @@ const SECONDARY = "Secondary-cta";
 const FINDINSTORE = "Find-In-Store";
-const ButtonWrapper = styled__default.button`
+const ButtonWrapper = styled__default["default"].button`
   position: relative;
@@ -253,21 +246,19 @@ display: inline-block;
 `;
-
-const Button = (_ref) => {
+const Button = _ref => {
   let {
-    market,
-    context,
-    type,
-    size,
-    disabled,
-    isWaiting,
-    onClick,
-    className,
-    id,
-    style,
-    children
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"]);
-
+      market,
+      context,
+      type,
+      size,
+      disabled,
+      isWaiting,
+      onClick,
+      className,
+      id,
+      style,
+      children
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
   const baseClass = "button";
-  const rootClass = cx(baseClass, className, {
+  const rootClass = cx__default["default"](baseClass, className, {
     [`${baseClass}--${market}`]: market,
@@ -280,3 +271,3 @@ [`${baseClass}--${context}`]: context,
   });
-  return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, _extends({
     id: id,
@@ -291,5 +282,4 @@ className: rootClass,
     disabled: disabled
-  }, otherProps), isWaiting ? /*#__PURE__*/React.createElement(LoadingIcon, null) : null, /*#__PURE__*/React.createElement("span", null, children));
+  }, otherProps), isWaiting ? /*#__PURE__*/React__default["default"].createElement(LoadingIcon, null) : null, /*#__PURE__*/React__default["default"].createElement("span", null, children));
 };
-
 Button.displayName = "Button";
@@ -307,17 +297,15 @@ Button.defaultProps = {
   /** Standard, subtle, Secondary-cta, Secure-checkout, Add-To-Cart, Find-In-Store */
-  context: PropTypes.string,
-  type: PropTypes.string,
-
+  context: PropTypes__default["default"].string,
+  type: PropTypes__default["default"].string,
   /** Outdoor, Leaf, Veilance*/
-  market: PropTypes.oneOf(["Outdoor", "Leaf", "Veilance"]),
-  id: PropTypes.string,
-
+  market: PropTypes__default["default"].oneOf(["Outdoor", "Leaf", "Veilance"]),
+  id: PropTypes__default["default"].string,
   /** xs, sm, md ,lg */
-  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
+  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
 };
@@ -324,0 +312,0 @@

dist/es/index.js

@@ -7,6 +7,5 @@ import React from 'react';
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _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) {
@@ -18,9 +17,6 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -31,3 +27,2 @@ if (source == null) return {};
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
@@ -38,16 +33,10 @@ key = sourceKeys[i];
   }
-
   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++) {
@@ -60,3 +49,2 @@ key = sourceSymbolKeys[i];
   }
-
   return target;
@@ -89,2 +77,3 @@ }
 
+const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"];
 const SUBTLE = "Subtle";
@@ -245,19 +234,17 @@ const SECONDARY = "Secondary-cta";
 `;
-
-const Button = (_ref) => {
+const Button = _ref => {
   let {
-    market,
-    context,
-    type,
-    size,
-    disabled,
-    isWaiting,
-    onClick,
-    className,
-    id,
-    style,
-    children
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"]);
-
+      market,
+      context,
+      type,
+      size,
+      disabled,
+      isWaiting,
+      onClick,
+      className,
+      id,
+      style,
+      children
+    } = _ref,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
   const baseClass = "button";
@@ -284,3 +271,2 @@ const rootClass = cx(baseClass, className, {
 };
-
 Button.displayName = "Button";
@@ -300,7 +286,5 @@ Button.defaultProps = {
   type: PropTypes.string,
-
   /** Outdoor, Leaf, Veilance*/
   market: PropTypes.oneOf(["Outdoor", "Leaf", "Veilance"]),
   id: PropTypes.string,
-
   /** xs, sm, md ,lg */
@@ -307,0 +291,0 @@ size: PropTypes.oneOf(["xs", "sm", "md", "lg"]),

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 = global || self, (function () {
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, (function () {
     var current = global.ARCTERYX && global.ARCTERYX.componentsbutton;
@@ -9,15 +9,16 @@ var exports = (global.ARCTERYX = global.ARCTERYX || {}, global.ARCTERYX.componentsbutton = {});
     exports.noConflict = function () { global.ARCTERYX.componentsbutton = current; return exports; };
-  }()));
-}(this, (function (exports, React, styled, PropTypes, cx) { 'use strict';
+  })());
+})(this, (function (exports, React, styled, PropTypes, cx) { 'use strict';
 
-  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
-  var styled__default = 'default' in styled ? styled['default'] : styled;
-  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
-  cx = cx && Object.prototype.hasOwnProperty.call(cx, 'default') ? cx['default'] : cx;
+  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);
+
   function _extends() {
-    _extends = Object.assign || function (target) {
+    _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) {
@@ -29,9 +30,6 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
       }
-
       return target;
     };
-
     return _extends.apply(this, arguments);
   }
-
   function _objectWithoutPropertiesLoose(source, excluded) {
@@ -42,3 +40,2 @@ if (source == null) return {};
     var key, i;
-
     for (i = 0; i < sourceKeys.length; i++) {
@@ -49,16 +46,10 @@ key = sourceKeys[i];
     }
-
     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++) {
@@ -71,7 +62,6 @@ key = sourceSymbolKeys[i];
     }
-
     return target;
   }
 
-  const LoadingIcon = styled__default.span`
+  const LoadingIcon = styled__default["default"].span`
   position: absolute;
@@ -100,2 +90,3 @@ left: 50%;
 
+  const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"];
   const SUBTLE = "Subtle";
@@ -107,3 +98,3 @@ const SECONDARY = "Secondary-cta";
   const FINDINSTORE = "Find-In-Store";
-  const ButtonWrapper = styled__default.button`
+  const ButtonWrapper = styled__default["default"].button`
   position: relative;
@@ -257,21 +248,19 @@ display: inline-block;
 `;
-
-  const Button = (_ref) => {
+  const Button = _ref => {
     let {
-      market,
-      context,
-      type,
-      size,
-      disabled,
-      isWaiting,
-      onClick,
-      className,
-      id,
-      style,
-      children
-    } = _ref,
-        otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"]);
-
+        market,
+        context,
+        type,
+        size,
+        disabled,
+        isWaiting,
+        onClick,
+        className,
+        id,
+        style,
+        children
+      } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
     const baseClass = "button";
-    const rootClass = cx(baseClass, className, {
+    const rootClass = cx__default["default"](baseClass, className, {
       [`${baseClass}--${market}`]: market,
@@ -284,3 +273,3 @@ [`${baseClass}--${context}`]: context,
     });
-    return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, _extends({
       id: id,
@@ -295,5 +284,4 @@ className: rootClass,
       disabled: disabled
-    }, otherProps), isWaiting ? /*#__PURE__*/React.createElement(LoadingIcon, null) : null, /*#__PURE__*/React.createElement("span", null, children));
+    }, otherProps), isWaiting ? /*#__PURE__*/React__default["default"].createElement(LoadingIcon, null) : null, /*#__PURE__*/React__default["default"].createElement("span", null, children));
   };
-
   Button.displayName = "Button";
@@ -311,17 +299,15 @@ Button.defaultProps = {
     /** Standard, subtle, Secondary-cta, Secure-checkout, Add-To-Cart, Find-In-Store */
-    context: PropTypes.string,
-    type: PropTypes.string,
-
+    context: PropTypes__default["default"].string,
+    type: PropTypes__default["default"].string,
     /** Outdoor, Leaf, Veilance*/
-    market: PropTypes.oneOf(["Outdoor", "Leaf", "Veilance"]),
-    id: PropTypes.string,
-
+    market: PropTypes__default["default"].oneOf(["Outdoor", "Leaf", "Veilance"]),
+    id: PropTypes__default["default"].string,
     /** xs, sm, md ,lg */
-    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
+    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
   };
@@ -333,3 +319,3 @@
 
-})));
+}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@arcteryx/components-button",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Arcteryx Button",
@@ -18,3 +18,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "c51c403bbbbff7250912434edb40c047a0cd0e94",
+  "gitHead": "ec3795a7d5bb844c4d9931d9f32cf1416d09e081",
   "files": [
@@ -21,0 +21,0 @@ "dist",

src/Button.stories.js

@@ -1,11 +0,6 @@
-import React, { Children, useState } from "react";
-import { storiesOf } from "@storybook/react";
+import React, { useState } from "react";
 import Button from "./components/button";
-import { withInfo } from "@storybook/addon-info";
-import { text, boolean, object, select } from "@storybook/addon-knobs/react";
 import { action } from "@storybook/addon-actions";
 import styled from "styled-components";
 
-const stories = storiesOf("Button", module);
-
 const contextOptions = {
@@ -19,14 +14,2 @@ Standard: "Standard",
 };
-const Market = {
-  Outdoor: "Outdoor",
-  Leaf: "Leaf",
-  Veilance: "Veilance",
-};
-const Size = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-};
-
 const Front = styled.div`
@@ -41,4 +24,3 @@ width: ${props => props.width || "100%"};
 `;
-
-export const ButtonWithWaiting = props => {
+const ButtonWithWaiting = props => {
   const [isWaiting, setIsWaiting] = useState(false);
@@ -57,101 +39,59 @@
 
-stories
-  .add(
-    "Button with parameter",
-    withInfo("CTA button with parameter options")(() => (
-      <Front>
-        <Button
-          market={select("Market", Market, "Outdoor")}
-          context={select("Context", contextOptions, "Standard")}
-          size={select("Size", Size, "lg")}
-          disabled={boolean("Disabled", false)}
-          isDisabled={boolean("Disabled", false)}
-          isWaiting={boolean("Waiting", false)}
-          onClick={action("button_clicked")}
-          id={text("id", "")}
-          className={text("ClassName", "")}
-          style={object("Style", {})}
-        >
-          {text("Label", "Button")}
-        </Button>
-      </Front>
-    ))
-  )
-  .add("Standard Button", () => (
-    <Front>
-      <Button context="Standard">Standard</Button>
-    </Front>
-  ))
-  .add("Button With Long Label", () => (
-    <Front width="220px">
-      <Button context="Standard">Standard Button on Two Lines</Button>
-    </Front>
-  ))
-  .add("Subtle Button", () => (
-    <Front>
-      <Button context="Subtle">Subtle</Button>
-    </Front>
-  ))
-  .add("Secondary Button", () => (
-    <Front>
-      <Button context="Secondary-cta">Secondary</Button>
-    </Front>
-  ))
-  .add("Secure Checkout Button", () => (
-    <Front>
-      <Button context="Secure-Checkout"> Checkout</Button>
-    </Front>
-  ))
-  .add("Add To Cart Button", () => (
-    <Front>
-      <Button context="Add-To-Cart">Add To Cart</Button>
-    </Front>
-  ))
-  .add("Email Sign Up Button", () => (
-    <Front style={{ width: 400 }}>
-      <Button context="Email">Notify Me</Button>
-    </Front>
-  ))
-  .add("Find in Store Context", () => (
-    <Front>
-      <Button context="Find-In-Store">Find in store</Button>
-    </Front>
-  ))
-  .add("Find in Store", () => (
-    <Front>
-      <Button context="Subtle" className="find-in-store">
-        Find in store
-      </Button>
-    </Front>
-  ))
-  .add("Standard Disabled Button", () => (
-    <Front>
-      <Button context="Standard" disabled>
-        Standard
-      </Button>
-    </Front>
-  ))
-  .add("Example Buttons with Waiting State", () => (
-    <>
-      <Front>
-        <ButtonWithWaiting context="Standard" isWaiting>
-          Click Me
-        </ButtonWithWaiting>
-      </Front>
-      <Front>
-        <ButtonWithWaiting context="Add-To-Cart" isWaiting>
-          Add To Cart
-        </ButtonWithWaiting>
-      </Front>
-      <Front>
-        <ButtonWithWaiting context="Subtle" isWaiting>
-          Subtle
-        </ButtonWithWaiting>
-      </Front>
-      <Front>
-        <ButtonWithWaiting context="Secure-Checkout" isWaiting>
-          Checkout
-        </ButtonWithWaiting>
-      </Front>
-    </>
-  ));
+export default {
+  title: "Button",
+  component: Button,
+};
+
+export const ControlledButton = ({ children: label, ...args }) => <Button onClick={action("button_clicked")} {...args}>{label}</Button>;
+
+ControlledButton.args = {
+  children: "Button",
+};
+
+ControlledButton.argTypes = {
+  context: {
+    options: contextOptions,
+    control: {
+      type: "radio",
+    },
+  },
+  children: {
+    name: "Label",
+    control: {
+      type: "text",
+    },
+  },
+};
+
+export const StandardButton = () => <Button context="Standard">Standard</Button>;
+export const ButtonWithLongLabel = () => <Front width="220px"><Button context="Standard">Standard Button on Two Lines</Button></Front>;
+export const SubtleButton = () => <Button context="Subtle">Subtle</Button>;
+export const SecondaryButton = () => <Button context="Secondary-cta">Secondary</Button>;
+export const SecureCheckoutButton = () => <Button context="Secure-Checkout"> Checkout</Button>;
+export const AddToCartButton = () => <Button context="Add-To-Cart">Add To Cart</Button>;
+export const EmailSignUpButton = () => <Button context="Email">Notify Me</Button>;
+export const FindInStoreContext = () => <Button context="Find-In-Store">Find in store</Button>;
+export const FindInStore = () => <Button context="Subtle" className="find-in-store">Find in store</Button>;
+export const StandardDisabledButton = () => <Button context="Standard" disabled>Standard</Button>;
+export const ExampleButtonsWithWaitingState = () => <>
+  <Front>
+    <ButtonWithWaiting context="Standard" isWaiting>
+      Click Me
+    </ButtonWithWaiting>
+  </Front>
+  <Front>
+    <ButtonWithWaiting context="Add-To-Cart" isWaiting>
+      Add To Cart
+    </ButtonWithWaiting>
+  </Front>
+  <Front>
+    <ButtonWithWaiting context="Subtle" isWaiting>
+      Subtle
+    </ButtonWithWaiting>
+  </Front>
+  <Front>
+    <ButtonWithWaiting context="Secure-Checkout" isWaiting>
+      Checkout
+    </ButtonWithWaiting>
+  </Front>
+</>;

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

100470

decreased by-6.18%

Number of package files

14

decreased by-6.67%

Lines of code

1558

decreased by-3.35%

No dependency changes