diff --git a/package.json b/package.json index f89aa95..3bae8fe 100644 --- a/package.json +++ b/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", diff --git a/src/components/primitive/tooltip/tooltip.component.props.ts b/src/components/primitive/tooltip/tooltip.component.props.ts new file mode 100644 index 0000000..e51444b --- /dev/null +++ b/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; +} diff --git a/src/components/primitive/tooltip/tooltip.component.tsx b/src/components/primitive/tooltip/tooltip.component.tsx new file mode 100644 index 0000000..7e09f5f --- /dev/null +++ b/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 = ( + props: TooltipComponentProps +) => { + const { + icon, + text, + ...rest + } = props; + + return ( + <> + + {icon ? : } + + + + ); +}; + +export default Tooltip; diff --git a/yarn.lock b/yarn.lock index 91c04de..2deaa40 100644 --- a/yarn.lock +++ b/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"