@bigbinary/neeto-molecules 3.15.53 → 3.15.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,12 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import classnames from 'classnames';
3
4
  import Button from '@bigbinary/neetoui/Button';
4
5
  import { n } from './inject-css-DmrvuTKK.js';
5
6
  import { createElement } from 'react';
6
7
  import { jsx } from 'react/jsx-runtime';
7
8
 
8
- var css = ".neeto-molecules-button-group{border-radius:var(--neeto-ui-rounded-md);display:flex}.neeto-molecules-button-group .neeto-ui-btn{margin-left:-.0625rem}.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}";
9
+ var css = ".neeto-molecules-button-group{border-radius:var(--neeto-ui-rounded-md);display:flex}.neeto-molecules-button-group .neeto-ui-btn{margin-left:-.0625rem}.neeto-molecules-button-group .neeto-ui-btn.neeto-molecules-button-group__btn--active{--neeto-ui-btn-color:rgb(var(--neeto-ui-primary-500));--neeto-ui-btn-bg-color:rgb(var(--neeto-ui-primary-100));--neeto-ui-btn-hover-color:rgb(var(--neeto-ui-primary-500));--neeto-ui-btn-hover-bg-color:rgb(var(--neeto-ui-primary-100));--neeto-ui-btn-focus-color:rgb(var(--neeto-ui-primary-600));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}";
9
10
  n(css,{});
10
11
 
11
12
  var _excluded = ["key", "isActive"];
@@ -13,8 +14,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
13
14
  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; }
14
15
  var ButtonGroup = function ButtonGroup(_ref) {
15
16
  var buttons = _ref.buttons,
16
- _ref$style = _ref.style,
17
- style = _ref$style === void 0 ? "tertiary" : _ref$style,
18
17
  _ref$size = _ref.size,
19
18
  size = _ref$size === void 0 ? "medium" : _ref$size;
20
19
  return /*#__PURE__*/jsx("div", {
@@ -26,7 +25,10 @@ var ButtonGroup = function ButtonGroup(_ref) {
26
25
  return /*#__PURE__*/createElement(Button, _objectSpread({
27
26
  size: size,
28
27
  key: key,
29
- style: isActive ? "primary" : style
28
+ style: "tertiary",
29
+ className: classnames({
30
+ "neeto-molecules-button-group__btn--active": isActive
31
+ })
30
32
  }, buttonProps));
31
33
  })
32
34
  });
@@ -1 +1 @@
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;;;;"}
1
+ {"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./button-group.scss\";\n\nconst ButtonGroup = ({ buttons, size = \"medium\" }) => (\n <div className=\"neeto-molecules-button-group\">\n {buttons.map(({ key, isActive, ...buttonProps }) => (\n <Button\n {...{ size }}\n key={key}\n style=\"tertiary\"\n className={classnames({\n \"neeto-molecules-button-group__btn--active\": isActive,\n })}\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\nexport default ButtonGroup;\n"],"names":["ButtonGroup","_ref","buttons","_ref$size","size","_jsx","className","children","map","_ref2","key","isActive","buttonProps","_objectWithoutProperties","_excluded","_createElement","Button","_objectSpread","style","classnames"],"mappings":";;;;;;;;;;;;;;AAMA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAAC,SAAA,GAAAF,IAAA,CAAEG,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAAA,EAAA,oBAC7CE,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,8BAA8B;AAAAC,IAAAA,QAAA,EAC1CL,OAAO,CAACM,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;AACTQ,QAAAA,KAAK,EAAC,UAAU;QAChBZ,SAAS,EAAEa,UAAU,CAAC;AACpB,UAAA,2CAA2C,EAAER,QAAAA;SAC9C,CAAA;OACGC,EAAAA,WAAW,CAChB,CAAC,CAAA;KACH,CAAA;AAAC,GACC,CAAC,CAAA;AAAA;;;;"}
@@ -2,12 +2,13 @@
2
2
 
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
5
+ var classnames = require('classnames');
5
6
  var Button = require('@bigbinary/neetoui/Button');
6
7
  var injectCss = require('./inject-css-vQvjPR2x.js');
7
8
  var React = require('react');
8
9
  var jsxRuntime = require('react/jsx-runtime');
9
10
 
10
- var css = ".neeto-molecules-button-group{border-radius:var(--neeto-ui-rounded-md);display:flex}.neeto-molecules-button-group .neeto-ui-btn{margin-left:-.0625rem}.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}";
11
+ var css = ".neeto-molecules-button-group{border-radius:var(--neeto-ui-rounded-md);display:flex}.neeto-molecules-button-group .neeto-ui-btn{margin-left:-.0625rem}.neeto-molecules-button-group .neeto-ui-btn.neeto-molecules-button-group__btn--active{--neeto-ui-btn-color:rgb(var(--neeto-ui-primary-500));--neeto-ui-btn-bg-color:rgb(var(--neeto-ui-primary-100));--neeto-ui-btn-hover-color:rgb(var(--neeto-ui-primary-500));--neeto-ui-btn-hover-bg-color:rgb(var(--neeto-ui-primary-100));--neeto-ui-btn-focus-color:rgb(var(--neeto-ui-primary-600));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}";
11
12
  injectCss.n(css,{});
12
13
 
13
14
  var _excluded = ["key", "isActive"];
@@ -15,8 +16,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
15
16
  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; }
16
17
  var ButtonGroup = function ButtonGroup(_ref) {
17
18
  var buttons = _ref.buttons,
18
- _ref$style = _ref.style,
19
- style = _ref$style === void 0 ? "tertiary" : _ref$style,
20
19
  _ref$size = _ref.size,
21
20
  size = _ref$size === void 0 ? "medium" : _ref$size;
22
21
  return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -28,7 +27,10 @@ var ButtonGroup = function ButtonGroup(_ref) {
28
27
  return /*#__PURE__*/React.createElement(Button, _objectSpread({
29
28
  size: size,
30
29
  key: key,
31
- style: isActive ? "primary" : style
30
+ style: "tertiary",
31
+ className: classnames({
32
+ "neeto-molecules-button-group__btn--active": isActive
33
+ })
32
34
  }, buttonProps));
33
35
  })
34
36
  });
@@ -1 +1 @@
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;;;;"}
1
+ {"version":3,"file":"ButtonGroup.js","sources":["../../src/components/ButtonGroup/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport \"./button-group.scss\";\n\nconst ButtonGroup = ({ buttons, size = \"medium\" }) => (\n <div className=\"neeto-molecules-button-group\">\n {buttons.map(({ key, isActive, ...buttonProps }) => (\n <Button\n {...{ size }}\n key={key}\n style=\"tertiary\"\n className={classnames({\n \"neeto-molecules-button-group__btn--active\": isActive,\n })}\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\nexport default ButtonGroup;\n"],"names":["ButtonGroup","_ref","buttons","_ref$size","size","_jsx","className","children","map","_ref2","key","isActive","buttonProps","_objectWithoutProperties","_excluded","_createElement","Button","_objectSpread","style","classnames"],"mappings":";;;;;;;;;;;;;;;;AAMA,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAAC,SAAA,GAAAF,IAAA,CAAEG,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA,CAAA;AAAA,EAAA,oBAC7CE,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,8BAA8B;AAAAC,IAAAA,QAAA,EAC1CL,OAAO,CAACM,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;AACTQ,QAAAA,KAAK,EAAC,UAAU;QAChBZ,SAAS,EAAEa,UAAU,CAAC;AACpB,UAAA,2CAA2C,EAAER,QAAAA;SAC9C,CAAA;OACGC,EAAAA,WAAW,CAChB,CAAC,CAAA;KACH,CAAA;AAAC,GACC,CAAC,CAAA;AAAA;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neeto-molecules",
3
- "version": "3.15.53",
3
+ "version": "3.15.54",
4
4
  "description": "A package of reusable molecular components for neeto products.",
5
5
  "repository": "git@github.com:bigbinary/neeto-molecules.git",
6
6
  "author": "Amaljith K <amaljith.k@bigbinary.com>",
@@ -6,7 +6,6 @@ interface Button extends ButtonProps {
6
6
  isActive?: boolean;
7
7
  }
8
8
  interface ButtonGroupProps {
9
- style?: "secondary" | "tertiary";
10
9
  size?: "small" | "medium" | "large";
11
10
  buttons: Button[];
12
11
  }
@@ -34,7 +33,6 @@ interface ButtonGroupProps {
34
33
  * onClick: () => handleSwitch(),
35
34
  * },
36
35
  * ]}
37
- * style="tertiary"
38
36
  * size="medium"
39
37
  * />
40
38
  * );