Merge branch 'feat/text' into 'main'

add tooltip

See merge request onegeo-suite/libs/gatsby-theme-onegeo!33

index.d.ts

@@ -72,6 +72,13 @@ interface BadgeProps {
 }
 export function Badge(props: BadgeProps): JSX.Element
 
+interface TooltipProps {
+    children?: React.ReactNode
+    text?: string
+    className?: string
+}
+export function Tooltip(props: TooltipProps): JSX.Element
+
 interface TocProps {
     children?: React.ReactNode
     className?: string

src/components/Text.tsx

 import React from "react"
-import Button from "./core/Button"
 import { twMerge } from "tailwind-merge"
+import { InformationCircleIcon } from "@heroicons/react/outline"
+import Tooltip from "./core/Tooltip"
 
 interface IText {
     title?: string
+    subtitle?: string
     content?: string
     className?: string
     action?: {
@@ -15,9 +17,10 @@ interface IText {
 }
 
 const Text = (props: IText) => {
-    const { title, content, className = "", action } = props
+    const { title, content, className = "", action, subtitle } = props
     const options = props.options ?? {}
     const oClass = options.class || {}
+    const oTooltip = options.tooltip || {}
 
     return (
         <div className={twMerge(oClass.main, className)}>
@@ -29,17 +32,32 @@ const Text = (props: IText) => {
                     )}
                 >
                     {title}
+                    <Tooltip text={oTooltip.title} />
                 </h2>
             )}
-            {content && (
-                <div
+            {subtitle && (
+                <h4
                     className={twMerge(
-                        //"pt-10 text-justify text-xl leading-8 sm:text-2xl",
-                        "pt-10 text-justify text-2xl leading-8",
-                        oClass.content
+                        "mt-2 text-2xl font-bold",
+                        oClass.subtitle
                     )}
-                    dangerouslySetInnerHTML={{ __html: content }}
-                ></div>
+                >
+                    {subtitle}
+                    <Tooltip text={oTooltip.subtitle} />
+                </h4>
+            )}
+            {content && (
+                <>
+                    <span
+                        className={twMerge(
+                            //"pt-10 text-justify text-xl leading-8 sm:text-2xl",
+                            "pt-10 text-justify text-xl leading-8 ",
+                            oClass.content
+                        )}
+                        dangerouslySetInnerHTML={{ __html: content }}
+                    />
+                    <Tooltip text={oTooltip.content} />
+                </>
             )}
             {action && action.name !== "" ? (
                 <Button

src/components/core/Tooltip.tsx

+import React from "react"
+import { twMerge } from "tailwind-merge"
+
+import { InformationCircleIcon } from "@heroicons/react/outline"
+
+interface Props {
+    children?: React.ReactNode
+    text?: string
+    className?: string
+}
+
+const Tooltip = (props: Props) => {
+    const { children, text = "", className = "" } = props
+    if (text === "") return null
+
+    return (
+        <span className={twMerge("tooltip", className)}>
+            <div className="group ml-2 inline-block">
+                <InformationCircleIcon className="text-info h-4 w-4 cursor-pointer" />
+                <div className="invisible absolute bottom-full left-1/2 z-10 mt-2 w-56 -translate-x-1/2 transform rounded-lg bg-white p-5 py-2 text-xs font-normal opacity-0 shadow transition-all duration-300 group-hover:visible group-hover:opacity-100">
+                    <InformationCircleIcon className="text-info m-2 mx-auto h-6 w-6 text-center" />
+                    {text}
+                </div>
+            </div>
+        </span>
+    )
+}
+
+export default Tooltip