@superlogica/button - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

Button.test.js

@@ -1,54 +0,51 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Button from './src/Button';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Button from './src/Button'
 
 it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Button />, div);
-    ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<Button />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
 
 it('renders a large button', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Button size="large" />, div);
-    ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<Button size="large" />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
 
 it('renders a small button', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Button size="small" />, div);
-    ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<Button size="small" />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
 
-
 it('renders a default button', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Button size="batata" />, div);
-    ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<Button size="batata" />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
 
-
 it('renders a red button', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Button color="red" />, div);
-    ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<Button color="red" />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
 
-
 it('renders a default color button', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Button color="loucuras" />, div);
-    ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<Button color="loucuras" />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
 
 it('renders a fullWidth button', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Button fullWidth />, div);
-    ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<Button fullWidth />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
 
 it('renders a disabled color button', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<Button disabled />, div);
-    ReactDOM.unmountComponentAtNode(div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<Button disabled />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

package.json

 {
   "name": "@superlogica/button",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Button - DSweb Superlogica",
@@ -16,3 +16,3 @@ "main": "src/Index.js",
   "license": "MIT",
-  "gitHead": "da49985eac4ea987488fbd72f19087a4022bc79b"
+  "gitHead": "78522126714cef2bd7a37290f6a6baa46148efb0"
 }

src/Button.js

@@ -1,36 +0,36 @@
-import styled from 'styled-components';
-import fontColor from "@superlogica/superlogica-core/functions/fontColor";
-import newColor from "@superlogica/superlogica-core/functions/hoverColor";
-import setRgb from "@superlogica/superlogica-core/functions/setRgb";
-import gradientBg from "@superlogica/superlogica-core/resources/gradient";
-import PropTypes from 'prop-types';
+import styled from 'styled-components'
+import fontColor from '@superlogica/superlogica-core/functions/fontColor'
+import newColor from '@superlogica/superlogica-core/functions/hoverColor'
+import setRgb from '@superlogica/superlogica-core/functions/setRgb'
+import gradientBg from '@superlogica/superlogica-core/resources/gradient'
+import PropTypes from 'prop-types'
 
-const makeMagic = props => {
-  const regexappearance = /^(outline|solid|text)$/;
-  const regexSize = /^((small|medium|large|xlarge)|\s+)$/;
+const makeMagic = (props) => {
+  const regexappearance = /^(outline|solid|text)$/
+  const regexSize = /^((small|medium|large|xlarge)|\s+)$/
 
-  let appearance = props.appearance || "solid";
-  let color = props.color || "neutral500";
-  let size = props.size || "medium";
-  let gradient = gradientBg["gradient" + props.gradient] || null;
-  
+  let appearance = props.appearance || 'solid'
+  let color = props.color || 'neutral500'
+  let size = props.size || 'medium'
+  const gradient = gradientBg['gradient' + props.gradient] || null
+
   if (!regexSize.test(size)) {
-      console.warn('Invalid props (size),', size);
-      size = 'medium';
+    console.warn('Invalid props (size),', size)
+    size = 'medium'
   }
 
-  if(!regexappearance.test(appearance)){
-    console.warn('Invalid props (appearance),', appearance);
-    appearance =  "solid";
+  if (!regexappearance.test(appearance)) {
+    console.warn('Invalid props (appearance),', appearance)
+    appearance = 'solid'
   }
 
-  if(!props.theme.color[color]){
-    console.warn('Invalid props (color),', color);
-    color =  "neutral500";
+  if (!props.theme.color[color]) {
+    console.warn('Invalid props (color),', color)
+    color = 'neutral500'
   }
-  
-  const hexa = props.theme.color[color];
-  const rgb = setRgb(hexa); 
 
-  let makingMagic = `
+  const hexa = props.theme.color[color]
+  const rgb = setRgb(hexa)
+
+  const makingMagic = `
                 padding: ${props.theme.button.size[size].padding};
@@ -44,3 +44,5 @@ font-size: ${props.theme.button.size[size].fontSize};
                 display: inline-block;
-                ${props.shadow ? `
+                ${
+                  props.shadow
+                    ? `
                   box-shadow: ${props.theme.button.size[size].shadow} rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.6);
@@ -52,8 +54,12 @@ &:hover {
                   }
-                `:""}
-  `;
-  //retorna css para button appearance text
+                `
+                    : ''
+                }
+  `
+  // retorna css para button appearance text
 
-  if(gradient) {
-    return makingMagic + `background-image: linear-gradient(53deg, ${gradient.c1}, ${gradient.c2});
+  if (gradient) {
+    return (
+      makingMagic +
+      `background-image: linear-gradient(53deg, ${gradient.c1}, ${gradient.c2});
       color: ${fontColor(gradient.c1, gradient.c2)};
@@ -64,9 +70,14 @@ & svg {
       border:none;&:hover{
-        background-image: linear-gradient(106deg, ${gradient.c1}, ${gradient.c2});
+        background-image: linear-gradient(106deg, ${gradient.c1}, ${
+        gradient.c2
+      });
       };
-    `;
+    `
+    )
   }
 
   if (appearance === 'text') {
-    return makingMagic + `background: transparent;
+    return (
+      makingMagic +
+      `background: transparent;
             border:1px solid transparent;
@@ -80,8 +91,11 @@ color: ${hexa};
             }
-  `;
+  `
+    )
   }
 
-  //retorna css para button appearance outline
+  // retorna css para button appearance outline
   if (appearance === 'outline') {
-    return makingMagic + `
+    return (
+      makingMagic +
+      `
               background: transparent;
@@ -100,6 +114,9 @@ border: 1px solid ${hexa}
               }
-    `;
+    `
+    )
   }
 
-  return makingMagic +  `background-color: ${hexa};
+  return (
+    makingMagic +
+    `background-color: ${hexa};
           color: ${fontColor(hexa)};
@@ -113,6 +130,7 @@ border:1px solid transparent;
           }
-  `;
+  `
+  )
 }
 
-const Button = styled.button.attrs(props => ({
+const Button = styled.button.attrs((props) => ({
   disabled: props.disable,
@@ -127,11 +145,23 @@ style: null
   ${makeMagic}
-  ${props => props.fullWidth ? "width: 100%" : ""}
-  cursor: ${props => props.disable ? "not-allowed" : "pointer"}
+  ${(props) => (props.fullWidth ? 'width: 100%' : '')}
+  cursor: ${(props) => (props.disable ? 'not-allowed' : 'pointer')}
   margin: 
-        ${props => props.theme.margin[props.marginTop] ? props.theme.margin[props.marginTop] : props.theme.margin.none } 
-        ${props => props.theme.margin[props.marginRight] ? props.theme.margin[props.marginRight] : props.theme.margin.none } 
-        ${props => props.theme.margin[props.marginBottom] ? props.theme.margin[props.marginBottom] : props.theme.margin.none } 
-        ${props => props.theme.margin[props.marginLeft] ? props.theme.margin[props.marginLeft] : props.theme.margin.none };
+        ${(props) =>
+          props.theme.margin[props.marginTop]
+            ? props.theme.margin[props.marginTop]
+            : props.theme.margin.none} 
+        ${(props) =>
+          props.theme.margin[props.marginRight]
+            ? props.theme.margin[props.marginRight]
+            : props.theme.margin.none} 
+        ${(props) =>
+          props.theme.margin[props.marginBottom]
+            ? props.theme.margin[props.marginBottom]
+            : props.theme.margin.none} 
+        ${(props) =>
+          props.theme.margin[props.marginLeft]
+            ? props.theme.margin[props.marginLeft]
+            : props.theme.margin.none};
   &:disabled {
-    ${props => `
+    ${(props) => `
       background: ${props.theme.color.neutral300};
@@ -142,7 +172,9 @@ color: ${props.theme.color.neutral600};
       }
-      ${props.shadow ? `
-        box-shadow: ${props.theme.button.size.medium.shadow} rgba(110, 110, 110, 0.6);`:""
+      ${
+        props.shadow
+          ? `
+        box-shadow: ${props.theme.button.size.medium.shadow} rgba(110, 110, 110, 0.6);`
+          : ''
       }
-      transform: translateY(0px);`
-    }
+      transform: translateY(0px);`}
   }
@@ -170,3 +202,3 @@ &:after {
   }
-`;
+`
 
@@ -181,2 +213,2 @@ Button.propTypes = {
 
-export default Button;
+export default Button

src/Index.js

@@ -37,6 +37,6 @@ "use strict";
   var regexSize = /^((small|medium|large|xlarge)|\s+)$/;
-  var appearance = props.appearance || "solid";
-  var color = props.color || "neutral500";
-  var size = props.size || "medium";
-  var gradient = _gradient.default["gradient" + props.gradient] || null;
+  var appearance = props.appearance || 'solid';
+  var color = props.color || 'neutral500';
+  var size = props.size || 'medium';
+  var gradient = _gradient.default['gradient' + props.gradient] || null;
 
@@ -50,3 +50,3 @@ if (!regexSize.test(size)) {
     console.warn('Invalid props (appearance),', appearance);
-    appearance = "solid";
+    appearance = 'solid';
   }
@@ -56,3 +56,3 @@
     console.warn('Invalid props (color),', color);
-    color = "neutral500";
+    color = 'neutral500';
   }
@@ -62,3 +62,3 @@
   var rgb = (0, _setRgb.default)(hexa);
-  var makingMagic = "\n                padding: ".concat(props.theme.button.size[size].padding, ";\n                font-size: ").concat(props.theme.button.size[size].fontSize, ";\n                font-weight: ").concat(props.theme.button.fontWeight, ";\n                font-family:  ").concat(props.theme.tipography.fontFamily[0], ";\n                line-height: ").concat(props.theme.button.size[size].lineHeight, ";\n                text-align: ").concat(props.theme.button.textAlign, ";\n                border-radius: ").concat(props.theme.borderRadius, ";\n                display: inline-block;\n                ").concat(props.shadow ? "\n                  box-shadow: ".concat(props.theme.button.size[size].shadow, " rgba(").concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 0.6);\n                  &:hover {\n                    box-shadow: ").concat(props.theme.button.size[size].shadowH, " rgba(").concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 0.6);\n                    transform: translateY(-2px);\n                    text-decoration: none !important;\n                  }\n                ") : "", "\n  "); //retorna css para button appearance text
+  var makingMagic = "\n                padding: ".concat(props.theme.button.size[size].padding, ";\n                font-size: ").concat(props.theme.button.size[size].fontSize, ";\n                font-weight: ").concat(props.theme.button.fontWeight, ";\n                font-family:  ").concat(props.theme.tipography.fontFamily[0], ";\n                line-height: ").concat(props.theme.button.size[size].lineHeight, ";\n                text-align: ").concat(props.theme.button.textAlign, ";\n                border-radius: ").concat(props.theme.borderRadius, ";\n                display: inline-block;\n                ").concat(props.shadow ? "\n                  box-shadow: ".concat(props.theme.button.size[size].shadow, " rgba(").concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 0.6);\n                  &:hover {\n                    box-shadow: ").concat(props.theme.button.size[size].shadowH, " rgba(").concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 0.6);\n                    transform: translateY(-2px);\n                    text-decoration: none !important;\n                  }\n                ") : '', "\n  "); // retorna css para button appearance text
 
@@ -71,3 +71,3 @@ if (gradient) {
     return makingMagic + "background: transparent;\n            border:1px solid transparent;\n            color: ".concat(hexa, ";\n            &:hover{\n                background: rgba(0,0,0,0.05);\n            }\n            & svg {\n                fill: ").concat(hexa, "\n            }\n  ");
-  } //retorna css para button appearance outline
+  } // retorna css para button appearance outline
 
@@ -88,5 +88,5 @@
 })(_templateObject(), makeMagic, function (props) {
-  return props.fullWidth ? "width: 100%" : "";
+  return props.fullWidth ? 'width: 100%' : '';
 }, function (props) {
-  return props.disable ? "not-allowed" : "pointer";
+  return props.disable ? 'not-allowed' : 'pointer';
 }, function (props) {
@@ -101,3 +101,3 @@ return props.theme.margin[props.marginTop] ? props.theme.margin[props.marginTop] : props.theme.margin.none;
 }, function (props) {
-  return "\n      background: ".concat(props.theme.color.neutral300, ";\n      color: ").concat(props.theme.color.neutral600, ";\n      & svg {\n        fill: ").concat(props.theme.color.neutral600, ";\n      }\n      ").concat(props.shadow ? "\n        box-shadow: ".concat(props.theme.button.size.medium.shadow, " rgba(110, 110, 110, 0.6);") : "", "\n      transform: translateY(0px);");
+  return "\n      background: ".concat(props.theme.color.neutral300, ";\n      color: ").concat(props.theme.color.neutral600, ";\n      & svg {\n        fill: ").concat(props.theme.color.neutral600, ";\n      }\n      ").concat(props.shadow ? "\n        box-shadow: ".concat(props.theme.button.size.medium.shadow, " rgba(110, 110, 110, 0.6);") : '', "\n      transform: translateY(0px);");
 });
@@ -104,0 +104,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

17035

increased by1.42%

Lines of code

324

increased by11.72%

No dependency changes