Move Dialog v1 unit tests to __tests__ folder and update v1 stories (…

…#4055)

* Dialog unit tests are written for v1 but in the v2 folder

* delete the obsolete snapshot

* update Dialog v1 stories

* fix import path

* test(vrt): update snapshots

---------

Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>

src/Dialog.stories.tsx

@@ -1,145 +1,37 @@
-import React, {useState, useRef, useCallback} from 'react'
+import React, {useState, useRef} from 'react'
 import {Meta} from '@storybook/react'
-
-import {BaseStyles, ThemeProvider} from '.'
 import {Button} from './Button'
-import {Dialog, DialogWidth, DialogHeight} from './Dialog/Dialog'
+import {Box, Text} from '.'
+import {default as Dialog} from './Dialog'
 
-/* Dialog Version 1? */
+/* Dialog Version 1*/
 
 export default {
   title: 'Components/DialogV1',
   component: Dialog,
-  decorators: [
-    Story => {
-      // Since portal roots are registered globally, we need this line so that each storybook
-      // story works in isolation.
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
-  args: {
-    width: 'xlarge',
-    height: 'auto',
-    subtitle: true,
-  },
-  argTypes: {
-    width: {
-      control: {
-        type: 'radio',
-      },
-      options: ['small', 'medium', 'large', 'xlarge'],
-    },
-    height: {
-      control: {
-        type: 'radio',
-      },
-      options: ['small', 'large', 'auto'],
-    },
-    subtitle: {
-      name: 'show subtitle',
-      control: {
-        type: 'boolean',
-      },
-    },
-    title: {table: {disable: true}},
-
-    renderHeader: {table: {disable: true}},
-    renderBody: {table: {disable: true}},
-    renderFooter: {table: {disable: true}},
-    onClose: {table: {disable: true}},
-    role: {table: {disable: true}},
-    ref: {table: {disable: true}},
-    key: {table: {disable: true}},
-    footerButtons: {table: {disable: true}},
-  },
 } as Meta
 
-const lipsum = (
-  <div style={{fontSize: '14px'}}>
-    <p style={{marginBlockStart: 0}}>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
-      lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
-      nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
-      Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit
-      amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris
-      fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus
-      luctus tempus posuere.
-    </p>
-
-    <p>
-      Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
-      lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
-      sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
-      sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus
-      sem. Mauris a est tellus.
-    </p>
-
-    <p>
-      Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
-      molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
-      condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
-      dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam
-      pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
-    </p>
-
-    <p>
-      Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
-      nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
-      lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
-    </p>
-
-    <p>
-      Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
-      consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
-      pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
-      Maecenas semper mi egestas, dignissim nisi et, elementum neque.
-    </p>
-  </div>
-)
-interface DialogStoryProps {
-  width: DialogWidth
-  height: DialogHeight
-  subtitle: boolean
-}
-export const Default = ({width, height, subtitle}: DialogStoryProps) => {
+export const Default = () => {
   const [isOpen, setIsOpen] = useState(false)
-  const [secondOpen, setSecondOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])
-  const openSecondDialog = useCallback(() => setSecondOpen(true), [])
+  const returnFocusRef = useRef(null)
   return (
-    <>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        Show dialog
+    <div>
+      <Button data-testid="trigger-button" ref={returnFocusRef} onClick={() => setIsOpen(true)}>
+        Show Dialog
       </Button>
-      {isOpen && (
-        <Dialog
-          title="My Dialog"
-          subtitle={subtitle ? 'This is a subtitle!' : undefined}
-          onClose={onDialogClose}
-          width={width}
-          height={height}
-          footerButtons={[
-            {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog},
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
-          ]}
-        >
-          {lipsum}
-          {secondOpen && (
-            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
-              Hello world
-            </Dialog>
-          )}
-        </Dialog>
-      )}
-    </>
+      <Dialog
+        returnFocusRef={returnFocusRef}
+        isOpen={isOpen}
+        onDismiss={() => setIsOpen(false)}
+        aria-labelledby="header"
+      >
+        <div data-testid="inner">
+          <Dialog.Header id="header">Title</Dialog.Header>
+          <Box p={3}>
+            <Text fontFamily="sans-serif">Some content</Text>
+          </Box>
+        </div>
+      </Dialog>
+    </div>
   )
 }