buoy-close-icon - npm Package Compare versions

Comparing version 4.0.4 to 4.0.5

dist/index.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  z-index: 1;\n  background: none;\n  border: none;\n  padding: ", ";\n  margin: 0;\n  \n  svg {\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", "\n      height: ", ";\n      width: ", ";\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n"], ["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  z-index: 1;\n  background: none;\n  border: none;\n  padding: ", ";\n  margin: 0;\n  \n  svg {\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", "\n      height: ", ";\n      width: ", ";\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n"]),
+var _templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: 1;\n  background: none;\n  border: none;\n  padding: ", ";\n  margin: 0;\n  \n  svg {\n    position: ", ";\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: 50%;\n      position: absolute;\n      ", ";\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n"], ["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: 1;\n  background: none;\n  border: none;\n  padding: ", ";\n  margin: 0;\n  \n  svg {\n    position: ", ";\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: 50%;\n      position: absolute;\n      ", ";\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n"]),
     _templateObject2 = _taggedTemplateLiteral(["opacity: 0.1;"], ["opacity: 0.1;"]);
@@ -20,2 +20,4 @@
 
+var _buoyTheme = require("buoy-theme");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,8 +35,12 @@
 }, function (props) {
-  return props.top ? props.top : "1px";
+  return props.topBanner ? "static" : "absolute";
 }, function (props) {
-  return props.right ? props.right : "1px";
+  return props.top ? props.top : 0;
 }, function (props) {
-  return props.padding ? props.padding : "10";
+  return props.right ? props.right : 0;
 }, function (props) {
+  return props.padding ? props.padding : "none";
+}, function (props) {
+  return props.topBanner ? "static" : "absolute";
+}, function (props) {
   return props.padding ? props.padding : "10px";
@@ -57,2 +63,4 @@ }, function (props) {
   return props.backgroundSize ? props.backgroundSize : "37.5px";
+}, function (props) {
+  return props.topBanner ? (0, _buoyTheme.responsive)("left", "95%", "95%", "94.5%", "94.5%", "94.5%") : "left: 50%";
 });
@@ -59,0 +67,0 @@

package.json

 {
   "name": "buoy-close-icon",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Buoy Close Icon Component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

 import React from "react"
 import styled, { css } from "styled-components"
+import { responsive } from "buoy-theme"
 
@@ -9,13 +10,13 @@ const CloseIconWrapper = styled.button`
   cursor: pointer;
-  position: absolute;
-  top: ${props => props.top ? props.top : "1px"};
-  right: ${props => props.right ? props.right : "1px"};
+  position: ${props => props.topBanner ? "static" : "absolute"};
+  top: ${props => props.top ? props.top : 0};
+  right: ${props => props.right ? props.right : 0};
   z-index: 1;
   background: none;
   border: none;
-  padding: ${props => props.padding ? props.padding : "10"};
+  padding: ${props => props.padding ? props.padding : "none"};
   margin: 0;
   
   svg {
-    position: absolute;
+    position: ${props => props.topBanner ? "static": "absolute"};
     top: ${props => props.padding ? props.padding : "10px"};
@@ -35,3 +36,3 @@ left: ${props => props.padding ? props.padding : "10px"};
       background: ${props => props.hoverColor ? props.theme.colors[props.hoverColor] : 'rgba(0, 173, 239, 0.1)'};
-      ${props => props.hoverColor && css`opacity: 0.1;`}
+      ${props => props.hoverColor && css`opacity: 0.1;`};
       height: ${props => props.backgroundSize ? props.backgroundSize : "37.5px"};
@@ -41,3 +42,3 @@ width: ${props => props.backgroundSize ? props.backgroundSize : "37.5px"};
       position: absolute;
-      left: 50%;
+      ${props => props.topBanner ? responsive("left", "95%", "95%", "94.5%", "94.5%", "94.5%") : `left: 50%`};
       top: 50%;
@@ -44,0 +45,0 @@ transform: translateX(-50%) translateY(-50%);

New alerts

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

Improved metrics

Total package byte prevSize

7999

increased by6.8%

Lines of code

170

increased by4.29%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes