From a1e9192db7790c093d693fe1a8b3eaad7249942e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 31 May 2024 11:20:24 -0400
Subject: [PATCH] add examples; closes #112

---
 docs/docs/components/card.md           |   6 +-
 docs/docs/components/dialog.md         | 131 +++++++++++++++++++++++++
 docs/docs/components/drawer.md         | 131 +++++++++++++++++++++++++
 src/components/dialog/dialog.styles.ts |   2 +
 src/components/drawer/drawer.styles.ts |   2 +
 5 files changed, 269 insertions(+), 3 deletions(-)

diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index df1c67234..322076047 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -130,7 +130,7 @@ const App = () => (
 
 ### Card with Header
 
-Headers can be used to display titles and more.
+Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card.
 
 ```html {.example}
 <wa-card with-header class="card-header">
@@ -206,7 +206,7 @@ const App = () => (
 
 ### Card with Footer
 
-Footers can be used to display actions, summaries, or other relevant content.
+Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card.
 
 ```html {.example}
 <wa-card with-footer class="card-footer">
@@ -269,7 +269,7 @@ const App = () => (
 
 ### Images
 
-Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
+Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card.
 
 ```html {.example}
 <wa-card with-image class="card-image">
diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md
index d5c2f295a..96b3e4ed2 100644
--- a/docs/docs/components/dialog.md
+++ b/docs/docs/components/dialog.md
@@ -49,6 +49,137 @@ const App = () => {
 
 ## Examples
 
+### Dialog with Header
+
+Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the dialog.
+
+```html {.example}
+<wa-dialog label="Dialog" with-header class="dialog-header">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</wa-dialog>
+
+<wa-button>Open Dialog</wa-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-header');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+```
+
+{% raw %}
+```jsx {.react}
+import { useState } from 'react';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <WaDialog label="Dialog" with-header open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </WaDialog>
+
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+    </>
+  );
+};
+```
+{% endraw %}
+
+### Dialog with Footer
+
+Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the dialog.
+
+```html {.example}
+<wa-dialog label="Dialog" with-footer class="dialog-footer">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
+</wa-dialog>
+
+<wa-button>Open Dialog</wa-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-footer');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+```
+
+{% raw %}
+```jsx {.react}
+import { useState } from 'react';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <WaDialog label="Dialog" with-footer open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
+          Close
+        </WaButton>
+      </WaDialog>
+
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+    </>
+  );
+};
+```
+{% endraw %}
+
+### Dismissing Dialogs
+
+You can add the special `data-dialog="dismiss"` attribute to a button inside the dialog to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the dialog programmatically.
+
+```html {.example}
+<wa-dialog label="Dialog" with-header with-footer class="dialog-dismiss">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
+</wa-dialog>
+
+<wa-button>Open Dialog</wa-button>
+
+<script>
+  const dialog = document.querySelector('.dialog-dismiss');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => dialog.open = true);
+</script>
+```
+
+{% raw %}
+```jsx {.react}
+import { useState } from 'react';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <WaDialog label="Dialog" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <WaButton slot="footer" variant="brand" data-dialog="dismiss">
+          Close
+        </WaButton>
+      </WaDialog>
+
+      <WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
+    </>
+  );
+};
+```
+{% endraw %}
+
 ### Custom Width
 
 Use the `--width` custom property to set the dialog's width.
diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md
index 7cb11a72e..e36f3cb3a 100644
--- a/docs/docs/components/drawer.md
+++ b/docs/docs/components/drawer.md
@@ -49,6 +49,137 @@ const App = () => {
 
 ## Examples
 
+### Drawer with Header
+
+Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the drawer.
+
+```html {.example}
+<wa-drawer label="Drawer" with-header class="drawer-header">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</wa-drawer>
+
+<wa-button>Open Drawer</wa-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-header');
+  const openButton = drawer.nextElementSibling;
+
+  openButton.addEventListener('click', () => drawer.open = true);
+</script>
+```
+
+{% raw %}
+```jsx {.react}
+import { useState } from 'react';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <WaDrawer label="Drawer" with-header open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </WaDrawer>
+
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+    </>
+  );
+};
+```
+{% endraw %}
+
+### Drawer with Footer
+
+Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the drawer.
+
+```html {.example}
+<wa-drawer label="Drawer" with-footer class="drawer-footer">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
+</wa-drawer>
+
+<wa-button>Open Drawer</wa-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-footer');
+  const openButton = drawer.nextElementSibling;
+
+  openButton.addEventListener('click', () => drawer.open = true);
+</script>
+```
+
+{% raw %}
+```jsx {.react}
+import { useState } from 'react';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <WaDrawer label="Drawer" with-footer open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
+          Close
+        </WaButton>
+      </WaDrawer>
+
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+    </>
+  );
+};
+```
+{% endraw %}
+
+### Dismissing Drawers
+
+You can add the special `data-dialog="dismiss"` attribute to a button inside the drawer to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the drawer programmatically.
+
+```html {.example}
+<wa-drawer label="Drawer" with-header with-footer class="drawer-dismiss">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
+</wa-drawer>
+
+<wa-button>Open Drawer</wa-button>
+
+<script>
+  const drawer = document.querySelector('.drawer-dismiss');
+  const openButton = drawer.nextElementSibling;
+
+  openButton.addEventListener('click', () => drawer.open = true);
+</script>
+```
+
+{% raw %}
+```jsx {.react}
+import { useState } from 'react';
+import WaButton from '@shoelace-style/shoelace/dist/react/button';
+import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <WaButton slot="footer" variant="brand" data-drawer="dismiss">
+          Close
+        </WaButton>
+      </WaDrawer>
+
+      <WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
+    </>
+  );
+};
+```
+{% endraw %}
+
 ### Slide in From Start
 
 By default, drawers slide in from the end. To make the drawer slide in from the start, set the `placement` attribute to `start`.
diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts
index 12198e4d9..b5f5d5571 100644
--- a/src/components/dialog/dialog.styles.ts
+++ b/src/components/dialog/dialog.styles.ts
@@ -73,6 +73,7 @@ export default css`
   .dialog__header {
     flex: 0 0 auto;
     display: flex;
+    flex-wrap: wrap;
   }
 
   .dialog__title {
@@ -112,6 +113,7 @@ export default css`
   .dialog__footer {
     flex: 0 0 auto;
     display: flex;
+    flex-wrap: wrap;
     gap: var(--wa-space-xs);
     justify-content: end;
     padding: var(--footer-spacing);
diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts
index 4049a6fbd..b9995a32b 100644
--- a/src/components/drawer/drawer.styles.ts
+++ b/src/components/drawer/drawer.styles.ts
@@ -138,6 +138,7 @@ export default css`
 
   .drawer__header {
     display: flex;
+    flex-wrap: wrap;
   }
 
   .drawer__title {
@@ -176,6 +177,7 @@ export default css`
 
   .drawer__footer {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--wa-space-xs);
     justify-content: end;
     padding: var(--footer-spacing);