Socket
Socket
Sign inDemoInstall

@arcteryx/components-button

Package Overview
Dependencies
0
Maintainers
7
Versions
67
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.28.0 to 1.28.1

11

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log

## [1.28.1](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.28.0...@arcteryx/components-button@1.28.1) (2020-09-22)
### Bug Fixes
* **TMS-470:** PR feedback match design spec ([ab4419a](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/ab4419a1b03f99a29518fcac02be28b0a20de650))
# [1.28.0](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.27.17...@arcteryx/components-button@1.28.0) (2020-08-11)

@@ -8,0 +19,0 @@

208

dist/cjs/index.js

@@ -13,17 +13,2 @@ 'use strict';

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {

@@ -83,92 +68,125 @@ _extends = Object.assign || function (target) {

function _taggedTemplateLiteral(strings, raw) {
if (!raw) {
raw = strings.slice(0);
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%"};
height: 45px;
padding: 0.967rem 1.5rem;
margin: 0;
color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white"};
text-decoration: none;
border-radius: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: ${props => props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent"};
font-size: 1.1rem;
line-height: 1rem;
font-family: var(--font-urw-din);
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
background-color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
&:hover {
border: 1px solid transparent;
background-image: linear-gradient(#373737, black);
transition: background-color 400ms ease-in;
text-decoration: none;
color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
}
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
&:active {
border: 1px solid transparent;
text-decoration: none;
background-image: linear-gradient(black, #373737);
transition: background-color 400ms ease-in;
text-decoration: none;
color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
}
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n & {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 400px;\n max-width: 100%;\n line-height: 16px;\n text-transform: none;\n &::before {\n content: url(//images.arcteryx.com/foundation-ui/svgs/Pin.svg);\n width: 16px;\n height: 16px;\n margin-right: 5px;\n display: inline-block;\n }\n &:hover {\n color: black;\n border: 1px solid black;\n background-image: none;\n background-color: white;\n }\n }\n "]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
${props => props.disabled && styled.css`
&:disabled,
&.is-disabled {
opacity: 0.3;
color: #ccc;
cursor: not-allowed;
}
`};
}
${props => props.context === "Secure-Checkout" && styled.css`
&::after {
content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
width: 10px;
height: 10px;
margin-left: 10px;
display: inline-block;
}
`};
}
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n &::after {\n content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n width: 10px;\n height: 10px;\n margin-left: 10px;\n display: inline-block;\n }\n "]);
_templateObject3 = function _templateObject3() {
return data;
};
/* Inverted, Secondary-cta buttons */
&.button--Secondary-cta {
border: 1px solid transparent;
border-bottom: 1px solid black;
return data;
}
&:hover,
&:active,
&:focus {
background: white;
color: black;
border: 1px solid black;
}
}
${props => props.context === "Find-In-Store" && styled.css`
& {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
max-width: 100%;
line-height: 16px;
text-transform: none;
&::before {
content: url(//images.arcteryx.com/foundation-ui/svgs/Pin.svg);
width: 16px;
height: 16px;
margin-right: 5px;
display: inline-block;
}
&:hover {
color: black;
border: 1px solid black;
background-image: none;
background-color: white;
}
}
`};
}
`;
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n &:disabled,\n &.is-disabled {\n opacity: 0.3;\n color: #ccc;\n cursor: not-allowed;\n }\n "]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n width: ", ";\n max-width: ", ";\n height: 45px;\n padding: 0.967rem 1.5rem;\n margin: 0;\n color: ", ";\n text-decoration: none;\n border-radius: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: ", ";\n font-size: 1.1rem;\n line-height: 1rem;\n font-family: var(--font-urw-din);\n text-transform: uppercase;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n border: 1px solid transparent;\n background-image: linear-gradient(#373737, black);\n transition: background-color 400ms ease-in;\n text-decoration: none;\n color: ", ";\n }\n\n &:active {\n border: 1px solid transparent;\n text-decoration: none;\n background-image: linear-gradient(black, #373737);\n transition: background-color 400ms ease-in;\n text-decoration: none;\n color: ", ";\n }\n\n ", ";\n}\n ", ";\n }\n\n\n /* Inverted, Secondary-cta buttons */\n &.button--Secondary-cta {\n border: 1px solid transparent;\n border-bottom: 1px solid black;\n\n &:hover,\n &:active,\n &:focus {\n background: white;\n color: black;\n border: 1px solid black;\n }\n }\n ", ";\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var ButtonWrapper = styled__default.button(_templateObject(), function (props) {
return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
}, function (props) {
return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
}, function (props) {
return props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.disabled && styled.css(_templateObject2());
}, function (props) {
return props.context === "Secure-Checkout" && styled.css(_templateObject3());
}, function (props) {
return props.context === "Find-In-Store" && styled.css(_templateObject4());
});
var Button = function Button(_ref) {
var _cx;
var market = _ref.market,
context = _ref.context,
type = _ref.type,
size = _ref.size,
isDisabled = _ref.isDisabled,
onClick = _ref.onClick,
className = _ref.className,
id = _ref.id,
style = _ref.style,
children = _ref.children,
const Button = (_ref) => {
let {
market,
context,
type,
size,
isDisabled,
onClick,
className,
id,
style,
children
} = _ref,
otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
var baseClass = "button";
var rootClass = cx(baseClass, className, (_cx = {}, _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market), _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context), _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size), _defineProperty(_cx, "disabled", isDisabled), _defineProperty(_cx, "is-disabled", isDisabled), _cx));
const baseClass = "button";
const rootClass = cx(baseClass, className, {
[`${baseClass}--${market}`]: market,
[`${baseClass}--${context}`]: context,
[`${baseClass}--${size}`]: size,
[`disabled`]: isDisabled,
[`is-disabled`]: isDisabled
});
return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({

@@ -175,0 +193,0 @@ id: id,

208

dist/es/index.js

@@ -6,17 +6,2 @@ import React from 'react';

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {

@@ -76,92 +61,125 @@ _extends = Object.assign || function (target) {

function _taggedTemplateLiteral(strings, raw) {
if (!raw) {
raw = strings.slice(0);
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%"};
height: 45px;
padding: 0.967rem 1.5rem;
margin: 0;
color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white"};
text-decoration: none;
border-radius: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: ${props => props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent"};
font-size: 1.1rem;
line-height: 1rem;
font-family: var(--font-urw-din);
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
background-color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
&:hover {
border: 1px solid transparent;
background-image: linear-gradient(#373737, black);
transition: background-color 400ms ease-in;
text-decoration: none;
color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
}
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
&:active {
border: 1px solid transparent;
text-decoration: none;
background-image: linear-gradient(black, #373737);
transition: background-color 400ms ease-in;
text-decoration: none;
color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
}
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n & {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 400px;\n max-width: 100%;\n line-height: 16px;\n text-transform: none;\n &::before {\n content: url(//images.arcteryx.com/foundation-ui/svgs/Pin.svg);\n width: 16px;\n height: 16px;\n margin-right: 5px;\n display: inline-block;\n }\n &:hover {\n color: black;\n border: 1px solid black;\n background-image: none;\n background-color: white;\n }\n }\n "]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
${props => props.disabled && css`
&:disabled,
&.is-disabled {
opacity: 0.3;
color: #ccc;
cursor: not-allowed;
}
`};
}
${props => props.context === "Secure-Checkout" && css`
&::after {
content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
width: 10px;
height: 10px;
margin-left: 10px;
display: inline-block;
}
`};
}
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n &::after {\n content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n width: 10px;\n height: 10px;\n margin-left: 10px;\n display: inline-block;\n }\n "]);
_templateObject3 = function _templateObject3() {
return data;
};
/* Inverted, Secondary-cta buttons */
&.button--Secondary-cta {
border: 1px solid transparent;
border-bottom: 1px solid black;
return data;
}
&:hover,
&:active,
&:focus {
background: white;
color: black;
border: 1px solid black;
}
}
${props => props.context === "Find-In-Store" && css`
& {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
max-width: 100%;
line-height: 16px;
text-transform: none;
&::before {
content: url(//images.arcteryx.com/foundation-ui/svgs/Pin.svg);
width: 16px;
height: 16px;
margin-right: 5px;
display: inline-block;
}
&:hover {
color: black;
border: 1px solid black;
background-image: none;
background-color: white;
}
}
`};
}
`;
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n &:disabled,\n &.is-disabled {\n opacity: 0.3;\n color: #ccc;\n cursor: not-allowed;\n }\n "]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n width: ", ";\n max-width: ", ";\n height: 45px;\n padding: 0.967rem 1.5rem;\n margin: 0;\n color: ", ";\n text-decoration: none;\n border-radius: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: ", ";\n font-size: 1.1rem;\n line-height: 1rem;\n font-family: var(--font-urw-din);\n text-transform: uppercase;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n border: 1px solid transparent;\n background-image: linear-gradient(#373737, black);\n transition: background-color 400ms ease-in;\n text-decoration: none;\n color: ", ";\n }\n\n &:active {\n border: 1px solid transparent;\n text-decoration: none;\n background-image: linear-gradient(black, #373737);\n transition: background-color 400ms ease-in;\n text-decoration: none;\n color: ", ";\n }\n\n ", ";\n}\n ", ";\n }\n\n\n /* Inverted, Secondary-cta buttons */\n &.button--Secondary-cta {\n border: 1px solid transparent;\n border-bottom: 1px solid black;\n\n &:hover,\n &:active,\n &:focus {\n background: white;\n color: black;\n border: 1px solid black;\n }\n }\n ", ";\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var ButtonWrapper = styled.button(_templateObject(), function (props) {
return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
}, function (props) {
return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
}, function (props) {
return props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.disabled && css(_templateObject2());
}, function (props) {
return props.context === "Secure-Checkout" && css(_templateObject3());
}, function (props) {
return props.context === "Find-In-Store" && css(_templateObject4());
});
var Button = function Button(_ref) {
var _cx;
var market = _ref.market,
context = _ref.context,
type = _ref.type,
size = _ref.size,
isDisabled = _ref.isDisabled,
onClick = _ref.onClick,
className = _ref.className,
id = _ref.id,
style = _ref.style,
children = _ref.children,
const Button = (_ref) => {
let {
market,
context,
type,
size,
isDisabled,
onClick,
className,
id,
style,
children
} = _ref,
otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
var baseClass = "button";
var rootClass = cx(baseClass, className, (_cx = {}, _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market), _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context), _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size), _defineProperty(_cx, "disabled", isDisabled), _defineProperty(_cx, "is-disabled", isDisabled), _cx));
const baseClass = "button";
const rootClass = cx(baseClass, className, {
[`${baseClass}--${market}`]: market,
[`${baseClass}--${context}`]: context,
[`${baseClass}--${size}`]: size,
[`disabled`]: isDisabled,
[`is-disabled`]: isDisabled
});
return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({

@@ -168,0 +186,0 @@ id: id,

217

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) :
(function() {
(global = 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);
global.ARCTERYX.componentsbutton = exports;
exports.noConflict = function() { global.ARCTERYX.componentsbutton = current; return exports; };
})();
}(this, (function (exports,React,styled,PropTypes,cx) { 'use strict';
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';
React = React && React.hasOwnProperty('default') ? React['default'] : React;
React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
var styled__default = 'default' in styled ? styled['default'] : styled;
PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
cx = cx && cx.hasOwnProperty('default') ? cx['default'] : cx;
PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
cx = cx && Object.prototype.hasOwnProperty.call(cx, 'default') ? cx['default'] : cx;
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {

@@ -87,92 +71,125 @@ _extends = Object.assign || function (target) {

function _taggedTemplateLiteral(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
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%"};
height: 45px;
padding: 0.967rem 1.5rem;
margin: 0;
color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white"};
text-decoration: none;
border-radius: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: ${props => props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent"};
font-size: 1.1rem;
line-height: 1rem;
font-family: var(--font-urw-din);
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
background-color: ${props => props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black"};
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
&:hover {
border: 1px solid transparent;
background-image: linear-gradient(#373737, black);
transition: background-color 400ms ease-in;
text-decoration: none;
color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
}
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n & {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 400px;\n max-width: 100%;\n line-height: 16px;\n text-transform: none;\n &::before {\n content: url(//images.arcteryx.com/foundation-ui/svgs/Pin.svg);\n width: 16px;\n height: 16px;\n margin-right: 5px;\n display: inline-block;\n }\n &:hover {\n color: black;\n border: 1px solid black;\n background-image: none;\n background-color: white;\n }\n }\n "]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
&:active {
border: 1px solid transparent;
text-decoration: none;
background-image: linear-gradient(black, #373737);
transition: background-color 400ms ease-in;
text-decoration: none;
color: ${props => props.context === "Secondary-cta" ? "black" : "white"};
}
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n &::after {\n content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);\n width: 10px;\n height: 10px;\n margin-left: 10px;\n display: inline-block;\n }\n "]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
${props => props.disabled && styled.css`
&:disabled,
&.is-disabled {
opacity: 0.3;
color: #ccc;
cursor: not-allowed;
}
`};
}
${props => props.context === "Secure-Checkout" && styled.css`
&::after {
content: url(//images.arcteryx.com/foundation-ui/svgs/Secure_Icon_White.svg);
width: 10px;
height: 10px;
margin-left: 10px;
display: inline-block;
}
`};
}
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n &:disabled,\n &.is-disabled {\n opacity: 0.3;\n color: #ccc;\n cursor: not-allowed;\n }\n "]);
_templateObject2 = function _templateObject2() {
return data;
};
/* Inverted, Secondary-cta buttons */
&.button--Secondary-cta {
border: 1px solid transparent;
border-bottom: 1px solid black;
return data;
&:hover,
&:active,
&:focus {
background: white;
color: black;
border: 1px solid black;
}
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n width: ", ";\n max-width: ", ";\n height: 45px;\n padding: 0.967rem 1.5rem;\n margin: 0;\n color: ", ";\n text-decoration: none;\n border-radius: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border: ", ";\n font-size: 1.1rem;\n line-height: 1rem;\n font-family: var(--font-urw-din);\n text-transform: uppercase;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n border: 1px solid transparent;\n background-image: linear-gradient(#373737, black);\n transition: background-color 400ms ease-in;\n text-decoration: none;\n color: ", ";\n }\n\n &:active {\n border: 1px solid transparent;\n text-decoration: none;\n background-image: linear-gradient(black, #373737);\n transition: background-color 400ms ease-in;\n text-decoration: none;\n color: ", ";\n }\n\n ", ";\n}\n ", ";\n }\n\n\n /* Inverted, Secondary-cta buttons */\n &.button--Secondary-cta {\n border: 1px solid transparent;\n border-bottom: 1px solid black;\n\n &:hover,\n &:active,\n &:focus {\n background: white;\n color: black;\n border: 1px solid black;\n }\n }\n ", ";\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
${props => props.context === "Find-In-Store" && styled.css`
& {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
max-width: 100%;
line-height: 16px;
text-transform: none;
&::before {
content: url(//images.arcteryx.com/foundation-ui/svgs/Pin.svg);
width: 16px;
height: 16px;
margin-right: 5px;
display: inline-block;
}
&:hover {
color: black;
border: 1px solid black;
background-image: none;
background-color: white;
}
}
`};
}
var ButtonWrapper = styled__default.button(_templateObject(), function (props) {
return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
}, function (props) {
return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent";
}, function (props) {
return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
}, function (props) {
return props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.context === "Secondary-cta" ? "black" : "white";
}, function (props) {
return props.disabled && styled.css(_templateObject2());
}, function (props) {
return props.context === "Secure-Checkout" && styled.css(_templateObject3());
}, function (props) {
return props.context === "Find-In-Store" && styled.css(_templateObject4());
});
`;
var Button = function Button(_ref) {
var _cx;
var market = _ref.market,
context = _ref.context,
type = _ref.type,
size = _ref.size,
isDisabled = _ref.isDisabled,
onClick = _ref.onClick,
className = _ref.className,
id = _ref.id,
style = _ref.style,
children = _ref.children,
const Button = (_ref) => {
let {
market,
context,
type,
size,
isDisabled,
onClick,
className,
id,
style,
children
} = _ref,
otherProps = _objectWithoutProperties(_ref, ["market", "context", "type", "size", "isDisabled", "onClick", "className", "id", "style", "children"]);
var baseClass = "button";
var rootClass = cx(baseClass, className, (_cx = {}, _defineProperty(_cx, "".concat(baseClass, "--").concat(market), market), _defineProperty(_cx, "".concat(baseClass, "--").concat(context), context), _defineProperty(_cx, "".concat(baseClass, "--").concat(size), size), _defineProperty(_cx, "disabled", isDisabled), _defineProperty(_cx, "is-disabled", isDisabled), _cx));
const baseClass = "button";
const rootClass = cx(baseClass, className, {
[`${baseClass}--${market}`]: market,
[`${baseClass}--${context}`]: context,
[`${baseClass}--${size}`]: size,
[`disabled`]: isDisabled,
[`is-disabled`]: isDisabled
});
return /*#__PURE__*/React.createElement(ButtonWrapper, _extends({

@@ -179,0 +196,0 @@ id: id,

8

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

@@ -13,8 +13,8 @@ "source": "src/index.js",

"start": "../node_modules/.bin/rollup -c ../scripts/rollup.config.js -w",
"test": "jest --coverage",
"test:watch": "jest --watch"
"test": "../node_modules/.bin/jest --coverage",
"test:watch": "../node_modules/.bin/jest --watch"
},
"author": "",
"license": "ISC",
"gitHead": "a75283d8c63b3d6a10105449f9d2f89d12cb0cb3",
"gitHead": "55c6c2e46c1624b03a5502ece864b09fd3b079f5",
"files": [

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

1

src/components/button.js

@@ -28,2 +28,3 @@ import React from "react";

font-family: var(--font-urw-din);
font-weight: 500;
text-transform: uppercase;

@@ -30,0 +31,0 @@ cursor: pointer;

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc