@arcteryx/components-button - npm Package Compare versions

Comparing version 1.29.2 to 1.30.0

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [1.30.0](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.29.2...@arcteryx/components-button@1.30.0) (2021-03-08)
+
+
+### Features
+
+* (Button) Update css for other button context when isWaiting is enabled ([7dffdc8](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/7dffdc86ad196939c1d6f0fe7bf577cdb5ea2af4))
+* (Buttons) Add isWaiting props and state for Buttons. Also added/fixed disabled state in Storybook and unit test ([042ea25](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/042ea25cc8190d60a8623a528e25a889a5d7f9fc))
+
+
+
+
+
 ## [1.29.2](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.29.1...@arcteryx/components-button@1.29.2) (2021-02-26)
@@ -8,0 +20,0 @@

dist/cjs/index.js

@@ -67,2 +67,26 @@ 'use strict';
 
+const LoadingIcon = styled__default.span`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  @keyframes sendingToLambda {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  &:after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 2px solid var(--pinline-grey);
+    border-top-color: var(--dark-grey);
+    animation: sendingToLambda 0.6s linear infinite;
+    margin-left: -10px;
+    margin-top: -10px;
+  }
+`;
+
 const ButtonWrapper = styled__default.button`
@@ -107,2 +131,16 @@ position: relative;
 
+  &.waiting, &.is-waiting {
+    color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+    pointer-events: none;
+
+    & {
+      &::before {
+        display: none;
+      }
+      &::after {
+        display: none;
+      }
+    }
+  }
+
   ${props => props.disabled && styled.css`
@@ -116,3 +154,4 @@ &:disabled,
     `};
-}
+  }
+
   ${props => props.context === "Secure-Checkout" && styled.css`
@@ -192,2 +231,3 @@ &::after {
     isDisabled,
+    isWaiting,
     onClick,
@@ -199,3 +239,3 @@ className,
   } = _ref,
-      otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
+      otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "isWaiting", "onClick", "className", "id", "style", "children"]);
 
@@ -208,3 +248,5 @@ const baseClass = "button";
     [`disabled`]: isDisabled,
-    [`is-disabled`]: isDisabled
+    [`is-disabled`]: isDisabled,
+    [`waiting`]: isWaiting,
+    [`is-waiting`]: isWaiting
   });
@@ -220,3 +262,3 @@ return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
     context: context
-  }, otherProps), /*#__PURE__*/React.createElement("span", null, children));
+  }, otherProps), isWaiting ? /*#__PURE__*/React.createElement(LoadingIcon, null) : null, /*#__PURE__*/React.createElement("span", null, children));
 };
@@ -230,2 +272,3 @@
   isDisabled: false,
+  isWaiting: false,
   onClick: null,
@@ -246,2 +289,3 @@ style: {}
   isDisabled: PropTypes.bool,
+  isWaiting: PropTypes.bool,
   onClick: PropTypes.func,
@@ -248,0 +292,0 @@ className: PropTypes.string,

dist/es/index.js

@@ -60,2 +60,26 @@ import React from 'react';
 
+const LoadingIcon = styled.span`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  @keyframes sendingToLambda {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  &:after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 2px solid var(--pinline-grey);
+    border-top-color: var(--dark-grey);
+    animation: sendingToLambda 0.6s linear infinite;
+    margin-left: -10px;
+    margin-top: -10px;
+  }
+`;
+
 const ButtonWrapper = styled.button`
@@ -100,2 +124,16 @@ position: relative;
 
+  &.waiting, &.is-waiting {
+    color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+    pointer-events: none;
+
+    & {
+      &::before {
+        display: none;
+      }
+      &::after {
+        display: none;
+      }
+    }
+  }
+
   ${props => props.disabled && css`
@@ -109,3 +147,4 @@ &:disabled,
     `};
-}
+  }
+
   ${props => props.context === "Secure-Checkout" && css`
@@ -185,2 +224,3 @@ &::after {
     isDisabled,
+    isWaiting,
     onClick,
@@ -192,3 +232,3 @@ className,
   } = _ref,
-      otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
+      otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "isWaiting", "onClick", "className", "id", "style", "children"]);
 
@@ -201,3 +241,5 @@ const baseClass = "button";
     [`disabled`]: isDisabled,
-    [`is-disabled`]: isDisabled
+    [`is-disabled`]: isDisabled,
+    [`waiting`]: isWaiting,
+    [`is-waiting`]: isWaiting
   });
@@ -213,3 +255,3 @@ return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
     context: context
-  }, otherProps), /*#__PURE__*/React.createElement("span", null, children));
+  }, otherProps), isWaiting ? /*#__PURE__*/React.createElement(LoadingIcon, null) : null, /*#__PURE__*/React.createElement("span", null, children));
 };
@@ -223,2 +265,3 @@
   isDisabled: false,
+  isWaiting: false,
   onClick: null,
@@ -239,2 +282,3 @@ style: {}
   isDisabled: PropTypes.bool,
+  isWaiting: PropTypes.bool,
   onClick: PropTypes.func,
@@ -241,0 +285,0 @@ className: PropTypes.string,

dist/umd/index.js

@@ -71,2 +71,26 @@ (function (global, factory) {
 
+  const LoadingIcon = styled__default.span`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  @keyframes sendingToLambda {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  &:after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 2px solid var(--pinline-grey);
+    border-top-color: var(--dark-grey);
+    animation: sendingToLambda 0.6s linear infinite;
+    margin-left: -10px;
+    margin-top: -10px;
+  }
+`;
+
   const ButtonWrapper = styled__default.button`
@@ -111,2 +135,16 @@ position: relative;
 
+  &.waiting, &.is-waiting {
+    color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+    pointer-events: none;
+
+    & {
+      &::before {
+        display: none;
+      }
+      &::after {
+        display: none;
+      }
+    }
+  }
+
   ${props => props.disabled && styled.css`
@@ -120,3 +158,4 @@ &:disabled,
     `};
-}
+  }
+
   ${props => props.context === "Secure-Checkout" && styled.css`
@@ -196,2 +235,3 @@ &::after {
       isDisabled,
+      isWaiting,
       onClick,
@@ -203,3 +243,3 @@ className,
     } = _ref,
-        otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
+        otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "isWaiting", "onClick", "className", "id", "style", "children"]);
 
@@ -212,3 +252,5 @@ const baseClass = "button";
       [`disabled`]: isDisabled,
-      [`is-disabled`]: isDisabled
+      [`is-disabled`]: isDisabled,
+      [`waiting`]: isWaiting,
+      [`is-waiting`]: isWaiting
     });
@@ -224,3 +266,3 @@ return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
       context: context
-    }, otherProps), /*#__PURE__*/React.createElement("span", null, children));
+    }, otherProps), isWaiting ? /*#__PURE__*/React.createElement(LoadingIcon, null) : null, /*#__PURE__*/React.createElement("span", null, children));
   };
@@ -234,2 +276,3 @@
     isDisabled: false,
+    isWaiting: false,
     onClick: null,
@@ -250,2 +293,3 @@ style: {}
     isDisabled: PropTypes.bool,
+    isWaiting: PropTypes.bool,
     onClick: PropTypes.func,
@@ -252,0 +296,0 @@ className: PropTypes.string,

package.json

 {
   "name": "@arcteryx/components-button",
-  "version": "1.29.2",
+  "version": "1.30.0",
   "description": "Arcteryx Button",
@@ -18,3 +18,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "a406603fde783ba69be0a4039982e7a9f735e018",
+  "gitHead": "b49c79474f004b6dea28bdbbc294ec06162815d8",
   "files": [
@@ -21,0 +21,0 @@ "dist",

src/__tests__/components/button.test.js

@@ -62,2 +62,3 @@ import React from "react";
         isDisabled={mockData.isDisabled}
+        disabled={mockData.disabled}
         market={mockData.market}
@@ -75,2 +76,35 @@ context={mockData.context}
 });
+describe("Waiting Standard Button Component", () => {
+  it("Renders correctly when market set to 'outdoor'", () => {
+    mockData = {
+      market: "outdoor",
+      id: "btn",
+      className: "btn",
+      type: "button",
+      style: {},
+      onClick: function() {
+        console.log("Disabled, not clickable");
+      },
+      size: "lg",
+      market: "Outdoor",
+      context: "Standard",
+      isWaiting: true,
+    };
+    const { container } = render(
+      <ButtonWrapper
+        id={mockData.id}
+        isWaiting={mockData.isWaiting}
+        market={mockData.market}
+        context={mockData.context}
+        size={mockData.size}
+        className={mockData.className}
+        onClick={mockData.onClick()}
+      >
+        Standard
+      </ButtonWrapper>
+    );
+
+    expect(container.firstChild.className).toContain('waiting');
+  });
+});
 describe("Subtle Button Component", () => {
@@ -77,0 +111,0 @@ it("Renders correctly when market set to 'outdoor'", () => {

src/Button.stories.js

@@ -1,6 +0,6 @@
-import React from "react";
+import React, { Children, useState } from "react";
 import { storiesOf } from "@storybook/react";
 import Button from "./components/button";
 import { withInfo } from "@storybook/addon-info";
-import { withKnobs, text, boolean, number, object, select } from "@storybook/addon-knobs/react";
+import { text, boolean, object, select } from "@storybook/addon-knobs/react";
 import { action } from "@storybook/addon-actions";
@@ -40,2 +40,14 @@ import styled from "styled-components";
 
+export const ButtonWithWaiting = (props) => {
+  const [isWaiting, setIsWaiting] = useState(false);
+
+  const handleClick = () => {
+    setIsWaiting(true);
+  }
+
+  return (
+    <Button context={props.context} isWaiting={isWaiting} onClick={handleClick}>{props.children}</Button>
+  );
+}
+
 stories
@@ -52,2 +64,3 @@ .add(
           isDisabled={boolean("Disabled", false)}
+          isWaiting={boolean("Waiting", false)}
           onClick={action("button_clicked")}
@@ -104,2 +117,23 @@ id={text("id", "")}
     </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>
+    </>
   ));

src/components/button.js

@@ -5,2 +5,3 @@ import React from "react";
 import cx from "classnames";
+import LoadingIcon from "./LoadingIcon";
 
@@ -54,2 +55,19 @@ const ButtonWrapper = styled.button`
 
+  &.waiting, &.is-waiting {
+    color: ${props =>
+    props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta"
+      ? "white"
+      : "black"};
+    pointer-events: none;
+
+    & {
+      &::before {
+        display: none;
+      }
+      &::after {
+        display: none;
+      }
+    }
+  }
+
   ${props =>
@@ -65,3 +83,4 @@ props.disabled &&
     `};
-}
+  }
+
   ${props =>
@@ -146,2 +165,3 @@ props.context === "Secure-Checkout" &&
   isDisabled,
+  isWaiting,
   onClick,
@@ -161,2 +181,4 @@ className,
     [`is-disabled`]: isDisabled,
+    [`waiting`]: isWaiting,
+    [`is-waiting`]: isWaiting,
   });
@@ -176,2 +198,3 @@
     >
+      {isWaiting ? <LoadingIcon /> : null}
       <span>{children}</span>
@@ -189,2 +212,3 @@ </ButtonWrapper>
   isDisabled: false,
+  isWaiting: false,
   onClick: null,
@@ -204,2 +228,3 @@ style: {},
   isDisabled: PropTypes.bool,
+  isWaiting: PropTypes.bool,
   onClick: PropTypes.func,
@@ -206,0 +231,0 @@ className: PropTypes.string,

No alert changes

Improved metrics

Total package byte prevSize

96432

increased by16.72%

Number of package files

15

increased by7.14%

Lines of code

1438

increased by19.14%

No dependency changes