From b2eedb46b5028964dca2fc2726f3b6a062728884 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Sun, 9 Mar 2025 06:57:58 -0400
Subject: [PATCH] #67 dialog docs

---
 src/common/components/Dialog/Dialog.tsx | 35 ++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/common/components/Dialog/Dialog.tsx b/src/common/components/Dialog/Dialog.tsx
index f3e04b6..23cda4b 100644
--- a/src/common/components/Dialog/Dialog.tsx
+++ b/src/common/components/Dialog/Dialog.tsx
@@ -26,7 +26,7 @@ const DialogContext = createContext<DialogContextValue>({
 
 /**
  * Defines the properties of the `Dialog` render prop function context object.
- * @param close - Closes the dialog.
+ * @param close - A function which closes the dialog.
  */
 type DialogRenderFnContext = {
   close: () => void;
@@ -44,6 +44,39 @@ export interface DialogProps extends BaseComponentProps {
 /**
  * A `Dialog` is a modal window that displays on top of the main content,
  * typically asking the user to take an action or confirm a decision.
+ * 
+ * A Dialog may be composed with regular `children` or accepts a render prop
+ * function. The render prop function provides access to the Dialog context
+ * attributes.
+ * 
+ * **Example:**
+ * ```
+  <Dialog>
+    {({ close }) => (
+      <>
+        <Dialog.Trigger>
+          <Button>Review the terms and conditions</Button>
+        </Dialog.Trigger>
+        <Dialog.Content>
+          <Dialog.Header>
+            <Dialog.Title>Terms and Conditions</Dialog.Title>
+            <Dialog.Subtitle>Please review and accept.</Dialog.Subtitle>
+          </Dialog.Header>
+          <Dialog.Body>
+            Sed qos eiusmod eiusmod at consectetur nam veniam exercitation.
+          </Dialog.Body>
+          <Dialog.Separator />
+          <Dialog.Footer>
+            <Dialog.ButtonBar>
+              <Dialog.Button onClick={() => close()}>Cancel</Dialog.Button>
+              <Dialog.Button variant="primary">Accept</Dialog.Button>
+            </Dialog.ButtonBar>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </>
+    )}
+  </Dialog>
+ * ```
  */
 const Dialog = ({ children, className, testId = 'dialog' }: DialogProps): JSX.Element => {
   const [isHidden, setIsHidden] = useState(true);