refactor(rich-tooltip): adjust stories

packages/core/src/components/rich-tooltip/stories/rich-tooltip.args.ts

@@ -1,35 +1,102 @@
+import { Category } from '@atomium/storybook-utils/enums/table'
+import { withActions } from '@storybook/addon-actions/decorator'
+
 export const RichTooltipStoryArgs = {
-  decorators: [],
   parameters: {
     actions: {
-      handles: [],
+      handles: ['atomOpen', 'atomClose'],
     },
+    decorators: [withActions],
     docs: {
       description: {
-        component: '',
+        component:
+          'Tooltip is a small pop-up box that appears when a user moves a mouse over an element',
       },
     },
+    layout: 'centered',
   },
   argTypes: {
-    type: {
+    placement: {
       control: 'select',
+      defaultValue: { summary: 'top' },
       options: [
-        'primary',
-        'secondary',
-        'info',
-        'success',
-        'warning',
-        'danger',
-        'neutral',
-        'dark',
+        'auto',
+        'auto-start',
+        'auto-end',
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'right',
+        'left',
       ],
-      defaultValue: { summary: 'primary' },
+      description: 'Determines placement for tooltip',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    action: {
+      control: 'select',
+      defaultValue: { summary: 'hover' },
+      options: ['hover', 'click'],
+      description:
+        'Determines the trigger action for the tooltip: `hover` or `click`.',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    element: {
+      control: 'text',
       description:
-        'The type of the badge, the component will receive the color according to its type.',
+        'Specifies the element responsible for opening/closing the tooltip.',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    open: {
+      control: 'boolean',
+      description: 'Controls whether the tooltip is open or closed.',
+      table: {
+        category: Category.PROPERTIES,
+      },
     },
-    label: {
+    title: {
       control: 'text',
-      description: 'The label of the badge',
+      description: 'Determines a title for tooltip.',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    text: {
+      control: 'text',
+      description: 'Determines a text for tooltip.',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    atomOpen: {
+      description:
+        'Event emitted when hover element, but for mobile when click in element.',
+      table: {
+        category: Category.EVENTS,
+      },
+    },
+    atomClose: {
+      description: 'Event emitted when the tooltip is closed.',
+      table: {
+        category: Category.EVENTS,
+      },
     },
   },
 }
+
+export const RichTooltipComponentArgs = {
+  element: 'atomium-element',
+  placement: 'top',
+  text: 'Tooltip',
+  action: 'hover',
+  title: 'Title',
+  open: false,
+}

packages/core/src/components/rich-tooltip/stories/rich-tooltip.core.stories.tsx

@@ -1,46 +1,46 @@
 import { Meta, StoryObj } from '@storybook/web-components'
 import { html } from 'lit'
 
-import { RichTooltipStoryArgs } from './rich-tooltip.args'
+import {
+  RichTooltipComponentArgs,
+  RichTooltipStoryArgs,
+} from './rich-tooltip.args'
 
 export default {
   title: 'Components/Rich Tooltip',
   ...RichTooltipStoryArgs,
 } as Meta
 
-const createRichTooltip = (args) => {
-  return html` <atom-button
+const createRichTooltip = (args, buttonText = 'hover') => {
+  return html`
+    <atom-button
       fill="solid"
       size="large"
       id="${args.element}"
       aria-describedby="atom-tooltip"
     >
-      Hover
+      ${buttonText}
     </atom-button>
 
     <atom-rich-tooltip
       id="atom-tooltip"
       placement="${args.placement}"
       element="${args.element}"
+      title="${args.title}"
       action="${args.action}"
       open="${args.open}"
     >
       ${args.text}
-    </atom-rich-tooltip>`
+    </atom-rich-tooltip>
+  `
 }
 
-export const Primary: StoryObj = {
-  render: (args) => createRichTooltip(args),
+export const Hover: StoryObj = {
+  render: (args) => createRichTooltip(args, 'Hover'),
   args: {
-    type: 'primary',
-    label: 'Alou',
-  },
-}
-
-export const Secondary: StoryObj = {
-  render: (args) => createRichTooltip(args),
-  args: {
-    ...Primary.args,
-    type: 'secondary',
+    ...RichTooltipComponentArgs,
+    element: 'hover',
+    placement: 'top',
+    open: false,
   },
 }

packages/core/src/components/rich-tooltip/stories/rich-tooltip.react.stories.tsx

@@ -0,0 +1,64 @@
+import { AtomButton, AtomRichTooltip } from '@juntossomosmais/atomium/react'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import {
+  RichTooltipComponentArgs,
+  RichTooltipStoryArgs,
+} from './rich-tooltip.args'
+
+export default {
+  title: 'Components/Rich Tooltip',
+  ...RichTooltipStoryArgs,
+} as Meta
+
+const createTooltip = (args, buttonText = 'Hover') => (
+  <>
+    <AtomButton
+      fill='solid'
+      size='large'
+      id={args.element}
+      aria-describedby='atom-rich-tooltip'
+    >
+      {buttonText}
+    </AtomButton>
+
+    <AtomRichTooltip
+      id='atom-tooltip'
+      placement={args.placement}
+      element={args.element}
+      action={args.action}
+    >
+      <div>{args.text}</div>
+    </AtomRichTooltip>
+  </>
+)
+
+export const Hover: StoryObj = {
+  render: (args) => createTooltip(args),
+  args: {
+    ...RichTooltipComponentArgs,
+    element: 'hover',
+  },
+}
+
+export const Click: StoryObj = {
+  render: (args) => createTooltip(args, 'Click'),
+  args: {
+    ...RichTooltipComponentArgs,
+    element: 'click',
+    placement: 'top',
+    action: 'click',
+  },
+}
+
+export const Opened: StoryObj = {
+  render: (args) => createTooltip(args, 'Opened'),
+  args: {
+    ...RichTooltipComponentArgs,
+    element: 'opened',
+    placement: 'left',
+    action: 'click',
+    open: true,
+  },
+}