@happeouikit/buttons - npm Package Compare versions

Comparing version 1.0.15 to 2.0.0

CHANGELOG.md

 # Changelog
 
+## 2.0.0
+
+- [Update] primary button to maintain its blue background when it has icon
+- [Added] tertiary button as an extension of secondary button
+
 ## 1.0.15
@@ -4,0 +9,0 @@

dist/Buttons.js

@@ -1,3 +0,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import React from "react";
@@ -7,4 +12,6 @@ import PropTypes from "prop-types";
 import { BodyUI, TextZeta } from "@happeouikit/typography";
-import { active, white, gray01, gray04, gray07, gray06, alert, success, warn, darken, lighten, toBgLight, black, black20, black50, gray08, gray05 } from "@happeouikit/colors";
+import { active, white, gray01, gray04, gray07, gray06, alert, success, warn, darken, lighten, black, black20, black50, gray08, gray05 } from "@happeouikit/colors";
 import { IconArrowDropDown } from "@happeouikit/icons";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -21,7 +28,8 @@ var IconGen = function IconGen(props) {
     if (props.iconPosition) {
-      return React.createElement(IconStyle, {
-        iconPosition: props.iconPosition
-      }, React.createElement(Icon, iconDimensions));
+      return /*#__PURE__*/_jsx(IconStyle, {
+        iconPosition: props.iconPosition,
+        children: /*#__PURE__*/_jsx(Icon, _objectSpread({}, iconDimensions))
+      });
     } else {
-      return React.createElement(Icon, iconDimensions);
+      return /*#__PURE__*/_jsx(Icon, _objectSpread({}, iconDimensions));
     }
@@ -54,10 +62,16 @@ }
   var Text = getTextComponent(size);
-  return React.createElement("button", props, React.createElement(Wrapper, {
-    iconPosition: iconPosition
-  }, React.createElement("span", null, React.createElement(IconGen, {
-    icon: icon,
-    iconPosition: iconPosition
-  })), React.createElement(Text, {
-    color: "inherit"
-  }, text)));
+  return /*#__PURE__*/_jsx("button", _objectSpread({}, props, {
+    children: /*#__PURE__*/_jsxs(Wrapper, {
+      iconPosition: iconPosition,
+      children: [/*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(IconGen, {
+          icon: icon,
+          iconPosition: iconPosition
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        color: "inherit",
+        children: text
+      })]
+    })
+  }));
 };
@@ -130,5 +144,5 @@
   componentId: "ohujtu-1"
-})(["border-radius:6px;padding:", ";white-space:nowrap;color:", ";cursor:pointer;box-shadow:none;text-shadow:none;border:1px solid transparent;transition:all 0.2s cubic-bezier(0.215,0.61,0.355,1);outline:none;:active{transform:none;box-shadow:none;outline:none;}:disabled:hover{cursor:not-allowed;background:", ";}:disabled{background:", ";}:disabled:hover{box-shadow:none;}margin:1px;"], function (_ref3) {
+})(["border-radius:6px;padding:", ";white-space:nowrap;height:fit-content;color:", ";cursor:pointer;box-shadow:none;text-shadow:none;border:1px solid transparent;transition:all 0.2s cubic-bezier(0.215,0.61,0.355,1);outline:none;:active{transform:none;box-shadow:none;outline:none;}:disabled:hover{cursor:not-allowed;background:", ";}:disabled{background:", ";}:disabled:hover{box-shadow:none;}margin:1px;"], function (_ref3) {
   var size = _ref3.size;
-  return size === "small" ? "6px 8px" : "9px 16px";
+  return size === "small" ? "6px 8px" : "10px 16px";
 }, white, gray06, gray07);
@@ -161,6 +175,4 @@ var Wrapper = styled.div.withConfig({
   var _ref5$type = _ref5.type,
-      type = _ref5$type === void 0 ? "default" : _ref5$type,
-      _ref5$icon = _ref5.icon,
-      icon = _ref5$icon === void 0 ? false : _ref5$icon;
-  if (type === "dark") return "\n      background: ".concat(themeMap[type].enabled, ";\n      color: ").concat(white, ";\n      fill: ").concat(white, ";\n      :hover {\n       background: ").concat(themeMap[type].hover, ";\n       }\n      :active {\n        background: ").concat(themeMap[type].active, ";\n        box-shadow: none !important;\n      }\n      :focus {\n        box-shadow: 0 0 0 1px ").concat(lighten(active, 0.3), ";\n        border: 1px solid ").concat(white, ";\n      }\n    ");else return "\n      background: ".concat(icon ? "transparent" : themeMap[type].enabled, ";\n      color: ").concat(icon ? themeMap[type].enabled : white, ";\n      fill: ").concat(icon ? themeMap[type].enabled : white, ";\n      :hover {\n       background: ").concat(icon ? toBgLight(active) : themeMap[type].hover, ";\n       }\n      :active {\n        background: ").concat(icon ? toBgLight(active) : themeMap[type].active, ";\n        box-shadow: none !important;\n      }\n      :focus {\n        box-shadow: 0 0 0 1px ").concat(lighten(active, 0.3), ";\n        border: 1px solid ").concat(white, ";\n      }\n    ");
+      type = _ref5$type === void 0 ? "default" : _ref5$type;
+  if (type === "dark") return "\n      background: ".concat(themeMap[type].enabled, ";\n      color: ").concat(white, ";\n      fill: ").concat(white, ";\n      :hover {\n       background: ").concat(themeMap[type].hover, ";\n       }\n      :active {\n        background: ").concat(themeMap[type].active, ";\n        box-shadow: none !important;\n      }\n      :focus {\n        box-shadow: 0 0 0 1px ").concat(lighten(active, 0.3), ";\n        border: 1px solid ").concat(white, ";\n      }\n    ");else return "\n      background: ".concat(themeMap[type].enabled, ";\n      color: ").concat(white, ";\n      fill: ").concat(white, ";\n      :hover {\n       background: ").concat(themeMap[type].hover, ";\n       }\n      :active {\n        background: ").concat(themeMap[type].active, ";\n        box-shadow: none !important;\n      }\n      :focus {\n        box-shadow: 0 0 0 1px ").concat(lighten(active, 0.3), ";\n        border: 1px solid ").concat(white, ";\n      }\n    ");
 });
@@ -172,7 +184,9 @@ export var ButtonSecondary = styled(ButtonBase).withConfig({
   var _ref6$type = _ref6.type,
-      type = _ref6$type === void 0 ? "default" : _ref6$type,
-      _ref6$icon = _ref6.icon,
-      icon = _ref6$icon === void 0 ? false : _ref6$icon;
-  return "\n    color: ".concat(icon ? gray01 : themeMap[type].enabled, ";\n    fill:  ").concat(icon ? gray01 : themeMap[type].enabled, ";\n    :hover {\n      background: ").concat(lighten(themeMap[type].enabled, 0.9), ";\n      color: ").concat(themeMap[type].enabled, ";\n      fill: ").concat(themeMap[type].enabled, ";\n    }\n    :active {\n      color: ").concat(themeMap[type].active, ";\n       fill: ").concat(themeMap[type].active, ";\n      background: ").concat(lighten(themeMap[type].enabled, 0.8), ";\n      outline: none;\n      border-color: transparent;\n      box-shadow: none !important;\n    }\n    :disabled, :disabled:hover {\n      color: ").concat(gray06, ";\n      background: transparent;\n    }\n   :focus {\n      box-shadow: 0 0 0 1px ").concat(lighten(active, 0.3), ";\n    }\n   ");
+      type = _ref6$type === void 0 ? "default" : _ref6$type;
+  return "\n    color: ".concat(themeMap[type].enabled, ";\n    fill: ").concat(themeMap[type].enabled, ";\n    :hover {\n      background: ").concat(lighten(themeMap[type].enabled, 0.9), ";\n      color: ").concat(themeMap[type].enabled, ";\n      fill: ").concat(themeMap[type].enabled, ";\n    }\n    :active {\n      color: ").concat(themeMap[type].active, ";\n       fill: ").concat(themeMap[type].active, ";\n      background: ").concat(lighten(themeMap[type].enabled, 0.8), ";\n      outline: none;\n      border-color: transparent;\n      box-shadow: none !important;\n    }\n    :disabled, :disabled:hover {\n      color: ").concat(gray06, ";\n      fill: ").concat(gray06, ";\n      background: transparent;\n    }\n   :focus {\n      box-shadow: 0 0 0 1px ").concat(lighten(active, 0.3), ";\n    }\n   ");
 });
+export var ButtonTertiary = styled(ButtonSecondary).withConfig({
+  displayName: "Buttons__ButtonTertiary",
+  componentId: "ohujtu-5"
+})(["color:", ";fill:", ";"], gray01, gray01);
 export var IconButton = function IconButton(_ref7) {
@@ -190,10 +204,12 @@ var icon = _ref7.icon,
   };
-  return React.createElement(IconButtonBase, _extends({
+  return /*#__PURE__*/_jsxs(IconButtonBase, _objectSpread({
     className: className,
     isActionIcon: isActionIcon
-  }, rest), React.createElement(Icon, iconDimensions), withMenu && React.createElement(IconArrowDropDown, null));
+  }, rest, {
+    children: [/*#__PURE__*/_jsx(Icon, _objectSpread({}, iconDimensions)), withMenu && /*#__PURE__*/_jsx(IconArrowDropDown, {})]
+  }));
 };
 var IconButtonBase = styled.button.withConfig({
   displayName: "Buttons__IconButtonBase",
-  componentId: "ohujtu-5"
+  componentId: "ohujtu-6"
 })(["background:transparent;padding:", ";border-radius:6px;border:none;cursor:pointer;svg{vertical-align:top;font-size:20px;}:active{outline:none;border:none !important;box-shadow:none !important;}:focus{outline:none;}:disabled,:disabled:hover{cursor:not-allowed;}", ""], function (_ref8) {
@@ -200,0 +216,0 @@ var isActionIcon = _ref8.isActionIcon;

dist/index.js

@@ -1,1 +0,1 @@
-export { default as Button, ButtonPrimary, ButtonSecondary, IconButton } from "./Buttons";
+export { default as Button, ButtonPrimary, ButtonSecondary, ButtonTertiary, IconButton } from "./Buttons";

package.json

 {
   "name": "@happeouikit/buttons",
-  "version": "1.0.15",
+  "version": "2.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/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

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

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

13069

increased by10.45%

Lines of code

210

increased by7.14%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes