@bigbinary/neeto-molecules 3.10.4 → 3.10.5

package/dist/ButtonGroup.js

@@ -0,0 +1,36 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import Button from '@bigbinary/neetoui/Button';
+import { n } from './inject-css-DmrvuTKK.js';
+import { createElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var css = ".neeto-molecules-button-group{border-radius:var(--neeto-ui-rounded-md);display:flex}.neeto-molecules-button-group .neeto-ui-btn{margin-left:-1px}.neeto-molecules-button-group .neeto-ui-btn.neeto-ui-btn--style-primary{z-index:1}.neeto-molecules-button-group .neeto-ui-btn:first-child{border-bottom-right-radius:0;border-left:0;border-top-right-radius:0;margin-left:0}.neeto-molecules-button-group .neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}.neeto-molecules-button-group .neeto-ui-btn:not(:first-child):not(:last-child){border-radius:0}";
+n(css,{});
+
+var _excluded = ["key", "isActive"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ButtonGroup = function ButtonGroup(_ref) {
+  var buttons = _ref.buttons,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? "tertiary" : _ref$style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size;
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-molecules-button-group",
+    children: buttons.map(function (_ref2) {
+      var key = _ref2.key,
+        isActive = _ref2.isActive,
+        buttonProps = _objectWithoutProperties(_ref2, _excluded);
+      return /*#__PURE__*/createElement(Button, _objectSpread({
+        size: size,
+        key: key,
+        style: isActive ? "primary" : style
+      }, buttonProps));
+    })
+  });
+};
+
+export { ButtonGroup as default };
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/index.jsx"],"sourcesContent":["import { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./button-group.scss\";\n\nconst ButtonGroup = ({ buttons, style = \"tertiary\", size = \"medium\" }) => (\n  <div className=\"neeto-molecules-button-group\">\n    {buttons.map(({ key, isActive, ...buttonProps }) => (\n      <Button\n        {...{ size }}\n        key={key}\n        style={isActive ? \"primary\" : style}\n        {...buttonProps}\n      />\n    ))}\n  </div>\n);\n\nButtonGroup.propTypes = {\n  /*\n   * Array of buttons to be rendered in the group. Each button should have a key, icon, isActive and onClick function.\n   */\n  buttons: PropTypes.arrayOf(\n    PropTypes.shape({\n      key: PropTypes.string,\n      icon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n      isActive: PropTypes.bool,\n      onClick: PropTypes.func,\n    })\n  ),\n  /*\n   * Size of the buttons in the group.\n   */\n  size: PropTypes.oneOf([\"small\", \"medium\", \"large\"]),\n  /*\n   * Style of the buttons in the group.\n   */\n  style: PropTypes.oneOf([\"secondary\", \"tertiary\"]),\n};\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","_ref","buttons","_ref$style","style","_ref$size","size","_jsx","className","children","map","_ref2","key","isActive","buttonProps","_objectWithoutProperties","_excluded","_createElement","Button","_objectSpread"],"mappings":";;;;;;;;;;;;;AAKA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAAC,UAAA,GAAAF,IAAA,CAAEG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,UAAA;IAAAE,SAAA,GAAAJ,IAAA,CAAEK,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAAA,EAAA,oBACjEE,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,8BAA8B;AAAAC,IAAAA,QAAA,EAC1CP,OAAO,CAACQ,GAAG,CAAC,UAAAC,KAAA,EAAA;AAAA,MAAA,IAAGC,GAAG,GAAAD,KAAA,CAAHC,GAAG;QAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,QAAAA,WAAW,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,MAAA,oBAC3CC,aAAA,CAACC,MAAM,EAAAC,aAAA,CAAA;AACCb,QAAAA,IAAI,EAAJA,IAAI;AACVM,QAAAA,GAAG,EAAEA,GAAI;AACTR,QAAAA,KAAK,EAAES,QAAQ,GAAG,SAAS,GAAGT,KAAAA;OAC1BU,EAAAA,WAAW,CAChB,CAAC,CAAA;KACH,CAAA;AAAC,GACC,CAAC,CAAA;AAAA;;;;"}

package/dist/cjs/ButtonGroup.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var Button = require('@bigbinary/neetoui/Button');
+var injectCss = require('./inject-css-vQvjPR2x.js');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var css = ".neeto-molecules-button-group{border-radius:var(--neeto-ui-rounded-md);display:flex}.neeto-molecules-button-group .neeto-ui-btn{margin-left:-1px}.neeto-molecules-button-group .neeto-ui-btn.neeto-ui-btn--style-primary{z-index:1}.neeto-molecules-button-group .neeto-ui-btn:first-child{border-bottom-right-radius:0;border-left:0;border-top-right-radius:0;margin-left:0}.neeto-molecules-button-group .neeto-ui-btn:last-child{border-bottom-left-radius:0;border-top-left-radius:0}.neeto-molecules-button-group .neeto-ui-btn:not(:first-child):not(:last-child){border-radius:0}";
+injectCss.n(css,{});
+
+var _excluded = ["key", "isActive"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ButtonGroup = function ButtonGroup(_ref) {
+  var buttons = _ref.buttons,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? "tertiary" : _ref$style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "neeto-molecules-button-group",
+    children: buttons.map(function (_ref2) {
+      var key = _ref2.key,
+        isActive = _ref2.isActive,
+        buttonProps = _objectWithoutProperties(_ref2, _excluded);
+      return /*#__PURE__*/React.createElement(Button, _objectSpread({
+        size: size,
+        key: key,
+        style: isActive ? "primary" : style
+      }, buttonProps));
+    })
+  });
+};
+
+module.exports = ButtonGroup;
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/cjs/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../src/components/ButtonGroup/index.jsx"],"sourcesContent":["import { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./button-group.scss\";\n\nconst ButtonGroup = ({ buttons, style = \"tertiary\", size = \"medium\" }) => (\n  <div className=\"neeto-molecules-button-group\">\n    {buttons.map(({ key, isActive, ...buttonProps }) => (\n      <Button\n        {...{ size }}\n        key={key}\n        style={isActive ? \"primary\" : style}\n        {...buttonProps}\n      />\n    ))}\n  </div>\n);\n\nButtonGroup.propTypes = {\n  /*\n   * Array of buttons to be rendered in the group. Each button should have a key, icon, isActive and onClick function.\n   */\n  buttons: PropTypes.arrayOf(\n    PropTypes.shape({\n      key: PropTypes.string,\n      icon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n      isActive: PropTypes.bool,\n      onClick: PropTypes.func,\n    })\n  ),\n  /*\n   * Size of the buttons in the group.\n   */\n  size: PropTypes.oneOf([\"small\", \"medium\", \"large\"]),\n  /*\n   * Style of the buttons in the group.\n   */\n  style: PropTypes.oneOf([\"secondary\", \"tertiary\"]),\n};\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","_ref","buttons","_ref$style","style","_ref$size","size","_jsx","className","children","map","_ref2","key","isActive","buttonProps","_objectWithoutProperties","_excluded","_createElement","Button","_objectSpread"],"mappings":";;;;;;;;;;;;;;;AAKA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAAC,UAAA,GAAAF,IAAA,CAAEG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,UAAA;IAAAE,SAAA,GAAAJ,IAAA,CAAEK,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAAA,EAAA,oBACjEE,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,8BAA8B;AAAAC,IAAAA,QAAA,EAC1CP,OAAO,CAACQ,GAAG,CAAC,UAAAC,KAAA,EAAA;AAAA,MAAA,IAAGC,GAAG,GAAAD,KAAA,CAAHC,GAAG;QAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;AAAKC,QAAAA,WAAW,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;AAAA,MAAA,oBAC3CC,mBAAA,CAACC,MAAM,EAAAC,aAAA,CAAA;AACCb,QAAAA,IAAI,EAAJA,IAAI;AACVM,QAAAA,GAAG,EAAEA,GAAI;AACTR,QAAAA,KAAK,EAAES,QAAQ,GAAG,SAAS,GAAGT,KAAAA;OAC1BU,EAAAA,WAAW,CAChB,CAAC,CAAA;KACH,CAAA;AAAC,GACC,CAAC,CAAA;AAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.10.4",
+  "version": "3.10.5",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -50,7 +50,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "7.19.0",
     "@bigbinary/babel-preset-neeto": "^1.0.3",
-    "@bigbinary/eslint-plugin-neeto": "1.5.5",
+    "@bigbinary/eslint-plugin-neeto": "1.5.6",
     "@bigbinary/neeto-audit-frontend": "^2.0.18",
     "@bigbinary/neeto-cist": "1.0.11",
     "@bigbinary/neeto-commons-frontend": "4.4.6",

package/types/ButtonGroup.d.ts

@@ -0,0 +1,45 @@
+import { ButtonProps } from '@bigbinary/neetoui';
+import React from 'react';
+
+interface Button extends ButtonProps {
+  key: string;
+  isActive?: boolean;
+}
+interface ButtonGroupProps {
+  style?: "secondary" | "tertiary";
+  size?: "small" | "medium" | "large";
+  buttons: Button[];
+}
+/**
+ *
+ * ButtonGroup component is a wrapper component that groups icon only buttons and
+ *
+ * highlights the active button.
+ *
+ * @example 
+ *
+ * import ButtonGroup from "@bigbinary/neeto-molecules/ButtonGroup";
+ * 
+ * const Component = () => (
+ *   <ButtonGroup
+ *     buttons={[
+ *       {
+ *         key: "calendar",
+ *         icon: Calendar,
+ *         onClick: () => handleSwitch(),
+ *       },
+ *       {
+ *         key: "list",
+ *         icon: List,
+ *         onClick: () => handleSwitch(),
+ *       },
+ *     ]}
+ *     style="tertiary"
+ *     size="medium"
+ *   />
+ * );
+ * @endexample
+*/
+declare const ButtonGroup: React.FC<ButtonGroupProps>;
+
+export { type ButtonGroupProps, ButtonGroup as default };