DEV-15 Add tooltip component (#29)

* Init tooltip

* Add react-popper

* Add title prop and fix children usage

* Improve styles and add example

* Add visibility toggle through hovering

* Add tests

* Fix test warnings

.eslintrc.js

@@ -44,6 +44,7 @@ module.exports = {
       ],
       rules: {
         "unicorn/no-nested-ternary": "off",
+        "unicorn/no-null": "off",
         "react/jsx-uses-react": "off",
         "react/react-in-jsx-scope": "off",
         "react/self-closing-comp": ["error"],

package.json

@@ -17,11 +17,13 @@
   },
   "homepage": "https://github.com/micromed-dev/herz-ui#readme",
   "dependencies": {
+    "@popperjs/core": "^2.6.0",
     "@theme-ui/presets": "^0.3.5",
     "downshift": "^6.1.0",
     "normalize.css": "^8.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-popper": "^2.2.4",
     "react-scripts": "4.0.1",
     "theme-ui": "^0.3.5",
     "web-vitals": "^0.2.4"

src/components/Tooltip/Tooltip.md

@@ -0,0 +1,15 @@
+#### default example:
+
+```js
+<Tooltip title="this is the actual tooltip">
+  <button>this is the reference element</button>
+</Tooltip>
+```
+
+#### placed on top example:
+
+```js
+<Tooltip title="this tooltip is on the top of the reference" placement="top">
+  <button>this is the reference element</button>
+</Tooltip>
+```

src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { Meta, Story } from "@storybook/react/types-6-0"
+
+import Tooltip, { ITooltipProps } from "./Tooltip"
+
+export default {
+  title: "Design System/Tooltip",
+  component: Tooltip,
+} as Meta
+
+const Template: Story<ITooltipProps> = (props) => <Tooltip {...props} />
+
+export const Default = Template.bind({})
+
+Default.args = {
+  children: <button>I am the reference</button>,
+  title: "I'm the title",
+}
+
+export const TopPlacement = Template.bind({})
+
+TopPlacement.args = {
+  children: <button>I am the reference</button>,
+  title: "I'm the title",
+  placement: "top",
+}

src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,31 @@
+import "@testing-library/jest-dom/extend-expect"
+import React from "react"
+import { render, waitFor } from "@testing-library/react"
+
+import Tooltip from "./Tooltip"
+
+describe("Tooltip", () => {
+  it("renders successfully", async () => {
+    const { getByTestId } = render(
+      <Tooltip title="Title">
+        <button>hover me</button>
+      </Tooltip>
+    )
+
+    /**
+     * Check if the element exists
+     */
+
+    await waitFor(() => expect(getByTestId("tooltip")).toBeInTheDocument())
+  })
+
+  it("renders the children succesfully", async () => {
+    const { getByText } = render(
+      <Tooltip title="Title">
+        <button>hover me</button>
+      </Tooltip>
+    )
+
+    await waitFor(() => expect(getByText("hover me")).toBeInTheDocument())
+  })
+})

src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,96 @@
+/** @jsxRuntime classic /*
+/** @jsx jsx */
+import React, { Fragment, useState } from "react"
+import { jsx, Text } from "theme-ui"
+import { usePopper } from "react-popper"
+
+type Placement =
+  | "auto"
+  | "auto-start"
+  | "auto-end"
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "right"
+  | "right-start"
+  | "right-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+
+export interface ITooltipProps {
+  title: string
+  children: React.ReactChild
+  placement?: Placement
+}
+
+export default function Tooltip({
+  children,
+  title,
+  placement = "bottom",
+}: ITooltipProps) {
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  )
+  const [
+    referenceElement,
+    setReferenceElement,
+  ] = useState<HTMLSpanElement | null>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      { name: "arrow", options: { element: arrowElement } },
+      { name: "offset", options: { offset: [0, 8] } },
+    ],
+    placement,
+  })
+
+  return (
+    <Fragment>
+      <span
+        sx={{
+          "&:hover": {
+            "+div": {
+              visibility: "visible",
+              opacity: 1,
+            },
+          },
+        }}
+        ref={setReferenceElement}
+        data-testid="tooltip"
+      >
+        {children}
+      </span>
+      <div
+        sx={{
+          visibility: "hidden",
+          opacity: 0,
+          paddingY: 1,
+          paddingX: 2,
+          borderRadius: "6px",
+          backgroundColor: "text",
+          boxShadow: "0px 1px 4px rgba(0, 0, 0, 0.2)",
+          transition: "all .2s linear",
+          transitionDelay: ".2s",
+        }}
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <Text
+          variant="body2"
+          sx={{
+            color: "#fff",
+            fontWeight: 600,
+          }}
+        >
+          {title}
+        </Text>
+        <div ref={setArrowElement} style={styles.arrow} />
+      </div>
+    </Fragment>
+  )
+}

src/components/index.ts

@@ -2,3 +2,4 @@ export { default as Button } from "./Button/Button"
 export { default as Paper } from "./Paper/Paper"
 export { default as DropdownSelect } from "./DropdownSelect/DropdownSelect"
 export { default as Pagination } from "./Pagination/Pagination"
+export { default as Tooltip } from "./Tooltip/Tooltip"

yarn.lock

@@ -1874,7 +1874,7 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
-"@popperjs/core@^2.4.4", "@popperjs/core@^2.5.4":
+"@popperjs/core@^2.4.4", "@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
   integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==