#42 - Tooltip Support (#90)

* adds tooltip component

* updates tooltip component

package.json

@@ -24,6 +24,7 @@
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "react-svg": "^14.0.4",
+    "react-tooltip": "^4.2.21",
     "sb": "^6.1.20",
     "styled-components": "^5.2.1",
     "styled-jsx": "^3.4.4",

src/components/primitive/tooltip/tooltip.component.props.ts

@@ -0,0 +1,15 @@
+import { TooltipProps } from "react-tooltip";
+import { IconProps } from "../icon-svg/icon-svg.component.props";
+import { TextComponentProps } from "../text/text.component.props";
+
+export interface TooltipComponentProps extends TooltipProps {
+  /**
+   * Icon (optional)
+   */
+  icon?: IconProps;
+
+  /**
+   * Text to be show
+   */
+  text: string;
+}

src/components/primitive/tooltip/tooltip.component.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ReactTooltip from "react-tooltip";
+import { IconSvg, Text } from "..";
+import { TooltipComponentProps } from "./tooltip.component.props";
+
+const Tooltip: React.FunctionComponent<TooltipComponentProps> = (
+  props: TooltipComponentProps
+) => {
+  const {
+    icon,
+    text,
+    ...rest
+  } = props;
+
+  return (
+    <>
+      <Text data-tip={text}>
+        {icon ? <IconSvg {...icon} /> : <IconSvg color="primary" name="info" />}
+      </Text>
+      <ReactTooltip {...rest}/>
+    </>
+  );
+};
+
+export default Tooltip;

yarn.lock

@@ -11361,6 +11361,14 @@ react-svg@^14.0.4:
     "@types/prop-types" "^15.7.4"
     prop-types "^15.7.2"
 
+react-tooltip@^4.2.21:
+  version "4.2.21"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.21.tgz#840123ed86cf33d50ddde8ec8813b2960bfded7f"
+  integrity sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==
+  dependencies:
+    prop-types "^15.7.2"
+    uuid "^7.0.3"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -13583,6 +13591,11 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 uuid@^8.3.0:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"