Updated: Tooltip component updated.

StaticMania · Apr 18, 2024 · ece12ba · ece12ba
1 parent 9eeadd1
commit ece12ba
Show file tree

Hide file tree

Showing 28 changed files with 509 additions and 770 deletions.
diff --git a/app/components/Community.tsx b/app/components/Community.tsx
@@ -1,3 +1,4 @@
+'use client'
 import Link from 'next/link'
 import { ArrowLineUpRight } from 'phosphor-react'
 import { useEffect, useState } from 'react'

diff --git a/app/components/ComponentUI.tsx b/app/components/ComponentUI.tsx
@@ -1,3 +1,4 @@
+'use client'
 import Link from 'next/link'
 import { ArrowUpRight } from 'phosphor-react'
 import { routes } from '../../routes/routes'

diff --git a/app/docs/components/tooltip/tooltip.mdx b/app/docs/components/tooltip/tooltip.mdx
@@ -1,13 +1,10 @@
 import { DefaultTooltip, DefaultTooltipCode } from './variant/DefaultTooltip'
-import { TooltipStyles, TooltipStylesCode } from './variant/TooltipStyles'
 import { TooltipWithLargeText, TooltipWithLargeTextCode } from './variant/TooltipWithLargeText'
 import { TooltipTriggering, TooltipTriggeringCode } from './variant/TooltipTriggering'
 import { TooltipPlacement, TooltipPlacementCode } from './variant/TooltipPlacement'
 
 import { tooltipDataApi } from './tooltipApi'
-
 import CodePreview from '../../../components/CodePreview'
-
 import ComponentApi from '../../../components/ComponentApi'
 
 ## Table of Contents
@@ -22,36 +19,28 @@ Tooltips appear on hover over an element and help convey concise explanations, t
   <DefaultTooltip />
 </CodePreview>
 
-## Tooltip Styles
-
-The Keep React offers two distinct styles for tooltips: light and dark. To apply the dark style, simply use the style="dark" attribute when implementing the tooltip. By default, tooltips will adopt the dark style. This flexibility allows you to seamlessly integrate tooltips that align with your design theme.
-
-<CodePreview github="Tooltip" code={TooltipStylesCode}>
-  <TooltipStyles />
-</CodePreview>
-
 ## Tooltip Placement
 
-You can choose from four placement options: top, bottom, left, and right. This flexibility allows you to enhance user interactions by offering relevant information in a visually intuitive manner. To set the placement of a tooltip, use the placement prop with the desired value, such as `placement="top"`.
+To set the placement of a tooltip, use the placement prop with the desired value, such as `placement="top"`.
 
 <CodePreview github="Tooltip" code={TooltipPlacementCode}>
   <TooltipPlacement />
 </CodePreview>
 
-## Tooltip Trigger
+## Tooltip With Large Text
 
-Tooltips within the Keep React can be triggered using two different methods: `hover` and `click`. You can choose the trigger that best suits your user experience and interaction design. By default, tooltips are triggered on `hover`, providing users with instant context when they hover over a specific element. Alternatively, you can opt for a `click` trigger. If you want to use the `click` trigger, simply include the `trigger` prop with the value `click` in your tooltip component. For example, `trigger="click"`.
+Feel free to adjust the text content and other attributes as needed for your application's context.
 
-<CodePreview github="Tooltip" code={TooltipTriggeringCode}>
-  <TooltipTriggering />
+<CodePreview github="Tooltip" code={TooltipWithLargeTextCode}>
+  <TooltipWithLargeText />
 </CodePreview>
 
-## Tooltip With Large Text
+## Tooltip Trigger
 
-The tooltip's `content` prop contains longer text content, and the `title` and other attributes are set as previously specified. Feel free to adjust the text content and other attributes as needed for your application's context.
+Tooltips within the Keep React can be triggered using three different methods: `hover`, `click` and `focus`. You can choose the trigger that best suits your user experience and interaction design.
 
-<CodePreview github="Tooltip" code={TooltipWithLargeTextCode}>
-  <TooltipWithLargeText />
+<CodePreview github="Tooltip" code={TooltipTriggeringCode}>
+  <TooltipTriggering />
 </CodePreview>
 
 ## API Reference

diff --git a/app/docs/components/tooltip/tooltipApi.ts b/app/docs/components/tooltip/tooltipApi.ts
@@ -1,58 +1,29 @@
 export const tooltipDataApi = [
   {
     id: 1,
-    propsName: 'title',
-    propsType: 'string',
-    propsDescription: 'Title of the tooltip.',
-    default: 'Tooltip Text',
-  },
-  {
-    id: 2,
-    propsName: 'children',
-    propsType: 'ReactNode',
-    propsDescription: 'Child elements to trigger the tooltip.',
-    default: '<Button/>',
-  },
-  {
-    id: 3,
-    propsName: 'content',
-    propsType: 'ReactNode',
-    propsDescription: 'Content of the tooltip.',
-    default: 'Text',
-  },
-  {
-    id: 4,
     propsName: 'placement',
-    propsType: ['top', 'bottom', 'left', 'right'],
+    propsType: [
+      'top',
+      'bottom',
+      'left',
+      'right',
+      'top-start',
+      'top-end',
+      'right-start',
+      'right-end',
+      'bottom-start',
+      'bottom-end',
+      'left-start',
+      'left-end',
+    ],
     propsDescription: 'Placement of the tooltip.',
     default: 'top',
   },
   {
-    id: 5,
+    id: 2,
     propsName: 'trigger',
-    propsType: ['hover', 'click'],
+    propsType: ['hover', 'click', 'focus'],
     propsDescription: 'Trigger mode for displaying the tooltip.',
     default: 'hover',
   },
-  {
-    id: 6,
-    propsName: 'style',
-    propsType: ['dark', 'light'],
-    propsDescription: 'Style of the tooltip.',
-    default: 'dark',
-  },
-  {
-    id: 7,
-    propsName: 'animation',
-    propsType: 'false | `duration-${number}`',
-    propsDescription: 'Animation duration class for the tooltip.',
-    default: 'false',
-  },
-  {
-    id: 8,
-    propsName: 'arrow',
-    propsType: 'boolean',
-    propsDescription: 'Show or hide the tooltip arrow sign.',
-    default: 'true',
-  },
 ]
diff --git a/app/docs/components/tooltip/variant/DefaultTooltip.tsx b/app/docs/components/tooltip/variant/DefaultTooltip.tsx
@@ -1,33 +1,34 @@
 'use client'
-import { Button, Tooltip } from '../../../../src'
+import { Tooltip } from '../../../../src'
 
 const DefaultTooltip = () => {
   return (
-    <Tooltip content="Tooltips text here" trigger="hover" placement="right" animation="duration-300" style="dark">
-      <Button size="sm">Default Tooltip</Button>
-    </Tooltip>
+    <div className="p-2.5">
+      <Tooltip>
+        <Tooltip.Action>Tooltip</Tooltip.Action>
+        <Tooltip.Content>
+          <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+        </Tooltip.Content>
+      </Tooltip>
+    </div>
   )
 }
 
 const DefaultTooltipCode = `
-"use client";
-import { Button,Tooltip } from "keep-react";
+'use client'
+import { Tooltip } from 'keep-react'
 
 export const TooltipComponent = () => {
   return (
-    <Tooltip
-      content="Tooltips text here"
-      trigger="hover"
-      placement="right"
-      animation="duration-300"
-      style="dark"
-    >
-      <Button size="sm" >
-        Default Tooltip
-      </Button>
+    <Tooltip>
+      <Tooltip.Action>Tooltip</Tooltip.Action>
+      <Tooltip.Content>
+        <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+      </Tooltip.Content>
     </Tooltip>
-  );
+  )
 }
+
 `
 
 export { DefaultTooltip, DefaultTooltipCode }
diff --git a/app/docs/components/tooltip/variant/TooltipPlacement.tsx b/app/docs/components/tooltip/variant/TooltipPlacement.tsx
@@ -1,79 +1,40 @@
 'use client'
-import { Button, Tooltip } from '../../../../src'
+import { Tooltip } from '../../../../src'
 
 const TooltipPlacement = () => {
   return (
-    <div className="my-8 flex flex-wrap items-end gap-2">
-      <Tooltip content="Tooltips text here" trigger="hover" placement="top" animation="duration-300" style="dark">
-        <Button size="sm">Tooltip Top</Button>
-      </Tooltip>
-      <Tooltip content="Tooltips text here" trigger="hover" placement="bottom" animation="duration-300" style="dark">
-        <Button size="sm">Tooltip Bottom</Button>
-      </Tooltip>
-      <Tooltip content="Tooltips text here" trigger="hover" placement="left" animation="duration-300" style="dark">
-        <Button size="sm">Tooltip Left</Button>
-      </Tooltip>
-      <Tooltip content="Tooltips text here" trigger="hover" placement="right" animation="duration-300" style="dark">
-        <Button size="sm">Tooltip Right</Button>
-      </Tooltip>
+    <div className="flex items-center gap-5 p-2.5">
+      {['top', 'bottom', 'left', 'right'].map((position) => (
+        <Tooltip placement={position as 'bottom' | 'top' | 'left' | 'right'} key={position}>
+          <Tooltip.Action>Tooltip</Tooltip.Action>
+          <Tooltip.Content>
+            <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+          </Tooltip.Content>
+        </Tooltip>
+      ))}
     </div>
   )
 }
 
 const TooltipPlacementCode = `
-"use client";
-import { Button,Tooltip } from "keep-react";
+'use client'
+import { Tooltip } from 'keep-react'
 
 export const TooltipComponent = () => {
   return (
     <>
-      <Tooltip
-        content="Tooltips text here"
-        trigger="hover"
-        placement="top"
-        animation="duration-300"
-        style="dark"
-      >
-        <Button size="sm" >
-          Tooltip Top
-        </Button>
-      </Tooltip>
-      <Tooltip
-        content="Tooltips text here"
-        trigger="hover"
-        placement="bottom"
-        animation="duration-300"
-        style="dark"
-      >
-        <Button size="sm" >
-          Tooltip Bottom
-        </Button>
-      </Tooltip>
-      <Tooltip
-        content="Tooltips text here"
-        trigger="hover"
-        placement="left"
-        animation="duration-300"
-        style="dark"
-      >
-        <Button size="sm" >
-          Tooltip Left
-        </Button>
-      </Tooltip>
-      <Tooltip
-        content="Tooltips text here"
-        trigger="hover"
-        placement="right"
-        animation="duration-300"
-        style="dark"
-      >
-        <Button size="sm" >
-          Tooltip Right
-        </Button>
-      </Tooltip>
+      {['top', 'bottom', 'left', 'right'].map((position) => (
+        <Tooltip placement={position} key={position}>
+          <Tooltip.Action>Tooltip</Tooltip.Action>
+          <Tooltip.Content>
+            <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+          </Tooltip.Content>
+        </Tooltip>
+      ))}
     </>
-  );
+  )
 }
+
 `
 
 export { TooltipPlacement, TooltipPlacementCode }
diff --git a/app/docs/components/tooltip/variant/TooltipStyles.tsx b/app/docs/components/tooltip/variant/TooltipStyles.tsx