@bigbinary/neeto-molecules 1.13.15 → 1.13.17

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.
@@ -12,7 +12,7 @@ var SIZE = {
12
12
  large: 20
13
13
  };
14
14
 
15
- var _excluded = ["title", "size", "description", "helpLinkProps", "popoverProps", "className"];
15
+ var _excluded = ["title", "size", "description", "helpLinkProps", "popoverProps", "className", "iconColor", "icon"];
16
16
  var Title = Popover.Title;
17
17
  var HelpPopover = function HelpPopover(_ref) {
18
18
  var title = _ref.title,
@@ -22,17 +22,24 @@ var HelpPopover = function HelpPopover(_ref) {
22
22
  helpLinkProps = _ref.helpLinkProps,
23
23
  popoverProps = _ref.popoverProps,
24
24
  className = _ref.className,
25
+ _ref$iconColor = _ref.iconColor,
26
+ iconColor = _ref$iconColor === void 0 ? "#1f1f1f" : _ref$iconColor,
27
+ _ref$icon = _ref.icon,
28
+ icon = _ref$icon === void 0 ? Help : _ref$icon,
25
29
  otherProps = _objectWithoutProperties(_ref, _excluded);
26
30
  var helpIconRef = useRef();
27
31
  var isCompact = isNotPresent(title) && isNotPresent(helpLinkProps);
32
+ var Icon = function Icon() {
33
+ var Component = icon;
34
+ return /*#__PURE__*/React__default.createElement(Component, {
35
+ color: iconColor,
36
+ size: SIZE[size]
37
+ });
38
+ };
28
39
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, _extends({}, otherProps, {
29
40
  "data-cy": "help-popover-button",
30
41
  "data-testid": "help-popover-button",
31
- icon: function icon() {
32
- return /*#__PURE__*/React__default.createElement(Help, {
33
- size: SIZE[size]
34
- });
35
- },
42
+ icon: Icon,
36
43
  ref: helpIconRef,
37
44
  style: "text",
38
45
  className: classnames("neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0", className)
@@ -1 +1 @@
1
- {"version":3,"file":"HelpPopover.js","sources":["../src/components/HelpPopover/constants.js","../src/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import React, { useRef } from \"react\";\n\nimport classNames from \"classnames\";\nimport { isNotPresent } from \"neetocist\";\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport { SIZE } from \"./constants\";\n\nconst { Title } = Popover;\n\nconst HelpPopover = ({\n title,\n size = \"default\",\n description,\n helpLinkProps,\n popoverProps,\n className,\n ...otherProps\n}) => {\n const helpIconRef = useRef();\n\n const isCompact = isNotPresent(title) && isNotPresent(helpLinkProps);\n\n return (\n <>\n <Button\n {...otherProps}\n data-cy=\"help-popover-button\"\n data-testid=\"help-popover-button\"\n icon={() => <Help size={SIZE[size]} />}\n ref={helpIconRef}\n style=\"text\"\n className={classNames(\n \"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\",\n className\n )}\n />\n <Tooltip\n appendTo={() => document.body}\n {...popoverProps}\n interactive\n arrow={isCompact ? undefined : true}\n className={classNames({ [\"neeto-ui-popover\"]: !isCompact })}\n reference={helpIconRef}\n role=\"tooltip\"\n theme={isCompact ? \"dark\" : \"light\"}\n content={\n <div className=\"flex flex-col\">\n {title && (\n <Title\n data-cy=\"help-popover-title\"\n data-testid=\"help-popover-title\"\n >\n {title}\n </Title>\n )}\n {typeof description === \"string\" && !isCompact ? (\n <Typography\n data-cy=\"help-popover-description\"\n data-testid=\"help-popover-description\"\n lineHeight=\"normal\"\n style=\"body2\"\n >\n {description}\n </Typography>\n ) : (\n description\n )}\n {helpLinkProps && (\n <Button\n className=\"neeto-ui-mt-3\"\n data-cy=\"help-popover-link-button\"\n label=\"View help article\"\n size=\"small\"\n {...helpLinkProps}\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n }\n />\n </>\n );\n};\n\nHelpPopover.propTypes = {\n /**\n * To set the title of the help popover.\n */\n title: PropTypes.string,\n /**\n * To set the size of the popover help icon.\n */\n size: PropTypes.oneOf([\"default\", \"large\"]),\n /**\n * To set the description of the popover, this can be a string or a custom component.\n */\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /**\n * To set the props of the help link which is displayed below the description.\n */\n helpLinkProps: PropTypes.object,\n /**\n * To set the props of the popover to customize it further.\n */\n popoverProps: PropTypes.object,\n /**\n * Additional classes passed on to the help button element.\n */\n className: PropTypes.string,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","Title","Popover","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","className","otherProps","_objectWithoutProperties","_excluded","helpIconRef","useRef","isCompact","isNotPresent","React","createElement","Fragment","Button","_extends","icon","Help","ref","style","classNames","Tooltip","appendTo","document","body","interactive","arrow","undefined","_defineProperty","reference","role","theme","content","Typography","lineHeight","label","target"],"mappings":"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"}
1
+ {"version":3,"file":"HelpPopover.js","sources":["../src/components/HelpPopover/constants.js","../src/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import React, { useRef } from \"react\";\n\nimport classNames from \"classnames\";\nimport { isNotPresent } from \"neetocist\";\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport { SIZE } from \"./constants\";\n\nconst { Title } = Popover;\n\nconst HelpPopover = ({\n title,\n size = \"default\",\n description,\n helpLinkProps,\n popoverProps,\n className,\n iconColor = \"#1f1f1f\",\n icon = Help,\n ...otherProps\n}) => {\n const helpIconRef = useRef();\n\n const isCompact = isNotPresent(title) && isNotPresent(helpLinkProps);\n\n const Icon = () => {\n const Component = icon;\n\n return <Component color={iconColor} size={SIZE[size]} />;\n };\n\n return (\n <>\n <Button\n {...otherProps}\n data-cy=\"help-popover-button\"\n data-testid=\"help-popover-button\"\n icon={Icon}\n ref={helpIconRef}\n style=\"text\"\n className={classNames(\n \"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\",\n className\n )}\n />\n <Tooltip\n appendTo={() => document.body}\n {...popoverProps}\n interactive\n arrow={isCompact ? undefined : true}\n className={classNames({ [\"neeto-ui-popover\"]: !isCompact })}\n reference={helpIconRef}\n role=\"tooltip\"\n theme={isCompact ? \"dark\" : \"light\"}\n content={\n <div className=\"flex flex-col\">\n {title && (\n <Title\n data-cy=\"help-popover-title\"\n data-testid=\"help-popover-title\"\n >\n {title}\n </Title>\n )}\n {typeof description === \"string\" && !isCompact ? (\n <Typography\n data-cy=\"help-popover-description\"\n data-testid=\"help-popover-description\"\n lineHeight=\"normal\"\n style=\"body2\"\n >\n {description}\n </Typography>\n ) : (\n description\n )}\n {helpLinkProps && (\n <Button\n className=\"neeto-ui-mt-3\"\n data-cy=\"help-popover-link-button\"\n label=\"View help article\"\n size=\"small\"\n {...helpLinkProps}\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n }\n />\n </>\n );\n};\n\nHelpPopover.propTypes = {\n /**\n * To set the title of the help popover.\n */\n title: PropTypes.string,\n /**\n * To set the size of the popover help icon.\n */\n size: PropTypes.oneOf([\"default\", \"large\"]),\n /**\n * To set the description of the popover, this can be a string or a custom component.\n */\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /**\n * To set the props of the help link which is displayed below the description.\n */\n helpLinkProps: PropTypes.object,\n /**\n * To set the props of the popover to customize it further.\n */\n popoverProps: PropTypes.object,\n /**\n * Additional classes passed on to the help button element.\n */\n className: PropTypes.string,\n /**\n * To set the default icon color of the help icon.\n */\n iconColor: PropTypes.string,\n /**\n * To customize the icon of the help popover.\n */\n icon: PropTypes.node,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","Title","Popover","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","className","_ref$iconColor","iconColor","_ref$icon","icon","Help","otherProps","_objectWithoutProperties","_excluded","helpIconRef","useRef","isCompact","isNotPresent","Icon","Component","React","createElement","color","Fragment","Button","_extends","ref","style","classNames","Tooltip","appendTo","document","body","interactive","arrow","undefined","_defineProperty","reference","role","theme","content","Typography","lineHeight","label","target"],"mappings":"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"}
@@ -19,7 +19,7 @@ var SIZE = {
19
19
  large: 20
20
20
  };
21
21
 
22
- var _excluded = ["title", "size", "description", "helpLinkProps", "popoverProps", "className"];
22
+ var _excluded = ["title", "size", "description", "helpLinkProps", "popoverProps", "className", "iconColor", "icon"];
23
23
  var Title = neetoui.Popover.Title;
24
24
  var HelpPopover = function HelpPopover(_ref) {
25
25
  var title = _ref.title,
@@ -29,17 +29,24 @@ var HelpPopover = function HelpPopover(_ref) {
29
29
  helpLinkProps = _ref.helpLinkProps,
30
30
  popoverProps = _ref.popoverProps,
31
31
  className = _ref.className,
32
+ _ref$iconColor = _ref.iconColor,
33
+ iconColor = _ref$iconColor === void 0 ? "#1f1f1f" : _ref$iconColor,
34
+ _ref$icon = _ref.icon,
35
+ icon = _ref$icon === void 0 ? neetoIcons.Help : _ref$icon,
32
36
  otherProps = objectWithoutProperties._objectWithoutProperties(_ref, _excluded);
33
37
  var helpIconRef = React.useRef();
34
38
  var isCompact = neetoCist.isNotPresent(title) && neetoCist.isNotPresent(helpLinkProps);
39
+ var Icon = function Icon() {
40
+ var Component = icon;
41
+ return /*#__PURE__*/React__default["default"].createElement(Component, {
42
+ color: iconColor,
43
+ size: SIZE[size]
44
+ });
45
+ };
35
46
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends._extends({}, otherProps, {
36
47
  "data-cy": "help-popover-button",
37
48
  "data-testid": "help-popover-button",
38
- icon: function icon() {
39
- return /*#__PURE__*/React__default["default"].createElement(neetoIcons.Help, {
40
- size: SIZE[size]
41
- });
42
- },
49
+ icon: Icon,
43
50
  ref: helpIconRef,
44
51
  style: "text",
45
52
  className: classnames__default["default"]("neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0", className)
@@ -1 +1 @@
1
- {"version":3,"file":"HelpPopover.js","sources":["../../src/components/HelpPopover/constants.js","../../src/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import React, { useRef } from \"react\";\n\nimport classNames from \"classnames\";\nimport { isNotPresent } from \"neetocist\";\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport { SIZE } from \"./constants\";\n\nconst { Title } = Popover;\n\nconst HelpPopover = ({\n title,\n size = \"default\",\n description,\n helpLinkProps,\n popoverProps,\n className,\n ...otherProps\n}) => {\n const helpIconRef = useRef();\n\n const isCompact = isNotPresent(title) && isNotPresent(helpLinkProps);\n\n return (\n <>\n <Button\n {...otherProps}\n data-cy=\"help-popover-button\"\n data-testid=\"help-popover-button\"\n icon={() => <Help size={SIZE[size]} />}\n ref={helpIconRef}\n style=\"text\"\n className={classNames(\n \"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\",\n className\n )}\n />\n <Tooltip\n appendTo={() => document.body}\n {...popoverProps}\n interactive\n arrow={isCompact ? undefined : true}\n className={classNames({ [\"neeto-ui-popover\"]: !isCompact })}\n reference={helpIconRef}\n role=\"tooltip\"\n theme={isCompact ? \"dark\" : \"light\"}\n content={\n <div className=\"flex flex-col\">\n {title && (\n <Title\n data-cy=\"help-popover-title\"\n data-testid=\"help-popover-title\"\n >\n {title}\n </Title>\n )}\n {typeof description === \"string\" && !isCompact ? (\n <Typography\n data-cy=\"help-popover-description\"\n data-testid=\"help-popover-description\"\n lineHeight=\"normal\"\n style=\"body2\"\n >\n {description}\n </Typography>\n ) : (\n description\n )}\n {helpLinkProps && (\n <Button\n className=\"neeto-ui-mt-3\"\n data-cy=\"help-popover-link-button\"\n label=\"View help article\"\n size=\"small\"\n {...helpLinkProps}\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n }\n />\n </>\n );\n};\n\nHelpPopover.propTypes = {\n /**\n * To set the title of the help popover.\n */\n title: PropTypes.string,\n /**\n * To set the size of the popover help icon.\n */\n size: PropTypes.oneOf([\"default\", \"large\"]),\n /**\n * To set the description of the popover, this can be a string or a custom component.\n */\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /**\n * To set the props of the help link which is displayed below the description.\n */\n helpLinkProps: PropTypes.object,\n /**\n * To set the props of the popover to customize it further.\n */\n popoverProps: PropTypes.object,\n /**\n * Additional classes passed on to the help button element.\n */\n className: PropTypes.string,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","Title","Popover","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","className","otherProps","_objectWithoutProperties","_excluded","helpIconRef","useRef","isCompact","isNotPresent","React","createElement","Fragment","Button","_extends","icon","Help","ref","style","classNames","Tooltip","appendTo","document","body","interactive","arrow","undefined","_defineProperty","reference","role","theme","content","Typography","lineHeight","label","target"],"mappings":"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"}
1
+ {"version":3,"file":"HelpPopover.js","sources":["../../src/components/HelpPopover/constants.js","../../src/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import React, { useRef } from \"react\";\n\nimport classNames from \"classnames\";\nimport { isNotPresent } from \"neetocist\";\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport { SIZE } from \"./constants\";\n\nconst { Title } = Popover;\n\nconst HelpPopover = ({\n title,\n size = \"default\",\n description,\n helpLinkProps,\n popoverProps,\n className,\n iconColor = \"#1f1f1f\",\n icon = Help,\n ...otherProps\n}) => {\n const helpIconRef = useRef();\n\n const isCompact = isNotPresent(title) && isNotPresent(helpLinkProps);\n\n const Icon = () => {\n const Component = icon;\n\n return <Component color={iconColor} size={SIZE[size]} />;\n };\n\n return (\n <>\n <Button\n {...otherProps}\n data-cy=\"help-popover-button\"\n data-testid=\"help-popover-button\"\n icon={Icon}\n ref={helpIconRef}\n style=\"text\"\n className={classNames(\n \"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\",\n className\n )}\n />\n <Tooltip\n appendTo={() => document.body}\n {...popoverProps}\n interactive\n arrow={isCompact ? undefined : true}\n className={classNames({ [\"neeto-ui-popover\"]: !isCompact })}\n reference={helpIconRef}\n role=\"tooltip\"\n theme={isCompact ? \"dark\" : \"light\"}\n content={\n <div className=\"flex flex-col\">\n {title && (\n <Title\n data-cy=\"help-popover-title\"\n data-testid=\"help-popover-title\"\n >\n {title}\n </Title>\n )}\n {typeof description === \"string\" && !isCompact ? (\n <Typography\n data-cy=\"help-popover-description\"\n data-testid=\"help-popover-description\"\n lineHeight=\"normal\"\n style=\"body2\"\n >\n {description}\n </Typography>\n ) : (\n description\n )}\n {helpLinkProps && (\n <Button\n className=\"neeto-ui-mt-3\"\n data-cy=\"help-popover-link-button\"\n label=\"View help article\"\n size=\"small\"\n {...helpLinkProps}\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n }\n />\n </>\n );\n};\n\nHelpPopover.propTypes = {\n /**\n * To set the title of the help popover.\n */\n title: PropTypes.string,\n /**\n * To set the size of the popover help icon.\n */\n size: PropTypes.oneOf([\"default\", \"large\"]),\n /**\n * To set the description of the popover, this can be a string or a custom component.\n */\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n /**\n * To set the props of the help link which is displayed below the description.\n */\n helpLinkProps: PropTypes.object,\n /**\n * To set the props of the popover to customize it further.\n */\n popoverProps: PropTypes.object,\n /**\n * Additional classes passed on to the help button element.\n */\n className: PropTypes.string,\n /**\n * To set the default icon color of the help icon.\n */\n iconColor: PropTypes.string,\n /**\n * To customize the icon of the help popover.\n */\n icon: PropTypes.node,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","Title","Popover","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","className","_ref$iconColor","iconColor","_ref$icon","icon","Help","otherProps","_objectWithoutProperties","_excluded","helpIconRef","useRef","isCompact","isNotPresent","Icon","Component","React","createElement","color","Fragment","Button","_extends","ref","style","classNames","Tooltip","appendTo","document","body","interactive","arrow","undefined","_defineProperty","reference","role","theme","content","Typography","lineHeight","label","target"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neeto-molecules",
3
- "version": "1.13.15",
3
+ "version": "1.13.17",
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>",
@@ -36,5 +36,7 @@ const HelpPopover: React.FC<{
36
36
  popoverProps?: PopoverProps;
37
37
  size?: "default" | "large";
38
38
  className?: string;
39
+ icon?: React.ReactNode;
40
+ iconColor?: string;
39
41
  }>;
40
42
  export default HelpPopover;