feat: adding autodocs and adjustment in tooltips components

bootwindui · Feb 17, 2024 · 5eaa75e · 5eaa75e
1 parent 86dc6cd
commit 5eaa75e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 17 deletions.
diff --git a/packages/tooltip/src/lib/tooltip-content.tsx b/packages/tooltip/src/lib/tooltip-content.tsx
@@ -23,7 +23,7 @@ export const TooltipContent = ({ children, className, variant, position = "top"
     )
     return (
         <div className={classes}>
-                {children}
+            {children}
         </div>
     )
 }
diff --git a/packages/tooltip/src/lib/tooltip-trigger.tsx b/packages/tooltip/src/lib/tooltip-trigger.tsx
@@ -4,6 +4,6 @@ export interface TooltipTriggerProps {
     children: string | ReactNode
 }
 
-export const TooltipTrigger = ({children}: TooltipTriggerProps) => (
-    <div className="tooltip-trigger inline-flex " >{children}</div>
+export const TooltipTrigger = ({ children }: TooltipTriggerProps) => (
+    <div className="tooltip-trigger inline-flex">{children}</div>
 )
diff --git a/packages/tooltip/src/lib/tooltip.tsx b/packages/tooltip/src/lib/tooltip.tsx
@@ -8,13 +8,10 @@ export interface TooltipProps {
   position?: "top" | "bottom" | "right" | "left";
 }
 
-const Tooltip: React.FC<TooltipProps> = ({ children }) => {
-
+export const Tooltip: React.FC<TooltipProps> = ({ children }) => {
   return (
-    <div className="tooltip-wrapper group relative inline-block"> 
-        {children}
+    <div className="tooltip-wrapper group relative inline-block">
+      {children}
     </div>
   );
 };
-
-export default Tooltip;
diff --git a/packages/tooltip/src/stories/tooltip.stories.tsx b/packages/tooltip/src/stories/tooltip.stories.tsx
@@ -1,16 +1,20 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import Tooltip, { TooltipProps } from '../lib/tooltip';
+import { Tooltip, TooltipProps } from '../lib/tooltip';
 import { Button } from "@bootwind/button"
 import { TooltipTrigger } from '../lib/tooltip-trigger';
 import { TooltipContent } from '../lib/tooltip-content';
 
 export default {
     title: '❖ • Components/Tooltip',
+    tags: ['autodocs'],
     component: Tooltip,
     argTypes: {
         position: {
-            control: { type: 'select', options: ['top', 'bottom', 'left', 'right'] },
+            control: 'select', options: ['top', 'bottom', 'left', 'right'],
+        },
+        variant: {
+            control: 'radio', options: ['dark', 'light'],
         },
     },
 } as Meta;
@@ -29,40 +33,40 @@ const Template: Story<TooltipProps> = (args) => (
 export const Top = Template.bind({});
 Top.args = {
     position: "top",
-    content: 'Tooltip Text',
+    content: 'Top tooltip content',
     variant: 'dark'
 };
 
 export const Bottom = Template.bind({});
 Bottom.args = {
     position: "bottom",
-    content: 'This is a custom tooltip content',
+    content: 'Bottom tooltip content',
     variant: 'dark'
 };
 
 export const Left = Template.bind({});
 Left.args = {
     position: 'left',
-    content: 'Tooltip Text',
+    content: 'Left Tooltip Text',
     variant: 'dark'
 };
 
 export const Right = Template.bind({});
 Right.args = {
     position: 'right',
-    content: 'Tooltip Text',
+    content: 'Right Tooltip Text',
     variant: 'dark'
 };
 
 export const Light = Template.bind({});
 Light.args = {
-    position: 'bottom',
+    position: 'right',
     content: 'Light Tooltip',
 };
 
 export const Dark = Template.bind({});
 Dark.args = {
-    position: 'bottom',
+    position: 'right',
     content: 'Dark Tooltip',
     variant: 'dark'
 };