@arcteryx/components-button - npm Package Compare versions

Comparing version 1.30.4 to 1.31.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.31.0](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.30.4...@arcteryx/components-button@1.31.0) (2022-04-14)
+
+
+### Features
+
+* (EmailSignUp) GRIZ-172 adding new button to the components-button ([ff3a9b6](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/ff3a9b6fecfab2ae4f981292c8813e4dce2e1cb8))
+
+
+
+
+
 ## [1.30.4](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.30.3...@arcteryx/components-button@1.30.4) (2021-04-06)
@@ -8,0 +19,0 @@

dist/cjs/index.js

@@ -91,11 +91,17 @@ 'use strict';
 
+const SUBTLE = "Subtle";
+const SECONDARY = "Secondary-cta";
+const SECURE = "Secure-Checkout";
+const ADDTOCART = "Add-To-Cart";
+const EMAIL = "Email";
+const FINDINSTORE = "Find-In-Store";
 const ButtonWrapper = styled__default.button`
   position: relative;
   display: inline-block;
-  width: ${props => props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto"};
-  max-width: ${props => props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%"};
+  width: ${props => props.context === ADDTOCART || props.context === EMAIL || props.context === SECURE ? "100%;" : "auto"};
+  max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};
   height: 45px;
   padding: 0 1.5rem;
   margin: 0;
-  color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white"};
+  color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "black" : "white"};
   text-decoration: none;
@@ -105,3 +111,3 @@ border-radius: 0;
   box-sizing: border-box;
-  border: ${props => props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent"};
+  border: ${props => props.context === SUBTLE || props.context === FINDINSTORE ? "1px solid black" : "1px solid transparent"};
   font-size: 1.1rem;
@@ -114,3 +120,3 @@ line-height: 1rem;
   cursor: pointer;
-  background-color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+  background-color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};
 
@@ -122,3 +128,3 @@ &:hover {
     text-decoration: none;
-    color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
+    color: ${props => props.context === SECONDARY ? "black" : "white"};
   }
@@ -132,7 +138,7 @@
     text-decoration: none;
-    color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
+    color: ${props => props.context === SECONDARY ? "black" : "white"};
   }
 
   &.waiting, &.is-waiting {
-    color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+    color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};
     pointer-events: none;
@@ -152,3 +158,3 @@
       &:disabled,
-      &.disabled{
+      &.disabled {
         opacity: 0.3;
@@ -166,3 +172,3 @@ color: #ccc;
 
-  ${props => props.context === "Secure-Checkout" && styled.css`
+  ${props => props.context === SECURE && styled.css`
       &::after {
@@ -192,3 +198,3 @@ content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
   }
-  ${props => props.context === "Find-In-Store" && styled.css`
+  ${props => props.context === FINDINSTORE && styled.css`
       & {
@@ -218,4 +224,18 @@ display: flex;
   }
+  ${props => props.context === EMAIL && styled.css`
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      & {
+        &::before {
+          content: url(//images.arcteryx.com/foundation-ui/svgs/Email_White.svg);
+          width: 22px;
+          margin-right: 5px;
+          display: inline-block;
+        }
+      }
+    `};
+  }
 
-  ${props => props.context === "Add-To-Cart" && styled.css`
+  ${props => props.context === ADDTOCART && styled.css`
       display: inline-flex;
@@ -222,0 +242,0 @@ justify-content: center;

dist/es/index.js

@@ -84,11 +84,17 @@ import React from 'react';
 
+const SUBTLE = "Subtle";
+const SECONDARY = "Secondary-cta";
+const SECURE = "Secure-Checkout";
+const ADDTOCART = "Add-To-Cart";
+const EMAIL = "Email";
+const FINDINSTORE = "Find-In-Store";
 const ButtonWrapper = styled.button`
   position: relative;
   display: inline-block;
-  width: ${props => props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto"};
-  max-width: ${props => props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%"};
+  width: ${props => props.context === ADDTOCART || props.context === EMAIL || props.context === SECURE ? "100%;" : "auto"};
+  max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};
   height: 45px;
   padding: 0 1.5rem;
   margin: 0;
-  color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white"};
+  color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "black" : "white"};
   text-decoration: none;
@@ -98,3 +104,3 @@ border-radius: 0;
   box-sizing: border-box;
-  border: ${props => props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent"};
+  border: ${props => props.context === SUBTLE || props.context === FINDINSTORE ? "1px solid black" : "1px solid transparent"};
   font-size: 1.1rem;
@@ -107,3 +113,3 @@ line-height: 1rem;
   cursor: pointer;
-  background-color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+  background-color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};
 
@@ -115,3 +121,3 @@ &:hover {
     text-decoration: none;
-    color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
+    color: ${props => props.context === SECONDARY ? "black" : "white"};
   }
@@ -125,7 +131,7 @@
     text-decoration: none;
-    color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
+    color: ${props => props.context === SECONDARY ? "black" : "white"};
   }
 
   &.waiting, &.is-waiting {
-    color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+    color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};
     pointer-events: none;
@@ -145,3 +151,3 @@
       &:disabled,
-      &.disabled{
+      &.disabled {
         opacity: 0.3;
@@ -159,3 +165,3 @@ color: #ccc;
 
-  ${props => props.context === "Secure-Checkout" && css`
+  ${props => props.context === SECURE && css`
       &::after {
@@ -185,3 +191,3 @@ content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
   }
-  ${props => props.context === "Find-In-Store" && css`
+  ${props => props.context === FINDINSTORE && css`
       & {
@@ -211,4 +217,18 @@ display: flex;
   }
+  ${props => props.context === EMAIL && css`
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      & {
+        &::before {
+          content: url(//images.arcteryx.com/foundation-ui/svgs/Email_White.svg);
+          width: 22px;
+          margin-right: 5px;
+          display: inline-block;
+        }
+      }
+    `};
+  }
 
-  ${props => props.context === "Add-To-Cart" && css`
+  ${props => props.context === ADDTOCART && css`
       display: inline-flex;
@@ -215,0 +235,0 @@ justify-content: center;

dist/umd/index.js

@@ -95,11 +95,17 @@ (function (global, factory) {
 
+  const SUBTLE = "Subtle";
+  const SECONDARY = "Secondary-cta";
+  const SECURE = "Secure-Checkout";
+  const ADDTOCART = "Add-To-Cart";
+  const EMAIL = "Email";
+  const FINDINSTORE = "Find-In-Store";
   const ButtonWrapper = styled__default.button`
   position: relative;
   display: inline-block;
-  width: ${props => props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto"};
-  max-width: ${props => props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%"};
+  width: ${props => props.context === ADDTOCART || props.context === EMAIL || props.context === SECURE ? "100%;" : "auto"};
+  max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};
   height: 45px;
   padding: 0 1.5rem;
   margin: 0;
-  color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white"};
+  color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "black" : "white"};
   text-decoration: none;
@@ -109,3 +115,3 @@ border-radius: 0;
   box-sizing: border-box;
-  border: ${props => props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent"};
+  border: ${props => props.context === SUBTLE || props.context === FINDINSTORE ? "1px solid black" : "1px solid transparent"};
   font-size: 1.1rem;
@@ -118,3 +124,3 @@ line-height: 1rem;
   cursor: pointer;
-  background-color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+  background-color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};
 
@@ -126,3 +132,3 @@ &:hover {
     text-decoration: none;
-    color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
+    color: ${props => props.context === SECONDARY ? "black" : "white"};
   }
@@ -136,7 +142,7 @@
     text-decoration: none;
-    color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
+    color: ${props => props.context === SECONDARY ? "black" : "white"};
   }
 
   &.waiting, &.is-waiting {
-    color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
+    color: ${props => props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};
     pointer-events: none;
@@ -156,3 +162,3 @@
       &:disabled,
-      &.disabled{
+      &.disabled {
         opacity: 0.3;
@@ -170,3 +176,3 @@ color: #ccc;
 
-  ${props => props.context === "Secure-Checkout" && styled.css`
+  ${props => props.context === SECURE && styled.css`
       &::after {
@@ -196,3 +202,3 @@ content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
   }
-  ${props => props.context === "Find-In-Store" && styled.css`
+  ${props => props.context === FINDINSTORE && styled.css`
       & {
@@ -222,4 +228,18 @@ display: flex;
   }
+  ${props => props.context === EMAIL && styled.css`
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      & {
+        &::before {
+          content: url(//images.arcteryx.com/foundation-ui/svgs/Email_White.svg);
+          width: 22px;
+          margin-right: 5px;
+          display: inline-block;
+        }
+      }
+    `};
+  }
 
-  ${props => props.context === "Add-To-Cart" && styled.css`
+  ${props => props.context === ADDTOCART && styled.css`
       display: inline-flex;
@@ -226,0 +246,0 @@ justify-content: center;

package.json

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

src/__tests__/components/button.test.js

@@ -97,8 +97,11 @@ import React from "react";
     );
-    fireEvent(container.firstChild, new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-    }));
+    fireEvent(
+      container.firstChild,
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
     expect(mockData.onClick).toHaveBeenCalledTimes(0);
-  })
+  });
 });
@@ -114,3 +117,5 @@ describe("Waiting Standard Button Component", () => {
       size: "lg",
-      onClick: () => {console.log("this is a test")},
+      onClick: () => {
+        console.log("this is a test");
+      },
       market: "Outdoor",
@@ -134,3 +139,3 @@ context: "Standard",
 
-    expect(container.firstChild.className).toContain('waiting');
+    expect(container.firstChild.className).toContain("waiting");
   });
@@ -337,1 +342,34 @@ });
 });
+
+describe("Email Sign Up Button Component", () => {
+  it("Renders correctly when market set to 'outdoor'", () => {
+    mockData = {
+      market: "outdoor",
+      id: "btn",
+      className: "btn",
+      type: "button",
+      style: {},
+      onClick: function() {
+        console.log("Email Sign Up clicked");
+      },
+      size: "lg",
+      market: "Outdoor",
+      context: "Email-SIgn-Up",
+      disabled: false,
+    };
+    const { container } = render(
+      <ButtonWrapper
+        id={mockData.id}
+        disabled={mockData.disabled}
+        market={mockData.market}
+        context={mockData.context}
+        size={mockData.size}
+        className={mockData.className}
+        onClick={mockData.onClick()}
+      >
+        Notify Me
+      </ButtonWrapper>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/Button.stories.js

@@ -17,2 +17,3 @@ import React, { Children, useState } from "react";
   AddToCart: "Add-To-Cart",
+  Email: "Email",
 };
@@ -41,3 +42,3 @@ const Market = {
 
-export const ButtonWithWaiting = (props) => {
+export const ButtonWithWaiting = props => {
   const [isWaiting, setIsWaiting] = useState(false);
@@ -47,8 +48,10 @@
     setIsWaiting(true);
-  }
+  };
 
   return (
-    <Button context={props.context} isWaiting={isWaiting} onClick={handleClick}>{props.children}</Button>
+    <Button context={props.context} isWaiting={isWaiting} onClick={handleClick}>
+      {props.children}
+    </Button>
   );
-}
+};
 
@@ -107,2 +110,7 @@ stories
   ))
+  .add("Email Sign Up Button", () => (
+    <Front style={{ width: 400 }}>
+      <Button context="Email">Notify Me</Button>
+    </Front>
+  ))
   .add("Find in Store Context", () => (
@@ -122,3 +130,5 @@ <Front>
     <Front>
-      <Button context="Standard" disabled>Standard</Button>
+      <Button context="Standard" disabled>
+        Standard
+      </Button>
     </Front>
@@ -129,14 +139,22 @@ ))
       <Front>
-        <ButtonWithWaiting context="Standard" isWaiting>Click Me</ButtonWithWaiting>
+        <ButtonWithWaiting context="Standard" isWaiting>
+          Click Me
+        </ButtonWithWaiting>
       </Front>
       <Front>
-        <ButtonWithWaiting context="Add-To-Cart" isWaiting>Add To Cart</ButtonWithWaiting>
+        <ButtonWithWaiting context="Add-To-Cart" isWaiting>
+          Add To Cart
+        </ButtonWithWaiting>
       </Front>
       <Front>
-        <ButtonWithWaiting context="Subtle" isWaiting>Subtle</ButtonWithWaiting>
+        <ButtonWithWaiting context="Subtle" isWaiting>
+          Subtle
+        </ButtonWithWaiting>
       </Front>
       <Front>
-        <ButtonWithWaiting context="Secure-Checkout" isWaiting>Checkout</ButtonWithWaiting>
+        <ButtonWithWaiting context="Secure-Checkout" isWaiting>
+          Checkout
+        </ButtonWithWaiting>
       </Front>
     </>
   ));

src/components/button.js

@@ -7,8 +7,14 @@ import React from "react";
 
+const SUBTLE = "Subtle";
+const SECONDARY = "Secondary-cta";
+const SECURE = "Secure-Checkout";
+const ADDTOCART = "Add-To-Cart";
+const EMAIL = "Email";
+const FINDINSTORE = "Find-In-Store";
 const ButtonWrapper = styled.button`
   position: relative;
   display: inline-block;
-  width: ${props => (props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto")};
-  max-width: ${props =>
-    (props.context === "Add-To-Cart" && "400px") || (props.context === "Secure-Checkout" && "100%")};
+  width: ${props =>
+    props.context === ADDTOCART || props.context === EMAIL || props.context === SECURE ? "100%;" : "auto"};
+  max-width: ${props => (props.context === ADDTOCART && "400px") || (props.context === SECURE && "100%")};
   height: 45px;
@@ -18,5 +24,3 @@ padding: 0 1.5rem;
   color: ${props =>
-    props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta"
-      ? "black"
-      : "white"};
+    props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "black" : "white"};
   text-decoration: none;
@@ -27,3 +31,3 @@ border-radius: 0;
   border: ${props =>
-    props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent"};
+    props.context === SUBTLE || props.context === FINDINSTORE ? "1px solid black" : "1px solid transparent"};
   font-size: 1.1rem;
@@ -37,5 +41,3 @@ line-height: 1rem;
   background-color: ${props =>
-    props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta"
-      ? "white"
-      : "black"};
+    props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};
 
@@ -47,3 +49,3 @@ &:hover {
     text-decoration: none;
-    color: ${props => (props.context === "Secondary-cta" ? "black" : "white")};
+    color: ${props => (props.context === SECONDARY ? "black" : "white")};
   }
@@ -57,3 +59,3 @@
     text-decoration: none;
-    color: ${props => (props.context === "Secondary-cta" ? "black" : "white")};
+    color: ${props => (props.context === SECONDARY ? "black" : "white")};
   }
@@ -63,5 +65,3 @@
     color: ${props =>
-    props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta"
-      ? "white"
-      : "black"};
+      props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};
     pointer-events: none;
@@ -83,3 +83,3 @@
       &:disabled,
-      &.disabled{
+      &.disabled {
         opacity: 0.3;
@@ -98,3 +98,3 @@ color: #ccc;
   ${props =>
-    props.context === "Secure-Checkout" &&
+    props.context === SECURE &&
     css`
@@ -126,3 +126,3 @@ &::after {
   ${props =>
-    props.context === "Find-In-Store" &&
+    props.context === FINDINSTORE &&
     css`
@@ -153,5 +153,21 @@ & {
   }
+  ${props =>
+    props.context === EMAIL &&
+    css`
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      & {
+        &::before {
+          content: url(//images.arcteryx.com/foundation-ui/svgs/Email_White.svg);
+          width: 22px;
+          margin-right: 5px;
+          display: inline-block;
+        }
+      }
+    `};
+  }
 
   ${props =>
-    props.context === "Add-To-Cart" &&
+    props.context === ADDTOCART &&
     css`
@@ -158,0 +174,0 @@ display: inline-flex;

New alerts

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

Total package byte prevSize

107084

increased by7.81%

Lines of code

1612

increased by8.85%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes