feat(rich-tooltip): adjust stories

juntossomosmais · Feb 12, 2025 · e4fa0ef · e4fa0ef
1 parent 223afc0
commit e4fa0ef
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 65 deletions.
diff --git a/packages/core/src/components/rich-tooltip/stories/rich-tooltip.core.stories.tsx b/packages/core/src/components/rich-tooltip/stories/rich-tooltip.core.stories.tsx
@@ -13,7 +13,7 @@ export default {
 
 const createRichTooltip = (args, buttonText = 'hover') => {
   return html`
-    <div style="height: 400px">
+    <div style="height: 300px; display: flex; align-items: center;">
       <atom-button
         fill="solid"
         size="large"
@@ -29,7 +29,6 @@ const createRichTooltip = (args, buttonText = 'hover') => {
         title="${args.title}"
         action="${args.action}"
         actiontext="${args.actiontext}"
-        ovo="${args.ovo}"
         open="${args.open}"
       >
         ${args.text}

diff --git a/packages/core/src/components/rich-tooltip/stories/rich-tooltip.react.stories.tsx b/packages/core/src/components/rich-tooltip/stories/rich-tooltip.react.stories.tsx
@@ -18,7 +18,7 @@ const createTooltip = (args, buttonText = 'Hover') => (
       fill='solid'
       size='large'
       id={args.element}
-      aria-describedby='atom-rich-tooltip'
+      aria-describedby='atom-tooltip'
     >
       {buttonText}
     </AtomButton>
@@ -27,18 +27,23 @@ const createTooltip = (args, buttonText = 'Hover') => (
       id='atom-tooltip'
       placement={args.placement}
       element={args.element}
+      title={args.title}
       action={args.action}
+      actiontext={args.actiontext}
+      open={args.open}
     >
-      <div>{args.text}</div>
+      {args.text}
     </AtomRichTooltip>
   </>
 )
 
 export const Hover: StoryObj = {
-  render: (args) => createTooltip(args),
+  render: (args) => createTooltip(args, 'Hover'),
   args: {
     ...RichTooltipComponentArgs,
     element: 'hover',
+    placement: 'top',
+    open: false,
   },
 }
 
@@ -49,6 +54,7 @@ export const Click: StoryObj = {
     element: 'click',
     placement: 'top',
     action: 'click',
+    open: false,
   },
 }
 

diff --git a/packages/core/src/components/rich-tooltip/stories/rich-tooltip.vue.stories.tsx b/packages/core/src/components/rich-tooltip/stories/rich-tooltip.vue.stories.tsx
@@ -1,83 +1,75 @@
-import { AtomBadge } from '@juntossomosmais/atomium/vue'
+import { AtomButton, AtomRichTooltip } from '@juntossomosmais/atomium/vue'
 import { Meta, StoryObj } from '@storybook/vue3'
 
-import { BadgeStoryArgs } from './badge.args'
+import {
+  RichTooltipComponentArgs,
+  RichTooltipStoryArgs,
+} from './rich-tooltip.args'
 
 export default {
-  title: 'Components/Badge',
-  ...BadgeStoryArgs,
+  title: 'Components/Rich Tooltip',
+  ...RichTooltipStoryArgs,
 } as Meta
 
-const createBadge = (args) => ({
-  components: { AtomBadge },
+const createTooltip = (args, buttonText = 'Hover') => ({
+  components: { AtomButton, AtomRichTooltip },
   setup() {
-    return { args }
+    return { args, buttonText }
   },
   template: `
-    <AtomBadge type="${args.type}">{{ args.label }}</AtomBadge>
+    <div>
+      <AtomButton
+        fill="solid"
+        size="large"
+        :id="args.element"
+        aria-describedby="atom-tooltip"
+      >
+        {{ buttonText }}
+      </AtomButton>
+
+      <AtomRichTooltip
+        id="atom-tooltip"
+        :placement="args.placement"
+        :element="args.element"
+        :title="args.title"
+        :action="args.action"
+        :actiontext="args.actiontext"
+        :open="args.open"
+      >
+        {{ args.text }}
+      </AtomRichTooltip>
+    </div>
   `,
 })
 
-export const Primary: StoryObj = {
-  render: (args) => createBadge(args),
-  args: {
-    type: 'primary',
-    label: 'Badge',
-  },
-}
-
-export const Secondary: StoryObj = {
-  render: (args) => createBadge(args),
-  args: {
-    ...Primary.args,
-    type: 'secondary',
-  },
-}
-
-export const Success: StoryObj = {
-  render: (args) => createBadge(args),
-  args: {
-    ...Primary.args,
-    type: 'success',
-  },
-}
-
-export const Warning: StoryObj = {
-  render: (args) => createBadge(args),
-  args: {
-    ...Primary.args,
-    type: 'warning',
-  },
-}
-
-export const Danger: StoryObj = {
-  render: (args) => createBadge(args),
-  args: {
-    ...Primary.args,
-    type: 'danger',
-  },
-}
-
-export const Neutral: StoryObj = {
-  render: (args) => createBadge(args),
+export const Hover: StoryObj = {
+  render: (args) => createTooltip(args, 'Hover'),
   args: {
-    ...Primary.args,
-    type: 'neutral',
+    ...RichTooltipComponentArgs,
+    element: 'hover',
+    placement: 'top',
+    open: false,
   },
 }
 
-export const Dark: StoryObj = {
-  render: (args) => createBadge(args),
+export const Click: StoryObj = {
+  render: (args) => createTooltip(args, 'Click'),
   args: {
-    ...Primary.args,
-    type: 'dark',
+    ...RichTooltipComponentArgs,
+    element: 'click',
+    placement: 'top',
+    action: 'click',
+    open: false,
   },
 }
 
-export const Info: StoryObj = {
-  render: (args) => createBadge(args),
+export const Opened: StoryObj = {
+  render: (args) => createTooltip(args, 'Opened'),
   args: {
-    ...Primary.args,
-    type: 'info',
+    ...RichTooltipComponentArgs,
+    element: 'opened',
+    placement: 'left',
+    action: 'click',
+    open: true,
   },
 }