feat: Add utility functions as methods to Dialog (#1576)

Amsterdam · Sep 11, 2024 · f25bc01 · f25bc01
1 parent a05dc41
commit f25bc01
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 16 deletions.
diff --git a/packages/css/src/components/dialog/README.md b/packages/css/src/components/dialog/README.md
@@ -27,8 +27,7 @@ Also, this approach keeps the order of buttons consistent on both narrow and wid
 
 ## Closing Dialog without submit
 
-You can close a Dialog without submitting by using `<button type="button" onClick={closeDialog}>`.
-This uses the `closeDialog` function from the React package.
+You can close a Dialog without submitting by using `<button type="button" onClick={Dialog.close}>`.
 
 ## References
 

diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
@@ -18,11 +18,10 @@ export type DialogProps = {
   heading: string
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>
 
-export const closeDialog = (event: MouseEvent<HTMLButtonElement>) => event.currentTarget.closest('dialog')?.close()
+const closeDialog = (event: MouseEvent<HTMLButtonElement>) => event.currentTarget.closest('dialog')?.close()
+const openDialog = (id: string) => (document.querySelector(id) as HTMLDialogElement)?.showModal()
 
-export const openDialog = (id: string) => (document.querySelector(id) as HTMLDialogElement)?.showModal()
-
-export const Dialog = forwardRef(
+const DialogRoot = forwardRef(
   (
     { actions, children, className, closeButtonLabel = 'Sluiten', heading, ...restProps }: DialogProps,
     ref: ForwardedRef<HTMLDialogElement>,
@@ -40,4 +39,9 @@ export const Dialog = forwardRef(
   ),
 )
 
-Dialog.displayName = 'Dialog'
+DialogRoot.displayName = 'Dialog'
+
+export const Dialog = Object.assign(DialogRoot, {
+  close: closeDialog,
+  open: openDialog,
+})
diff --git a/packages/react/src/Dialog/index.ts b/packages/react/src/Dialog/index.ts
@@ -1,2 +1,2 @@
-export { closeDialog, Dialog, openDialog } from './Dialog'
+export { Dialog } from './Dialog'
 export type { DialogProps } from './Dialog'
diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx
@@ -28,9 +28,9 @@ Click or tap this Button to open the Dialog.
 
 #### Utility functions
 
-To open the Dialog, use the `openDialog` function from the React package.
+To open the Dialog, use `Dialog.open(id)` from the React package.
 Pass the Dialog’s `id` to the function to select it.
-To close the Dialog, use the `closeDialog` function.
+To close the Dialog, use `Dialog.close`.
 
 ### Vertically stacked Buttons
 

diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { Button, closeDialog, Heading, Paragraph } from '@amsterdam/design-system-react'
-import { Dialog, openDialog } from '@amsterdam/design-system-react/src'
+import { Button, Heading, Paragraph } from '@amsterdam/design-system-react'
+import { Dialog } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
@@ -14,7 +14,7 @@ const meta = {
     actions: (
       <>
         <Button type="submit">Doorgaan</Button>
-        <Button onClick={closeDialog} variant="tertiary">
+        <Button onClick={Dialog.close} variant="tertiary">
           Stoppen
         </Button>
       </>
@@ -67,7 +67,7 @@ export const Default: Story = {
 
 export const WithScrollbar: Story = {
   args: {
-    actions: <Button onClick={closeDialog}>Sluiten</Button>,
+    actions: <Button onClick={Dialog.close}>Sluiten</Button>,
     children: [
       <Heading level={2} size="level-5" key={1}>
         Algemeen
@@ -125,7 +125,7 @@ export const TriggerButton: Story = {
   decorators: [
     (Story) => (
       <article>
-        <Button onClick={() => openDialog('#openDialog')}>Open Dialog</Button>
+        <Button onClick={() => Dialog.open('#openDialog')}>Open Dialog</Button>
         <Story />
       </article>
     ),
@@ -137,7 +137,7 @@ export const VerticalButtons: Story = {
     actions: (
       <>
         <Button type="submit">Lange teksten op deze knoppen</Button>
-        <Button onClick={closeDialog} variant="tertiary">
+        <Button onClick={Dialog.close} variant="tertiary">
           Om verticaal stapelen te demonstreren
         </Button>
       </>