@simplybusiness/mobius 7.0.0 → 7.1.0

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { useEffect } from "react";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Stack } from "../Stack";
+import { Text } from "../Text";
+import { toast } from "./Toast";
+import { Toaster } from "./Toaster";
+import type { ToasterProps } from "./Toaster";
+import { excludeControls } from "../../utils";
+
+type StoryType = StoryObj<typeof Toaster>;
+
+const meta: Meta<typeof Toaster> = {
+  title: "Components/Toast",
+  component: Toaster,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+      ],
+    },
+    ...excludeControls("toastOptions", "theme", "icons", "dir", "hotkey"),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Toast notifications for displaying brief, non-blocking messages. Built on Sonner.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Default: StoryType = {
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <Button onClick={() => toast.info("This is an info toast")}>
+        Show Toast
+      </Button>
+    </>
+  ),
+  args: {
+    position: "top-right",
+    closeButton: true,
+    expand: false,
+    duration: 4000,
+    visibleToasts: 3,
+  },
+  play: () => {
+    toast.info("This is an info toast");
+  },
+};
+
+export const Info: StoryType = {
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <Button
+        onClick={() => toast.info("Your session will expire in 5 minutes")}
+      >
+        Show Info Toast
+      </Button>
+    </>
+  ),
+  args: {
+    position: "top-right",
+  },
+  play: () => {
+    toast.info("Your session will expire in 5 minutes");
+  },
+};
+
+export const Success: StoryType = {
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <Button onClick={() => toast.success("Your changes have been saved")}>
+        Show Success Toast
+      </Button>
+    </>
+  ),
+  args: {
+    position: "top-right",
+  },
+  play: () => {
+    toast.success("Your changes have been saved");
+  },
+};
+
+export const Warning: StoryType = {
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <Button
+        onClick={() =>
+          toast.warning("Please review your input before continuing")
+        }
+      >
+        Show Warning Toast
+      </Button>
+    </>
+  ),
+  args: {
+    position: "top-right",
+  },
+  play: () => {
+    toast.warning("Please review your input before continuing");
+  },
+};
+
+export const ErrorVariant: StoryType = {
+  name: "Error",
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <Button
+        onClick={() => toast.error("Something went wrong. Please try again.")}
+      >
+        Show Error Toast
+      </Button>
+    </>
+  ),
+  args: {
+    position: "top-right",
+  },
+  play: () => {
+    toast.error("Something went wrong. Please try again.");
+  },
+};
+
+export const WithTitle: StoryType = {
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <Button
+        onClick={() =>
+          toast.success("Your quote has been saved and sent to your email.", {
+            title: "Quote saved",
+          })
+        }
+      >
+        Show Toast with Title
+      </Button>
+    </>
+  ),
+  args: {
+    position: "top-right",
+  },
+  play: () => {
+    toast.success("Your quote has been saved and sent to your email.", {
+      title: "Quote saved",
+    });
+  },
+};
+
+export const WithActions: StoryType = {
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <Button
+        onClick={() =>
+          toast.info("Would you like to save your progress?", {
+            title: "Save progress",
+            action: {
+              label: "Save",
+              onClick: () => console.log("Saved!"),
+            },
+            cancel: {
+              label: "Discard",
+              onClick: () => console.log("Discarded!"),
+            },
+          })
+        }
+      >
+        Show Toast with Actions
+      </Button>
+    </>
+  ),
+  args: {
+    position: "top-right",
+  },
+  play: () => {
+    toast.info("Would you like to save your progress?", {
+      title: "Save progress",
+      action: {
+        label: "Save",
+        onClick: () => console.log("Saved!"),
+      },
+      cancel: {
+        label: "Discard",
+        onClick: () => console.log("Discarded!"),
+      },
+    });
+  },
+};
+
+export const AllVariants: StoryType = {
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <Stack gap="sm">
+        <Button onClick={() => toast.info("This is an info message")}>
+          Info
+        </Button>
+        <Button onClick={() => toast.success("This is a success message")}>
+          Success
+        </Button>
+        <Button onClick={() => toast.warning("This is a warning message")}>
+          Warning
+        </Button>
+        <Button onClick={() => toast.error("This is an error message")}>
+          Error
+        </Button>
+      </Stack>
+    </>
+  ),
+  args: {
+    position: "top-right",
+  },
+  play: () => {
+    toast.info("This is an info message");
+    toast.success("This is a success message");
+    toast.warning("This is a warning message");
+    toast.error("This is an error message");
+  },
+};
+
+const InteractiveDemoComponent = () => {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "r" || e.key === "R") {
+        const random = Math.floor(Math.random() * 4);
+        switch (random) {
+          case 0:
+            toast.info("This is an info toast");
+            break;
+          case 1:
+            toast.success("Operation completed successfully");
+            break;
+          case 2:
+            toast.warning("Please check your input");
+            break;
+          default:
+            toast.error("Something went wrong");
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+
+  return (
+    <Stack gap="md">
+      <Text>Press &apos;R&apos; to show a random toast</Text>
+      <Flex gap="sm">
+        <Button onClick={() => toast.info("Info toast")}>Info</Button>
+        <Button onClick={() => toast.success("Success toast")}>Success</Button>
+        <Button onClick={() => toast.warning("Warning toast")}>Warning</Button>
+        <Button onClick={() => toast.error("Error toast")}>Error</Button>
+      </Flex>
+    </Stack>
+  );
+};
+
+export const InteractiveDemo: StoryType = {
+  render: (args: ToasterProps) => (
+    <>
+      <Toaster {...args} />
+      <InteractiveDemoComponent />
+    </>
+  ),
+  args: {
+    position: "top-right",
+  },
+};

package/src/components/Toast/Toast.test.tsx

@@ -0,0 +1,188 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Toaster, toast } from ".";
+
+// Mock setPointerCapture which JSDOM doesn't support (used by Sonner)
+beforeAll(() => {
+  Element.prototype.setPointerCapture = jest.fn();
+  Element.prototype.releasePointerCapture = jest.fn();
+});
+
+describe("Toast", () => {
+  describe("Toaster", () => {
+    it("renders without errors", () => {
+      render(<Toaster />);
+      // Sonner renders a section element with aria-label
+      expect(screen.getByRole("region")).toBeInTheDocument();
+    });
+  });
+
+  describe("toast functions", () => {
+    beforeEach(() => {
+      toast.dismiss();
+    });
+
+    it("shows info toast with correct content", async () => {
+      render(<Toaster />);
+
+      toast.info("Info message");
+
+      await waitFor(() => {
+        expect(screen.getByText("Info message")).toBeInTheDocument();
+      });
+    });
+
+    it("shows success toast with correct content", async () => {
+      render(<Toaster />);
+
+      toast.success("Success message");
+
+      await waitFor(() => {
+        expect(screen.getByText("Success message")).toBeInTheDocument();
+      });
+    });
+
+    it("shows warning toast with correct content", async () => {
+      render(<Toaster />);
+
+      toast.warning("Warning message");
+
+      await waitFor(() => {
+        expect(screen.getByText("Warning message")).toBeInTheDocument();
+      });
+    });
+
+    it("shows error toast with correct content", async () => {
+      render(<Toaster />);
+
+      toast.error("Error message");
+
+      await waitFor(() => {
+        expect(screen.getByText("Error message")).toBeInTheDocument();
+      });
+    });
+
+    it("shows toast with title", async () => {
+      render(<Toaster />);
+
+      toast.info("Description text", { title: "Title text" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Title text")).toBeInTheDocument();
+      });
+    });
+
+    it("shows toast with description when title is provided", async () => {
+      render(<Toaster />);
+
+      toast.info("Description text", { title: "Title text" });
+
+      await waitFor(() => {
+        expect(screen.getByText("Description text")).toBeInTheDocument();
+      });
+    });
+
+    it("renders toast with action button", async () => {
+      render(<Toaster />);
+
+      toast.info("Action toast", {
+        action: { label: "Undo", onClick: jest.fn() },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText("Undo")).toBeInTheDocument();
+      });
+    });
+
+    it("shows toast with cancel button", async () => {
+      render(<Toaster />);
+
+      toast.info("Cancel toast", {
+        cancel: { label: "Cancel" },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText("Cancel")).toBeInTheDocument();
+      });
+    });
+
+    it("calls action onClick and dismisses toast when action button is clicked", async () => {
+      const user = userEvent.setup();
+      const onClickMock = jest.fn();
+      render(<Toaster />);
+
+      toast.info("Action toast", {
+        action: { label: "Confirm", onClick: onClickMock },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText("Confirm")).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText("Confirm"));
+
+      expect(onClickMock).toHaveBeenCalledTimes(1);
+
+      await waitFor(() => {
+        expect(screen.queryByText("Action toast")).not.toBeInTheDocument();
+      });
+    });
+
+    it("calls cancel onClick and dismisses toast when cancel button is clicked", async () => {
+      const user = userEvent.setup();
+      const onClickMock = jest.fn();
+      render(<Toaster />);
+
+      toast.info("Cancel toast", {
+        cancel: { label: "Dismiss", onClick: onClickMock },
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText("Dismiss")).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText("Dismiss"));
+
+      expect(onClickMock).toHaveBeenCalledTimes(1);
+
+      await waitFor(() => {
+        expect(screen.queryByText("Cancel toast")).not.toBeInTheDocument();
+      });
+    });
+
+    it("dismisses toast when dismiss is called", async () => {
+      render(<Toaster />);
+
+      toast.info("Dismissable toast");
+
+      await waitFor(() => {
+        expect(screen.getByText("Dismissable toast")).toBeInTheDocument();
+      });
+
+      toast.dismiss();
+
+      await waitFor(() => {
+        expect(screen.queryByText("Dismissable toast")).not.toBeInTheDocument();
+      });
+    });
+
+    it("calls onDismiss callback when toast is dismissed via close button", async () => {
+      const user = userEvent.setup();
+      const onDismissMock = jest.fn();
+      render(<Toaster closeButton />);
+
+      toast.info("Dismissable toast", { onDismiss: onDismissMock });
+
+      await waitFor(() => {
+        expect(screen.getByText("Dismissable toast")).toBeInTheDocument();
+      });
+
+      const closeButton = screen.getByRole("button", { name: "Close" });
+      await user.click(closeButton);
+
+      await waitFor(() => {
+        expect(onDismissMock).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,154 @@
+import {
+  circleCheck,
+  circleExclamation,
+  circleInfo,
+  cross,
+  triangleExclamation,
+} from "@simplybusiness/icons";
+import classNames from "classnames/dedupe";
+import type { ReactNode } from "react";
+import { toast as sonnerToast } from "sonner";
+import { Icon } from "../Icon";
+import { toastState } from "./state";
+import type { ToastOptions, ToastVariant } from "./types";
+
+const variantIcons: Record<ToastVariant, typeof circleInfo> = {
+  info: circleInfo,
+  success: circleCheck,
+  warning: triangleExclamation,
+  error: circleExclamation,
+};
+
+const variantColors: Record<ToastVariant, string> = {
+  info: "var(--color-info)",
+  success: "var(--color-valid)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)",
+};
+
+const ToastIcon = ({ variant }: { variant: ToastVariant }) => (
+  <span className="mobius-toast__icon">
+    <Icon icon={variantIcons[variant]} color={variantColors[variant]} />
+  </span>
+);
+
+const CloseIcon = () => (
+  <span className="mobius-toast__close-icon">
+    <Icon icon={cross} />
+  </span>
+);
+
+type ToastContentProps = {
+  toastId: string | number;
+  variant: ToastVariant;
+  title?: string;
+  description?: ReactNode;
+  action?: ToastOptions["action"];
+  cancel?: ToastOptions["cancel"];
+  showCloseButton?: boolean;
+};
+
+const ToastContent = ({
+  toastId,
+  variant,
+  title,
+  description,
+  action,
+  cancel,
+  showCloseButton = toastState.showCloseButton,
+}: ToastContentProps) => (
+  <div className={classNames("mobius", "mobius-toast", `--${variant}`)}>
+    <ToastIcon variant={variant} />
+    <div className="mobius-toast__body">
+      <div className="mobius-toast__content">
+        {title && <div className="mobius-toast__title">{title}</div>}
+        {description && (
+          <div className="mobius-toast__description">{description}</div>
+        )}
+      </div>
+      {(action || cancel) && (
+        <div className="mobius-toast__actions">
+          {cancel && (
+            <button
+              type="button"
+              className="mobius-toast__cancel"
+              onClick={() => {
+                cancel.onClick?.();
+                sonnerToast.dismiss(toastId);
+              }}
+            >
+              {cancel.label}
+            </button>
+          )}
+          {action && (
+            <button
+              type="button"
+              className="mobius-toast__action"
+              onClick={() => {
+                action.onClick();
+                sonnerToast.dismiss(toastId);
+              }}
+            >
+              {action.label}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+    {showCloseButton && (
+      <button
+        type="button"
+        className="mobius-toast__close"
+        onClick={() => sonnerToast.dismiss(toastId)}
+        aria-label="Close"
+      >
+        <CloseIcon />
+      </button>
+    )}
+  </div>
+);
+
+const createCustomToast = (
+  message: string,
+  variant: ToastVariant,
+  options?: ToastOptions,
+) =>
+  sonnerToast.custom(
+    id => (
+      <ToastContent
+        toastId={id}
+        variant={variant}
+        title={options?.title}
+        description={options?.description ?? message}
+        action={options?.action}
+        cancel={options?.cancel}
+        showCloseButton={options?.showCloseButton}
+      />
+    ),
+    {
+      duration: options?.duration,
+      onDismiss: options?.onDismiss,
+      onAutoClose: options?.onAutoClose,
+    },
+  );
+
+export const toast = {
+  /** Show an info toast */
+  info: (message: string, options?: ToastOptions) =>
+    createCustomToast(message, "info", options),
+
+  /** Show a success toast */
+  success: (message: string, options?: ToastOptions) =>
+    createCustomToast(message, "success", options),
+
+  /** Show a warning toast */
+  warning: (message: string, options?: ToastOptions) =>
+    createCustomToast(message, "warning", options),
+
+  /** Show an error toast */
+  error: (message: string, options?: ToastOptions) =>
+    createCustomToast(message, "error", options),
+
+  /** Dismiss a specific toast by ID or all toasts */
+  dismiss: (toastId?: string | number) => sonnerToast.dismiss(toastId),
+};

package/src/components/Toast/ToastOptionsDoc.tsx

@@ -0,0 +1,8 @@
+import type { ToastOptions } from "./types";
+
+/**
+ * Documentation-only component for ToastOptions.
+ * Exists solely to provide ArgTypes for the toast() function options.
+ */
+export const ToastOptionsDoc = (_props: ToastOptions) => null;
+ToastOptionsDoc.displayName = "ToastOptionsDoc";

package/src/components/Toast/Toaster.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from "react";
+import { Toaster as SonnerToaster } from "sonner";
+import { toastState } from "./state";
+import type { ToastPosition } from "./types";
+
+export interface ToasterProps {
+  /** Position of the toast container */
+  position?: ToastPosition;
+  /** Whether to show the close (X) button on toasts */
+  closeButton?: boolean;
+  /** Whether toasts expand on hover */
+  expand?: boolean;
+  /** Duration in milliseconds before auto-dismiss (default: 4000) */
+  duration?: number;
+  /** Maximum number of visible toasts */
+  visibleToasts?: number;
+  /** Gap between toasts in pixels */
+  gap?: number;
+}
+
+export const Toaster = ({
+  position = "top-right",
+  closeButton = true,
+  expand = false,
+  duration = 4000,
+  visibleToasts = 3,
+  gap = 8,
+}: ToasterProps) => {
+  // Sync shared state with Toaster's closeButton prop
+  useEffect(() => {
+    toastState.showCloseButton = closeButton;
+  }, [closeButton]);
+
+  return (
+    <SonnerToaster
+      position={position}
+      closeButton={false}
+      expand={expand}
+      duration={duration}
+      visibleToasts={visibleToasts}
+      gap={gap}
+    />
+  );
+};
+
+Toaster.displayName = "Toaster";

package/src/components/Toast/index.tsx

@@ -0,0 +1,4 @@
+export { toast } from "./Toast";
+export { Toaster } from "./Toaster";
+export type { ToasterProps } from "./Toaster";
+export type { ToastOptions, ToastVariant, ToastPosition } from "./types";

package/src/components/Toast/state.ts

@@ -0,0 +1,6 @@
+// Shared state between Toaster and toast functions
+// Toaster sets this value, toast functions read it
+
+export const toastState = {
+  showCloseButton: true,
+};