[UXPT]: create stories for dialog use cases (#1448)

* [UXPT]: create stories for dialog use cases

* changelog

* refactor tooltip story as a dialog story

* add height to child content in dialog stories

* add inner content to popover dialog story

* add interaction test to open menu

* update popover and menu stories

common/changes/pcln-design-system/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Created stories for Menu, Popover, and Tooltip in a Dialog",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

common/changes/pcln-menu/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-menu",
+      "comment": "Created story for a Menu inside a Dialog",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-menu"
+}

common/changes/pcln-popover/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-popover",
+      "comment": "Created story for a Popover inside a Dialog",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-popover"
+}

packages/core/src/Dialog/Dialog.stories.tsx

@@ -11,6 +11,7 @@ import { Text } from '../Text/Text'
 import { Dialog, type DialogProps } from './Dialog'
 import { argTypes, defaultArgs } from './Dialog.stories.args'
 import { Flex } from '../Flex/Flex'
+import { Tooltip } from '../Tooltip/Tooltip'
 
 type DialogStory = StoryObj<DialogProps>
 
@@ -90,6 +91,20 @@ export const WithHeaderContentProps: DialogStory = {
   },
 }
 
+export const WithTooltip: DialogStory = {
+  ...Playground,
+  args: {
+    children: (
+      <Box width={400} p={2} my={2} height={200}>
+        <Tooltip bottom center color='primary'>
+          top center tooltip
+        </Tooltip>
+      </Box>
+    )
+  }
+}
+
+
 const ExampleImage = () => (
   <img
     src='https://s1.pclncdn.com/design-assets/hero/beach.jpg?opto&optimize=medium&auto=jpg&width=600&height=450&fit=crop'

packages/menu/src/Menu/Menu.stories.jsx

@@ -1,7 +1,8 @@
+import { userEvent, within } from '@storybook/testing-library'
 import React, { useState } from 'react'
 import { argTypes, defaultArgs } from './Menu.stories.args'
 import { Bed as BedIcon } from 'pcln-icons'
-import { Box, ButtonChip, Divider, Flex, Link, Text } from 'pcln-design-system'
+import { Box, Button, ButtonChip, Dialog, Divider, Flex, Link, Text } from 'pcln-design-system'
 import { listItems, currencies } from '../../test/mocks/Menu'
 import Menu from './Menu'
 import MenuItem from '../MenuItem'
@@ -193,6 +194,23 @@ export const UsingButtonPropsPropForStylingButtonText = () => (
   </Menu>
 )
 
+export const InDialog = {
+  render: () => (
+    <Dialog size='md' triggerNode={<Button>Open Dialog</Button>}>
+      <Box height={200} p={4}>
+        <Menu width={300} buttonText='Menu'>
+          <MenuItems />
+        </Menu>
+      </Box>
+    </Dialog>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const openButton = canvas.getByText('Open Dialog')
+    await userEvent.click(openButton)
+  },
+}
+
 export const CustomMenuWithoutMenuItems = () => {
   return (
     <Menu idx='link-dropdown' buttonText='Support' width='300px'>

packages/popover/src/Popover/Popover.stories.jsx

@@ -5,6 +5,7 @@ import {
   Box,
   Button,
   CloseButton,
+  Dialog,
   FilterChip,
   Flex,
   IconButton,
@@ -138,6 +139,16 @@ export const bottom = () => (
   </Popover>
 )
 
+export const InDialog = () => (
+  <Dialog triggerNode={<Button>Open Dialog</Button>} size='md' zIndex={0}>
+    <Box height={300}>
+      <Popover renderContent={InnerContent} placement='bottom' ariaLabel='Dialog Popover' idx={2} width={400}>
+        <Button m={3}>Open Popover</Button>
+      </Popover>
+    </Box>
+  </Dialog>
+)
+
 export const hideOverlay = () => (
   <Popover
     renderContent={InnerContent}