Redesign Tooltip component

.eslintrc.ts.json

@@ -113,9 +113,7 @@
     "@typescript-eslint/camelcase": "off",
     // PropTypes
     "react/prop-types": 0,
-    "react/jsx-props-no-spreading": [2, {
-      "exceptions": ["input", "select"]
-    }],
+    "react/jsx-props-no-spreading": 0,
     // Hooks
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",

assets/css/src/components/_tooltips.scss

@@ -0,0 +1,4 @@
+.mailpoet-tooltip {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(229, 233, 248, .4), 0 5px 30px 0 $color-tertiary-light;
+}

assets/css/src/mailpoet-plugin.scss

@@ -46,6 +46,7 @@
 @import 'components/parsley';
 @import 'components/tabs';
 @import 'components/steps';
+@import 'components/tooltips';
 @import 'components-plugin/automatic-emails';
 @import 'components-plugin/browser-preview';
 @import 'components-plugin/dynamic-segments';

assets/js/src/common/tooltip/_stories/tooltip.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Heading from 'common/typography/heading/heading';
+import Tooltip from '../tooltip';
+
+export default {
+  title: 'Tooltips',
+};
+
+export const Tooltips = () => (
+  <>
+    <Heading level={1}>Placements</Heading>
+    <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+      <p data-tip data-for="bottom">Bottom Tooltip</p>
+      <Tooltip id="bottom" place="bottom">
+        <span>The tooltip content</span>
+      </Tooltip>
+
+      <p data-tip data-for="top">Top Tooltip</p>
+      <Tooltip id="top" place="top">
+        <span>The tooltip content</span>
+      </Tooltip>
+
+      <p data-tip data-for="right">Right Tooltip</p>
+      <Tooltip id="right" place="right">
+        <span>The tooltip content</span>
+      </Tooltip>
+
+      <p data-tip data-for="left">Left Tooltip</p>
+      <Tooltip id="left" place="left">
+        <span>The tooltip content</span>
+      </Tooltip>
+    </div>
+  </>
+);

assets/js/src/common/tooltip/tooltip.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import ReactTooltip, { TooltipProps } from 'react-tooltip';
+
+const Tooltip = ({
+  effect, textColor, backgroundColor, border, borderColor, className, children, ...props
+}: TooltipProps) => (
+  <ReactTooltip
+    effect={effect || 'solid'}
+    textColor={textColor || '#071c6d'}
+    backgroundColor={backgroundColor || '#fafbfe'}
+    borderColor={borderColor || '#e5e9f8'}
+    className={classNames('mailpoet-tooltip', className)}
+    border={border === undefined ? true : border}
+    {...props}
+  >
+    {children}
+  </ReactTooltip>
+);
+
+export default Tooltip;

package-lock.json

@@ -21225,11 +21225,19 @@
       }
     },
     "react-tooltip": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.0.3.tgz",
-      "integrity": "sha512-xEM+fr8tr/KJP5PZEOg/fc5bZ7ZkC658iMDgCq5DfTqHVyuIOOd5loyxQD0eAJiZ6jWdEd18owbRqd3stHtEDg==",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.6.tgz",
+      "integrity": "sha512-KX/zCsPFCI8RuulzBX86U+Ur7FvgGNRBdb7dUu0ndo8Urinn48nANq9wfq4ABlehweQjPzLl7XdNAtLKza+I3w==",
       "requires": {
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.7.2",
+        "uuid": "^7.0.3"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+        }
       }
     },
     "react-transition-group": {

package.json

@@ -77,7 +77,7 @@
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
     "react-string-replace": "^0.3.2",
-    "react-tooltip": "^4.0.3",
+    "react-tooltip": "^4.2.6",
     "satismeter-loader": "^1.1.0",
     "select2": "^4.0.13",
     "setimmediate": "^1.0.5",