Feature - Added content prop to Tooltips with the possibility to render ReactNode

.github/workflows/publish-chromatic.yml

@@ -1,4 +1,4 @@
-name: Publish Github Packages
+name: Publish Chromatic
 
 on:
   release:

apps/docs/src/stories/Tooltip/Close.stories.tsx

@@ -1,20 +1,28 @@
+import { Button, Tooltip, TooltipCloseProps } from '@coaktion/visu'
 import { Meta, StoryObj } from '@storybook/react'
 import { Question } from 'phosphor-react'
 
-import { Tooltip, TooltipCloseProps } from '@coaktion/visu'
-
 const meta: Meta<TooltipCloseProps> = {
   title: 'Tooltip/Close',
   component: Tooltip.Close,
   argTypes: {
     children: {
       control: 'none',
+      description: 'Trigger do Tooltip, exibe o Tooltip ao clicar.',
       table: {
         type: {
           summary: 'React.ReactNode',
         },
       },
     },
+    content: {
+      control: 'text',
+      description: 'Define o conteúdo exibido no Tooltip.',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+      type: { name: 'string', required: false },
+    },
     defaultOpen: {
       control: 'none',
       description:
@@ -38,20 +46,26 @@ const meta: Meta<TooltipCloseProps> = {
       },
       type: { name: 'string', required: false },
     },
+
+    /**
+     * @deprecated - Deprecated props will be removed in the next major version.
+     */
     text: {
-      control: 'text',
-      description: 'Define o valor em texto do componente.',
+      control: 'none',
+      name: 'text (deprecated)',
+      description:
+        '<s>Define o valor em texto do componente.</s> (deprecated) - Use a propriedade `content`.',
       table: {
         type: { summary: 'text' },
       },
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
     },
   },
   args: {
     children: '',
+    content: 'Texto do tooltip',
     defaultOpen: false,
     side: 'bottom',
-    text: 'Texto do tooltip',
   },
   parameters: {
     design: {
@@ -65,7 +79,35 @@ const meta: Meta<TooltipCloseProps> = {
 export default meta
 type TooltipClose = StoryObj<TooltipCloseProps>
 
-export const Comum: TooltipClose = {
+export const ComTexto: TooltipClose = {
+  name: 'Com texto',
+  render: (args) => {
+    return (
+      <Tooltip.Close {...args}>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          Clique para abrir
+          <Question size={24} />
+        </div>
+      </Tooltip.Close>
+    )
+  },
+}
+
+export const ComReactNode: TooltipClose = {
+  name: 'Com ReactNode',
+  args: {
+    content: (
+      <>
+        <p>Texto do tooltip</p>
+        <Button.Root>Button do tooltip</Button.Root>
+      </>
+    ),
+  },
+  argTypes: {
+    content: {
+      control: 'none',
+    },
+  },
   render: (args) => {
     return (
       <Tooltip.Close {...args}>

apps/docs/src/stories/Tooltip/Hover.stories.tsx

@@ -1,20 +1,28 @@
+import { Button, Tooltip, TooltipHoverProps } from '@coaktion/visu'
 import { Meta, StoryObj } from '@storybook/react'
 import { Question } from 'phosphor-react'
 
-import { Tooltip, TooltipHoverProps } from '@coaktion/visu'
-
 const meta: Meta<TooltipHoverProps> = {
   title: 'Tooltip/Hover',
   component: Tooltip.Hover,
   argTypes: {
     children: {
       control: 'none',
+      description: 'Trigger do Tooltip.',
       table: {
         type: {
           summary: 'React.ReactNode',
         },
       },
     },
+    content: {
+      control: 'text',
+      description: 'Define o conteúdo exibido no Tooltip.',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+      type: { name: 'string', required: false },
+    },
     side: {
       control: { type: 'inline-radio' },
       description:
@@ -28,19 +36,25 @@ const meta: Meta<TooltipHoverProps> = {
       },
       type: { name: 'string', required: false },
     },
+
+    /**
+     * @deprecated - Deprecated props will be removed in the next major version.
+     */
     text: {
-      control: 'text',
-      description: 'Define o valor em texto do componente.',
+      control: 'none',
+      name: 'text (deprecated)',
+      description:
+        '<s>Define o valor em texto do componente.</s> (deprecated) - Use a propriedade `content`.',
       table: {
         type: { summary: 'text' },
       },
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
     },
   },
   args: {
     children: '',
+    content: 'Texto do tooltip',
     side: 'bottom',
-    text: 'Texto do tooltip',
   },
   parameters: {
     design: {
@@ -54,7 +68,32 @@ const meta: Meta<TooltipHoverProps> = {
 export default meta
 type TooltipHoverStory = StoryObj<TooltipHoverProps>
 
-export const Comum: TooltipHoverStory = {
+export const ComTexto: TooltipHoverStory = {
+  name: 'Com texto',
+  render: (args) => {
+    return (
+      <Tooltip.Hover {...args}>
+        <Question size={24} />
+      </Tooltip.Hover>
+    )
+  },
+}
+
+export const ComReactNode: TooltipHoverStory = {
+  name: 'Com ReactNode',
+  args: {
+    content: (
+      <>
+        <p>Texto do tooltip</p>
+        <Button.Root>Button do tooltip</Button.Root>
+      </>
+    ),
+  },
+  argTypes: {
+    content: {
+      control: 'none',
+    },
+  },
   render: (args) => {
     return (
       <Tooltip.Hover {...args}>

apps/docs/src/stories/Tooltip/Step.stories.tsx

@@ -1,14 +1,14 @@
+import { Button, Tooltip, TooltipStepProps } from '@coaktion/visu'
 import { Meta, StoryObj } from '@storybook/react'
 import { Question } from 'phosphor-react'
 
-import { Tooltip, TooltipStepProps } from '@coaktion/visu'
-
 const meta: Meta<TooltipStepProps> = {
   title: 'Tooltip/Step',
   component: Tooltip.Step,
   argTypes: {
     children: {
       control: 'none',
+      description: 'Trigger do Tooltip, exibe o Tooltip Steps ao clicar.',
       table: {
         type: {
           summary: 'React.ReactNode',
@@ -25,6 +25,15 @@ const meta: Meta<TooltipStepProps> = {
       },
       type: { name: 'string', required: false },
     },
+    content: {
+      control: 'object',
+      description:
+        'Propriedade que recebe um array com o conteúdo de cada etapa.',
+      table: {
+        type: { summary: 'React.ReactNode[]' },
+      },
+      type: { name: 'string', required: false },
+    },
     defaultOpen: {
       control: 'none',
       description:
@@ -68,24 +77,30 @@ const meta: Meta<TooltipStepProps> = {
       },
       type: { name: 'string', required: false },
     },
+
+    /**
+     * @deprecated - Deprecated props will be removed in the next major version.
+     */
     text: {
-      control: 'object',
-      description: 'Propriedade que recebe um array com textos de cada etapa.',
+      control: 'none',
+      name: 'text (deprecated)',
+      description:
+        '<s>Propriedade que recebe um array com textos de cada etapa.</s> (deprecated) - Use a propriedade `content`.',
       table: {
         type: { summary: 'string[]' },
         defaultValue: { summary: [] },
       },
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
     },
   },
   args: {
     children: '',
+    content: ['Conteúdo da etapa 1', 'Conteúdo da etapa 2'],
     closeText: 'Finalizar',
     defaultOpen: false,
     nextText: 'Próximo',
     side: 'bottom',
     stepText: 'Etapa',
-    text: ['Etapa 1', 'Etapa 2'],
   },
   parameters: {
     design: {
@@ -99,7 +114,31 @@ const meta: Meta<TooltipStepProps> = {
 export default meta
 type TooltipStepStory = StoryObj<TooltipStepProps>
 
-export const Comum: TooltipStepStory = {
+export const ComTexto: TooltipStepStory = {
+  name: 'Com texto',
+  render: (args) => {
+    return (
+      <Tooltip.Step {...args}>
+        <Question size={24} />
+      </Tooltip.Step>
+    )
+  },
+}
+
+export const ComReactNode: TooltipStepStory = {
+  name: 'Com ReactNode',
+  args: {
+    content: [
+      <>
+        <p>Conteúdo da etapa 1</p>
+        <Button.Root>Button da etapa 1</Button.Root>
+      </>,
+      <>
+        <p>Conteúdo da etapa 2</p>
+        <Button.Root>Button da etapa 2</Button.Root>
+      </>,
+    ],
+  },
   render: (args) => {
     return (
       <Tooltip.Step {...args}>

packages/visu/jest.setup.ts

@@ -1 +1,14 @@
 import '@testing-library/jest-dom/extend-expect'
+import clsx from 'clsx'
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}))
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})

packages/visu/src/__tests__/Tooltip/Close.test.tsx

@@ -1,23 +1,63 @@
 import { Tooltip } from '@library'
-import { render, screen } from '@testing-library/react'
-import { clsx } from 'clsx'
-
-jest.mock('clsx', () => {
-  return {
-    clsx: jest.fn().mockImplementation(() => clsx),
-  }
-})
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 // Testes limitados por conta do Radix
 describe('TooltipClose tests', () => {
   it('Should render a TooltipClose element', () => {
     render(
-      <Tooltip.Close text="Close" data-testid="element">
-        <div>Hello</div>
-      </Tooltip.Close>
+      <Tooltip.Close content="Close">
+        <div data-testid="element">Hello</div>
+      </Tooltip.Close>,
+    )
+    const element = screen.getByTestId('element')
+
+    expect(element).toBeInTheDocument()
+  })
+
+  it('Should render a text with the prop "content"', async () => {
+    render(
+      <Tooltip.Close content="Text1">
+        <div data-testid="element">Hello</div>
+      </Tooltip.Close>,
+    )
+    const element = screen.getByTestId('element')
+    fireEvent.click(element)
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toHaveTextContent('Text1')
+    })
+  })
+
+  it('Should render a ReactNode content with the prop "content"', async () => {
+    render(
+      <Tooltip.Close content={<span data-testid="content">Text1</span>}>
+        <div data-testid="element">Hello</div>
+      </Tooltip.Close>,
+    )
+    const element = screen.getByTestId('element')
+    fireEvent.click(element)
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toContainHTML(
+        '<span data-testid="content">Text1</span>',
+      )
+    })
+  })
+
+  /**
+   * @deprecated - Teste para uma propriedade deprecated
+   */
+  it('Should render a text with the prop "text"', async () => {
+    render(
+      <Tooltip.Close text="Text1">
+        <div data-testid="element">Hello</div>
+      </Tooltip.Close>,
     )
-    const element = screen.queryByTestId('element')
+    const element = screen.getByTestId('element')
+    fireEvent.click(element)
 
-    expect(element).toBeDefined()
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toHaveTextContent('Text1')
+    })
   })
 })