Socket
Socket
Sign inDemoInstall

@arcteryx/components-button

Package Overview
Dependencies
Maintainers
3
Versions
72
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@arcteryx/components-button - npm Package Compare versions

Comparing version 1.32.0 to 1.32.1

17

dist/cjs/index.js

@@ -83,3 +83,3 @@ 'use strict';

const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"];
const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href"];
const SUBTLE = "Subtle";

@@ -91,5 +91,7 @@ const SECONDARY = "Secondary-cta";

const FINDINSTORE = "Find-In-Store";
const ButtonWrapper = styled__default["default"].button`
const ButtonWrapper = styled__default["default"].div`
position: relative;
display: inline-block;
display: inline-flex;
align-items:center;
justify-content:center;
width: ${props => props.context === ADDTOCART || props.context === EMAIL || props.context === SECURE ? "100%;" : "auto"};

@@ -253,3 +255,4 @@ max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};

style,
children
children,
href = ""
} = _ref,

@@ -266,6 +269,10 @@ otherProps = _objectWithoutProperties(_ref, _excluded);

});
const isAnchorElement = Boolean(href);
const as = isAnchorElement ? "a" : "button";
return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, _extends({
as: as,
id: id,
href: isAnchorElement ? href : undefined,
className: rootClass,
type: type,
type: isAnchorElement ? undefined : type,
style: style,

@@ -272,0 +279,0 @@ onClick: onClick,

17

dist/es/index.js

@@ -72,3 +72,3 @@ import React from 'react';

const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"];
const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href"];
const SUBTLE = "Subtle";

@@ -80,5 +80,7 @@ const SECONDARY = "Secondary-cta";

const FINDINSTORE = "Find-In-Store";
const ButtonWrapper = styled.button`
const ButtonWrapper = styled.div`
position: relative;
display: inline-block;
display: inline-flex;
align-items:center;
justify-content:center;
width: ${props => props.context === ADDTOCART || props.context === EMAIL || props.context === SECURE ? "100%;" : "auto"};

@@ -242,3 +244,4 @@ max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};

style,
children
children,
href = ""
} = _ref,

@@ -255,6 +258,10 @@ otherProps = _objectWithoutProperties(_ref, _excluded);

});
const isAnchorElement = Boolean(href);
const as = isAnchorElement ? "a" : "button";
return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
as: as,
id: id,
href: isAnchorElement ? href : undefined,
className: rootClass,
type: type,
type: isAnchorElement ? undefined : type,
style: style,

@@ -261,0 +268,0 @@ onClick: onClick,

17

dist/umd/index.js

@@ -85,3 +85,3 @@ (function (global, factory) {

const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children"];
const _excluded = ["market", "context", "type", "size", "disabled", "isWaiting", "onClick", "className", "id", "style", "children", "href"];
const SUBTLE = "Subtle";

@@ -93,5 +93,7 @@ const SECONDARY = "Secondary-cta";

const FINDINSTORE = "Find-In-Store";
const ButtonWrapper = styled__default["default"].button`
const ButtonWrapper = styled__default["default"].div`
position: relative;
display: inline-block;
display: inline-flex;
align-items:center;
justify-content:center;
width: ${props => props.context === ADDTOCART || props.context === EMAIL || props.context === SECURE ? "100%;" : "auto"};

@@ -255,3 +257,4 @@ max-width: ${props => props.context === ADDTOCART && "400px" || props.context === SECURE && "100%"};

style,
children
children,
href = ""
} = _ref,

@@ -268,6 +271,10 @@ otherProps = _objectWithoutProperties(_ref, _excluded);

});
const isAnchorElement = Boolean(href);
const as = isAnchorElement ? "a" : "button";
return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, _extends({
as: as,
id: id,
href: isAnchorElement ? href : undefined,
className: rootClass,
type: type,
type: isAnchorElement ? undefined : type,
style: style,

@@ -274,0 +281,0 @@ onClick: onClick,

4

package.json
{
"name": "@arcteryx/components-button",
"version": "1.32.0",
"version": "1.32.1",
"description": "Arcteryx Button",

@@ -18,3 +18,3 @@ "source": "src/index.js",

"license": "ISC",
"gitHead": "ec3795a7d5bb844c4d9931d9f32cf1416d09e081",
"gitHead": "3fda4ae93c1c433078e5f25f89fe2ed2602dafff",
"files": [

@@ -21,0 +21,0 @@ "dist",

91

src/__tests__/components/button.test.js
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import ButtonWrapper from "../../components/button";
import Button from "../../components/button";
import "jest-styled-components";

@@ -9,2 +9,47 @@

describe("Standard Button Component", () => {
it('renders a <button> element', () => {
const { getByRole } = render(
<Button
>
Standard
</Button>
);
const buttonElement = getByRole('button');
expect(buttonElement).toBeInTheDocument();
})
it('renders an <a> element', () => {
mockData = {
market: "outdoor",
id: "btn",
className: "btn",
type: "button",
style: {},
onClick: function() {
console.log("Standard clicked");
},
size: "lg",
market: "Outdoor",
context: "Standard",
disabled: false,
};
const { getByRole } = render(
<Button
id={mockData.id}
disabled={mockData.disabled}
market={mockData.market}
context={mockData.context}
size={mockData.size}
className={mockData.className}
onClick={mockData.onClick()}
href='#test'
>
Standard
</Button>
);
const buttonElement = getByRole('link', {hidden:true});
expect(buttonElement).toBeInTheDocument();
})
it("Renders correctly when market set to 'outdoor'", () => {

@@ -26,3 +71,3 @@ mockData = {

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -37,3 +82,3 @@ disabled={mockData.disabled}

Standard
</ButtonWrapper>
</Button>
);

@@ -60,3 +105,3 @@ expect(container.firstChild).toMatchSnapshot();

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -71,3 +116,3 @@ disabled={mockData.disabled}

Standard
</ButtonWrapper>
</Button>
);

@@ -90,3 +135,3 @@ expect(container.firstChild).toMatchSnapshot();

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -101,3 +146,3 @@ disabled={mockData.disabled}

Standard
</ButtonWrapper>
</Button>
);

@@ -131,3 +176,3 @@ fireEvent(

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -142,3 +187,3 @@ isWaiting={mockData.isWaiting}

Standard
</ButtonWrapper>
</Button>
);

@@ -167,3 +212,3 @@

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -178,3 +223,3 @@ isDisabled={mockData.isDisabled}

Subtile
</ButtonWrapper>
</Button>
);

@@ -203,3 +248,3 @@ expect(container.firstChild).toMatchSnapshot();

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -214,3 +259,3 @@ isDisabled={mockData.isDisabled}

Subtile
</ButtonWrapper>
</Button>
);

@@ -238,3 +283,3 @@ expect(container.firstChild).toMatchSnapshot();

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -249,3 +294,3 @@ disabled={mockData.disabled}

Subtile
</ButtonWrapper>
</Button>
);

@@ -273,3 +318,3 @@ expect(container.firstChild).toMatchSnapshot();

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -284,3 +329,3 @@ disabled={mockData.disabled}

Subtile
</ButtonWrapper>
</Button>
);

@@ -308,3 +353,3 @@ expect(container.firstChild).toMatchSnapshot();

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -319,3 +364,3 @@ disabled={mockData.disabled}

Subtle
</ButtonWrapper>
</Button>
);

@@ -343,3 +388,3 @@ expect(container.firstChild).toMatchSnapshot();

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -354,3 +399,3 @@ disabled={mockData.disabled}

F
</ButtonWrapper>
</Button>
);

@@ -378,3 +423,3 @@ expect(container.firstChild).toMatchSnapshot();

const { container } = render(
<ButtonWrapper
<Button
id={mockData.id}

@@ -389,3 +434,3 @@ disabled={mockData.disabled}

Notify Me
</ButtonWrapper>
</Button>
);

@@ -392,0 +437,0 @@ expect(container.firstChild).toMatchSnapshot();

3

src/Button.stories.js

@@ -31,3 +31,3 @@ import React, { useState } from "react";

return (
<Button context={props.context} isWaiting={isWaiting} onClick={handleClick}>
<Button context={props.context} isWaiting={isWaiting} onClick={handleClick}>
{props.children}

@@ -65,2 +65,3 @@ </Button>

export const StandardButton = () => <Button context="Standard">Standard</Button>;
export const AnchorButton = () => <Button href='#' onClick={(e) => e.preventDefault()} context="Standard">Anchor</Button>;
export const ButtonWithLongLabel = () => <Front width="220px"><Button context="Standard">Standard Button on Two Lines</Button></Front>;

@@ -67,0 +68,0 @@ export const SubtleButton = () => <Button context="Subtle">Subtle</Button>;

41

src/components/button.js

@@ -13,12 +13,15 @@ import React from "react";

const FINDINSTORE = "Find-In-Store";
const ButtonWrapper = styled.button`
const ButtonWrapper = styled.div`
position: relative;
display: inline-block;
width: ${props =>
display: inline-flex;
align-items:center;
justify-content:center;
width: ${(props) =>
props.context === ADDTOCART || props.context === EMAIL || props.context === SECURE ? "100%;" : "auto"};
max-width: ${props => (props.context === ADDTOCART && "400px") || (props.context === SECURE && "100%")};
max-width: ${(props) => (props.context === ADDTOCART && "400px") || (props.context === SECURE && "100%")};
height: 45px;
padding: 0 1.5rem;
margin: 0;
color: ${props =>
color: ${(props) =>
props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "black" : "white"};

@@ -29,3 +32,3 @@ text-decoration: none;

box-sizing: border-box;
border: ${props =>
border: ${(props) =>
props.context === SUBTLE || props.context === FINDINSTORE ? "1px solid black" : "1px solid transparent"};

@@ -39,3 +42,3 @@ font-size: 1.1rem;

cursor: pointer;
background-color: ${props =>
background-color: ${(props) =>
props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};

@@ -48,3 +51,3 @@

text-decoration: none;
color: ${props => (props.context === SECONDARY ? "black" : "white")};
color: ${(props) => (props.context === SECONDARY ? "black" : "white")};
}

@@ -58,7 +61,7 @@

text-decoration: none;
color: ${props => (props.context === SECONDARY ? "black" : "white")};
color: ${(props) => (props.context === SECONDARY ? "black" : "white")};
}
&.waiting, &.is-waiting {
color: ${props =>
color: ${(props) =>
props.context === SUBTLE || props.context === FINDINSTORE || props.context === SECONDARY ? "white" : "black"};

@@ -77,3 +80,3 @@ pointer-events: none;

${props =>
${(props) =>
props.disabled &&

@@ -95,3 +98,3 @@ css`

${props =>
${(props) =>
props.context === SECURE &&

@@ -123,3 +126,3 @@ css`

}
${props =>
${(props) =>
props.context === FINDINSTORE &&

@@ -151,3 +154,3 @@ css`

}
${props =>
${(props) =>
props.context === EMAIL &&

@@ -169,3 +172,3 @@ css`

${props =>
${(props) =>
props.context === ADDTOCART &&

@@ -200,2 +203,3 @@ css`

children,
href = "",
...otherProps

@@ -213,7 +217,12 @@ }) => {

const isAnchorElement = Boolean(href);
const as = isAnchorElement ? "a" : "button";
return (
<ButtonWrapper
as={as}
id={id}
href={isAnchorElement ? href : undefined}
className={rootClass}
type={type}
type={isAnchorElement ? undefined : type}
style={style}

@@ -220,0 +229,0 @@ onClick={onClick}

dist/cjs/index.js.map

Sorry, the diff of this file is not supported yet

dist/es/index.js.map

Sorry, the diff of this file is not supported yet

dist/umd/index.js.map

Sorry, the diff of this file is not supported yet

src/__tests__/components/__snapshots__/button.test.js.snap

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc