Dialog: move files, add a story

docs/content/Dialog.mdx

@@ -3,7 +3,7 @@ title: Dialog
 status: Alpha
 ---
 
-import data from '../../src/Dialog.docs.json'
+import data from '../../src/Dialog/Dialog.docs.json'
 
 The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
 

generated/components.json

@@ -122,60 +122,6 @@
       ],
       "subcomponents": []
     },
-    "dialog": {
-      "id": "dialog",
-      "name": "Dialog",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "isOpen",
-          "type": "boolean",
-          "description": "Whether or not the dialog is open"
-        },
-        {
-          "name": "onDismiss",
-          "type": "() => void",
-          "description": "Function that will be called when the dialog is closed"
-        },
-        {
-          "name": "returnFocusRef",
-          "type": " React.RefObject<HTMLElement>",
-          "description": "The element to restore focus back to after the `Dialog` is closed"
-        },
-        {
-          "name": "initialFocusRef",
-          "type": " React.RefObject<HTMLElement>",
-          "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
-        },
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "Dialog.Header",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        }
-      ]
-    },
     "filter_list": {
       "id": "filter_list",
       "name": "FilterList",
@@ -2025,6 +1971,65 @@
       ],
       "subcomponents": []
     },
+    "dialog": {
+      "id": "dialog",
+      "name": "Dialog",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-dialog--default",
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const returnFocusRef = React.useRef(null)\n  return (\n    <>\n      <Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>\n        Open\n      </Button>\n      <Dialog\n        returnFocusRef={returnFocusRef}\n        isOpen={isOpen}\n        onDismiss={() => setIsOpen(false)}\n        aria-labelledby=\"header-id\"\n      >\n        <Dialog.Header id=\"header-id\">Title</Dialog.Header>\n        some content\n      </Dialog>\n    </>\n  )\n}"
+        }
+      ],
+      "props": [
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Whether or not the dialog is open"
+        },
+        {
+          "name": "onDismiss",
+          "type": "() => void",
+          "description": "Function that will be called when the dialog is closed"
+        },
+        {
+          "name": "returnFocusRef",
+          "type": " React.RefObject<HTMLElement>",
+          "description": "The element to restore focus back to after the `Dialog` is closed"
+        },
+        {
+          "name": "initialFocusRef",
+          "type": " React.RefObject<HTMLElement>",
+          "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "Dialog.Header",
+          "props": [
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        }
+      ]
+    },
     "drafts_dialog": {
       "id": "drafts_dialog",
       "name": "Dialog",

src/Dialog/Dialog.stories.tsx

@@ -0,0 +1,46 @@
+import React, {useState} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, ThemeProvider} from '..'
+import {Button} from '../Button'
+import Dialog from './Dialog'
+
+export default {
+  title: 'Components/Dialog',
+  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>
+      )
+    },
+  ],
+} as Meta
+
+export const Default = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const returnFocusRef = React.useRef(null)
+
+  return (
+    <>
+      <Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>
+        Open
+      </Button>
+      <Dialog
+        returnFocusRef={returnFocusRef}
+        isOpen={isOpen}
+        onDismiss={() => setIsOpen(false)}
+        aria-labelledby="header-id"
+      >
+        <Dialog.Header id="header-id">Title</Dialog.Header>
+        some content
+      </Dialog>
+    </>
+  )
+}

src/Dialog.tsx → src/Dialog/Dialog.tsx

@@ -1,13 +1,13 @@
 import React, {forwardRef, useRef} from 'react'
 import styled from 'styled-components'
-import ButtonClose from './deprecated/Button/ButtonClose'
-import {get} from './constants'
-import Box from './Box'
-import useDialog from './hooks/useDialog'
-import sx, {SxProp} from './sx'
-import Text from './Text'
-import {ComponentProps} from './utils/types'
-import {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef'
+import ButtonClose from '../deprecated/Button/ButtonClose'
+import {get} from '../constants'
+import Box from '../Box'
+import useDialog from '../hooks/useDialog'
+import sx, {SxProp} from '../sx'
+import Text from '../Text'
+import {ComponentProps} from '../utils/types'
+import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 
 const noop = () => null
 

src/__tests__/Dialog.test.tsx → src/Dialog/__tests__/Dialog.test.tsx

@@ -1,9 +1,9 @@
 import React, {useState, useRef} from 'react'
-import {Dialog, Box, Text} from '..'
-import {Button} from '../deprecated'
+import {Dialog, Box, Text} from '../..'
+import {Button} from '../../deprecated'
 import {render as HTMLRender, act, fireEvent} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
-import {behavesAsComponent, checkExports} from '../utils/testing'
+import {behavesAsComponent, checkExports} from '../../utils/testing'
 expect.extend(toHaveNoViolations)
 
 const comp = (

src/__tests__/Dialog.types.test.tsx → src/Dialog/__tests__/Dialog.types.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dialog from '../Dialog'
+import Dialog from '..'
 
 export function shouldAcceptCallWithNoProps() {
   return <Dialog />

src/Dialog/index.ts

@@ -0,0 +1 @@
+export {default, DialogProps, DialogHeaderProps} from './Dialog'

src/__tests__/storybook.test.tsx

@@ -20,6 +20,7 @@ const allowlist = [
   'CounterLabel',
   'DataTable',
   'Details',
+  'Dialog',
   'Dialog2',
   'Flash',
   'Heading',