feat: Tooltip controls

Orfium · Mar 6, 2024 · 9ba3de6 · 9ba3de6
1 parent d25078b
commit 9ba3de6
Showing 1 changed file with 62 additions and 38 deletions.
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,4 +1,3 @@
-import { boolean, number, select, text } from '@storybook/addon-knobs';
 import Tooltip from './Tooltip';
 import Stack from '../storyUtils/Stack';
 import { hoverOnTooltips } from './utils';
@@ -18,6 +17,14 @@ export default {
     ],
     chromatic: { delay: 400 },
   },
+
+  args: {
+    content: 'This is a Tooltip',
+  },
+
+  argTypes: {
+    content: { type: 'string' },
+  },
 };
 
 export const TextTooltip = {
@@ -54,6 +61,10 @@ export const TextTooltip = {
   autoplay: true,
   play: hoverOnTooltips,
   name: 'Text Tooltip',
+
+  parameters: {
+    controls: { disable: true },
+  },
 };
 
 export const InteractiveTooltip = {
@@ -70,6 +81,10 @@ export const InteractiveTooltip = {
   autoplay: true,
   play: hoverOnTooltips,
   name: 'Interactive Tooltip',
+
+  parameters: {
+    controls: { disable: true },
+  },
 };
 
 export const TooltipPlacement = {
@@ -110,48 +125,57 @@ export const TooltipPlacement = {
   autoplay: true,
   play: hoverOnTooltips,
   name: 'Tooltip placement',
+
+  parameters: {
+    controls: { disable: true },
+  },
 };
 
 export const Playground = {
-  render: () => (
-    <Stack>
-      <Function>
-        {() => {
-          return (
-            <div
-              style={{
-                padding: '16px',
-                width: '600px',
-                height: '200px',
-                display: 'flex',
-                gap: '128px',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Tooltip
-                content={text('Tooltip Text', 'This is a Tooltip')}
-                placement={select('placement', ['top', 'right', 'bottom', 'left'], 'right')}
-                isInverted={boolean('isInverted', false)}
-                delayIn={number('delayIn', 100)}
-                delayOut={number('delayOut', 100)}
+  render: (args) => {
+    const { content, placement, isInverted, delayIn, delayOut } = args;
+    return (
+      <Stack isInverted={isInverted} height={500}>
+        <Function>
+          {() => {
+            return (
+              <div
+                style={{
+                  padding: '16px',
+                  display: 'flex',
+                  gap: '128px',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
               >
-                <Button>Text</Button>
-              </Tooltip>
-              <TooltipShowcase
-                buttonText={'Interactive'}
-                isInverted={boolean('isInverted', false)}
-                delayIn={number('delayIn', 100)}
-                delayOut={number('delayOut', 100)}
-                placement={select('placement', ['top', 'right', 'bottom', 'left'], 'right')}
-              />
-            </div>
-          );
-        }}
-      </Function>
-    </Stack>
-  ),
+                <Tooltip
+                  content={content}
+                  placement={placement}
+                  isInverted={isInverted}
+                  delayIn={delayIn}
+                  delayOut={delayOut}
+                >
+                  <Button>Text</Button>
+                </Tooltip>
+                <TooltipShowcase
+                  buttonText={'Interactive'}
+                  placement={placement}
+                  isInverted={isInverted}
+                  delayIn={delayIn}
+                  delayOut={delayOut}
+                />
+              </div>
+            );
+          }}
+        </Function>
+      </Stack>
+    );
+  },
   autoplay: true,
   play: hoverOnTooltips,
   name: 'Playground',
+
+  parameters: {
+    controls: { include: ['content', 'placement', 'isInverted', 'delayIn', 'delayOut'] },
+  },
 };