@bigbinary/neeto-molecules 1.4.7 → 1.5.0
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.
- package/dist/HelpPopover.js +74 -0
- package/dist/HelpPopover.js.map +1 -0
- package/dist/cjs/HelpPopover.js +80 -0
- package/dist/cjs/HelpPopover.js.map +1 -0
- package/package.json +1 -1
- package/types/HelpPopover.d.ts +39 -0
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
import { Help } from '@bigbinary/neeto-icons';
|
|
3
|
+
import { Popover, Button, Typography } from '@bigbinary/neetoui';
|
|
4
|
+
|
|
5
|
+
function _extends() {
|
|
6
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
7
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
8
|
+
var source = arguments[i];
|
|
9
|
+
for (var key in source) {
|
|
10
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
11
|
+
target[key] = source[key];
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
return target;
|
|
16
|
+
};
|
|
17
|
+
return _extends.apply(this, arguments);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
var SIZE = {
|
|
21
|
+
"default": 16,
|
|
22
|
+
large: 20
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
var Title = Popover.Title;
|
|
26
|
+
var HelpPopover = function HelpPopover(_ref) {
|
|
27
|
+
var title = _ref.title,
|
|
28
|
+
_ref$size = _ref.size,
|
|
29
|
+
size = _ref$size === void 0 ? "default" : _ref$size,
|
|
30
|
+
description = _ref.description,
|
|
31
|
+
helpLinkProps = _ref.helpLinkProps,
|
|
32
|
+
popoverProps = _ref.popoverProps;
|
|
33
|
+
var helpIconRef = useRef();
|
|
34
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
|
35
|
+
className: "neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0",
|
|
36
|
+
"data-cy": "help-popover-button",
|
|
37
|
+
"data-testid": "help-popover-button",
|
|
38
|
+
icon: function icon() {
|
|
39
|
+
return /*#__PURE__*/React.createElement(Help, {
|
|
40
|
+
size: SIZE[size]
|
|
41
|
+
});
|
|
42
|
+
},
|
|
43
|
+
ref: helpIconRef,
|
|
44
|
+
style: "text"
|
|
45
|
+
}), /*#__PURE__*/React.createElement(Popover, _extends({
|
|
46
|
+
interactive: true,
|
|
47
|
+
appendTo: function appendTo() {
|
|
48
|
+
return document.body;
|
|
49
|
+
}
|
|
50
|
+
}, popoverProps, {
|
|
51
|
+
reference: helpIconRef
|
|
52
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: "flex flex-col"
|
|
54
|
+
}, title && /*#__PURE__*/React.createElement(Title, {
|
|
55
|
+
"data-cy": "help-popover-title",
|
|
56
|
+
"data-testid": "help-popover-title"
|
|
57
|
+
}, title), typeof description === "string" ? /*#__PURE__*/React.createElement(Typography, {
|
|
58
|
+
"data-cy": "help-popover-description",
|
|
59
|
+
"data-testid": "help-popover-description",
|
|
60
|
+
lineHeight: "normal",
|
|
61
|
+
style: "body2"
|
|
62
|
+
}, description) : description, helpLinkProps && /*#__PURE__*/React.createElement(Button, _extends({
|
|
63
|
+
className: "neeto-ui-mt-3",
|
|
64
|
+
size: "small"
|
|
65
|
+
}, helpLinkProps, {
|
|
66
|
+
"data-cy": "help-popover-link-button",
|
|
67
|
+
"data-testid": "help-popover-link-button",
|
|
68
|
+
style: "link",
|
|
69
|
+
target: "_blank"
|
|
70
|
+
})))));
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export { HelpPopover as default };
|
|
74
|
+
//# sourceMappingURL=HelpPopover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HelpPopover.js","sources":["../node_modules/@babel/runtime/helpers/esm/extends.js","../src/components/HelpPopover/constants.js","../src/components/HelpPopover/index.jsx"],"sourcesContent":["export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","export const SIZE = { default: 16, large: 20 };\n","import React, { useRef } from \"react\";\n\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, 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}) => {\n const helpIconRef = useRef();\n\n return (\n <>\n <Button\n className=\"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\"\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 />\n <Popover\n interactive\n appendTo={() => document.body}\n {...popoverProps}\n reference={helpIconRef}\n >\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\" ? (\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 size=\"small\"\n {...helpLinkProps}\n data-cy=\"help-popover-link-button\"\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n </Popover>\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\nexport default HelpPopover;\n"],"names":["SIZE","large","Title","Popover","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","helpIconRef","useRef","React","createElement","Fragment","Button","className","icon","Help","ref","style","_extends","interactive","appendTo","document","body","reference","Typography","lineHeight","target"],"mappings":"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"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var neetoIcons = require('@bigbinary/neeto-icons');
|
|
5
|
+
var neetoui = require('@bigbinary/neetoui');
|
|
6
|
+
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
+
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
+
|
|
11
|
+
function _extends() {
|
|
12
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
13
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
14
|
+
var source = arguments[i];
|
|
15
|
+
for (var key in source) {
|
|
16
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
17
|
+
target[key] = source[key];
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
return target;
|
|
22
|
+
};
|
|
23
|
+
return _extends.apply(this, arguments);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
var SIZE = {
|
|
27
|
+
"default": 16,
|
|
28
|
+
large: 20
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
var Title = neetoui.Popover.Title;
|
|
32
|
+
var HelpPopover = function HelpPopover(_ref) {
|
|
33
|
+
var title = _ref.title,
|
|
34
|
+
_ref$size = _ref.size,
|
|
35
|
+
size = _ref$size === void 0 ? "default" : _ref$size,
|
|
36
|
+
description = _ref.description,
|
|
37
|
+
helpLinkProps = _ref.helpLinkProps,
|
|
38
|
+
popoverProps = _ref.popoverProps;
|
|
39
|
+
var helpIconRef = React.useRef();
|
|
40
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
|
|
41
|
+
className: "neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0",
|
|
42
|
+
"data-cy": "help-popover-button",
|
|
43
|
+
"data-testid": "help-popover-button",
|
|
44
|
+
icon: function icon() {
|
|
45
|
+
return /*#__PURE__*/React__default["default"].createElement(neetoIcons.Help, {
|
|
46
|
+
size: SIZE[size]
|
|
47
|
+
});
|
|
48
|
+
},
|
|
49
|
+
ref: helpIconRef,
|
|
50
|
+
style: "text"
|
|
51
|
+
}), /*#__PURE__*/React__default["default"].createElement(neetoui.Popover, _extends({
|
|
52
|
+
interactive: true,
|
|
53
|
+
appendTo: function appendTo() {
|
|
54
|
+
return document.body;
|
|
55
|
+
}
|
|
56
|
+
}, popoverProps, {
|
|
57
|
+
reference: helpIconRef
|
|
58
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
59
|
+
className: "flex flex-col"
|
|
60
|
+
}, title && /*#__PURE__*/React__default["default"].createElement(Title, {
|
|
61
|
+
"data-cy": "help-popover-title",
|
|
62
|
+
"data-testid": "help-popover-title"
|
|
63
|
+
}, title), typeof description === "string" ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
|
|
64
|
+
"data-cy": "help-popover-description",
|
|
65
|
+
"data-testid": "help-popover-description",
|
|
66
|
+
lineHeight: "normal",
|
|
67
|
+
style: "body2"
|
|
68
|
+
}, description) : description, helpLinkProps && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
|
|
69
|
+
className: "neeto-ui-mt-3",
|
|
70
|
+
size: "small"
|
|
71
|
+
}, helpLinkProps, {
|
|
72
|
+
"data-cy": "help-popover-link-button",
|
|
73
|
+
"data-testid": "help-popover-link-button",
|
|
74
|
+
style: "link",
|
|
75
|
+
target: "_blank"
|
|
76
|
+
})))));
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
module.exports = HelpPopover;
|
|
80
|
+
//# sourceMappingURL=HelpPopover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HelpPopover.js","sources":["../../node_modules/@babel/runtime/helpers/esm/extends.js","../../src/components/HelpPopover/constants.js","../../src/components/HelpPopover/index.jsx"],"sourcesContent":["export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","export const SIZE = { default: 16, large: 20 };\n","import React, { useRef } from \"react\";\n\nimport { Help } from \"neetoicons\";\nimport { Button, Popover, 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}) => {\n const helpIconRef = useRef();\n\n return (\n <>\n <Button\n className=\"neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0\"\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 />\n <Popover\n interactive\n appendTo={() => document.body}\n {...popoverProps}\n reference={helpIconRef}\n >\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\" ? (\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 size=\"small\"\n {...helpLinkProps}\n data-cy=\"help-popover-link-button\"\n data-testid=\"help-popover-link-button\"\n style=\"link\"\n target=\"_blank\"\n />\n )}\n </div>\n </Popover>\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\nexport default HelpPopover;\n"],"names":["SIZE","large","Title","Popover","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","popoverProps","helpIconRef","useRef","React","createElement","Fragment","Button","className","icon","Help","ref","style","_extends","interactive","appendTo","document","body","reference","Typography","lineHeight","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.
|
|
3
|
+
"version": "1.5.0",
|
|
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>",
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ButtonProps, PopoverProps } from "@bigbinary/neetoui";
|
|
3
|
+
/**
|
|
4
|
+
*
|
|
5
|
+
* Can be used to show contextual help information within a popover when a user
|
|
6
|
+
*
|
|
7
|
+
* hovers on the help icon. This component can be used to provide guidance,
|
|
8
|
+
*
|
|
9
|
+
* instructions, or additional context without cluttering the main interface. We
|
|
10
|
+
*
|
|
11
|
+
* can also direct the user to a separate page for more information.
|
|
12
|
+
*
|
|
13
|
+
* 
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
*
|
|
17
|
+
* import HelpPopover from "@bigbinary/neeto-molecules/HelpPopover";
|
|
18
|
+
* const App = () => {
|
|
19
|
+
* return (
|
|
20
|
+
* <div>
|
|
21
|
+
* <HelpPopover
|
|
22
|
+
* title="What is KB keywords?"
|
|
23
|
+
* description="Keywords represent the key concepts of an article. These will be
|
|
24
|
+
* shown on the KB and will be used for SEO"
|
|
25
|
+
* helpLinkProps={{ label: "KB", href: "https://google.com/kb" }}
|
|
26
|
+
* />
|
|
27
|
+
* </div>
|
|
28
|
+
* );
|
|
29
|
+
* };
|
|
30
|
+
* @endexample
|
|
31
|
+
*/
|
|
32
|
+
const HelpPopover: React.FC<{
|
|
33
|
+
title?: string;
|
|
34
|
+
description?: React.ReactNode;
|
|
35
|
+
helpLinkProps?: ButtonProps;
|
|
36
|
+
popoverProps?: PopoverProps;
|
|
37
|
+
size?: "default" | "large";
|
|
38
|
+
}>;
|
|
39
|
+
export default HelpPopover;
|