@superlogica/checkbox - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

package.json

 {
   "name": "@superlogica/checkbox",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Checkbox - DSweb Superlogica",
@@ -5,0 +5,0 @@ "dependencies": {

README.md

@@ -15,9 +15,14 @@ # COMPONENT CHECKBOX
 
-| Props | Valor |
-| --- | --- |
-| `variant` | `String` aceita os valores **check**, **minus** e **cross**. O valor default é **check**|
-| `checked` | `Boolean` recebe o valor do seu state que determina se o checkbox está selecionado ou não.  |
-| `value` | `String` recebe o valor do checkbox. 
-| `label` | `String` label do respectivo checkbox. |
-| `onChange` | `fn`  | recebe a função para alterar o state que determina se o checkbox está selecionado ou não.
+| Props | Type | Default | |
+| --- | --- | ---| --- |
+| `variant` | `String` | `check` | aceita os valores **check**, **minus** e **cross**. |
+| `checked` | `Boolean` | `false` | recebe o valor do seu state que determina se o checkbox está selecionado ou não.|
+| `dark` | `boolean` | `false` | altera a cor do label para um tom claro quando for **true** |
+| `value` | `String` | `null` | recebe o valor do checkbox. |
+| `label` | `String` | `null` | label do respectivo checkbox. |
+| `marginTop`| `String`| `none`| aceita os tamanhos de margin encontrados na documentação, ex: **lg**, **md**, **sm**.|
+| `marginRight`| `String`| `none`| aceita os tamanhos de margin encontrados na documentação, ex: **lg**, **md**, **sm**.|
+| `marginBottom`| `String`| `md`| aceita os tamanhos de margin encontrados na documentação, ex: **lg**, **md**, **sm**.|
+| `marginLeft`| `String`| `none`| aceita os tamanhos de margin encontrados na documentação, ex: **lg**, **md**, **sm**.|
+| `onChange` | `fn` | `null` | recebe a função para alterar o state que determina se o checkbox está selecionado ou não.
 
@@ -24,0 +29,0 @@

src/Checkbox.js

@@ -5,17 +5,2 @@ import React from "react";
 
-
-const GenericDiv = styled.div.attrs(props => ({
-    marginTop: props.theme.margin[props.marginTop] || props.theme.margin.none,
-    marginRight: props.theme.margin[props.marginRight] || props.theme.margin.none,
-    marginBottom: props.theme.margin[props.marginBottom] || props.theme.margin.md,
-    marginLeft: props.theme.margin[props.marginLeft] || props.theme.margin.none,
-    textColor : props.dark ? props.theme.color.neutral0 : props.theme.color.neutral700
-}))`
-    ${props => `
-            margin: ${props.marginTop} ${props.marginRight} ${props.marginBottom} ${props.marginLeft};
-            color: ${props.textColor};
-        `
-    }
-`;
-
 const Icon = styled.svg`
@@ -89,2 +74,19 @@ fill: none;
 
+const GenericDiv = styled.div.attrs(props => ({
+    marginTop: props.theme.margin[props.marginTop] || props.theme.margin.none,
+    marginRight: props.theme.margin[props.marginRight] || props.theme.margin.none,
+    marginBottom: props.theme.margin[props.marginBottom] || props.theme.margin.md,
+    marginLeft: props.theme.margin[props.marginLeft] || props.theme.margin.none,
+    textColor : props.dark ? props.theme.color.neutral0 : props.theme.color.neutral700
+}))`
+    ${props => `
+            margin: ${props.marginTop} ${props.marginRight} ${props.marginBottom} ${props.marginLeft};
+            color: ${props.textColor};
+            & > label:hover ${Generic} {
+                border-color: ${props.theme.color.primary};
+            }
+        `
+    }
+`;
+
 //coordenadas SVG para cada ícone
@@ -91,0 +93,0 @@ const checkBoxIcons = {

src/Index.js

@@ -17,3 +17,3 @@ "use strict";
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n    transform: translateY(-1px);\n    vertical-align: middle;\n    width: 18px;\n    height: 18px;\n    border-radius: 2px;\n    transition: 0.2s all linear;\n    box-sizing: border-box;\n    text-align: center;\n    line-height: 15px;\n    display: inline-block;\n    margin: 12px;\n    ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n    ", "\n"]);
 
@@ -28,3 +28,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    border-radius: 3px;\n    transition: all 150ms;\n"]);
+  var data = _taggedTemplateLiteral(["\n    transform: translateY(-1px);\n    vertical-align: middle;\n    width: 18px;\n    height: 18px;\n    border-radius: 2px;\n    transition: 0.2s all linear;\n    box-sizing: border-box;\n    text-align: center;\n    line-height: 15px;\n    display: inline-block;\n    margin: 12px;\n    ", "\n"]);
 
@@ -39,3 +39,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n    border: 0;\n    clip: rect(0 0 0 0);\n    clippath: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n"]);
+  var data = _taggedTemplateLiteral(["\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    border-radius: 3px;\n    transition: all 150ms;\n"]);
 
@@ -50,3 +50,3 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    fill: none;\n    stroke: white;\n    stroke-width: 2px;\n    transition: 0.2s all linear;\n    margin: auto;\n    vertical-align: middle;\n"]);
+  var data = _taggedTemplateLiteral(["\n    border: 0;\n    clip: rect(0 0 0 0);\n    clippath: inset(50%);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n"]);
 
@@ -61,3 +61,3 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n    fill: none;\n    stroke: white;\n    stroke-width: 2px;\n    transition: 0.2s all linear;\n    margin: auto;\n    vertical-align: middle;\n"]);
 
@@ -73,16 +73,4 @@ _templateObject = function _templateObject() {
 
-var GenericDiv = _styledComponents.default.div.attrs(function (props) {
-  return {
-    marginTop: props.theme.margin[props.marginTop] || props.theme.margin.none,
-    marginRight: props.theme.margin[props.marginRight] || props.theme.margin.none,
-    marginBottom: props.theme.margin[props.marginBottom] || props.theme.margin.md,
-    marginLeft: props.theme.margin[props.marginLeft] || props.theme.margin.none,
-    textColor: props.dark ? props.theme.color.neutral0 : props.theme.color.neutral700
-  };
-})(_templateObject(), function (props) {
-  return "\n            margin: ".concat(props.marginTop, " ").concat(props.marginRight, " ").concat(props.marginBottom, " ").concat(props.marginLeft, ";\n            color: ").concat(props.textColor, ";\n        ");
-});
+var Icon = _styledComponents.default.svg(_templateObject());
 
-var Icon = _styledComponents.default.svg(_templateObject2());
-
 var HiddenCheckbox = _styledComponents.default.input.attrs(function () {
@@ -92,5 +80,5 @@ return {
   };
-})(_templateObject3());
+})(_templateObject2());
 
-var StyledCheckbox = _styledComponents.default.div(_templateObject4());
+var StyledCheckbox = _styledComponents.default.div(_templateObject3());
 
@@ -103,4 +91,16 @@ var Generic = _styledComponents.default.span.attrs(function (props) {
   };
+})(_templateObject4(), function (props) {
+  return "\n        background: ".concat(props.background, ";\n        border: 1px solid ").concat(props.borderColor, ";\n        &:hover {\n            border-color: ").concat(props.theme.color.primary, ";\n        }\n        ").concat(StyledCheckbox, "{\n            background: ").concat(props.backgroundDiv, ";\n        }\n        ").concat(StyledCheckbox, ":hover {\n            box-shadow: 0 0 0 3px rgba(255,255,255,0.1);\n        }\n        ").concat(Icon, " {\n            width: ").concat(props.theme.tipography.lineHeight, ";\n            height: ").concat(props.theme.tipography.lineHeight, ";\n        }\n        ");
+});
+
+var GenericDiv = _styledComponents.default.div.attrs(function (props) {
+  return {
+    marginTop: props.theme.margin[props.marginTop] || props.theme.margin.none,
+    marginRight: props.theme.margin[props.marginRight] || props.theme.margin.none,
+    marginBottom: props.theme.margin[props.marginBottom] || props.theme.margin.md,
+    marginLeft: props.theme.margin[props.marginLeft] || props.theme.margin.none,
+    textColor: props.dark ? props.theme.color.neutral0 : props.theme.color.neutral700
+  };
 })(_templateObject5(), function (props) {
-  return "\n        background: ".concat(props.background, ";\n        border: 1px solid ").concat(props.borderColor, ";\n        &:hover {\n            border-color: ").concat(props.theme.color.primary, ";\n        }\n        ").concat(StyledCheckbox, "{\n            background: ").concat(props.backgroundDiv, ";\n        }\n        ").concat(StyledCheckbox, ":hover {\n            box-shadow: 0 0 0 3px rgba(255,255,255,0.1);\n        }\n        ").concat(Icon, " {\n            width: ").concat(props.theme.tipography.lineHeight, ";\n            height: ").concat(props.theme.tipography.lineHeight, ";\n        }\n        ");
+  return "\n            margin: ".concat(props.marginTop, " ").concat(props.marginRight, " ").concat(props.marginBottom, " ").concat(props.marginLeft, ";\n            color: ").concat(props.textColor, ";\n            & > label:hover ").concat(Generic, " {\n                border-color: ").concat(props.theme.color.primary, ";\n            }\n        ");
 }); //coordenadas SVG para cada ícone
@@ -107,0 +107,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

12489

increased by7.64%

Lines of code

232

increased by1.75%

Number of lines in readme file

57

increased by9.62%

No dependency changes