From 5d9bc475fb0c4f516ebe7df055704331a7027e06 Mon Sep 17 00:00:00 2001
From: JordonHong <156821810+JordonHong@users.noreply.github.com>
Date: Tue, 5 Mar 2024 16:47:07 -0600
Subject: [PATCH] [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
---
 ...fix-dialog-trapFocus_2024-02-07-20-15.json | 10 ++++++++++
 ...fix-dialog-trapFocus_2024-02-07-20-15.json | 10 ++++++++++
 ...fix-dialog-trapFocus_2024-02-07-20-15.json | 10 ++++++++++
 packages/core/src/Dialog/Dialog.stories.tsx   | 15 ++++++++++++++
 packages/menu/src/Menu/Menu.stories.jsx       | 20 ++++++++++++++++++-
 .../popover/src/Popover/Popover.stories.jsx   | 11 ++++++++++
 6 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 common/changes/pcln-design-system/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json
 create mode 100644 common/changes/pcln-menu/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json
 create mode 100644 common/changes/pcln-popover/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json

diff --git a/common/changes/pcln-design-system/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json b/common/changes/pcln-design-system/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json
new file mode 100644
index 0000000000..54b8f39ed3
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/common/changes/pcln-menu/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json b/common/changes/pcln-menu/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json
new file mode 100644
index 0000000000..e69f992cd8
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/common/changes/pcln-popover/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json b/common/changes/pcln-popover/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json
new file mode 100644
index 0000000000..3240d20da2
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/packages/core/src/Dialog/Dialog.stories.tsx b/packages/core/src/Dialog/Dialog.stories.tsx
index c93576eb8f..04268db5f9 100644
--- a/packages/core/src/Dialog/Dialog.stories.tsx
+++ b/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'
diff --git a/packages/menu/src/Menu/Menu.stories.jsx b/packages/menu/src/Menu/Menu.stories.jsx
index 64d14fa897..c67534af95 100644
--- a/packages/menu/src/Menu/Menu.stories.jsx
+++ b/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'>
diff --git a/packages/popover/src/Popover/Popover.stories.jsx b/packages/popover/src/Popover/Popover.stories.jsx
index c28a4a5345..3a3579a8a8 100644
--- a/packages/popover/src/Popover/Popover.stories.jsx
+++ b/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}