From d0111e7741824cd9675e995b6e9e82d3b32ad520 Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Tue, 10 Aug 2021 16:58:16 +0530
Subject: [PATCH] added Tooltip component

---
 src/app/atoms/button/IconButton.jsx  | 14 +++--------
 src/app/atoms/button/IconButton.scss | 11 ---------
 src/app/atoms/tooltip/Tooltip.jsx    | 37 ++++++++++++++++++++++++++++
 src/app/atoms/tooltip/Tooltip.scss   | 10 ++++++++
 4 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 src/app/atoms/tooltip/Tooltip.jsx
 create mode 100644 src/app/atoms/tooltip/Tooltip.scss

diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx
index cda6f98..34e2424 100644
--- a/src/app/atoms/button/IconButton.jsx
+++ b/src/app/atoms/button/IconButton.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './IconButton.scss';
 
-import Tippy from '@tippyjs/react';
 import RawIcon from '../system-icons/RawIcon';
+import Tooltip from '../tooltip/Tooltip';
 import { blurOnBubbling } from './script';
 import Text from '../text/Text';
 
@@ -17,15 +17,9 @@ const IconButton = React.forwardRef(({
   variant, size, type,
   tooltip, tooltipPlacement, src, onClick,
 }, ref) => (
-  <Tippy
-    content={<Text variant="b2">{tooltip}</Text>}
-    className="ic-btn-tippy"
-    touch="hold"
-    arrow={false}
-    maxWidth={250}
+  <Tooltip
     placement={tooltipPlacement}
-    delay={[0, 0]}
-    duration={[100, 0]}
+    content={<Text variant="b2">{tooltip}</Text>}
   >
     <button
       ref={ref}
@@ -36,7 +30,7 @@ const IconButton = React.forwardRef(({
     >
       <RawIcon size={size} src={src} />
     </button>
-  </Tippy>
+  </Tooltip>
 ));
 
 IconButton.defaultProps = {
diff --git a/src/app/atoms/button/IconButton.scss b/src/app/atoms/button/IconButton.scss
index 7bd327d..a0cabc6 100644
--- a/src/app/atoms/button/IconButton.scss
+++ b/src/app/atoms/button/IconButton.scss
@@ -31,15 +31,4 @@
   @include state.hover(var(--bg-surface-hover));
   @include focus(var(--bg-surface-hover));
   @include state.active(var(--bg-surface-active));
-}
-
-.ic-btn-tippy {
-  padding: var(--sp-extra-tight) var(--sp-normal);
-  background-color: var(--bg-tooltip);
-  border-radius: var(--bo-radius);
-  box-shadow: var(--bs-popup);
-
-  .text {
-    color: var(--tc-tooltip);
-  }
 }
\ No newline at end of file
diff --git a/src/app/atoms/tooltip/Tooltip.jsx b/src/app/atoms/tooltip/Tooltip.jsx
new file mode 100644
index 0000000..131c686
--- /dev/null
+++ b/src/app/atoms/tooltip/Tooltip.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Tooltip.scss';
+import Tippy from '@tippyjs/react';
+
+function Tooltip({
+  className, placement, content, children,
+}) {
+  return (
+    <Tippy
+      content={content}
+      className={`tooltip ${className}`}
+      touch="hold"
+      arrow={false}
+      maxWidth={250}
+      placement={placement}
+      delay={[0, 0]}
+      duration={[100, 0]}
+    >
+      {children}
+    </Tippy>
+  );
+}
+
+Tooltip.defaultProps = {
+  placement: 'top',
+  className: '',
+};
+
+Tooltip.propTypes = {
+  className: PropTypes.string,
+  placement: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default Tooltip;
diff --git a/src/app/atoms/tooltip/Tooltip.scss b/src/app/atoms/tooltip/Tooltip.scss
new file mode 100644
index 0000000..f609aa5
--- /dev/null
+++ b/src/app/atoms/tooltip/Tooltip.scss
@@ -0,0 +1,10 @@
+.tooltip {
+  padding: var(--sp-extra-tight) var(--sp-normal);
+  background-color: var(--bg-tooltip);
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-popup);
+
+  .text {
+    color: var(--tc-tooltip);
+  }
+}
\ No newline at end of file