fix(popover): adjust name component rich tooltip to popover (#708)

juntossomosmais · Feb 20, 2025 · 1460bd8 · 1460bd8
1 parent 079d3f0
commit 1460bd8
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 130 deletions.
diff --git a/...components/rich-tooltip/rich-tooltip.scss → .../core/src/components/popover/popover.scss b/...components/rich-tooltip/rich-tooltip.scss → .../core/src/components/popover/popover.scss
diff --git a/...ponents/rich-tooltip/rich-tooltip.spec.ts → ...re/src/components/popover/popover.spec.ts b/...ponents/rich-tooltip/rich-tooltip.spec.ts → ...re/src/components/popover/popover.spec.ts
@@ -1,28 +1,28 @@
 import { newSpecPage } from '@stencil/core/testing'
 
-import { AtomRichTooltip } from './rich-tooltip'
+import { AtomPopover } from './popover'
 
-describe('AtomRichTooltip', () => {
+describe('AtomPopover', () => {
   const createTooltip = (
     id: string,
-    action: AtomRichTooltip['action'] = 'hover',
+    action: AtomPopover['action'] = 'hover',
     open = false
   ) => `
       <button id="${id}" aria-describedby="${id}--tooltip">Hover</button>
-      <atom-rich-tooltip id="${id}--tooltip" element="${id}" open="${open}" action="${action}" label="Test Title" actiontext="Click me">Tooltip content</atom-rich-tooltip>
+      <atom-popover id="${id}--tooltip" element="${id}" open="${open}" action="${action}" label="Test Title" actiontext="Click me">Tooltip content</atom-popover>
     `
 
   it('should render correctly', async () => {
     const page = await newSpecPage({
-      components: [AtomRichTooltip],
+      components: [AtomPopover],
       html: createTooltip('test-element'),
     })
 
     expect(page.root).toEqualHtml(`
-      <atom-rich-tooltip id="test-element--tooltip" element="test-element" open="false" action="hover" label="Test Title" actiontext="Click me" role="tooltip">
+      <atom-popover id="test-element--tooltip" element="test-element" open="false" action="hover" label="Test Title" actiontext="Click me" role="tooltip">
         <mock:shadow-root>
-          <atom-tooltip element="test-element" placement="top" action="hover" class="rich-tooltip">
-            <div class="rich-tooltip__content">
+          <atom-tooltip element="test-element" placement="top" action="hover">
+            <div>
               <h1 class="title">Test Title</h1>
               <p class="text">
                 <slot></slot>
@@ -31,13 +31,13 @@ describe('AtomRichTooltip', () => {
           </atom-tooltip>
         </mock:shadow-root>
         Tooltip content
-      </atom-rich-tooltip>
+      </atom-popover>
     `)
   })
 
   it('should not display action text when action is hover', async () => {
     const page = await newSpecPage({
-      components: [AtomRichTooltip],
+      components: [AtomPopover],
       html: createTooltip('test-element', 'hover'),
     })
 

diff --git a/.../components/rich-tooltip/rich-tooltip.tsx → ...s/core/src/components/popover/popover.tsx b/.../components/rich-tooltip/rich-tooltip.tsx → ...s/core/src/components/popover/popover.tsx
@@ -9,11 +9,11 @@ import {
 } from '@stencil/core'
 
 @Component({
-  tag: 'atom-rich-tooltip',
-  styleUrl: 'rich-tooltip.scss',
+  tag: 'atom-popover',
+  styleUrl: 'popover.scss',
   shadow: true,
 })
-export class AtomRichTooltip {
+export class AtomPopover {
   @Element() el: HTMLElement
 
   @Prop() element: string
@@ -41,9 +41,8 @@ export class AtomRichTooltip {
           placement={this.placement}
           action={this.action}
           open={this.open}
-          class='rich-tooltip'
         >
-          <div class='rich-tooltip__content'>
+          <div>
             {this.label && <h1 class='title'>{this.label}</h1>}
             <p class='text'>
               <slot />

diff --git a/...rich-tooltip/stories/rich-tooltip.args.ts → ...omponents/popover/stories/popover.args.ts b/...rich-tooltip/stories/rich-tooltip.args.ts → ...omponents/popover/stories/popover.args.ts
@@ -1,7 +1,7 @@
 import { Category } from '@atomium/storybook-utils/enums/table'
 import { withActions } from '@storybook/addon-actions/decorator'
 
-export const RichTooltipStoryArgs = {
+export const PopoverStoryArgs = {
   parameters: {
     actions: {
       handles: ['atomOpen', 'atomClose'],
@@ -10,7 +10,7 @@ export const RichTooltipStoryArgs = {
     docs: {
       description: {
         component:
-          'Rich Tooltip is a component that provides more information to the user and allows them to perform quick actions within the context of the problem.',
+          'Popover is a component that provides more information to the user and allows them to perform quick actions within the context of the problem.',
       },
     },
     layout: 'centered',
@@ -29,7 +29,7 @@ export const RichTooltipStoryArgs = {
         'right',
         'left',
       ],
-      description: 'Determines placement for tooltip',
+      description: 'Determines placement for popover',
       table: {
         category: Category.PROPERTIES,
       },
@@ -39,36 +39,36 @@ export const RichTooltipStoryArgs = {
       defaultValue: { summary: 'hover' },
       options: ['hover', 'click'],
       description:
-        'Determines the trigger action for the tooltip: `hover` or `click`.',
+        'Determines the trigger action for the popover: `hover` or `click`.',
       table: {
         category: Category.PROPERTIES,
       },
     },
     element: {
       control: 'text',
       description:
-        'Specifies the element responsible for opening/closing the tooltip.',
+        'Specifies the element responsible for opening/closing the popover.',
       table: {
         category: Category.PROPERTIES,
       },
     },
     open: {
       control: 'boolean',
-      description: 'Controls whether the tooltip is open or closed.',
+      description: 'Controls whether the popover is open or closed.',
       table: {
         category: Category.PROPERTIES,
       },
     },
     label: {
       control: 'text',
-      description: 'Determines a title for tooltip.',
+      description: 'Determines a title for popover.',
       table: {
         category: Category.PROPERTIES,
       },
     },
     text: {
       control: 'text',
-      description: 'Determines a text for tooltip.',
+      description: 'Determines a text for popover.',
       table: {
         category: Category.PROPERTIES,
       },
@@ -95,15 +95,15 @@ export const RichTooltipStoryArgs = {
       },
     },
     atomClose: {
-      description: 'Event emitted when the tooltip is closed.',
+      description: 'Event emitted when the popover is closed.',
       table: {
         category: Category.EVENTS,
       },
     },
   },
 }
 
-export const RichTooltipComponentArgs = {
+export const PopoverComponentArgs = {
   element: 'atomium-element',
   placement: 'top',
   text: 'Supporting line text lorem ipsum dolor sit amet, consectetur',

diff --git a/...tip/stories/rich-tooltip.core.stories.tsx → .../popover/stories/popover.core.stories.tsx b/...tip/stories/rich-tooltip.core.stories.tsx → .../popover/stories/popover.core.stories.tsx
@@ -1,29 +1,26 @@
 import { Meta, StoryObj } from '@storybook/web-components'
 import { html } from 'lit'
 
-import {
-  RichTooltipComponentArgs,
-  RichTooltipStoryArgs,
-} from './rich-tooltip.args'
+import { PopoverComponentArgs, PopoverStoryArgs } from './popover.args'
 
 export default {
-  title: 'Components/Rich Tooltip',
-  ...RichTooltipStoryArgs,
+  title: 'Components/Popover',
+  ...PopoverStoryArgs,
 } as Meta
 
-const createRichTooltip = (args, buttonText = 'hover') => {
+const createPopover = (args, buttonText = 'hover') => {
   return html`
     <div style="height: 300px; display: flex; align-items: center;">
       <atom-button
         fill="solid"
         size="large"
         id="${buttonText}"
-        aria-describedby="atom-rich-tooltip"
+        aria-describedby="atom-popover"
       >
         ${buttonText}
       </atom-button>
-      <atom-rich-tooltip
-        id="atom-rich-tooltip"
+      <atom-popover
+        id="atom-popover"
         placement="${args.placement}"
         element="${buttonText}"
         label="${args.label}"
@@ -32,34 +29,34 @@ const createRichTooltip = (args, buttonText = 'hover') => {
         open="${args.open}"
       >
         ${args.text}
-      </atom-rich-tooltip>
+      </atom-popover>
     </div>
   `
 }
 
 export const Hover: StoryObj = {
-  render: (args) => createRichTooltip(args, 'Hover'),
+  render: (args) => createPopover(args, 'Hover'),
   args: {
-    ...RichTooltipComponentArgs,
+    ...PopoverComponentArgs,
     placement: 'top',
     open: false,
   },
 }
 
 export const Click: StoryObj = {
-  render: (args) => createRichTooltip(args, 'Click'),
+  render: (args) => createPopover(args, 'Click'),
   args: {
-    ...RichTooltipComponentArgs,
+    ...PopoverComponentArgs,
     placement: 'right',
     action: 'click',
     open: false,
   },
 }
 
 export const Opened: StoryObj = {
-  render: (args) => createRichTooltip(args, 'Opened'),
+  render: (args) => createPopover(args, 'Opened'),
   args: {
-    ...RichTooltipComponentArgs,
+    ...PopoverComponentArgs,
     placement: 'left',
     action: 'click',
     open: true,

diff --git a/...ltip/stories/rich-tooltip.vue.stories.tsx → ...popover/stories/popover.react.stories.tsx b/...ltip/stories/rich-tooltip.vue.stories.tsx → ...popover/stories/popover.react.stories.tsx
@@ -1,30 +1,27 @@
-import { AtomButton, AtomRichTooltip } from '@juntossomosmais/atomium/react'
+import { AtomButton, AtomPopover } from '@juntossomosmais/atomium/react'
 import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
-import {
-  RichTooltipComponentArgs,
-  RichTooltipStoryArgs,
-} from './rich-tooltip.args'
+import { PopoverComponentArgs, PopoverStoryArgs } from './popover.args'
 
 export default {
-  title: 'Components/Rich Tooltip',
-  ...RichTooltipStoryArgs,
+  title: 'Components/Popover',
+  ...PopoverStoryArgs,
 } as Meta
 
-const createRichTooltip = (args, buttonText = 'Hover') => (
+const createPopover = (args, buttonText = 'Hover') => (
   <>
     <AtomButton
       fill='solid'
       size='large'
       id={buttonText}
-      aria-describedby='atom-rich-tooltip'
+      aria-describedby='atom-popover'
     >
       {buttonText}
     </AtomButton>
 
-    <AtomRichTooltip
-      id='atom-rich-tooltip'
+    <AtomPopover
+      id='atom-popover'
       placement={args.placement}
       element={buttonText}
       label={args.label}
@@ -33,24 +30,24 @@ const createRichTooltip = (args, buttonText = 'Hover') => (
       open={args.open}
     >
       {args.text}
-    </AtomRichTooltip>
+    </AtomPopover>
   </>
 )
 
 export const Hover: StoryObj = {
-  render: (args) => createRichTooltip(args, 'Hover'),
+  render: (args) => createPopover(args, 'Hover'),
   args: {
-    ...RichTooltipComponentArgs,
+    ...PopoverComponentArgs,
     element: 'hover',
     placement: 'top',
     open: false,
   },
 }
 
 export const Click: StoryObj = {
-  render: (args) => createRichTooltip(args, 'Click'),
+  render: (args) => createPopover(args, 'Click'),
   args: {
-    ...RichTooltipComponentArgs,
+    ...PopoverComponentArgs,
     element: 'click',
     placement: 'top',
     action: 'click',
@@ -59,9 +56,9 @@ export const Click: StoryObj = {
 }
 
 export const Opened: StoryObj = {
-  render: (args) => createRichTooltip(args, 'Opened'),
+  render: (args) => createPopover(args, 'Opened'),
   args: {
-    ...RichTooltipComponentArgs,
+    ...PopoverComponentArgs,
     element: 'opened',
     placement: 'left',
     action: 'click',

diff --git a/packages/core/src/components/popover/stories/popover.vue.stories.tsx b/packages/core/src/components/popover/stories/popover.vue.stories.tsx
@@ -0,0 +1,70 @@
+import { AtomButton, AtomPopover } from '@juntossomosmais/atomium/vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+import { PopoverComponentArgs, PopoverStoryArgs } from './popover.args'
+
+export default {
+  title: 'Components/Popover',
+  ...PopoverStoryArgs,
+} as Meta
+
+const createPopover = (args, buttonText = 'Hover') => ({
+  components: { AtomButton, AtomPopover },
+  setup() {
+    return { args, buttonText }
+  },
+  template: `
+    <AtomButton
+      fill="solid"
+      size="large"
+      :id="buttonText"
+      aria-describedby="atom-popover"
+    >
+      {{ buttonText }}
+    </AtomButton>
+
+    <AtomPopover
+      id="atom-popover"
+      :placement="args.placement"
+      :element="buttonText"
+      :label="args.label"
+      :action="args.action"
+      :actionText="args.actionText"
+      :open="args.open"
+    >
+      {{ args.text }}
+    </AtomPopover>
+  `,
+})
+
+export const Hover: StoryObj = {
+  render: (args) => createPopover(args, 'Hover'),
+  args: {
+    ...PopoverComponentArgs,
+    element: 'hover',
+    placement: 'top',
+    open: false,
+  },
+}
+
+export const Click: StoryObj = {
+  render: (args) => createPopover(args, 'Click'),
+  args: {
+    ...PopoverComponentArgs,
+    element: 'click',
+    placement: 'top',
+    action: 'click',
+    open: false,
+  },
+}
+
+export const Opened: StoryObj = {
+  render: (args) => createPopover(args, 'Opened'),
+  args: {
+    ...PopoverComponentArgs,
+    element: 'opened',
+    placement: 'left',
+    action: 'click',
+    open: true,
+  },
+}