Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DEV-15 Add tooltip component #29

Merged
merged 11 commits into from
Feb 18, 2021
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
15 changes: 15 additions & 0 deletions src/components/Tooltip/Tooltip.md
Original file line number Diff line number Diff line change
@@ -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>
```
26 changes: 26 additions & 0 deletions src/components/Tooltip/Tooltip.stories.tsx
Original file line number Diff line number Diff line change
@@ -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",
}
31 changes: 31 additions & 0 deletions src/components/Tooltip/Tooltip.test.tsx
Original file line number Diff line number Diff line change
@@ -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())
})
})
edceds marked this conversation as resolved.
Show resolved Hide resolved
96 changes: 96 additions & 0 deletions src/components/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
1 change: 1 addition & 0 deletions src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down