buoy-close-icon - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

dist/index.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 15px;\n  height: 15px;\n  cursor: pointer;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    fill: ", ";\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", "\n      height: 40px;\n      width: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: -12px;\n      top: -12px;\n      z-index: -1;\n    }\n  }\n"], ["\n  display: block;\n  width: 15px;\n  height: 15px;\n  cursor: pointer;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    fill: ", ";\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", "\n      height: 40px;\n      width: 40px;\n      border-radius: 50%;\n      position: absolute;\n      left: -12px;\n      top: -12px;\n      z-index: -1;\n    }\n  }\n"]);
+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\n  svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    fill: ", ";\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", "\n      height: 250%;\n      width: 250%;\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\n  svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    fill: ", ";\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", "\n      height: 250%;\n      width: 250%;\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"]);
 
@@ -24,2 +24,10 @@ var _react = require("react");
 var CloseIconWrapper = _styledComponents2.default.div(_templateObject, function (props) {
+  return props.size ? props.size : "15px";
+}, function (props) {
+  return props.size ? props.size : "15px";
+}, function (props) {
+  return props.top ? props.top : "16px";
+}, function (props) {
+  return props.right ? props.right : "16px";
+}, function (props) {
   return props.color ? props.theme.colors[props.color] : 'black';
@@ -35,3 +43,3 @@ }, function (props) {
     CloseIconWrapper,
-    { onClick: props.onClick, hoverColor: props.hoverColor, color: props.color },
+    props,
     _react2.default.createElement(
@@ -44,3 +52,3 @@ "svg",
         y: "0px",
-        viewBox: "0 0 16 16",
+        viewBox: "0 0 17 17",
         enableBackground: "new 0 0 16 16"
@@ -47,0 +55,0 @@ },

package.json

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

src/index.js

@@ -6,8 +6,8 @@ import React from "react"
   display: block;
-  width: 15px;
-  height: 15px;
+  width: ${props => props.size ? props.size : "15px"};
+  height: ${props => props.size ? props.size : "15px"};
   cursor: pointer;
   position: absolute;
-  top: 16px;
-  right: 16px;
+  top: ${props => props.top ? props.top : "16px"};
+  right: ${props => props.right ? props.right : "16px"};
   z-index: 1;
@@ -27,8 +27,9 @@
       ${props => props.hoverColor && `opacity: 0.1`}
-      height: 40px;
-      width: 40px;
+      height: 250%;
+      width: 250%;
       border-radius: 50%;
       position: absolute;
-      left: -12px;
-      top: -12px;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
       z-index: -1;
@@ -40,3 +41,3 @@ }
 const CloseIcon = props => (
-  <CloseIconWrapper onClick={props.onClick} hoverColor={props.hoverColor} color={props.color}>
+  <CloseIconWrapper {...props}>
     <svg
@@ -47,3 +48,3 @@ version="1.1"
       y="0px"
-      viewBox="0 0 16 16"
+      viewBox="0 0 17 17"
       enableBackground="new 0 0 16 16"
@@ -50,0 +51,0 @@ >

No alert changes

Improved metrics

Total package byte prevSize

5215

increased by9.03%

Lines of code

112

increased by8.74%

No dependency changes