@dxos/react-ui 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -3,80 +3,55 @@
 //
 
 import '@dxos-theme';
-import React from 'react';
 
-import { faker } from '@dxos/random';
+import React from 'react';
 
 import { Tooltip } from './Tooltip';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-type StoryProps = {
-  tooltips: { label: string; content: string }[];
+type StoryTooltipProps = {
+  content: string;
   defaultOpen?: boolean;
 };
 
-const DefaultStory = ({ tooltips, defaultOpen }: StoryProps) => (
-  <Tooltip.Provider defaultOpen={defaultOpen}>
-    <div role='none' className='is-32'>
-      {tooltips.map(({ label, content }, i) => (
-        <Tooltip.Trigger asChild key={i} content={content} side='right'>
-          <Button classNames='block is-full'>{label}</Button>
-        </Tooltip.Trigger>
-      ))}
-    </div>
+const StoryTooltip = ({ content, defaultOpen }: StoryTooltipProps) => (
+  <Tooltip.Provider>
+    <Tooltip.Root defaultOpen={defaultOpen}>
+      <Tooltip.Trigger asChild>
+        <Button>Trigger tooltip</Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='right'>
+        <Tooltip.Arrow />
+        {content}
+      </Tooltip.Content>
+    </Tooltip.Root>
   </Tooltip.Provider>
 );
 
 export default {
   title: 'ui/react-ui-core/Tooltip',
   component: Tooltip,
-  render: DefaultStory,
+  render: StoryTooltip,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {
   args: {
-    tooltips: [
-      {
-        label: 'Tooltip trigger',
-        content: 'This is the tooltip content',
-      },
-    ],
+    content: 'This is the tooltip content',
   },
   parameters: {
     chromatic: { delay: 500 },
   },
 };
 
-export const DefaultOpen = {
+export const Testing = {
   args: {
     defaultOption: true,
-    tooltips: [
-      {
-        label: 'Tooltip trigger',
-        content: 'This is the tooltip content',
-      },
-    ],
+    content: 'This is the tooltip content',
   },
   parameters: {
     chromatic: { delay: 500 },
   },
 };
-
-export const StressTest = {
-  args: {
-    defaultOption: true,
-    tooltips: faker.helpers.multiple(
-      () => ({
-        label: faker.lorem.words(2),
-        content: faker.lorem.words(5),
-      }),
-      { count: 32 },
-    ),
-  },
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-};