@arcteryx/components-button - npm Package Compare versions

Comparing version 1.27.17 to 1.28.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [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)
+
+
+### Features
+
+* adds new URW Din font to breadcrumb, product tile, modal, and button ([2d3f2cd](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/2d3f2cd3dd6aa639c367aa569a28802437369e2b))
+
+
+
+
+
 ## [1.27.17](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.27.16...@arcteryx/components-button@1.27.17) (2020-07-20)
@@ -8,0 +19,0 @@

dist/cjs/index.js

@@ -125,3 +125,3 @@ 'use strict';
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  color: ", ";\n  background-color: ", ";\n  text-decoration: ", ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ", ";\n  width: ", ";\n  max-width:", ";\n  height: 45px;\n  font: 16px / 1.0em \"Avenir LT W01 65 Medium\", arial, sans-serif;\n  padding: 14.5px 22px;\n  margin:0;\n  text-transform: uppercase;\n  cursor: pointer;\n  &:hover {\n    border: none;\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: none;\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    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n  ", ";\n  }\n"]);
+  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"]);
 
@@ -135,14 +135,12 @@ _templateObject = function _templateObject() {
 var ButtonWrapper = styled__default.button(_templateObject(), function (props) {
-  return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white";
+  return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
 }, function (props) {
-  return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
+  return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
 }, function (props) {
-  return props.context === "Secondary-cta" ? "underline" : "none";
+  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" : "none";
+  return props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent";
 }, function (props) {
-  return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
+  return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
 }, function (props) {
-  return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
-}, function (props) {
   return props.context === "Secondary-cta" ? "black" : "white";
@@ -149,0 +147,0 @@ }, function (props) {

dist/es/index.js

@@ -118,3 +118,3 @@ import React from 'react';
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  color: ", ";\n  background-color: ", ";\n  text-decoration: ", ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ", ";\n  width: ", ";\n  max-width:", ";\n  height: 45px;\n  font: 16px / 1.0em \"Avenir LT W01 65 Medium\", arial, sans-serif;\n  padding: 14.5px 22px;\n  margin:0;\n  text-transform: uppercase;\n  cursor: pointer;\n  &:hover {\n    border: none;\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: none;\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    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n  ", ";\n  }\n"]);
+  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"]);
 
@@ -128,14 +128,12 @@ _templateObject = function _templateObject() {
 var ButtonWrapper = styled.button(_templateObject(), function (props) {
-  return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white";
+  return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
 }, function (props) {
-  return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
+  return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
 }, function (props) {
-  return props.context === "Secondary-cta" ? "underline" : "none";
+  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" : "none";
+  return props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent";
 }, function (props) {
-  return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
+  return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
 }, function (props) {
-  return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
-}, function (props) {
   return props.context === "Secondary-cta" ? "black" : "white";
@@ -142,0 +140,0 @@ }, function (props) {

dist/umd/index.js

@@ -130,3 +130,3 @@ (function (global, factory) {
   function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  color: ", ";\n  background-color: ", ";\n  text-decoration: ", ";\n  border-radius: 0;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border: ", ";\n  width: ", ";\n  max-width:", ";\n  height: 45px;\n  font: 16px / 1.0em \"Avenir LT W01 65 Medium\", arial, sans-serif;\n  padding: 14.5px 22px;\n  margin:0;\n  text-transform: uppercase;\n  cursor: pointer;\n  &:hover {\n    border: none;\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: none;\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    &:hover,\n    &:active,\n    &:focus {\n      background: white;\n      color: black;\n      text-decoration: underline;\n    }\n  }\n  ", ";\n  }\n"]);
+    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"]);
 
@@ -140,14 +140,12 @@ _templateObject = function _templateObject() {
   var ButtonWrapper = styled__default.button(_templateObject(), function (props) {
-    return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "black" : "white";
+    return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
   }, function (props) {
-    return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
+    return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
   }, function (props) {
-    return props.context === "Secondary-cta" ? "underline" : "none";
+    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" : "none";
+    return props.context === "Subtle" || props.context === "Find-In-Store" ? "1px solid black" : "1px solid transparent";
   }, function (props) {
-    return props.context === "Add-To-Cart" || props.context === "Secure-Checkout" ? "100%;" : "auto";
+    return props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta" ? "white" : "black";
   }, function (props) {
-    return props.context === "Add-To-Cart" && "400px" || props.context === "Secure-Checkout" && "100%";
-  }, function (props) {
     return props.context === "Secondary-cta" ? "black" : "white";
@@ -154,0 +152,0 @@ }, function (props) {

package.json

 {
   "name": "@arcteryx/components-button",
-  "version": "1.27.17",
+  "version": "1.28.0",
   "description": "Arcteryx Button",
@@ -18,3 +18,3 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "a4fe843b4677b6a4af5dc4257c492c0ad53af65e",
+  "gitHead": "a75283d8c63b3d6a10105449f9d2f89d12cb0cb3",
   "files": [
@@ -21,0 +21,0 @@ "dist",

src/components/button.js

@@ -9,2 +9,8 @@ import React from "react";
   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 =>
@@ -14,21 +20,20 @@ props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta"
       : "white"};
-  background-color: ${props =>
-    props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta"
-      ? "white"
-      : "black"};
-  text-decoration: ${props => (props.context === "Secondary-cta" ? "underline" : "none")};
+  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" : "none")};
-  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;
-  font: 16px / 1.0em "Avenir LT W01 65 Medium", arial, sans-serif;
-  padding: 14.5px 22px;
-  margin:0;
+  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);
   text-transform: uppercase;
   cursor: pointer;
+  background-color: ${props =>
+    props.context === "Subtle" || props.context === "Find-In-Store" || props.context === "Secondary-cta"
+      ? "white"
+      : "black"};
+
   &:hover {
-    border: none;
+    border: 1px solid transparent;
     background-image: linear-gradient(#373737, black);
@@ -41,3 +46,3 @@ transition: background-color 400ms ease-in;
   &:active {
-    border: none;
+    border: 1px solid transparent;
     text-decoration: none;
@@ -77,2 +82,5 @@ background-image: linear-gradient(black, #373737);
   &.button--Secondary-cta {
+    border: 1px solid transparent;
+    border-bottom: 1px solid black;
+
     &:hover,
@@ -83,3 +91,3 @@ &:active,
       color: black;
-      text-decoration: underline;
+      border: 1px solid black;
     }
@@ -86,0 +94,0 @@ }

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

Improved metrics

Total package byte prevSize

81289

increased by1.93%

Lines of code

1078

increased by0.28%

No dependency changes