@arbor-education/design-system.components 0.25.8 → 1.0.0

package/src/components/sidebar/Sidebar.test.tsx

@@ -0,0 +1,155 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Icon } from 'Components/icon/Icon';
+import { Separator } from 'Components/separator/Separator';
+import { describe, expect, test, vi } from 'vitest';
+import { Sidebar } from './Sidebar.js';
+import { SidebarItem } from './SidebarItem.js';
+
+describe('Sidebar', () => {
+  test('renders a nav element with default aria-label', () => {
+    render(<Sidebar />);
+    expect(screen.getByRole('navigation', { name: 'Sidebar' })).toBeInTheDocument();
+  });
+
+  test('renders a nav element with a custom ariaLabel', () => {
+    render(<Sidebar ariaLabel="App navigation" />);
+    expect(screen.getByRole('navigation', { name: 'App navigation' })).toBeInTheDocument();
+  });
+
+  test('applies data-testid to the nav', () => {
+    render(<Sidebar />);
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+  });
+});
+
+describe('SidebarItem', () => {
+  test('renders an anchor when href is provided', () => {
+    render(
+      <Sidebar>
+        <SidebarItem href="/home" aria-label="Home">
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/home');
+  });
+
+  test('renders a button when no href is provided', () => {
+    render(
+      <Sidebar>
+        <SidebarItem aria-label="Menu" onClick={vi.fn()}>
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const button = screen.getByRole('button', { name: 'Menu' });
+    expect(button).toBeInTheDocument();
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  test('applies selected class and aria-current when current is true on a link', () => {
+    render(
+      <Sidebar>
+        <SidebarItem href="/home" aria-label="Home" selected>
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).toHaveClass('ds-sidebar__item--selected');
+    expect(link).toHaveAttribute('aria-current', 'true');
+  });
+
+  test('applies selected class on a button when selected is true', () => {
+    render(
+      <Sidebar>
+        <SidebarItem aria-label="Menu" selected onClick={vi.fn()}>
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const button = screen.getByRole('button', { name: 'Menu' });
+    expect(button).toHaveClass('ds-sidebar__item--selected');
+    expect(button).toHaveAttribute('aria-current', 'true');
+  });
+
+  test('does not apply selected class or aria-current when current is false', () => {
+    render(
+      <Sidebar>
+        <SidebarItem href="/home" aria-label="Home">
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const link = screen.getByRole('link', { name: 'Home' });
+    expect(link).not.toHaveClass('ds-sidebar__item--selected');
+    expect(link).toHaveAttribute('aria-current', 'false');
+  });
+
+  test('calls onClick when the button is clicked', async () => {
+    const onClick = vi.fn();
+    render(
+      <Sidebar>
+        <SidebarItem aria-label="Menu" onClick={onClick}>
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  test('passes through extra HTML attributes to the button', () => {
+    render(
+      <Sidebar>
+        <SidebarItem
+          aria-label="Toggle nav"
+          aria-expanded={false}
+          aria-controls="nav-panel"
+          onClick={vi.fn()}
+        >
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    const button = screen.getByRole('button', { name: 'Toggle nav' });
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+    expect(button).toHaveAttribute('aria-controls', 'nav-panel');
+  });
+
+  test('applies data-testid to the rendered element', () => {
+    render(
+      <Sidebar>
+        <SidebarItem href="/home" aria-label="Home" data-testid="home-item">
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+    expect(screen.getByTestId('home-item')).toBeInTheDocument();
+  });
+});
+
+describe('Sidebar + SidebarItem + Separator composition', () => {
+  test('renders items and a separator together', () => {
+    render(
+      <Sidebar ariaLabel="App navigation">
+        <SidebarItem href="/home" aria-label="Home">
+          <Icon name="menu" size={24} />
+        </SidebarItem>
+        <Separator orientation="horizontal" decorative />
+        <SidebarItem href="/calendar" aria-label="Calendar">
+          <Icon name="date" size={24} />
+        </SidebarItem>
+      </Sidebar>,
+    );
+
+    expect(screen.getByRole('navigation', { name: 'App navigation' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Home' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Calendar' })).toBeInTheDocument();
+    expect(document.querySelector('.ds-separator')).toBeInTheDocument();
+  });
+});

package/src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { SidebarItem, type SidebarItemProps } from './SidebarItem.js';
+
+export type SidebarProps = {
+  ariaLabel?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const Sidebar = (props: SidebarProps) => {
+  const { ariaLabel = 'Sidebar', className, children, ...rest } = props;
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={classNames('ds-sidebar', className)}
+      data-testid="sidebar"
+      {...rest}
+    >
+      {children}
+    </nav>
+  );
+};
+
+Sidebar.Item = SidebarItem;
+
+export namespace Sidebar {
+  export type Props = SidebarProps;
+  export type ItemProps = SidebarItemProps;
+}

package/src/components/sidebar/SidebarItem.tsx

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import { Tooltip } from 'Components/tooltip/Tooltip.js';
+
+export type SidebarItemProps = {
+  'href'?: string;
+  'selected'?: boolean;
+  'data-testid'?: string;
+} & React.HTMLAttributes<HTMLElement>;
+
+export const SidebarItem = (props: SidebarItemProps) => {
+  const {
+    href,
+    onClick,
+    selected,
+    'aria-label': ariaLabel,
+    'data-testid': dataTestId,
+    className,
+    children,
+    ...rest
+  } = props;
+
+  const itemClassName = classNames(
+    'ds-sidebar__item',
+    { 'ds-sidebar__item--selected': Boolean(selected) },
+    className,
+  );
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        {href
+          ? (
+              <a
+                href={href}
+                className={itemClassName}
+                aria-current={selected ? 'true' : 'false'}
+                aria-label={ariaLabel}
+                onClick={onClick}
+                data-testid={dataTestId}
+                {...rest}
+              >
+                {children}
+              </a>
+            )
+          : (
+              <button
+                type="button"
+                className={itemClassName}
+                aria-current={selected ? 'true' : 'false'}
+                aria-label={ariaLabel}
+                onClick={onClick}
+                data-testid={dataTestId}
+                {...rest}
+              >
+                {children}
+              </button>
+            )}
+      </Tooltip.Trigger>
+      <Tooltip.Content side="right">
+        {ariaLabel}
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};

package/src/components/sidebar/sidebar.scss

@@ -0,0 +1,65 @@
+.ds-sidebar {
+  margin: 0;
+  width: var(--sidebar-nav-rail-width);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-small);
+  gap: var(--spacing-large);
+  box-sizing: border-box;
+  border-right: var(--border-weight) solid var(--page-base-color-border);
+}
+
+.ds-sidebar__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sidebar-nav-rail-item-size);
+  height: var(--sidebar-nav-rail-item-size);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  border-radius: var(--border-radius-round);
+  color: var(--sidebar-nav-rail-item-color-icon);
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover,
+  &:active,
+  &[data-state='delayed-open'],
+  &[data-state='instant-open'],
+  &[data-state='open'] {
+    color: var(--sidebar-nav-rail-item-color-icon-hover);
+    background: var(--sidebar-nav-rail-item-color-background-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
+  }
+}
+
+.ds-sidebar__item--selected {
+  color: var(--sidebar-nav-rail-item-color-icon-selected);
+  background: var(--sidebar-nav-rail-item-color-background-selected);
+
+  &:hover,
+  &:active,
+  &[data-state='delayed-open'],
+  &[data-state='instant-open'],
+  &[data-state='open'] {
+    color: var(--sidebar-nav-rail-item-color-icon-selected);
+    background: var(--sidebar-nav-rail-item-color-background-selected);
+  }
+}
+
+.ds-sidebar__item .ds-badge {
+  position: absolute;
+  top: var(--spacing-xsmall);
+  right: var(--spacing-xsmall);
+}

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

@@ -10,8 +10,9 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { Toast, type ToastProps } from './Toast.js';
+import { Toast } from './Toast.js';
 import { Button } from 'Components/button/Button';
+import { getFavouriteRemovedToastMessage } from 'Utils/favourites/favouriteConstants';
 
 // ---------------------------------------------------------------------------
 // Docs page content
@@ -52,7 +53,7 @@ const USAGE_GUIDANCE = [
   '- **Acceptable: 2 lines.** A little more context is fine — "Assessment period saved. Pupils can now submit work."',
   '- **Never: 3+ lines.** If you need that much copy, use a Banner instead.',
   '- Use sentence case. No trailing punctuation on single sentences (optional on two-sentence messages).',
-  '- Do NOT include action links or buttons inside the toast — the close button is the only interaction.',
+  '- Pass action controls via `toastActions` — use `Toast.Action` for safe-to-ignore undo patterns',
 ].join('\n');
 
 const DEVELOPER_NOTES = [
@@ -93,9 +94,7 @@ const DEVELOPER_NOTES = [
   '  return (',
   '    <>',
   '      <Button onClick={handleSave}>Save</Button>',
-  '      <Toast open={open} onOpenChange={setOpen} variant="success">',
-  '        Assessment period saved',
-  '      </Toast>',
+  '      <Toast open={open} onOpenChange={setOpen} variant="success" toastContent="Assessment period saved" />',
   '    </>',
   '  );',
   '}',
@@ -114,7 +113,7 @@ const DEVELOPER_NOTES = [
   '',
   '- Radix renders `role="status"` (for `type="background"`, the default) or `role="alert"`',
   '  (for `type="foreground"`). Do NOT add `aria-live` yourself — Radix handles this.',
-  '- `children` is rendered as `Toast.Title` — it is always required for screen reader announcement.',
+  '- `toastContent` is rendered as `Toast.Title` — it is always required for screen reader announcement.',
   '- `type="foreground"` causes the toast to be announced immediately, interrupting the user.',
   '  Use only for genuinely urgent messages. Default `type="background"` announces at the next pause.',
   '',
@@ -139,6 +138,8 @@ const DEVELOPER_NOTES = [
   '',
   'type ToastProps = RadixToast.ToastProps & {',
   '  variant?: ToastVariant; // default: "information"',
+  '  toastContent: ReactNode;',
+  '  toastActions?: ReactNode;',
   '};',
   '```',
 ].join('\n');
@@ -184,6 +185,10 @@ const meta = {
   title: 'Components/Toast',
   component: Toast,
   tags: ['autodocs'],
+  args: {
+    variant: 'information',
+    toastContent: 'Attendance report generated',
+  },
   parameters: {
     layout: 'centered',
     docs: {
@@ -200,7 +205,7 @@ const meta = {
         defaultValue: { summary: "'information'" },
       },
     },
-    children: {
+    toastContent: {
       control: 'text',
       description: [
         'The toast message. Rendered as `Toast.Title` — always required for screen reader announcement.',
@@ -288,7 +293,7 @@ const ToastStoryWrapper = ({ children }: { children: React.ReactNode }) => (
   </Toast.Provider>
 );
 
-const DefaultTemplate = (args: ToastProps) => {
+const DefaultTemplate = (args: Toast.Props) => {
   const [open, setOpen] = useState(false);
   return (
     <ToastStoryWrapper>
@@ -312,18 +317,10 @@ const AllVariantsTemplate = () => {
         <Button onClick={() => setWarningOpen(true)}>Warning</Button>
         <Button onClick={() => setDangerOpen(true)}>Danger</Button>
       </div>
-      <Toast variant="information" open={infoOpen} onOpenChange={setInfoOpen}>
-        Attendance report generated
-      </Toast>
-      <Toast variant="success" open={successOpen} onOpenChange={setSuccessOpen}>
-        Assessment period saved
-      </Toast>
-      <Toast variant="warning" open={warningOpen} onOpenChange={setWarningOpen}>
-        Session expires in 5 minutes
-      </Toast>
-      <Toast variant="danger" open={dangerOpen} onOpenChange={setDangerOpen}>
-        Failed to save changes — please try again
-      </Toast>
+      <Toast variant="information" open={infoOpen} onOpenChange={setInfoOpen} toastContent="Attendance report generated" />
+      <Toast variant="success" open={successOpen} onOpenChange={setSuccessOpen} toastContent="Assessment period saved" />
+      <Toast variant="warning" open={warningOpen} onOpenChange={setWarningOpen} toastContent="Session expires in 5 minutes" />
+      <Toast variant="danger" open={dangerOpen} onOpenChange={setDangerOpen} toastContent="Failed to save changes — please try again" />
     </ToastStoryWrapper>
   );
 };
@@ -355,15 +352,9 @@ const ContentGuidelinesTemplate = () => {
           </span>
         </div>
       </div>
-      <Toast variant="success" open={idealOpen} onOpenChange={setIdealOpen}>
-        Assessment period saved
-      </Toast>
-      <Toast variant="success" open={acceptableOpen} onOpenChange={setAcceptableOpen}>
-        Assessment period saved. Pupils can now submit work for grading.
-      </Toast>
-      <Toast variant="information" open={tooLongOpen} onOpenChange={setTooLongOpen}>
-        Assessment period saved. Pupils can now submit work for grading. Remember to notify your department heads and check the term dates align with your reporting schedule before the deadline.
-      </Toast>
+      <Toast variant="success" open={idealOpen} onOpenChange={setIdealOpen} toastContent="Assessment period saved" />
+      <Toast variant="success" open={acceptableOpen} onOpenChange={setAcceptableOpen} toastContent="Assessment period saved. Pupils can now submit work for grading." />
+      <Toast variant="information" open={tooLongOpen} onOpenChange={setTooLongOpen} toastContent="Assessment period saved. Pupils can now submit work for grading. Remember to notify your department heads and check the term dates align with your reporting schedule before the deadline." />
     </ToastStoryWrapper>
   );
 };
@@ -378,12 +369,35 @@ const WithCustomDurationTemplate = () => {
         <Button onClick={() => setShortOpen(true)}>Short (2 s)</Button>
         <Button onClick={() => setLongOpen(true)}>Long (10 s)</Button>
       </div>
-      <Toast variant="information" open={shortOpen} onOpenChange={setShortOpen} duration={2000}>
-        Dismissed in 2 seconds
-      </Toast>
-      <Toast variant="information" open={longOpen} onOpenChange={setLongOpen} duration={10000}>
-        Dismissed in 10 seconds — use for important but non-urgent messages
-      </Toast>
+      <Toast variant="information" open={shortOpen} onOpenChange={setShortOpen} duration={2000} toastContent="Dismissed in 2 seconds" />
+      <Toast variant="information" open={longOpen} onOpenChange={setLongOpen} duration={10000} toastContent="Dismissed in 10 seconds — use for important but non-urgent messages" />
+    </ToastStoryWrapper>
+  );
+};
+
+const WithActionTemplate = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleUndo = () => {
+    setOpen(false);
+  };
+
+  return (
+    <ToastStoryWrapper>
+      <Button onClick={() => setOpen(true)}>Remove favourite</Button>
+      <Toast
+        open={open}
+        onOpenChange={setOpen}
+        type="foreground"
+        duration={10000}
+        variant="information"
+        toastContent={getFavouriteRemovedToastMessage('Daily Attendance')}
+        toastActions={(
+          <Toast.Action altText="Undo removal" onClick={handleUndo} asChild>
+            <Button variant="text-link" type="button" hasHorizontalPadding={false}>Undo</Button>
+          </Toast.Action>
+        )}
+      />
     </ToastStoryWrapper>
   );
 };
@@ -396,7 +410,7 @@ export const Default: Story = withDescription(
   {
     args: {
       variant: 'information',
-      children: 'Attendance report generated',
+      toastContent: 'Attendance report generated',
     },
     render: args => <DefaultTemplate {...args} />,
     parameters: {
@@ -414,9 +428,7 @@ function ToastDemo() {
   return (
     <Toast.Provider>
       <Button onClick={() => setOpen(true)}>Show toast</Button>
-      <Toast variant="information" open={open} onOpenChange={setOpen}>
-        Attendance report generated
-      </Toast>
+      <Toast variant="information" open={open} onOpenChange={setOpen} toastContent="Attendance report generated" />
       <Toast.Viewport />
     </Toast.Provider>
   );
@@ -430,7 +442,7 @@ export default ToastDemo;
   [
     'The default `information` toast. Click the button to trigger it — it auto-dismisses after 5 seconds',
     'or can be closed manually with the X button.',
-    'Tweak the **variant** and **children** controls to preview other variants.',
+    'Tweak the **variant** and **toastContent** controls to preview other variants.',
   ].join(' '),
 );
 
@@ -459,18 +471,10 @@ function AllVariantsDemo() {
       <Button onClick={() => setWarningOpen(true)}>Warning</Button>
       <Button onClick={() => setDangerOpen(true)}>Danger</Button>
 
-      <Toast variant="information" open={infoOpen} onOpenChange={setInfoOpen}>
-        Attendance report generated
-      </Toast>
-      <Toast variant="success" open={successOpen} onOpenChange={setSuccessOpen}>
-        Assessment period saved
-      </Toast>
-      <Toast variant="warning" open={warningOpen} onOpenChange={setWarningOpen}>
-        Session expires in 5 minutes
-      </Toast>
-      <Toast variant="danger" open={dangerOpen} onOpenChange={setDangerOpen}>
-        Failed to save changes — please try again
-      </Toast>
+      <Toast variant="information" open={infoOpen} onOpenChange={setInfoOpen} toastContent="Attendance report generated" />
+      <Toast variant="success" open={successOpen} onOpenChange={setSuccessOpen} toastContent="Assessment period saved" />
+      <Toast variant="warning" open={warningOpen} onOpenChange={setWarningOpen} toastContent="Session expires in 5 minutes" />
+      <Toast variant="danger" open={dangerOpen} onOpenChange={setDangerOpen} toastContent="Failed to save changes — please try again" />
       <Toast.Viewport />
     </Toast.Provider>
   );
@@ -501,21 +505,13 @@ export const ContentGuidelines: Story = withDescription(
           language: 'tsx',
           code: `
 // ✅ Ideal — 1 line, past tense, no trailing punctuation
-<Toast variant="success" open={open} onOpenChange={setOpen}>
-  Assessment period saved
-</Toast>
+<Toast variant="success" open={open} onOpenChange={setOpen} toastContent="Assessment period saved" />
 
 // ✅ Acceptable — 2 lines with brief context
-<Toast variant="success" open={open} onOpenChange={setOpen}>
-  Assessment period saved. Pupils can now submit work for grading.
-</Toast>
+<Toast variant="success" open={open} onOpenChange={setOpen} toastContent="Assessment period saved. Pupils can now submit work for grading." />
 
 // ❌ Too long — switch to a Banner instead
-<Toast variant="information" open={open} onOpenChange={setOpen}>
-  Assessment period saved. Pupils can now submit work for grading.
-  Remember to notify your department heads and check the term dates
-  align with your reporting schedule before the deadline.
-</Toast>
+<Toast variant="information" open={open} onOpenChange={setOpen} toastContent="Assessment period saved. Pupils can now submit work for grading. Remember to notify your department heads and check the term dates align with your reporting schedule before the deadline." />
 `.trim(),
         },
       },
@@ -549,12 +545,10 @@ function CustomDurationDemo() {
       <Button onClick={() => setOpen(true)}>Show toast</Button>
 
       {/* Per-toast duration overrides the provider default (5000ms) */}
-      <Toast variant="information" open={open} onOpenChange={setOpen} duration={10000}>
-        This stays visible for 10 seconds
-      </Toast>
+      <Toast variant="information" open={open} onOpenChange={setOpen} duration={10000} toastContent="This stays visible for 10 seconds" />
 
       {/* Pass Infinity to keep the toast open until manually dismissed */}
-      {/* <Toast duration={Infinity}>Persistent until closed</Toast> */}
+      {/* <Toast duration={Infinity} toastContent="Persistent until closed" /> */}
 
       <Toast.Viewport />
     </Toast.Provider>
@@ -573,3 +567,17 @@ export default CustomDurationDemo;
     'Pass `duration={Infinity}` to keep the toast open until the user explicitly dismisses it.',
   ].join(' '),
 );
+
+export const WithAction: Story = withDescription(
+  {
+    render: WithActionTemplate,
+    parameters: {
+      controls: { disable: true },
+    },
+  },
+  [
+    'Use `toastActions` with `Toast.Action` for safe-to-ignore undo patterns — mirroring the Radix toast undo example.',
+    'Set `type="foreground"` and a longer `duration` so keyboard users have time to act.',
+    'Pass `altText` for screen reader users who need an alternative way to trigger the action.',
+  ].join(' '),
+);

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

@@ -8,9 +8,7 @@ describe('Toast', () => {
   const renderToast = (props = {}) => {
     return render(
       <Toast.Provider>
-        <Toast open={true} {...props}>
-          Test message
-        </Toast>
+        <Toast open={true} toastContent="Test message" {...props} />
         <Toast.Viewport />
       </Toast.Provider>,
     );
@@ -74,20 +72,54 @@ describe('Toast', () => {
 
       render(
         <Toast.Provider>
-          <Toast open={true} onOpenChange={onOpenChange}>
-            Test message
-          </Toast>
+          <Toast open={true} toastContent="Test message" onOpenChange={onOpenChange} />
           <Toast.Viewport />
         </Toast.Provider>,
       );
 
-      const closeButton = screen.getByRole('button');
+      const closeButton = screen.getByRole('button', { name: 'Close' });
       await user.click(closeButton);
 
       expect(onOpenChange).toHaveBeenCalled();
     });
   });
 
+  describe('Toast.Action', () => {
+    it('renders action inline with title and calls handler when clicked', async () => {
+      const user = userEvent.setup();
+      const onAction = vi.fn();
+
+      const { container } = render(
+        <Toast.Provider>
+          <Toast
+            open={true}
+            type="foreground"
+            duration={10000}
+            toastContent="Item removed"
+            toastActions={(
+              <Toast.Action altText="Undo removal" onClick={onAction}>
+                Undo
+              </Toast.Action>
+            )}
+          />
+          <Toast.Viewport />
+        </Toast.Provider>,
+      );
+
+      expect(screen.getByText('Item removed')).toBeInTheDocument();
+      expect(container.querySelector('.ds-toast__message-row')).toBeInTheDocument();
+      expect(container.querySelector('.ds-toast__title')?.parentElement).toHaveClass('ds-toast__message-row');
+
+      await user.click(screen.getByRole('button', { name: 'Undo' }));
+
+      expect(onAction).toHaveBeenCalled();
+    });
+
+    it('exposes Action component', () => {
+      expect(Toast.Action).toBeDefined();
+    });
+  });
+
   describe('Provider and Viewport', () => {
     it('exposes Provider component', () => {
       expect(Toast.Provider).toBeDefined();
@@ -112,9 +144,7 @@ describe('Toast', () => {
       renderToast();
       const { container } = render(
         <Toast.Provider>
-          <Toast open={true} variant="success">
-            Success message
-          </Toast>
+          <Toast open={true} variant="success" toastContent="Success message" />
           <Toast.Viewport />
         </Toast.Provider>,
       );