buoy-button - npm Package Compare versions

Comparing version 6.1.2 to 6.1.3

dist/index.js

@@ -11,3 +11,6 @@ "use strict";
 var _templateObject = _taggedTemplateLiteral(["\n  ", "\n  border-radius: 2px;\n  padding: ", ";\n"], ["\n  ", "\n  border-radius: 2px;\n  padding: ", ";\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: 1.25;\n  border-radius: 100px;\n  padding: ", ";\n"], ["\n  ", "\n  line-height: 1.25;\n  border-radius: 100px;\n  padding: ", ";\n"]);
+    _templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: 1.25;\n  border-radius: 100px;\n  padding: ", ";\n"], ["\n  ", "\n  line-height: 1.25;\n  border-radius: 100px;\n  padding: ", ";\n"]),
+    _templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  line-height: 1.25;\n  border-radius: 100px;\n  height: ", ";\n  ", ";\n\n  ", "\n  padding: ", ";\n  padding: ", ";\n  \n"], ["\n  ", "\n  line-height: 1.25;\n  border-radius: 100px;\n  height: ", ";\n  ", ";\n\n  ", "\n  padding: ", ";\n  padding: ", ";\n  \n"]),
+    _templateObject4 = _taggedTemplateLiteral(["\n      @media (min-width: 1200px) {\n        height: 75px;\n      }\n      @media (max-width: 400px) {\n        height: 50px;\n      }\n      @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {\n        height: 85px;\n      }\n      @media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {\n        height: 80px;\n      }\n    "], ["\n      @media (min-width: 1200px) {\n        height: 75px;\n      }\n      @media (max-width: 400px) {\n        height: 50px;\n      }\n      @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {\n        height: 85px;\n      }\n      @media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {\n        height: 80px;\n      }\n    "]),
+    _templateObject5 = _taggedTemplateLiteral(["\n          @media (max-width: 500px) {\n            font-size: 14px;\n            margin: 0 2px 0 2px;\n          }\n          @media (max-width: 400px) {\n            width: 200px;\n          }\n          @media (max-width: 350px) {\n            width: 175px;\n          }\n          @media (min-width: 700px) {\n            width: 240px;\n          }\n        "], ["\n          @media (max-width: 500px) {\n            font-size: 14px;\n            margin: 0 2px 0 2px;\n          }\n          @media (max-width: 400px) {\n            width: 200px;\n          }\n          @media (max-width: 350px) {\n            width: 175px;\n          }\n          @media (min-width: 700px) {\n            width: 240px;\n          }\n        "]);
 
@@ -43,3 +46,6 @@ var _react = require("react");
 
-var LinkButtonContainer = _styledComponents2.default.a.attrs({ role: "button" })(_templateObject, _style.ButtonStyle, function (props) {
+var LinkButtonContainer = _styledComponents2.default.a.attrs({ role: "button" }).withConfig({
+  displayName: "src__LinkButtonContainer",
+  componentId: "sc-189acn6-1"
+})(_templateObject, _style.ButtonStyle, function (props) {
   return props.large ? "16px 24px 16px" : "8px 20px 8px";
@@ -72,3 +78,3 @@ });
   displayName: "src__RoundButtonContainer",
-  componentId: "sc-189acn6-1"
+  componentId: "sc-189acn6-2"
 })(_templateObject2, _style.ButtonStyle, function (props) {
@@ -78,4 +84,15 @@ return props.large ? "16px 30px" : "13px 30px";
 
-var RoundLinkButtonContainer = _styledComponents2.default.a.attrs({ role: "button" })(_templateObject2, _style.ButtonStyle, function (props) {
+var RoundLinkButtonContainer = _styledComponents2.default.a.attrs({ role: "button" }).withConfig({
+  displayName: "src__RoundLinkButtonContainer",
+  componentId: "sc-189acn6-3"
+})(_templateObject3, _style.ButtonStyle, function (props) {
+  return props.isMass ? "60px" : "";
+}, function (props) {
+  return props.isMass && (0, _styledComponents.css)(_templateObject4);
+}, function (props) {
+  return props.isMass && props.secondary ? (0, _styledComponents.css)(_templateObject5) : "";
+}, function (props) {
   return props.large ? "16px 30px" : "13px 30px";
+}, function (props) {
+  return props.isMass ? "14px 24px" : "";
 });
@@ -82,0 +99,0 @@

package.json

 {
   "name": "buoy-button",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "description": "Buoy button components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

 import React from "react"
-import styled from "styled-components"
+import styled, {css} from "styled-components"
 import PropTypes from "prop-types"
@@ -44,3 +44,41 @@ import Arrow from "./images/Arrow"
   border-radius: 100px;
+  height: ${props => (props.isMass ? "60px" : "")};
+  ${props =>
+    props.isMass &&
+    css`
+      @media (min-width: 1200px) {
+        height: 75px;
+      }
+      @media (max-width: 400px) {
+        height: 50px;
+      }
+      @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
+        height: 85px;
+      }
+      @media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
+        height: 80px;
+      }
+    `};
+
+  ${props =>
+    props.isMass && props.secondary
+      ? css`
+          @media (max-width: 500px) {
+            font-size: 14px;
+            margin: 0 2px 0 2px;
+          }
+          @media (max-width: 400px) {
+            width: 200px;
+          }
+          @media (max-width: 350px) {
+            width: 175px;
+          }
+          @media (min-width: 700px) {
+            width: 240px;
+          }
+        `
+      : ""}
   padding: ${props => (props.large ? "16px 30px" : "13px 30px")};
+  padding: ${props => (props.isMass ? "14px 24px" : "")};
+  
 `
@@ -47,0 +85,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

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

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

30856

increased by13.43%

Lines of code

768

increased by8.02%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes