docs(snackbar): updated docs to support @action

src/components/ebay-snackbar-dialog/README.md

@@ -3,7 +3,7 @@
         ebay-snackbar-dialog
     </span>
     <span style='font-weight: normal; font-size: medium; margin-bottom: -15px;'>
-        DS v1.0.0
+        DS v2.0.0
     </span>
 </h1>
 

src/components/ebay-snackbar-dialog/examples/action.marko

@@ -1,10 +1,10 @@
 class {
     declare state: {
         open: boolean;
-    }
+    };
 
     onCreate() {
-        this.state = {open: false};
+        this.state = { open: false };
     }
 
     handleOpen() {
@@ -13,20 +13,21 @@ class {
 
     handleClose() {
         this.state.open = false;
-    }
-
-    handleAction() {
-        //do API call, other action here
-        alert("action")
+        this.emit("close");
     }
 }
-
 <ebay-button on-click("handleOpen")>
     Open Action Snackbar
 </ebay-button>
-<ebay-snackbar-dialog open=state.open on-close('handleClose') on-action("handleAction")>
+<ebay-snackbar-dialog
+    open=state.open
+    on-close("handleClose")
+    on-open("emit", "open")
+    on-action("emit", "action")
+    ...input
+>
     <@action accessKey="U">
         Undo
     </@action>
-    This is the action snackbar
+    This 'snackbar' text should be 1-2 lines.
 </ebay-snackbar-dialog>

src/components/ebay-snackbar-dialog/examples/default.marko

@@ -24,5 +24,5 @@ class {
     Open Default Snackbar
 </ebay-button>
 <ebay-snackbar-dialog  open=state.open on-close('handleClose') on-open('emit', 'open') ...input >
-    ${input.snacktext}
+    This 'snackbar' text should be 1-2 lines.
 </ebay-snackbar-dialog>

src/components/ebay-snackbar-dialog/snackbar-dialog.stories.ts

@@ -1,6 +1,14 @@
 import Readme from "./README.md";
-import Component from "./examples/default.marko";
-import code from "./examples/default.marko?raw";
+import component from "./index.marko";
+import {
+    addRenderBodies,
+    buildExtensionTemplate,
+} from "../../../.storybook/utils";
+
+import defaultTemplate from "./examples/default.marko";
+import defaultTemplateCode from "./examples/default.marko?raw";
+import withActionTemplate from "./examples/action.marko";
+import withActionTemplateCode from "./examples/action.marko?raw";
 
 const Template = (args) => ({
     input: {
@@ -15,7 +23,7 @@ const Template = (args) => ({
 
 export default {
     title: "dialogs/ebay-snackbar-dialog",
-    component: Component,
+    component,
     parameters: {
         docs: {
             description: {
@@ -37,9 +45,12 @@ export default {
             control: { type: "radio" },
             options: ["row", "column"],
         },
-        snacktext: {
-            control: { type: "text" },
-            description: "for demo only",
+        action: {
+            name: "@action",
+            description: "If present, shows an action button on snackbar",
+            table: {
+                category: "@attribute tags",
+            },
         },
         onOpen: {
             action: "on-open",
@@ -74,14 +85,12 @@ export default {
     },
 };
 
-export const Standard = Template.bind({});
-Standard.args = {
-    snacktext: "This is the snackbar",
-};
-Standard.parameters = {
-    docs: {
-        source: {
-            code,
-        },
-    },
-};
+export const Default = buildExtensionTemplate(
+    defaultTemplate,
+    defaultTemplateCode,
+);
+
+export const WithAction = buildExtensionTemplate(
+    withActionTemplate,
+    withActionTemplateCode,
+);

src/components/ebay-snackbar-dialog/test/__snapshots__/renders-basic-version.expected.txt

@@ -0,0 +1,29 @@
+<DocumentFragment>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    type="button"
+  >
+    Open Default Snackbar
+  </button>
+  <div
+    aria-live="polite"
+    aria-modal="true"
+    class="snackbar-dialog snackbar-dialog--transition"
+    hidden=""
+    role="dialog"
+  >
+    <div
+      class="snackbar-dialog__window"
+    >
+      <div
+        class="snackbar-dialog__header"
+      />
+      <div
+        class="snackbar-dialog__main"
+      >
+        This 'snackbar' text should be 1-2 lines.
+      </div>
+    </div>
+  </div>
+</DocumentFragment>

src/components/ebay-snackbar-dialog/test/__snapshots__/renders-in-open-state.expected.txt

@@ -0,0 +1,28 @@
+<DocumentFragment>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    type="button"
+  >
+    Open Default Snackbar
+  </button>
+  <div
+    aria-live="polite"
+    aria-modal="true"
+    class="snackbar-dialog snackbar-dialog--transition"
+    role="dialog"
+  >
+    <div
+      class="snackbar-dialog__window"
+    >
+      <div
+        class="snackbar-dialog__header"
+      />
+      <div
+        class="snackbar-dialog__main"
+      >
+        This 'snackbar' text should be 1-2 lines.
+      </div>
+    </div>
+  </div>
+</DocumentFragment>

src/components/ebay-snackbar-dialog/test/__snapshots__/renders-with-action-version.expected.txt

@@ -0,0 +1,45 @@
+<DocumentFragment>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    type="button"
+  >
+    Open Action Snackbar
+  </button>
+  <div
+    aria-live="polite"
+    aria-modal="true"
+    class="snackbar-dialog snackbar-dialog--transition"
+    hidden=""
+    role="dialog"
+  >
+    <div
+      class="snackbar-dialog__window"
+    >
+      <div
+        class="snackbar-dialog__header"
+      />
+      <div
+        class="snackbar-dialog__main"
+      >
+        This 'snackbar' text should be 1-2 lines.
+      </div>
+      <span
+        class="snackbar-dialog__actions"
+      >
+        <button
+          class="fake-link"
+          data-ebayui=""
+          type="button"
+        >
+          Undo
+          <span
+            class="clipped"
+          >
+            - Access Key: U
+          </span>
+        </button>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>

src/components/ebay-snackbar-dialog/test/__snapshots__/renders-without-handle.expected.txt

@@ -0,0 +1,29 @@
+<DocumentFragment>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    type="button"
+  >
+    Open Default Snackbar
+  </button>
+  <div
+    aria-live="polite"
+    aria-modal="true"
+    class="snackbar-dialog snackbar-dialog--transition"
+    hidden=""
+    role="dialog"
+  >
+    <div
+      class="snackbar-dialog__window snackbar-dialog__window--column"
+    >
+      <div
+        class="snackbar-dialog__header"
+      />
+      <div
+        class="snackbar-dialog__main"
+      >
+        This 'snackbar' text should be 1-2 lines.
+      </div>
+    </div>
+  </div>
+</DocumentFragment>

src/components/ebay-snackbar-dialog/test/test.browser.js

@@ -1,9 +1,11 @@
 import { expect, use } from "chai";
+import { composeStories } from "@storybook/marko";
 import chaiDom from "chai-dom";
+import sinon from "sinon/pkg/sinon";
 import { render, fireEvent, cleanup, waitFor } from "@marko/testing-library";
 import { fastAnimations } from "../../../common/test-utils/browser";
-import template from "..";
-import * as mock from "./mock";
+import * as stories from "../snackbar-dialog.stories"; // import all stories from the stories file
+const { Default, WithAction } = composeStories(stories);
 
 use(chaiDom);
 before(() => {
@@ -19,12 +21,16 @@ afterEach(() => {
 
 /** @type import("@marko/testing-library").RenderResult */
 let component;
+let clock;
 
 describe("given an open snackbar", () => {
-    const input = mock.Snackbar_Open;
-
     beforeEach(async () => {
-        component = await render(template, input);
+        component = await render(WithAction, { open: true });
+        clock = sinon.useFakeTimers();
+    });
+
+    afterEach(() => {
+        clock.restore();
     });
 
     it("then it is not hidden in the DOM", () => {
@@ -33,30 +39,29 @@ describe("given an open snackbar", () => {
 
     describe("clicking on action icon emits action", () => {
         it("action emitted", async () => {
-            await fireEvent.click(component.getByText(/action/i));
+            await fireEvent.click(component.getByText(/Undo/i));
             expect(component.emitted("action")).has.length(1);
         });
     });
 
     describe("focus and mouseenter prevent closing it until all events", () => {
         it("is not closed", async () => {
             await fireEvent.mouseEnter(
-                component.getByText(/action/i).parentElement,
+                component.getByText(/Undo/i).parentElement,
             );
-            await fireEvent.focus(component.getByText(/action/i).parentElement);
-            await fireEvent.blur(component.getByText(/action/i).parentElement);
+            await fireEvent.focus(component.getByText(/Undo/i).parentElement);
+            await fireEvent.blur(component.getByText(/Undo/i).parentElement);
+            clock.tick(7000);
             await waitFor(() => {
                 expect(component.emitted("close")).has.length(0);
-            }, 7000);
+            });
         });
     });
 });
 
 describe("given a closed snackbar", () => {
-    const input = mock.Snackbar_Closed;
-
     beforeEach(async () => {
-        component = await render(template, input);
+        component = await render(Default);
     });
 
     it("then it is hidden in the DOM", () => {