Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@arcteryx/components-button
Advanced tools
@arcteryx/components-button - npm Package Compare versions
Comparing version 1.27.14 to 1.27.15
@@ -6,2 +6,10 @@ # Change Log | ||
| ## [1.27.15](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.27.14...@arcteryx/components-button@1.27.15) (2020-03-16) | ||
| **Note:** Version bump only for package @arcteryx/components-button | ||
| ## [1.27.14](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-button@1.27.13...@arcteryx/components-button@1.27.14) (2020-03-05) | ||
@@ -8,0 +16,0 @@ |
@@ -115,3 +115,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"]); | ||
| 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 &.find-in-store {\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\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\n &:hover {\n color: black;\n border: 1px solid black;\n background-image: none;\n background-color: white;\n }\n\n }\n"]); | ||
@@ -118,0 +118,0 @@ _templateObject = function _templateObject() { |
@@ -108,3 +108,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"]); | ||
| 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 &.find-in-store {\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\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\n &:hover {\n color: black;\n border: 1px solid black;\n background-image: none;\n background-color: white;\n }\n\n }\n"]); | ||
@@ -111,0 +111,0 @@ _templateObject = function _templateObject() { |
@@ -114,3 +114,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"]); | ||
| 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 &.find-in-store {\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\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\n &:hover {\n color: black;\n border: 1px solid black;\n background-image: none;\n background-color: white;\n }\n\n }\n"]); | ||
@@ -117,0 +117,0 @@ _templateObject = function _templateObject() { |
| { | ||
| "name": "@arcteryx/components-button", | ||
| "version": "1.27.14", | ||
| "version": "1.27.15", | ||
| "description": "Arcteryx Button", | ||
@@ -18,3 +18,3 @@ "source": "src/index.js", | ||
| "license": "ISC", | ||
| "gitHead": "531ab111333cf1e210ac88101a83b03958085201", | ||
| "gitHead": "421ef392b0db4343a1c42aa1fa1819355b8da717", | ||
| "files": [ | ||
@@ -21,0 +21,0 @@ "dist", |
@@ -243,1 +243,35 @@ import React from "react"; | ||
| }); | ||
| describe("Find in store Button Component", () => { | ||
| it("Renders correctly when market set to 'outdoor'", () => { | ||
| mockData = { | ||
| market: "outdoor", | ||
| id: "btn", | ||
| className: "btn find-in-store", | ||
| type: "button", | ||
| style: {}, | ||
| onClick: function() { | ||
| console.log("Find in store clicked"); | ||
| }, | ||
| size: "lg", | ||
| market: "Outdoor", | ||
| context: "Subtle", | ||
| isDisabled: false, | ||
| disabled: false, | ||
| }; | ||
| const { container } = render( | ||
| <ButtonWrapper | ||
| id={mockData.id} | ||
| isDisabled={mockData.isDisabled} | ||
| market={mockData.market} | ||
| context={mockData.context} | ||
| size={mockData.size} | ||
| className={mockData.className} | ||
| onClick={mockData.onClick()} | ||
| > | ||
| F | ||
| </ButtonWrapper> | ||
| ); | ||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
| }); |
@@ -56,3 +56,3 @@ import React from "react"; | ||
| > | ||
| {text("Label", "")} | ||
| {text("Label", "Button")} | ||
| </Button> | ||
@@ -86,2 +86,9 @@ </Front> | ||
| </Front> | ||
| )) | ||
| .add("Find in Store", () => ( | ||
| <Front> | ||
| <Button context="Subtle" className="find-in-store"> | ||
| Find in store | ||
| </Button> | ||
| </Front> | ||
| )); |
@@ -8,6 +8,5 @@ import React from "react"; | ||
| position: relative; | ||
| display: inline-block; | ||
| display: inline-block; | ||
| color: ${props => (props.context === "Subtle" || props.context === "Secondary-cta" ? "black" : "white")}; | ||
| background-color: ${props => | ||
| props.context === "Subtle" || props.context === "Secondary-cta" ? "white" : "black"}; | ||
| background-color: ${props => (props.context === "Subtle" || props.context === "Secondary-cta" ? "white" : "black")}; | ||
| text-decoration: ${props => (props.context === "Secondary-cta" ? "underline" : "none")}; | ||
@@ -17,10 +16,10 @@ border-radius: 0; | ||
| box-sizing: border-box; | ||
| border: ${props => (props.context === "Subtle" ? "1px solid black" : "none")}; | ||
| border: ${props => (props.context === "Subtle" ? "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; | ||
| font: 16px / 1.0em "Avenir LT W01 65 Medium", arial, sans-serif; | ||
| padding: 14.5px 22px; | ||
| margin:0; | ||
| text-transform: uppercase; | ||
| text-transform: uppercase; | ||
| cursor: pointer; | ||
@@ -79,2 +78,28 @@ &:hover { | ||
| } | ||
| &.find-in-store { | ||
| 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; | ||
| } | ||
| } | ||
| `; | ||
@@ -81,0 +106,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by17.72%
80247
- Lines of code
- increased by6.96%
1029
No dependency changes