[DTRA-1047] henry/dtra-1047/feat: snackbar UI

lib/components/Snackbar/SnackbarWrapper.tsx

@@ -0,0 +1,43 @@
+import { StandalonePlaceholderRegularIcon } from "@deriv/quill-icons/Standalone";
+import { Snackbar } from ".";
+import React, { useState } from "react";
+
+export const SnackbarWrapper = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleActionClick = () => {
+        console.log("clicked");
+        handleClose();
+    };
+
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+
+    const handleClose = () => {
+        setTimeout(() => {
+            setIsOpen(false);
+        }, 1000);
+    };
+
+    return (
+        <div>
+            <button onClick={handleOpen} style={{ color: "white" }}>
+                Click me
+            </button>
+            <Snackbar
+                icon={
+                    <StandalonePlaceholderRegularIcon
+                        fill="#ffffff"
+                        iconSize="sm"
+                    />
+                }
+                message="Unable to upload selected photos. \n The app will retry in 5 seconds."
+                actionText="Action"
+                onActionClick={handleActionClick}
+                isOpen={isOpen}
+                onClose={handleClose}
+            />
+        </div>
+    );
+};

lib/components/Snackbar/__tests__/__snapshots__/snackbar.test.tsx.snap

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snackbar calls onActionClick when action button is clicked 1`] = `
+<div>
+  <div
+    class="snackbar fast-animation"
+  >
+    <div
+      class="snackbar__message--container"
+    >
+      <p
+        class="quill-typography__body-text__size--sm__weight--regular__decoration--default quill-typography__color--default snackbar__message"
+      >
+        Test message
+      </p>
+    </div>
+    <button
+      style="color: rgb(255, 255, 255); padding: 4px;"
+      type="button"
+    >
+      Action
+    </button>
+    <button
+      style="color: rgb(255, 255, 255); padding: 4px;"
+      type="button"
+    >
+      x
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Snackbar calls onClose after a certain duration when Snackbar is open 1`] = `
+<div>
+  <div
+    class="snackbar slow-animation"
+  >
+    <div
+      class="snackbar__message--container"
+    >
+      <p
+        class="quill-typography__body-text__size--sm__weight--regular__decoration--default quill-typography__color--default snackbar__message"
+      >
+        Test message
+      </p>
+    </div>
+    <button
+      style="color: rgb(255, 255, 255); padding: 4px;"
+      type="button"
+    >
+      x
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Snackbar calls onClose when close button is clicked 1`] = `
+<div>
+  <div
+    class="snackbar fast-animation"
+  >
+    <div
+      class="snackbar__message--container"
+    >
+      <p
+        class="quill-typography__body-text__size--sm__weight--regular__decoration--default quill-typography__color--default snackbar__message"
+      >
+        Test message
+      </p>
+    </div>
+    <button
+      style="color: rgb(255, 255, 255); padding: 4px;"
+      type="button"
+    >
+      x
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Snackbar renders correctly with custom icon 1`] = `
+<div>
+  <div
+    class="snackbar slow-animation"
+  >
+    <div
+      class="snackbar__icon--container"
+    >
+      <img
+        alt="Custom Icon"
+        data-testid="custom-icon"
+        src="custom-icon.svg"
+      />
+    </div>
+    <div
+      class="snackbar__message--container"
+    >
+      <p
+        class="quill-typography__body-text__size--sm__weight--regular__decoration--default quill-typography__color--default snackbar__message"
+      >
+        Test message
+      </p>
+    </div>
+    <button
+      style="color: rgb(255, 255, 255); padding: 4px;"
+      type="button"
+    >
+      x
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Snackbar renders correctly without action button 1`] = `
+<div>
+  <div
+    class="snackbar slow-animation"
+  >
+    <div
+      class="snackbar__message--container"
+    >
+      <p
+        class="quill-typography__body-text__size--sm__weight--regular__decoration--default quill-typography__color--default snackbar__message"
+      >
+        Test message
+      </p>
+    </div>
+    <button
+      style="color: rgb(255, 255, 255); padding: 4px;"
+      type="button"
+    >
+      x
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Snackbar renders correctly without close button 1`] = `
+<div>
+  <div
+    class="snackbar slow-animation"
+  >
+    <div
+      class="snackbar__message--container"
+    >
+      <p
+        class="quill-typography__body-text__size--sm__weight--regular__decoration--default quill-typography__color--default snackbar__message"
+      >
+        Test message
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Snackbar renders with default props 1`] = `
+<div>
+  <div
+    class="snackbar slow-animation"
+  >
+    <div
+      class="snackbar__message--container"
+    >
+      <p
+        class="quill-typography__body-text__size--sm__weight--regular__decoration--default quill-typography__color--default snackbar__message"
+      >
+        Test message
+      </p>
+    </div>
+    <button
+      style="color: rgb(255, 255, 255); padding: 4px;"
+      type="button"
+    >
+      x
+    </button>
+  </div>
+</div>
+`;

lib/components/Snackbar/__tests__/snackbar.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Snackbar } from "..";
+
+describe("Snackbar", () => {
+    it("renders with default props", () => {
+        const { container } = render(
+            <Snackbar
+                message="Test message"
+                isOpen={true}
+                onClose={jest.fn()}
+            />,
+        );
+        expect(screen.getByText("Test message")).toBeInTheDocument();
+        expect(container).toMatchSnapshot();
+    });
+    it("calls onActionClick when action button is clicked", () => {
+        const onActionClickMock = jest.fn();
+        const { container } = render(
+            <Snackbar
+                message="Test message"
+                actionText="Action"
+                isOpen={true}
+                onActionClick={onActionClickMock}
+                onClose={jest.fn()}
+            />,
+        );
+
+        fireEvent.click(screen.getByText("Action"));
+        expect(onActionClickMock).toHaveBeenCalled();
+        expect(container).toMatchSnapshot();
+    });
+    it("calls onClose when close button is clicked", () => {
+        const onCloseMock = jest.fn();
+        const { container } = render(
+            <Snackbar
+                message="Test message"
+                isOpen={true}
+                onClose={onCloseMock}
+            />,
+        );
+
+        fireEvent.click(screen.getByText("x"));
+        expect(onCloseMock).toHaveBeenCalled();
+        expect(container).toMatchSnapshot();
+    });
+    it("calls onClose after a certain duration when Snackbar is open", async () => {
+        jest.useFakeTimers();
+
+        const onCloseMock = jest.fn();
+        const { container } = render(
+            <Snackbar
+                message="Test message"
+                isOpen={true}
+                onClose={onCloseMock}
+            />,
+        );
+
+        jest.advanceTimersByTime(3000);
+        expect(onCloseMock).toHaveBeenCalled();
+        expect(container).toMatchSnapshot();
+
+        jest.useRealTimers();
+    });
+    it("renders correctly with custom icon", () => {
+        const customIcon = (
+            <img
+                src="custom-icon.svg"
+                alt="Custom Icon"
+                data-testid="custom-icon"
+            />
+        );
+        const { container } = render(
+            <Snackbar
+                icon={customIcon}
+                message="Test message"
+                isOpen={true}
+                onClose={jest.fn()}
+            />,
+        );
+
+        expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+        expect(container).toMatchSnapshot();
+    });
+    it("renders correctly without action button", () => {
+        const { container } = render(
+            <Snackbar
+                message="Test message"
+                isOpen={true}
+                onClose={() => {}}
+            />,
+        );
+
+        expect(screen.queryByText("Action")).toBeNull();
+        expect(container).toMatchSnapshot();
+    });
+    it("renders correctly without close button", () => {
+        const { container } = render(
+            <Snackbar
+                message="Test message"
+                isOpen={true}
+                onClose={jest.fn()}
+                hasCloseButton={false}
+            />,
+        );
+
+        expect(screen.queryByText("x")).toBeNull();
+        expect(container).toMatchSnapshot();
+    });
+});