BoxTextInput: Add info icon tooltip

decred · May 11, 2022 · b74e1f2 · b74e1f2
1 parent a4bc6fe
commit b74e1f2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/components/BoxTextInput/BoxTextInput.jsx b/src/components/BoxTextInput/BoxTextInput.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 import Icon from "../Icon/Icon.jsx";
+import Tooltip from "../Tooltip/Tooltip.jsx";
 
 const FormWrapper = ({ className, onSubmit, children }) => {
   return (
@@ -31,6 +32,8 @@ const BoxTextInput = ({
   searchInput,
   className,
   inputClassName,
+  tooltipInfo,
+  tooltipPlacement,
   ...props
 }) => {
   const handleSubmit = (e) => {
@@ -64,6 +67,13 @@ const BoxTextInput = ({
           <Icon type="search" />
         </button>
       )}
+      {tooltipInfo && (
+        <span className={styles.boxtextinputButton}>
+          <Tooltip content={tooltipInfo} placement={tooltipPlacement}>
+            <Icon type="info" />
+          </Tooltip>
+        </span>
+      )}
       <p
         className={classNames(styles.errorMsg, error && styles.errorMsgActive)}>
         {error}
@@ -96,6 +106,8 @@ BoxTextInput.propTypes = {
   onChange: PropTypes.func,
   className: PropTypes.string,
   inputClassName: PropTypes.string,
+  tooltipInfo: PropTypes.node,
+  tooltipPlacement: PropTypes.oneOf(["top", "bottom", "right", "left"]),
 };
 
 BoxTextInput.defaultProps = {

diff --git a/src/stories/BoxTextInput.stories.jsx b/src/stories/BoxTextInput.stories.jsx
@@ -39,3 +39,11 @@ Searchable.args = {
   searchInput: true,
   error: "",
 };
+
+export const WithInfoTooltip = Template.bind({});
+WithInfoTooltip.args = {
+  placeholder: "Censorship Token",
+  name: "token",
+  tooltipInfo: "Record Censorship Token",
+  tooltipPlacement: "bottom",
+};