@tedconf/react-ted-bootstrap - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

build/Button/index.d.ts

@@ -5,4 +5,6 @@ import React from 'react';
     children: React.ReactChild;
+    /** button variant */
+    variant?: 'primary' | 'primaryOutline' | 'warning' | 'success' | 'info' | 'danger' | 'black';
     /** button type */
-    type?: 'primary' | 'primaryOutline' | 'warning' | 'success' | 'info' | 'danger' | 'black';
+    type?: 'button' | 'submit' | 'reset';
     /** onChange handler */
@@ -17,3 +19,3 @@ onClick?: () => void;
 }
-declare const Button: ({ type, onClick, onFocus, onBlur, children, disabled, }: Props) => JSX.Element;
+declare const Button: ({ variant, type, onClick, onFocus, onBlur, children, disabled, }: Props) => JSX.Element;
 export default Button;

build/Button/index.js

@@ -9,8 +9,8 @@ "use strict";
 var core_1 = require("@emotion/core");
-var styledButton = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #ededed;\n  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.075));\n  border-color: transparent;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  color: white;\n  cursor: pointer;\n  display: inline-block;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.05ex;\n  line-height: 1.42857;\n  margin-bottom: 0;\n  padding: 9px 12px;\n  text-align: center;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  &:focus,\n  &:active {\n    border-color: #66afe9;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),\n      0 0 8px rgba(102, 175, 233, 0.6);\n    outline: 0;\n  }\n\n  &[data-type='primary'] {\n    background-color: #4e4e4e;\n  }\n\n  &[data-type='primaryOutline'] {\n    background-color: #fff;\n    background-image: none;\n    border-color: #111;\n    color: #111;\n  }\n\n  &[data-type='success'] {\n    background-color: #61b563;\n  }\n\n  &[data-type='info'] {\n    background-color: #71c1d9;\n  }\n\n  &[data-type='warning'] {\n    background-color: #eaa04a;\n  }\n\n  &[data-type='danger'] {\n    background-color: #e12e28;\n  }\n\n  &[data-type='black'] {\n    background-image: none;\n    background-color: #111;\n    color: #fff;\n    text-shadow: none;\n  }\n\n  &[data-type='default'] {\n    border-color: #d7d7d7;\n    color: #444;\n    font-weight: 700;\n    text-shadow: 0 1px 0 white;\n  }\n"], ["\n  background-color: #ededed;\n  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.075));\n  border-color: transparent;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  color: white;\n  cursor: pointer;\n  display: inline-block;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.05ex;\n  line-height: 1.42857;\n  margin-bottom: 0;\n  padding: 9px 12px;\n  text-align: center;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  &:focus,\n  &:active {\n    border-color: #66afe9;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),\n      0 0 8px rgba(102, 175, 233, 0.6);\n    outline: 0;\n  }\n\n  &[data-type='primary'] {\n    background-color: #4e4e4e;\n  }\n\n  &[data-type='primaryOutline'] {\n    background-color: #fff;\n    background-image: none;\n    border-color: #111;\n    color: #111;\n  }\n\n  &[data-type='success'] {\n    background-color: #61b563;\n  }\n\n  &[data-type='info'] {\n    background-color: #71c1d9;\n  }\n\n  &[data-type='warning'] {\n    background-color: #eaa04a;\n  }\n\n  &[data-type='danger'] {\n    background-color: #e12e28;\n  }\n\n  &[data-type='black'] {\n    background-image: none;\n    background-color: #111;\n    color: #fff;\n    text-shadow: none;\n  }\n\n  &[data-type='default'] {\n    border-color: #d7d7d7;\n    color: #444;\n    font-weight: 700;\n    text-shadow: 0 1px 0 white;\n  }\n"])));
+var styledButton = core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #ededed;\n  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.075));\n  border-color: transparent;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  color: white;\n  cursor: pointer;\n  display: inline-block;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.05ex;\n  line-height: 1.42857;\n  margin-bottom: 0;\n  padding: 9px 12px;\n  text-align: center;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  &:focus,\n  &:active {\n    border-color: #66afe9;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),\n      0 0 8px rgba(102, 175, 233, 0.6);\n    outline: 0;\n  }\n\n  &[data-variant='primary'] {\n    background-color: #4e4e4e;\n  }\n\n  &[data-variant='primaryOutline'] {\n    background-color: #fff;\n    background-image: none;\n    border-color: #111;\n    color: #111;\n  }\n\n  &[data-variant='success'] {\n    background-color: #61b563;\n  }\n\n  &[data-variant='info'] {\n    background-color: #71c1d9;\n  }\n\n  &[data-variant='warning'] {\n    background-color: #eaa04a;\n  }\n\n  &[data-variant='danger'] {\n    background-color: #e12e28;\n  }\n\n  &[data-variant='black'] {\n    background-image: none;\n    background-color: #111;\n    color: #fff;\n    text-shadow: none;\n  }\n\n  &[data-variant='default'] {\n    border-color: #d7d7d7;\n    color: #444;\n    font-weight: 700;\n    text-shadow: 0 1px 0 white;\n  }\n"], ["\n  background-color: #ededed;\n  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.075));\n  border-color: transparent;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  color: white;\n  cursor: pointer;\n  display: inline-block;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0.05ex;\n  line-height: 1.42857;\n  margin-bottom: 0;\n  padding: 9px 12px;\n  text-align: center;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  &:focus,\n  &:active {\n    border-color: #66afe9;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),\n      0 0 8px rgba(102, 175, 233, 0.6);\n    outline: 0;\n  }\n\n  &[data-variant='primary'] {\n    background-color: #4e4e4e;\n  }\n\n  &[data-variant='primaryOutline'] {\n    background-color: #fff;\n    background-image: none;\n    border-color: #111;\n    color: #111;\n  }\n\n  &[data-variant='success'] {\n    background-color: #61b563;\n  }\n\n  &[data-variant='info'] {\n    background-color: #71c1d9;\n  }\n\n  &[data-variant='warning'] {\n    background-color: #eaa04a;\n  }\n\n  &[data-variant='danger'] {\n    background-color: #e12e28;\n  }\n\n  &[data-variant='black'] {\n    background-image: none;\n    background-color: #111;\n    color: #fff;\n    text-shadow: none;\n  }\n\n  &[data-variant='default'] {\n    border-color: #d7d7d7;\n    color: #444;\n    font-weight: 700;\n    text-shadow: 0 1px 0 white;\n  }\n"])));
 var Button = function (_a) {
-    var type = _a.type, onClick = _a.onClick, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children, disabled = _a.disabled;
-    return (core_1.jsx("button", { css: styledButton, type: "button", onClick: onClick, onBlur: onBlur, onFocus: onFocus, disabled: disabled, "data-testid": "button", "data-type": type || 'default' }, children));
+    var variant = _a.variant, type = _a.type, onClick = _a.onClick, onFocus = _a.onFocus, onBlur = _a.onBlur, children = _a.children, disabled = _a.disabled;
+    return (core_1.jsx("button", { css: styledButton, "data-testid": "button", "data-variant": variant || 'default', disabled: disabled, onBlur: onBlur, onClick: onClick, onFocus: onFocus, type: type || 'button' }, children));
 };
 exports["default"] = Button;
 var templateObject_1;

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A shared set of UI components for internal projects",
@@ -8,0 +8,0 @@ "main": "build/index.js",

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81792

increased by0.2%

Lines of code

1210

increased by0.17%

No dependency changes