docs(alert-dialog,confirm-dialog): made the docs match expected usage

eBay · Jan 22, 2024 · cfefc06 · cfefc06
1 parent 152a995
commit cfefc06
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/src/components/ebay-alert-dialog/alert-dialog.stories.ts b/src/components/ebay-alert-dialog/alert-dialog.stories.ts
@@ -34,7 +34,7 @@ export default {
         },
         "confirm-text": {
             control: { type: "text" },
-            description: "Text for confirm button",
+            description: "Text for OK button",
         },
         header: {
             name: "@header",
@@ -48,9 +48,9 @@ export default {
 export const Standard = Template.bind({});
 Standard.args = {
     header: {
-        renderBody: `Heading Text`,
+        renderBody: `Alert!`,
     },
-    renderBody: `Body Content`,
+    renderBody: `You must acknowledge this alert to continue.`,
 };
 Standard.parameters = {
     docs: {

diff --git a/src/components/ebay-alert-dialog/examples/default.marko b/src/components/ebay-alert-dialog/examples/default.marko
@@ -7,18 +7,18 @@ export interface Input {
 }
 
 <ebay-alert-dialog
-    confirmText=input.confirmText || 'Confirm'
+    confirmText=input.confirmText || 'OK'
     open=state.open
     on-confirm('closeDialog')
 >
     <@header><${input.header.renderBody}/></@header>
     <${input.renderBody}/>
     <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        This 'alert' text should be 1-2 lines.
     </p>
 </ebay-alert-dialog>
 
-<ebay-button on-click('openDialog')>Open Dialog</ebay-button>
+<ebay-button on-click('openDialog')>Open Alert Dialog</ebay-button>
 class {
     declare state: {
         open: boolean;

diff --git a/src/components/ebay-confirm-dialog/confirm-dialog.stories.ts b/src/components/ebay-confirm-dialog/confirm-dialog.stories.ts
@@ -40,6 +40,12 @@ export default {
             control: { type: "text" },
             description: "Text for reject button",
         },
+        header: {
+            name: "@header",
+            table: {
+                category: "@attribute tags",
+            },
+        },
         confirmCtaVariant: {
             options: ["none", "destructive"],
             description: "The alternative main CTA button variant to use.",
@@ -85,8 +91,12 @@ export default {
 
 export const Default = Template.bind({});
 Default.args = {
-    confirmText: "Okay",
+    confirmText: "Delete",
     rejectText: "Cancel",
+    header: {
+        renderBody: `Delete Address?`,
+    },
+    renderBody: `You will permanently lose this address.`,
 };
 Default.parameters = {
     docs: {

diff --git a/src/components/ebay-confirm-dialog/examples/default.marko b/src/components/ebay-confirm-dialog/examples/default.marko
@@ -1,19 +1,28 @@
+export interface Input {
+    confirmText?: string;
+    renderBody?: Marko.Body;
+    header: {
+        renderBody?: Marko.Body;
+    }
+}
+
 <ebay-confirm-dialog
     reject-text='Cancel'
-    confirm-text='Okay'
+    confirm-text='Delete'
     open=state.open
     on-open("emit", "open")
     on-reject('closeDialog')
     on-confirm('success')
     ...input
 >
-    <@header>Heading</@header>
+    <@header><${input.header.renderBody}/></@header>
+    <${input.renderBody}/>
     <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        This 'confirm' text should be 1-2 lines.
     </p>
 </ebay-confirm-dialog>
 
-<ebay-button on-click('openDialog')>Open Dialog</ebay-button>
+<ebay-button on-click('openDialog')>Open Confirm Dialog</ebay-button>
 class {
     onInput(input) {
         this.state = { open: input.open };