+
+ Resize the window below 1440 px to see the responsive column change.
+
+
+ !open && close()} columns={columns}>
+
+ {label}
+
+
+
+ )}
+
;
+ }
+}
+
+### MCP manifest
+const Responsive = function Render() {
+ const [openDrawer, setOpenDrawer] = useState
+ {variants.map(({
+ label
+ }) => setOpenDrawer(label)}>
+ {label}
+ )}
+
+
+ {variants.map(({
+ label,
+ columns
+ }) =>
+
+ lg: {columns.lg} columns · md: {columns.md} columns
+
+
+ Drawer content
+
+
+
+
+ Resize the window below 1440 px to see the responsive column change.
+
+
+ !open && close()}
+ columns={columns}
+ >
+
+ {label}
+
+
+
+
+ ))}
+
+ );
+};
+
+## Toggle Full Size
+
+### Show code
+{
+ args: {
+ columns: 4
+ },
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render(args: DsDrawerProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [isFullScreen, setIsFullScreen] = useState(false);
+ const toggleFullScreen = () => {
+ setIsFullScreen(!isFullScreen);
+ };
+ return
+ {variants.map(({ label }) => (
+ setOpenDrawer(label)}>
+ {label}
+
+ ))}
+
+
+ {variants.map(({ label, columns }) => (
+
+
+ lg: {columns.lg} columns · md: {columns.md} columns
+
+
+ Drawer content
+
+
+
+ setIsOpen(true)}>Open Drawer
+
+
+
+ Expandable Drawer
+
+
+
+
+
+
+
;
+ }
+}
+
+### MCP manifest
+const ToggleFullSize = () => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [isFullScreen, setIsFullScreen] = useState(false);
+
+ const toggleFullScreen = () => {
+ setIsFullScreen(!isFullScreen);
+ };
+
+ return (
+
+
+ Drawer content header
+
+
+ Out of scope section
+
+
+
+ setIsOpen(true)}>Open Drawer
+
+
+ Expandable Drawer
+
+
+
+
+
+
+
+ );
+};
+
+## Prevent Open Auto Focus
+
+### Show code
+{
+ args: {
+ onOpenAutoFocus: fn((event: Event) => event.preventDefault())
+ },
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render(args: DsDrawerProps) {
+ const [query, setQuery] = useState('');
+ return
+ Drawer content header
+
+ Out of scope section
+
+
+
+ 0} onOpenChange={open => !open && setQuery('')}>
+
+ Suggestions
+
+
+
+ Focus stayed in the input — keep typing without losing your place.
+
+
+
+
;
+ }
+}
+
+### MCP manifest
+const PreventOpenAutoFocus = () => {
+ const [query, setQuery] = useState('');
+
+ return (
+
+ event.preventDefault())}
+ open={query.length > 0}
+ onOpenChange={(open) => !open && setQuery('')}>
+
+ Suggestions
+
+
+ Focus stayed in the input — keep typing without losing your place.
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/packages/design-system/src/components/ds-drawer/ds-drawer.stories.module.scss b/packages/design-system/src/components/ds-drawer/ds-drawer.stories.module.scss
index c92e89144..426abd5dd 100644
--- a/packages/design-system/src/components/ds-drawer/ds-drawer.stories.module.scss
+++ b/packages/design-system/src/components/ds-drawer/ds-drawer.stories.module.scss
@@ -3,21 +3,8 @@
flex-basis: 100%;
}
-.headerActions {
- display: flex;
- align-items: center;
-
- .expand {
- display: flex;
- align-items: center;
- }
-
- .divider {
- width: 1px;
- height: var(--icon-width-tiny);
- background: var(--border-secondary);
- margin: var(--2xs) var(--xs);
- }
+.searchInput {
+ flex: 1;
}
.tabs {
@@ -81,6 +68,29 @@
}
}
+/* Keeps a section hugging its content instead of growing to fill the body. */
+.tabsSection {
+ flex: 0;
+}
+
+/* Spans a section across two rows in the grid body layout. */
+.spanTwoRows {
+ grid-row: span 2;
+}
+
+/* Demo-only height utilities to simulate tall, scrollable content. */
+.tall {
+ min-height: 12.5rem;
+}
+
+.taller {
+ min-height: 18.75rem;
+}
+
+.tallest {
+ min-height: 31.25rem;
+}
+
.storyWrapper {
padding: 2rem;
}
@@ -91,7 +101,3 @@
gap: var(--xs);
margin-top: var(--sm);
}
-
-.contentSection {
- padding: 1rem;
-}
diff --git a/packages/design-system/src/components/ds-drawer/ds-drawer.stories.tsx b/packages/design-system/src/components/ds-drawer/ds-drawer.stories.tsx
index 36973f7cf..9ed567577 100644
--- a/packages/design-system/src/components/ds-drawer/ds-drawer.stories.tsx
+++ b/packages/design-system/src/components/ds-drawer/ds-drawer.stories.tsx
@@ -1,11 +1,14 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { useState } from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+import { fn } from 'storybook/test';
import classNames from 'classnames';
import DsDrawer from './ds-drawer';
import { DsButton } from '../ds-button';
+import { DsButtonV3 } from '../ds-button-v3';
import { DsTextInput } from '../ds-text-input';
import { DsIcon } from '../ds-icon';
+import { DsDivider } from '../ds-divider';
+import { DsStack } from '../ds-stack';
// TODO: Use DsStatusBadge instead.
import { DsSystemStatus } from '../ds-system-status';
import styles from './ds-drawer.stories.module.scss';
@@ -81,6 +84,7 @@ const DrawerTemplate = (args: DsDrawerProps) => {
export const Default: Story = {
render: DrawerTemplate,
+ parameters: { docs: { source: { type: 'code' } } },
args: {
children: (
<>
@@ -88,13 +92,11 @@ export const Default: Story = {
-
-
+
+
+
-
-
+
+
+
+
Drawer content header
-
+
Out of scope section
-
+
Out of scope section
@@ -248,6 +250,7 @@ export const WithBackdropAndScroll: Story = {
export const DockToStart: Story = {
render: DrawerTemplate,
+ parameters: { docs: { source: { type: 'code' } } },
args: {
position: 'start',
children: (
@@ -284,6 +287,7 @@ export const DockToStart: Story = {
export const WithGridContent: Story = {
render: DrawerTemplate,
+ parameters: { docs: { source: { type: 'code' } } },
args: {
columns: 10,
children: (
@@ -293,7 +297,7 @@ export const WithGridContent: Story = {
@@ -212,6 +213,7 @@ export const WithTabs: Story = {
export const WithBackdropAndScroll: Story = {
render: DrawerTemplate,
+ parameters: { docs: { source: { type: 'code' } } },
args: {
backdrop: true,
children: (
@@ -225,7 +227,7 @@ export const WithBackdropAndScroll: Story = {
Drawer content header
-
+
Out of scope section
@@ -233,10 +235,10 @@ export const WithBackdropAndScroll: Story = {
+
Drawer content header
@@ -333,6 +337,7 @@ export const WithGridContent: Story = {
* - 6+ cols → `{ lg: 6, md: 10 }` (up to 10)
*/
export const Responsive: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
render: function Render() {
const [openDrawer, setOpenDrawer] = useState(null);
@@ -392,6 +397,7 @@ export const ToggleFullSize: Story = {
args: {
columns: 4,
},
+ parameters: { docs: { source: { type: 'code' } } },
render: function Render(args: DsDrawerProps) {
const [isOpen, setIsOpen] = useState(false);
const [isFullScreen, setIsFullScreen] = useState(false);
@@ -412,17 +418,17 @@ export const ToggleFullSize: Story = {
>
Expandable Drawer
-
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const Default = () => {
+ const handleEdit = fn();
+ const handleDuplicate = fn();
+ const handleShare = fn();
+ const handleDelete = fn();
+
+ return (
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+## Selectable List with Search
+
+### Show code
+{
+ name: 'Selectable List with Search',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Dropdown with search functionality and selection tracking. Users can filter items and see which item is selected with a check indicator.'
+ },
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render() {
+ const [search, setSearch] = useState('');
+ const [selected, setSelected] = useState('option1');
+ const options = [{
+ value: 'option1',
+ label: 'Option 1'
+ }, {
+ value: 'option2',
+ label: 'Option 2'
+ }, {
+ value: 'option3',
+ label: 'Option 3'
+ }, {
+ value: 'option4',
+ label: 'Option 4'
+ }];
+ const selectedOption = options.find(opt => opt.value === selected)?.label;
+ const filteredOptions = options.filter(opt => opt.label.toLowerCase().includes(search.toLowerCase()));
+ return
+
+ {selectedOption || 'Select an option'}
+
+
+
+ e.stopPropagation()} slots={{
+ startAdornment:
+ {filteredOptions.map(option =>
+ {option.label}
+ {selected === option.value && )}
+
+ ;
+ }
+}
+
+### MCP manifest
+const SelectableList = function Render() {
+ const [search, setSearch] = useState('');
+ const [selected, setSelected] = useState('option1');
+
+ const options = [
+ { value: 'option1', label: 'Option 1' },
+ { value: 'option2', label: 'Option 2' },
+ { value: 'option3', label: 'Option 3' },
+ { value: 'option4', label: 'Option 4' },
+ ];
+
+ const selectedOption = options.find((opt) => opt.value === selected)?.label;
+ const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+
+ return (
+
+
+ {selectedOption || 'Select an option'}
+
+
+
+ e.stopPropagation()}
+ slots={{
+ startAdornment:
+ {filteredOptions.map((option) => (
+
+ {option.label}
+ {selected === option.value &&
+ ))}
+
+
+ );
+};
+
+## Checkbox List with Groups
+
+### Show code
+{
+ name: 'Checkbox List with Groups',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Dropdown with checkbox items in collapsible groups. Uses DsCheckbox component for each item. Includes search and action buttons.'
+ },
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render() {
+ const [open, setOpen] = useState(false);
+ const [search, setSearch] = useState('');
+ const [selected, setSelected] = useState(new Set(['item1']));
+ const items = [{
+ id: 'item1',
+ label: 'Menu text 1',
+ description: 'Info Text'
+ }, {
+ id: 'item2',
+ label: 'Menu text 2',
+ description: 'Info Text'
+ }, {
+ id: 'item-error',
+ label: 'Error item',
+ description: 'Something went wrong',
+ variant: 'error' as const
+ }];
+ const groupedItems = [{
+ id: 'item3',
+ label: 'Menu text 3',
+ description: 'Info Text'
+ }, {
+ id: 'item4',
+ label: 'Menu text 4',
+ description: 'Info Text'
+ }, {
+ id: 'item5',
+ label: 'Menu text 5',
+ description: 'Info Text'
+ }, {
+ id: 'item6',
+ label: 'Menu text 6',
+ description: 'Info Text'
+ }, {
+ id: 'item7',
+ label: 'Menu text 7',
+ description: 'Info Text'
+ }];
+ const filteredItems = items.filter(item => item.label.toLowerCase().includes(search.toLowerCase()));
+ const filteredGroupedItems = groupedItems.filter(item => item.label.toLowerCase().includes(search.toLowerCase()));
+ const toggleSelection = (id: string) => {
+ const newSelected = new Set(selected);
+ if (newSelected.has(id)) {
+ newSelected.delete(id);
+ } else {
+ newSelected.add(id);
+ }
+ setSelected(newSelected);
+ };
+ const handleApply = fn();
+ const handleCancel = () => {
+ setOpen(false);
+ setSearch('');
+ };
+ return
+
+ Multi Select ({selected.size})
+
+
+
+ e.stopPropagation()} slots={{
+ startAdornment:
+ {filteredItems.map(item => {
+ const isError = 'variant' in item && item.variant === 'error';
+ return
+ {isError ? toggleSelection(item.id)} />}
+
+
+ {item.label}
+
+
+ {item.description}
+
+
+ ;
+ })}
+ {!!filteredGroupedItems.length &&
+ Group Name
+
+ {filteredGroupedItems.map(item =>
+ toggleSelection(item.id)} />
+
+
+ {item.label}
+
+
+ {item.description}
+
+
+ )}
+
+ }
+
+
+ Cancel
+
+
+ Apply
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const CheckboxList = function Render() {
+ const [open, setOpen] = useState(false);
+ const [search, setSearch] = useState('');
+ const [selected, setSelected] = useState(new Set(['item1']));
+
+ const items = [
+ { id: 'item1', label: 'Menu text 1', description: 'Info Text' },
+ { id: 'item2', label: 'Menu text 2', description: 'Info Text' },
+ {
+ id: 'item-error',
+ label: 'Error item',
+ description: 'Something went wrong',
+ variant: 'error' as const,
+ },
+ ];
+
+ const groupedItems = [
+ { id: 'item3', label: 'Menu text 3', description: 'Info Text' },
+ { id: 'item4', label: 'Menu text 4', description: 'Info Text' },
+ { id: 'item5', label: 'Menu text 5', description: 'Info Text' },
+ { id: 'item6', label: 'Menu text 6', description: 'Info Text' },
+ { id: 'item7', label: 'Menu text 7', description: 'Info Text' },
+ ];
+
+ const filteredItems = items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));
+ const filteredGroupedItems = groupedItems.filter((item) =>
+ item.label.toLowerCase().includes(search.toLowerCase()),
+ );
+
+ const toggleSelection = (id: string) => {
+ const newSelected = new Set(selected);
+ if (newSelected.has(id)) {
+ newSelected.delete(id);
+ } else {
+ newSelected.add(id);
+ }
+ setSelected(newSelected);
+ };
+
+ const handleApply = fn();
+
+ const handleCancel = () => {
+ setOpen(false);
+ setSearch('');
+ };
+
+ return (
+
+
+ Multi Select ({selected.size})
+
+
+
+ e.stopPropagation()}
+ slots={{
+ startAdornment:
+ {filteredItems.map((item) => {
+ const isError = 'variant' in item && item.variant === 'error';
+
+ return (
+
+ {isError ? (
+ toggleSelection(item.id)}
+ />
+ )}
+
+
+ {item.label}
+
+
+ {item.description}
+
+
+
+ );
+ })}
+ {!!filteredGroupedItems.length && (
+
+ Group Name
+
+ {filteredGroupedItems.map((item) => (
+
+ toggleSelection(item.id)}
+ />
+
+
+ {item.label}
+
+
+ {item.description}
+
+
+
+ ))}
+
+
+ )}
+
+
+ Cancel
+
+
+ Apply
+
+
+
+
+ );
+};
+
+## Collapsible Group (Controlled)
+
+### Show code
+{
+ name: 'Collapsible Group (Controlled)',
+ parameters: {
+ docs: {
+ description: {
+ story: 'The collapsed state is controlled externally via props, and the onCollapsedChange callback is triggered when the user clicks the group label.'
+ },
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render(args) {
+ const [collapsed, setCollapsed] = useState(false);
+ const handleCollapsedChange = (newCollapsed: boolean) => {
+ setCollapsed(newCollapsed);
+ args.onCollapsedChange?.(newCollapsed);
+ };
+ return
+
+ Controlled Group
+
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+ ;
+ },
+ args: {
+ onCollapsedChange: fn()
+ }
+}
+
+### MCP manifest
+const CollapsibleGroupControlled = function Render(args) {
+ const [collapsed, setCollapsed] = useState(false);
+
+ const handleCollapsedChange = (newCollapsed: boolean) => {
+ setCollapsed(newCollapsed);
+ args.onCollapsedChange?.(newCollapsed);
+ };
+
+ return (
+
+
+ Controlled Group
+
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+## Radio List with Actions
+
+### Show code
+{
+ name: 'Radio List with Actions',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Dropdown with radio items using DsRadioGroup. Single selection with search and action buttons. Blue background for selected items.'
+ },
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render() {
+ const [open, setOpen] = useState(false);
+ const [search, setSearch] = useState('');
+ const [tempSelected, setTempSelected] = useState(null);
+ const options = [{
+ value: 'option1',
+ label: 'Menu text 1',
+ description: 'Info Text'
+ }, {
+ value: 'option2',
+ label: 'Menu text 2',
+ description: 'Info Text'
+ }, {
+ value: 'option3',
+ label: 'Menu text 3',
+ description: 'Info Text'
+ }, {
+ value: 'option4',
+ label: 'Menu text 4',
+ description: 'Info Text'
+ }];
+ const filteredOptions = options.filter(opt => opt.label.toLowerCase().includes(search.toLowerCase()));
+ const handleApply = () => {
+ setOpen(false);
+ };
+ const handleCancel = () => {
+ setOpen(false);
+ setSearch('');
+ };
+ const handleReset = () => {
+ setTempSelected('');
+ setOpen(false);
+ setSearch('');
+ };
+ return
+
+ {tempSelected || 'Select an option'}
+
+
+
+ e.stopPropagation()} slots={{
+ startAdornment:
+
+ {filteredOptions.map(option =>
+
+
+ {option.label}
+
+
+ {option.description}
+
+
+ )}
+
+
+
+ Reset
+
+
+ Cancel
+
+
+ Apply
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const RadioList = function Render() {
+ const [open, setOpen] = useState(false);
+ const [search, setSearch] = useState('');
+ const [tempSelected, setTempSelected] = useState(null);
+
+ const options = [
+ { value: 'option1', label: 'Menu text 1', description: 'Info Text' },
+ { value: 'option2', label: 'Menu text 2', description: 'Info Text' },
+ { value: 'option3', label: 'Menu text 3', description: 'Info Text' },
+ { value: 'option4', label: 'Menu text 4', description: 'Info Text' },
+ ];
+
+ const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+
+ const handleApply = () => {
+ setOpen(false);
+ };
+
+ const handleCancel = () => {
+ setOpen(false);
+ setSearch('');
+ };
+
+ const handleReset = () => {
+ setTempSelected('');
+ setOpen(false);
+ setSearch('');
+ };
+
+ return (
+
+
+ {tempSelected || 'Select an option'}
+
+
+
+ e.stopPropagation()}
+ slots={{
+ startAdornment:
+
+ {filteredOptions.map((option) => (
+
+
+
+ {option.label}
+
+
+ {option.description}
+
+
+
+ ))}
+
+
+
+ Reset
+
+
+ Cancel
+
+
+ Apply
+
+
+
+
+ );
+};
+
+## User Menu
+
+### Show code
+{
+ parameters: {
+ docs: {
+ description: {
+ story: 'The User Menu composed pattern: a `DsUserCard` header identifying the signed-in user, a list of account actions, and a full-width logout action pinned in a sticky `Actions align="stretch"` slot. User Menu is not a component — it is this composition of `DsUserCard`, `DsDropdownMenu.Item`s, and `DsDropdownMenu.Actions`.'
+ }
+ }
+ },
+ render: () => {
+ const handleProfile = fn();
+ const handleSettings = fn();
+ const handleLogout = fn();
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const UserMenu = () => {
+ const handleProfile = fn();
+ const handleSettings = fn();
+ const handleLogout = fn();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+## Action Menu
+
+### Show code
+{
+ parameters: {
+ docs: {
+ description: {
+ story: 'Action Menu pattern from Figma design system demonstrating nested submenus. Features both full-size button and icon button variants. Menu items can trigger submenus using TriggerItem with right arrow indicators. Includes separators and danger-styled items for risky actions.'
+ }
+ }
+ },
+ render: () => {
+ const handleEdit = fn();
+ const handleDuplicate = fn();
+ const handleShareEmail = fn();
+ const handleShareLink = fn();
+ const handleShareSocial = fn();
+ const handleDelete = fn();
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const ActionMenu = () => {
+ const handleEdit = fn();
+ const handleDuplicate = fn();
+ const handleShareEmail = fn();
+ const handleShareLink = fn();
+ const handleShareSocial = fn();
+ const handleDelete = fn();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+## Nested Submenus (3 levels)
+
+### Show code
+{
+ name: 'Nested Submenus (3 levels)',
+ parameters: {
+ docs: {
+ description: {
+ story: 'Submenus nest arbitrarily deep by nesting a `Root` + `TriggerItem` + `Content` inside a parent `Content`. Here a top-level "New" item opens a submenu whose "From Template" item opens a third-level submenu. Each nested `Root` needs its own `placement` (`right-start`) so the flyout opens beside its trigger.'
+ }
+ }
+ },
+ render: () => {
+ const handleBlank = fn();
+ const handleResume = fn();
+ const handleInvoice = fn();
+ const handleLetter = fn();
+ const handleOpen = fn();
+ return
+
+ File
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Resume
+
+
+ Invoice
+
+
+ Letter
+
+
+
+
+
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const NestedSubmenus = () => {
+ const handleBlank = fn();
+ const handleResume = fn();
+ const handleInvoice = fn();
+ const handleLetter = fn();
+ const handleOpen = fn();
+
+ return (
+
+
+ File
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Resume
+
+
+ Invoice
+
+
+ Letter
+
+
+
+
+
+
+
+
+
+ );
+};
+
+# DsDropdownMenuLegacy docs snippets
+
+## Default
+
+### Show code
+ {}
+ },
+ {
+ icon: 'delete',
+ label: 'Delete',
+ onClick: () => {}
+ },
+ {
+ icon: 'share',
+ label: 'Share',
+ onClick: () => {}
+ },
+ {
+ disabled: true,
+ icon: 'block',
+ label: 'Disabled Option',
+ onClick: () => {}
+ }
+ ]}
+>
+
+
+### MCP manifest
+const Default = () => {
+ return (
+
+
+ );
+};
+
+## Without Icons
+
+### Show code
+ {}
+ },
+ {
+ label: 'Duplicate',
+ onClick: () => {}
+ },
+ {
+ label: 'Archive',
+ onClick: () => {}
+ }
+ ]}
+>
+
+
+### MCP manifest
+const WithoutIcons = () => {
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/packages/design-system/src/components/ds-dropdown-menu/__tests__/ds-dropdown-menu.browser.test.tsx b/packages/design-system/src/components/ds-dropdown-menu/__tests__/ds-dropdown-menu.browser.test.tsx
index 8089dc9ba..7f783420b 100644
--- a/packages/design-system/src/components/ds-dropdown-menu/__tests__/ds-dropdown-menu.browser.test.tsx
+++ b/packages/design-system/src/components/ds-dropdown-menu/__tests__/ds-dropdown-menu.browser.test.tsx
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { describe, expect, it, vi } from 'vitest';
-import { page } from 'vitest/browser';
-import { DsDropdownMenu } from '../ds-dropdown-menu';
+import { page, userEvent } from 'vitest/browser';
+import { DsDropdownMenu, DsDropdownMenuLegacy } from '../ds-dropdown-menu';
import { DsIcon } from '../../ds-icon';
import { DsCheckbox } from '../../ds-checkbox';
import { DsTypography } from '../../ds-typography';
@@ -284,3 +284,70 @@ describe('DsDropdownMenu', () => {
});
});
});
+
+describe('DsDropdownMenuLegacy', () => {
+ function LegacyDropdown({ onEdit }: { onEdit?: () => void }) {
+ return (
+
+
+ );
+ }
+
+ it('shows all menu items when the trigger is clicked', async () => {
+ await page.render(
+
+ );
},
};
diff --git a/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss b/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss
index 353e20ee6..8ac6bfd8a 100644
--- a/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss
+++ b/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss
@@ -7,7 +7,7 @@
gap: var(--xs);
padding: var(--xs) var(--sm);
border: 1px solid var(--color-dap-gray-500);
- border-radius: 4px;
+ border-radius: var(--3xs);
background: var(--color-dap-gray-050);
cursor: pointer;
transition: border-color 0.2s;
@@ -21,7 +21,7 @@
}
span {
- font-size: 14px;
+ font-size: var(--body-font-size-sm);
color: var(--color-dap-gray-700);
}
}
@@ -37,7 +37,7 @@
.item-content {
display: flex;
flex-direction: column;
- gap: 2px;
+ gap: var(--3xs);
flex-grow: 1;
}
diff --git a/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.tsx b/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.tsx
index 3fa552ce9..f8829154c 100644
--- a/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.tsx
+++ b/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.tsx
@@ -6,6 +6,7 @@ import { DsIcon } from '../ds-icon';
import { DsTextInput } from '../ds-text-input';
import { DsCheckbox } from '../ds-checkbox';
import { DsTypography } from '../ds-typography';
+import { DsStack } from '../ds-stack';
import { DsButton } from '../ds-button';
import { DsRadioGroup } from '../ds-radio-group';
import { DsUserCard } from '../ds-user-card';
@@ -34,10 +35,10 @@ export const Default: Story = {
},
},
render: () => {
- const handleEdit = () => console.log('Edit clicked');
- const handleDuplicate = () => console.log('Duplicate clicked');
- const handleShare = () => console.log('Share clicked');
- const handleDelete = () => console.log('Delete clicked');
+ const handleEdit = fn();
+ const handleDuplicate = fn();
+ const handleShare = fn();
+ const handleDelete = fn();
return (
@@ -81,6 +82,7 @@ export const SelectableList: Story = {
story:
'Dropdown with search functionality and selection tracking. Users can filter items and see which item is selected with a check indicator.',
},
+ source: { type: 'code' },
},
},
render: function Render() {
@@ -135,6 +137,7 @@ export const CheckboxList: Story = {
story:
'Dropdown with checkbox items in collapsible groups. Uses DsCheckbox component for each item. Includes search and action buttons.',
},
+ source: { type: 'code' },
},
},
render: function Render() {
@@ -176,12 +179,9 @@ export const CheckboxList: Story = {
setSelected(newSelected);
};
- const handleApply = () => {
- console.log('Applied selections:', Array.from(selected));
- };
+ const handleApply = fn();
const handleCancel = () => {
- console.log('Cancelled');
setOpen(false);
setSearch('');
};
@@ -212,7 +212,6 @@ export const CheckboxList: Story = {
{filteredItems.map((item) => {
const isError = 'variant' in item && item.variant === 'error';
- const errorStyle = isError ? { color: 'var(--font-error)' } : undefined;
return (
@@ -225,14 +224,22 @@ export const CheckboxList: Story = {
onCheckedChange={() => toggleSelection(item.id)}
/>
)}
-
);
})}
@@ -247,14 +254,14 @@ export const CheckboxList: Story = {
checked={selected.has(item.id)}
onCheckedChange={() => toggleSelection(item.id)}
/>
- {
setOpen(false);
- console.log(`Applied: ${JSON.stringify(tempSelected)}`);
};
const handleCancel = () => {
- console.log('Cancelled');
setOpen(false);
setSearch('');
};
const handleReset = () => {
- console.log('Reset');
setTempSelected('');
setOpen(false);
setSearch('');
@@ -403,14 +409,14 @@ export const RadioList: Story = {
className={tempSelected === option.value ? 'radio-selected' : ''}
>
@@ -484,12 +490,12 @@ export const ActionMenu: Story = {
},
},
render: () => {
- const handleEdit = () => console.log('Edit clicked');
- const handleDuplicate = () => console.log('Duplicate clicked');
- const handleShareEmail = () => console.log('Share via Email clicked');
- const handleShareLink = () => console.log('Copy Link clicked');
- const handleShareSocial = () => console.log('Share to Social Media clicked');
- const handleDelete = () => console.log('Delete item clicked');
+ const handleEdit = fn();
+ const handleDuplicate = fn();
+ const handleShareEmail = fn();
+ const handleShareLink = fn();
+ const handleShareSocial = fn();
+ const handleDelete = fn();
return (
@@ -549,11 +555,11 @@ export const NestedSubmenus: Story = {
},
},
render: () => {
- const handleBlank = () => console.log('Blank document clicked');
- const handleResume = () => console.log('Resume template clicked');
- const handleInvoice = () => console.log('Invoice template clicked');
- const handleLetter = () => console.log('Letter template clicked');
- const handleOpen = () => console.log('Open clicked');
+ const handleBlank = fn();
+ const handleResume = fn();
+ const handleInvoice = fn();
+ const handleLetter = fn();
+ const handleOpen = fn();
return (
diff --git a/packages/design-system/src/components/ds-main-menu/__tests__/ds-main-menu.browser.test.tsx b/packages/design-system/src/components/ds-main-menu/__tests__/ds-main-menu.browser.test.tsx
index 6fbc191ba..916623ffe 100644
--- a/packages/design-system/src/components/ds-main-menu/__tests__/ds-main-menu.browser.test.tsx
+++ b/packages/design-system/src/components/ds-main-menu/__tests__/ds-main-menu.browser.test.tsx
@@ -278,7 +278,8 @@ describe('DsMainMenu — tile and utility link behavior', () => {
const comingSoonTile = page.getByRole('button', { name: 'Coming soon app' });
const badge = comingSoonTile.element().querySelector('[class*="badge"]') as HTMLElement;
- await userEvent.hover(badge);
+ await comingSoonTile.hover();
+ await page.elementLocator(badge).hover();
await expect.element(page.getByRole('tooltip', { name: COMING_SOON_TOOLTIP })).toBeVisible();
});
diff --git a/packages/design-system/src/components/ds-modal/__tests__/__snapshots__/ds-modal.docs.snap b/packages/design-system/src/components/ds-modal/__tests__/__snapshots__/ds-modal.docs.snap
new file mode 100644
index 000000000..3d8fc0711
--- /dev/null
+++ b/packages/design-system/src/components/ds-modal/__tests__/__snapshots__/ds-modal.docs.snap
@@ -0,0 +1,369 @@
+# DsModal docs snippets
+
+## Default
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ args: {
+ columns: 4
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
+ return <>
+ setOpen(true)}>Open modal
+
+
+ Modal title
+
+
+
+ This is the default modal variant with simple content.
+
+
+
+
+ setOpen(false)}>
+ Cancel
+
+ setOpen(false)}>Confirm
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const Default = () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+ setOpen(true)}>Open modal
+
+
+ Modal title
+
+
+ This is the default modal variant with simple content.
+
+
+
+
+ setOpen(false)}>Cancel
+
+ setOpen(false)}>Confirm
+
+
+
+
+ );
+};
+
+## Divided
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ args: {
+ columns: 6,
+ dividers: true
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
+ return <>
+ setOpen(true)}>Open modal
+
+
+ User profile
+
+
+
+
+
+
+
+
+
+
+
+ setOpen(false)}>
+ Cancel
+
+ setOpen(false)}>Save changes
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const Divided = () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+ setOpen(true)}>Open modal
+
+
+ User profile
+
+
+
+
+
+
+
+
+
+
+
+ setOpen(false)}>Cancel
+
+ setOpen(false)}>Save changes
+
+
+
+
+ );
+};
+
+## Custom
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ args: {
+ columns: 4,
+ dividers: true
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
+ return <>
+ setOpen(true)}>Open modal
+
+
+
+ Project details
+
+ Add the core information for your new project.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All changes saved
+
+
+ setOpen(false)}>
+ Discard
+
+ setOpen(false)}>Save changes
+
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const Custom = () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+ setOpen(true)}>Open modal
+
+
+
+ Project details
+ Add the core information for your new project.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All changes saved
+
+
+ setOpen(false)}>Discard
+
+ setOpen(false)}>Save changes
+
+
+
+
+
+ );
+};
+
+## With Icon
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ args: {
+ columns: 4
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
+ return <>
+ setOpen(true)}>Open modal
+
+
+ Session timeout
+
+
+
+ Your session will expire in 5 minutes due to inactivity.
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const WithIcon = () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+ setOpen(true)}>Open modal
+
+
+ Session timeout
+
+
+ Your session will expire in 5 minutes due to inactivity.
+
+
+
+
+ );
+};
+
+## Without Header
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ args: {
+ columns: 4
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
+ return <>
+ setOpen(true)}>Open modal
+
+
+
+ This modal has no header section. Use this pattern when you want a cleaner look without the
+ header underline.
+
+
+
+
+ setOpen(false)}>
+ Close
+
+ setOpen(false)}>Continue
+
+
+
+ ;
+ }
+}
+
+### MCP manifest
+const WithoutHeader = () => {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+ setOpen(true)}>Open modal
+
+
+ This modal has no header section. Use this pattern when you want a cleaner look without the
+ header underline.
+
+
+
+
+ setOpen(false)}>Close
+
+ setOpen(false)}>Continue
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/packages/design-system/src/components/ds-modal/__tests__/ds-modal.browser.test.tsx b/packages/design-system/src/components/ds-modal/__tests__/ds-modal.browser.test.tsx
index 4bb942dbb..a85e1f158 100644
--- a/packages/design-system/src/components/ds-modal/__tests__/ds-modal.browser.test.tsx
+++ b/packages/design-system/src/components/ds-modal/__tests__/ds-modal.browser.test.tsx
@@ -1,8 +1,41 @@
import { useState } from 'react';
import { describe, expect, it, vi } from 'vitest';
-import { page } from 'vitest/browser';
+import { page, userEvent } from 'vitest/browser';
import DsModal from '../ds-modal';
+const ModalExample = ({ onOpenChange }: { onOpenChange?: (open: boolean) => void } = {}) => {
+ const [open, setOpen] = useState(false);
+
+ const handleOpenChange = (next: boolean) => {
+ setOpen(next);
+ onOpenChange?.(next);
+ };
+
+ return (
+ <>
+
+
+
+ Modal title
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
const UnmountWhileOpenModal = () => {
const [open, setOpen] = useState(false);
const [mounted, setMounted] = useState(true);
@@ -34,6 +67,54 @@ const UnmountWhileOpenModal = () => {
};
describe('DsModal', () => {
+ it('opens from the trigger and shows the title', async () => {
+ await page.render( = {
@@ -20,878 +13,243 @@ const meta: Meta = {
parameters: {
layout: 'centered',
},
- args: {
- open: false,
- },
argTypes: {
- open: {
- control: 'boolean',
- description: 'Controls whether the modal is open',
- },
- dividers: {
- control: 'boolean',
- description: 'Show full-width dividers between header, body, and footer sections',
- },
columns: {
control: 'select',
- options: Array(12)
- .fill(0)
- .map((_, i) => i + 1),
+ options: Array.from({ length: 12 }, (_, index) => index + 1),
description: 'Number of grid columns for modal width',
},
- className: {
- control: 'text',
- description: 'Additional CSS class names',
+ dividers: {
+ control: 'boolean',
+ description: 'Show full-width dividers between header, body, and footer sections',
},
+ open: { table: { disable: true } },
+ onOpenChange: { table: { disable: true } },
+ className: { table: { disable: true } },
+ style: { table: { disable: true } },
},
};
export default meta;
type Story = StoryObj;
-// Form schema for the modal
-const modalFormSchema = z.object({
- name: z.string().min(1, 'Name is required'),
- email: z.email('Invalid email address'),
- department: z.string().min(1, 'Please select a department'),
- role: z.string().min(1, 'Please select a role'),
- description: z.string().min(20, 'Description must be at least 20 characters'),
- acceptTerms: z.boolean().refine((v) => v, 'You must accept the terms and conditions'),
- subscription: z.enum(['basic', 'pro', 'enterprise'], {
- error: () => 'Please select a subscription plan',
- }),
-});
-
-type ModalFormValues = z.infer;
-
-const defaultFormValues: ModalFormValues = {
- name: '',
- email: '',
- department: '',
- role: '',
- description: '',
- acceptTerms: false,
- subscription: 'basic' as const,
-};
-
+/**
+ * The default modal has an inset header underline and no footer border. Compose
+ * DsModal.Header, DsModal.Body, and DsModal.Footer to build a standard confirmation
+ * dialog, and drive the open state from the component that renders it.
+ */
export const Default: Story = {
- render: function Render() {
- const [isOpen, setIsOpen] = useState(false);
+ parameters: {
+ docs: { source: { type: 'code' } },
+ },
+ args: {
+ columns: 4,
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
return (
- (null);
-
- const methods = useForm({
- resolver: zodResolver(modalFormSchema),
- defaultValues: defaultFormValues,
- mode: 'onChange',
- });
-
- const {
- register,
- handleSubmit,
- formState: { errors, isValid, touchedFields, isDirty },
- setValue,
- watch,
- trigger,
- reset,
- control,
- } = methods;
-
- const onSubmit: SubmitHandler = (data: ModalFormValues) => {
- setSubmittedData(data);
- setIsOpen(false);
- reset(defaultFormValues);
- };
-
- const handleReset = () => {
- reset(defaultFormValues);
- };
-
- const handleValueChange = (field: keyof ModalFormValues, value: string | boolean | null) => {
- setValue(field, value === 'indeterminate' ? false : (value as ModalFormValues[typeof field]), {
- shouldValidate: true,
- shouldTouch: true,
- shouldDirty: true,
- });
- };
+ parameters: {
+ docs: { source: { type: 'code' } },
+ },
+ args: {
+ columns: 6,
+ dividers: true,
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
return (
- setOpen(true)}>Open Panel }
+
+
+ Panels hold any content you like.
+
+ Hover to reveal the collapse trigger.
+
+ Primary Action
+
+ ;
+ }
+}
+
+### MCP manifest
+const Default = function Render({ variant }) {
+ const [open, setOpen] = useState(true);
+
+ return (
+ <>
+ {!open && setOpen(true)}>Open Panel }
+
+
+ Panels hold any content you like.
+
+ Hover to reveal the collapse trigger.
+
+ Primary Action
+
+
+ );
+};
+
+## Responsive
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render() {
+ const [open, setOpen] = useState(true);
+ return <>
+ {!open && setOpen(true)}>Open Panel }
+
+
+ This panel uses a responsive width.
+ Large screens: 480px. Medium screens: 240px.
+
+ Primary Action
+
+ ;
+ }
+}
+
+### MCP manifest
+const Responsive = function Render() {
+ const [open, setOpen] = useState(true);
+
+ return (
+ <>
+ {!open && setOpen(true)}>Open Panel }
+
+
+ This panel uses a responsive width.
+ Large screens: 480px. Medium screens: 240px.
+
+ Primary Action
+
+
+ );
+};
+
+## Draggable
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render() {
+ const [panelVariant, setPanelVariant] = useState('docked');
+ const [activeStep, setActiveStep] = useState(0);
+ const isFloating = panelVariant === 'floating';
+ const togglePanelVariant = () => {
+ setPanelVariant(isFloating ? 'docked' : 'floating');
+ };
+ const steps = [{
+ label: 'Configure network',
+ description: 'Set up interfaces and routing policies'
+ }, {
+ label: 'Assign resources',
+ description: 'Allocate compute and storage for the deployment'
+ }, {
+ label: 'Review & deploy',
+ description: 'Verify configuration and launch'
+ }];
+ return ('docked');
+ const [activeStep, setActiveStep] = useState(0);
+
+ const isFloating = panelVariant === 'floating';
+
+ const togglePanelVariant = () => {
+ setPanelVariant(isFloating ? 'docked' : 'floating');
+ };
+
+ const steps = [
+ { label: 'Configure network', description: 'Set up interfaces and routing policies' },
+ { label: 'Assign resources', description: 'Allocate compute and storage for the deployment' },
+ { label: 'Review & deploy', description: 'Verify configuration and launch' },
+ ];
+
+ return (
+ ;
+/**
+ * A collapsible panel that holds arbitrary content. Hover it to reveal the
+ * collapse trigger; collapsing hides the body behind an "Open Panel" button.
+ */
export const Default: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
render: function Render({ variant }) {
const [open, setOpen] = useState(true);
@@ -24,11 +31,9 @@ export const Default: Story = {
{!open && setOpen(true)}>Open Panel }
- Panels hold any content you like.
- Hover to reveal the collapse trigger.
Primary Action
@@ -37,7 +42,12 @@ export const Default: Story = {
},
};
+/**
+ * The `width` prop accepts a `ResponsiveValue` so the panel can widen on large
+ * screens and narrow on medium ones without extra layout code.
+ */
export const Responsive: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
render: function Render() {
const [open, setOpen] = useState(true);
@@ -46,8 +56,8 @@ export const Responsive: Story = {
{!open && setOpen(true)}>Open Panel }
- This panel uses a responsive width.
+ Large screens: 480px. Medium screens: 240px.
Primary Action
@@ -56,7 +66,13 @@ export const Responsive: Story = {
},
};
+/**
+ * Toggling the collapse button switches the panel between `docked` and
+ * `floating`. The floating variant is draggable and drops its inner padding so a
+ * `DsStepper` can bleed to the edges.
+ */
export const Draggable: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
render: function Render() {
const [panelVariant, setPanelVariant] = useState('docked');
const [activeStep, setActiveStep] = useState(0);
@@ -74,7 +90,7 @@ export const Draggable: Story = {
];
return (
-
-
-
+ />
+
+
@@ -450,6 +456,7 @@ export const PreventOpenAutoFocus: Story = {
args: {
onOpenAutoFocus: fn((event: Event) => event.preventDefault()),
},
+ parameters: { docs: { source: { type: 'code' } } },
render: function Render(args: DsDrawerProps) {
const [query, setQuery] = useState('');
@@ -476,15 +483,4 @@ export const PreventOpenAutoFocus: Story = {
);
},
- play: async ({ canvasElement, args }) => {
- const canvas = within(canvasElement);
-
- const input = canvas.getByPlaceholderText(/start typing/i);
- await userEvent.type(input, 'hello');
-
- await waitFor(() => expect(canvas.getByRole('dialog')).toBeVisible());
-
- await waitFor(() => expect(input).toHaveFocus());
- await expect(args.onOpenAutoFocus).toHaveBeenCalled();
- },
};
diff --git a/packages/design-system/src/components/ds-dropdown-menu/__tests__/__snapshots__/ds-dropdown-menu.docs.snap b/packages/design-system/src/components/ds-dropdown-menu/__tests__/__snapshots__/ds-dropdown-menu.docs.snap
new file mode 100644
index 000000000..fae5c864a
--- /dev/null
+++ b/packages/design-system/src/components/ds-dropdown-menu/__tests__/__snapshots__/ds-dropdown-menu.docs.snap
@@ -0,0 +1,1165 @@
+# DsDropdownMenu.Root docs snippets
+
+## Default
+
+### Show code
+{
+ parameters: {
+ docs: {
+ description: {
+ story: 'A basic dropdown menu with action items. Each item can have an icon and onSelect handler. Items can be disabled. Use separators to divide different action groups.'
+ }
+ }
+ },
+ render: () => {
+ const handleEdit = fn();
+ const handleDuplicate = fn();
+ const handleShare = fn();
+ const handleDelete = fn();
+ return
+
+ Actions
+
+
+
+ Actions
+
+
+
+ Options
+
+
+
+ Options
+
+
+ Actions
+
+
+ Options
+
+
-
+
+
{item.label}
-
+
{item.description}
-
+
+
{item.label}
{item.description}
-
+
))}
@@ -286,6 +293,7 @@ export const CollapsibleGroupControlled: StoryObj
+
{option.label}
{option.description}
-
+
))}
@@ -441,9 +447,9 @@ export const UserMenu: Story = {
},
},
render: () => {
- const handleProfile = () => console.log('Profile clicked');
- const handleSettings = () => console.log('Settings clicked');
- const handleLogout = () => console.log('Log out clicked');
+ const handleProfile = fn();
+ const handleSettings = fn();
+ const handleLogout = fn();
return (
Modal body content.
+
-
+ <>
+ setOpen(true)}>Open modal
+
- Modal Title
+ Modal title
-
+ This is the default modal variant with simple content.
+
- setIsOpen(false)}>
+ setOpen(false)}>
Cancel
-
- setIsOpen(false)}>
- Confirm
-
+
+ setOpen(false)}>Confirm
-
+
);
},
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
-
- const openModalButton = canvas.getByRole('button', { name: /open modal/i });
- await userEvent.click(openModalButton);
-
- await waitFor(() => {
- return expect(screen.getByRole('dialog')).toBeVisible();
- });
-
- await expect(screen.getByRole('heading', { name: /modal title/i })).toBeVisible();
-
- const confirmButton = screen.getByRole('button', { name: /confirm/i });
- await userEvent.click(confirmButton);
-
- await waitFor(() => {
- return expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
- });
- },
- parameters: {
- docs: {
- description: {
- story: 'Default modal variant with inset header underline and no footer border.',
- },
- },
- },
};
+/**
+ * Set `dividers` to add full-width borders above the footer and below the header,
+ * giving clearer visual separation when the body holds a form or scrollable content.
+ * Compose DsFormControl fields inside DsModal.Body for standard form layouts.
+ */
export const Divided: Story = {
- render: function Render() {
- const [isOpen, setIsOpen] = useState(false);
- const [submittedData, setSubmittedData] = useState
- setIsOpen(true)}>
- Open Modal
-
-
-
- Default Modal
-The default variant has an inset header underline and no footer border.
-This is the default modal variant with simple content.
+
-
+ <>
+ setOpen(true)}>Open modal
+
- User Profile Form
+ User profile
-
-
+
+
+
+
+
+
-
- Reset
-
-
- Save Changes
-
+ setOpen(false)}>
+ Cancel
+
+ setOpen(false)}>Save changes
-
+
);
},
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
-
- const waitForMessage = async (text: string) => {
- await waitFor(() => {
- return expect(screen.getByText(text)).toBeInTheDocument();
- });
- };
-
- const openModalButton = canvas.getByRole('button', { name: /open form modal/i });
- await userEvent.click(openModalButton);
-
- await waitFor(() => {
- return expect(screen.getByText('User Profile Form')).toBeVisible();
- });
-
- // 2. Test form validation by interacting with fields and blurring them
- // Test name field validation
- const nameInput = screen.getByLabelText('Full Name');
- await userEvent.click(nameInput);
- await userEvent.tab();
- await waitForMessage('Name is required');
-
- // Test email field validation
- const emailInput = screen.getByLabelText('Email Address');
- await userEvent.click(emailInput);
- await userEvent.tab();
- await waitForMessage('Invalid email address');
-
- // Test department field validation
- const departmentSelect = screen.getByLabelText('Department');
- await userEvent.click(departmentSelect);
- await userEvent.tab();
- await waitForMessage('Please select a department');
-
- // Test role field validation
- const roleSelect = screen.getByLabelText('Role');
- await userEvent.click(roleSelect);
- await userEvent.tab();
- await waitForMessage('Please select a role');
-
- // Test description field validation
- const descriptionInput = screen.getByLabelText('Description');
- await userEvent.click(descriptionInput);
- await userEvent.tab();
- await waitForMessage('Description must be at least 20 characters');
-
- // Test terms checkbox validation
- const acceptTermsCheckbox = screen.getByLabelText('I accept the terms and conditions');
- await userEvent.click(acceptTermsCheckbox);
- await userEvent.click(acceptTermsCheckbox);
- await waitForMessage('You must accept the terms and conditions');
-
- // 3. Fill out the form with valid data
- // Fill name
- const fakeName = `${faker.person.firstName()} ${faker.person.lastName()}`;
- await userEvent.type(nameInput, fakeName);
- await waitFor(() => {
- return expect(screen.queryByText('Name is required')).not.toBeInTheDocument();
- });
-
- // Fill email
- const fakeEmail = faker.internet.email();
- await userEvent.clear(emailInput);
- await userEvent.type(emailInput, fakeEmail);
- await waitFor(() => {
- return expect(screen.queryByText('Invalid email address')).not.toBeInTheDocument();
- });
-
- // Select department
- await userEvent.click(departmentSelect);
- const departmentOption = screen.getByRole('option', { name: 'Product' });
- await userEvent.click(departmentOption);
- await waitFor(() => {
- return expect(screen.queryByText('Please select a department')).not.toBeInTheDocument();
- });
-
- // Select role
- await userEvent.click(roleSelect);
- const roleOption = screen.getByRole('option', { name: 'Manager' });
- await userEvent.click(roleOption);
- await waitFor(() => {
- return expect(screen.queryByText('Please select a role')).not.toBeInTheDocument();
- });
-
- // Fill description
- const fakeDescription = faker.lorem.sentence(5);
- await userEvent.clear(descriptionInput);
- await userEvent.type(descriptionInput, fakeDescription);
- await waitFor(() => {
- return expect(screen.queryByText('Description must be at least 20 characters')).not.toBeInTheDocument();
- });
-
- // Select subscription
- const subscriptionOption = screen.getByLabelText('Pro');
- await userEvent.click(subscriptionOption);
- await waitFor(() => {
- return expect(screen.queryByText('Please select a subscription plan')).not.toBeInTheDocument();
- });
-
- // Accept terms
- await userEvent.click(acceptTermsCheckbox);
- await waitFor(() => {
- return expect(screen.queryByText('You must accept the terms and conditions')).not.toBeInTheDocument();
- });
-
- // 4. Verify submit button is enabled
- const saveButton = screen.getByRole('button', { name: /save changes/i });
- await waitFor(() => {
- return expect(saveButton).toBeEnabled();
- });
-
- // 5. Submit the form
- await userEvent.click(saveButton);
-
- // 6. Verify modal is closed and results are displayed
- await waitFor(() => {
- return expect(screen.queryByText('User Profile Form')).not.toBeVisible();
- });
-
- const checkResult = (text: string) => {
- return expect(
- canvas.getByText((content, element) => {
- return element?.textContent === text;
- }),
- ).toBeInTheDocument();
- };
-
- // Verify results are displayed
- await waitFor(async () => {
- await expect(canvas.getByText('Form Results:')).toBeInTheDocument();
- await checkResult(`Name: ${fakeName}`);
- await checkResult(`Email: ${fakeEmail}`);
- await checkResult('Role: manager');
- await checkResult('Department: product');
- await checkResult(`Description: ${fakeDescription}`);
- await checkResult('Subscription: pro');
- await checkResult('Terms Accepted: Yes');
- });
-
- // 7. Test reset functionality
- await userEvent.click(openModalButton);
- await waitFor(() => {
- return expect(screen.getByText('User Profile Form')).toBeInTheDocument();
- });
-
- // Verify form is reset to default values
- await waitFor(async () => {
- await expect(nameInput).toHaveValue('');
- await expect(emailInput).toHaveValue('');
- await expect(descriptionInput).toHaveValue('');
- await expect(acceptTermsCheckbox).not.toBeChecked();
- });
-
- // 8. Test reset button
- // Fill some data first
- await userEvent.type(nameInput, 'Test Name');
- await userEvent.type(emailInput, 'test@example.com');
- await userEvent.type(descriptionInput, 'This is a test description that is long enough');
- await userEvent.click(acceptTermsCheckbox);
-
- // Click reset button
- const resetButton = screen.getByRole('button', { name: /reset/i });
- await userEvent.click(resetButton);
-
- // Verify form is reset
- await waitFor(async () => {
- await expect(nameInput).toHaveValue('');
- await expect(emailInput).toHaveValue('');
- await expect(descriptionInput).toHaveValue('');
- await expect(acceptTermsCheckbox).not.toBeChecked();
- });
-
- // Exit the modal form
- await userEvent.keyboard('{Escape}');
-
- // 9. Test clear results functionality
- await userEvent.click(canvas.getByRole('button', { name: /clear results/i }));
- await waitFor(() => {
- return expect(canvas.queryByText('Form Results:')).not.toBeInTheDocument();
- });
- },
- parameters: {
- docs: {
- description: {
- story:
- 'The divided layout adds full-width borders on header and footer for clear visual separation. This example demonstrates form state management using react-hook-form with Zod validation.',
- },
- },
- },
};
-// Custom story - Button-launched modal with custom header and footer
+/**
+ * Both DsModal.Header and DsModal.Footer accept arbitrary content, so you can build
+ * a custom header (title plus supporting text) and a footer that mixes status text
+ * with actions. Use DsModal.CloseTrigger for the close control and DsModal.Actions to
+ * keep buttons right-aligned.
+ */
export const Custom: Story = {
- render: function Render() {
- const [isOpen, setIsOpen] = useState(false);
+ parameters: {
+ docs: { source: { type: 'code' } },
+ },
+ args: {
+ columns: 4,
+ dividers: true,
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
return (
-
- setIsOpen(true)}>
- Open Form Modal
-
-
-
- {submittedData && (
- Interactive Form Modal Demo
-- Click the button below to open a form modal. Fill out the form and click "Save Changes" to - see the results displayed here. -
-
- setSubmittedData(null)}
- className={styles.clearResultsButton}
- >
- Clear Results
-
-
- )}
-
- Form Results:
-
-
-
- Name: {submittedData.name}
-
-
- Email: {submittedData.email}
-
-
- Department: {submittedData.department}
-
-
- Role: {submittedData.role || 'Not specified'}
-
-
- Description: {submittedData.description}
-
-
- Subscription: {submittedData.subscription}
-
-
- Terms Accepted: {submittedData.acceptTerms ? 'Yes' : 'No'}
-
-
- {/* Basic Information Section */}
-
-
-
-
- {/* Work Information Section */}
- Basic Information
-
-
- (
- handleValueChange('name', event.target.value)}
- onBlur={(event) => handleValueChange('name', event.target.value)}
- />
- )}
- />
-
-
- (
- handleValueChange('email', event.target.value)}
- onBlur={(event) => handleValueChange('email', event.target.value)}
- />
- )}
- />
-
-
-
-
-
- {/* Subscription Section */}
- Work Information
-
-
- (
- handleValueChange('department', value)}
- onBlur={() => handleValueChange('department', field.value)}
- />
- )}
- />
-
-
- (
- handleValueChange('role', value)}
- onBlur={() => handleValueChange('role', field.value)}
- />
- )}
- />
-
-
-
- handleValueChange('subscription', value)}
- >
-
- {errors.subscription && (
- {errors.subscription.message}
- )}
-
-
- {/* Additional Information Section */}
- Subscription Plan
-
-
- trigger('description'),
- onChange: () => trigger('description'),
- })}
- />
-
-
-
- {/* Terms and Conditions */}
- Additional Information
-
- handleValueChange('acceptTerms', value)}
- />
- {errors.acceptTerms && (
- {errors.acceptTerms.message}
- )}
-
-
-
+ <>
+ setOpen(true)}>Open modal
+
-
+ Project details
+
+ Add the core information for your new project.
+
+
+
-
+
+
+
+
+
-
-
+
);
},
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
-
- const openButton = canvas.getByRole('button', { name: /open custom modal/i });
- await userEvent.click(openButton);
-
- await waitFor(() => {
- return expect(screen.getByRole('dialog')).toBeVisible();
- });
-
- await expect(screen.getByText('Project Details')).toBeVisible();
-
- const closeButton = screen.getByRole('button', { name: /✕/i });
- await userEvent.click(closeButton);
-
- await waitFor(() => {
- return expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
- });
- },
- parameters: {
- docs: {
- description: {
- story:
- 'A custom modal with custom header and footer content, demonstrating how to override the default modal structure with custom components.',
- },
- },
- },
};
+/**
+ * Compose DsIcon before DsModal.Title inside the header to add a leading icon. Useful
+ * for status or informational dialogs where the icon reinforces the message.
+ */
export const WithIcon: Story = {
- render: function Render() {
- const [isOpen, setIsOpen] = useState(false);
+ parameters: {
+ docs: { source: { type: 'code' } },
+ },
+ args: {
+ columns: 4,
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
return (
-
- setIsOpen(true)}>
- Open Custom Modal
-
-
-
- Custom Modal Demo
-Click the button below to open a custom modal with custom header and footer content.
-
-
- ✕
-
+
- {/* First Section */}
-
+
-
-
- {/* Second Section */}
- Project Details
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Third Group */}
- Team Information
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* File Upload Section */}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Project Documents
-
-
-
- or drag and drop to upload
-
-
-
-
+
+
+ All changes saved
+
+
+ setOpen(false)}>
+ Discard
+
+ setOpen(false)}>Save changes
-
+
All done
-
-
+ <>
+ setOpen(true)}>Open modal
+
Session Timeout
+ Session timeout
-
+ Your session will expire in 5 minutes due to inactivity.
+
-
+
);
},
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
-
- const openModalButton = canvas.getByRole('button', { name: /open modal/i });
- await userEvent.click(openModalButton);
-
- await waitFor(() => {
- return expect(screen.getByRole('dialog')).toBeVisible();
- });
-
- await expect(screen.getByRole('heading', { name: /session timeout/i })).toBeVisible();
- await expect(screen.getByText(/session will expire/i)).toBeVisible();
-
- await userEvent.keyboard('{Escape}');
-
- await waitFor(() => {
- return expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
- });
- },
- parameters: {
- docs: {
- description: {
- story:
- 'Example showing how to add an icon to the modal header by composing DsIcon with DsModal.Header.',
- },
- },
- },
};
+/**
+ * Omit DsModal.Header entirely for a cleaner surface without the header underline.
+ * Use this pattern instead of a variant when the body content is self-explanatory.
+ */
export const WithoutHeader: Story = {
- render: function Render() {
- const [isOpen, setIsOpen] = useState(false);
+ parameters: {
+ docs: { source: { type: 'code' } },
+ },
+ args: {
+ columns: 4,
+ },
+ render: function Render(args) {
+ const [open, setOpen] = useState(false);
return (
-
- setIsOpen(true)}>
- Open Modal
-
-
-
- Modal with Icon
-Example showing how to add an icon to the modal header.
-Your session will expire in 5 minutes due to inactivity.
+
-
+ <>
+ setOpen(true)}>Open modal
+
-
- setIsOpen(false)}>
+ setOpen(false)}>
Close
-
- setIsOpen(false)}>
- Continue
-
+
+ setOpen(false)}>Continue
-
+
);
},
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
-
- const openModalButton = canvas.getByRole('button', { name: /open modal/i });
- await userEvent.click(openModalButton);
-
- await waitFor(() => {
- return expect(screen.getByRole('dialog')).toBeVisible();
- });
-
- const dialog = screen.getByRole('dialog');
- await expect(within(dialog).getByText(/no header section/i)).toBeVisible();
-
- const continueButton = screen.getByRole('button', { name: /continue/i });
- await expect(continueButton).toBeVisible();
-
- await userEvent.click(continueButton);
-
- await waitFor(() => {
- return expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
- });
- },
- parameters: {
- docs: {
- description: {
- story:
- 'Modal without a header component - use this pattern instead of a variant when you want no header underline.',
- },
- },
- },
};
diff --git a/packages/design-system/src/components/ds-panel/__tests__/__snapshots__/ds-panel.docs.snap b/packages/design-system/src/components/ds-panel/__tests__/__snapshots__/ds-panel.docs.snap
new file mode 100644
index 000000000..d1dd36766
--- /dev/null
+++ b/packages/design-system/src/components/ds-panel/__tests__/__snapshots__/ds-panel.docs.snap
@@ -0,0 +1,199 @@
+# DsPanel docs snippets
+
+## Default
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: function Render({
+ variant
+ }) {
+ const [open, setOpen] = useState(true);
+ return <>
+ {!open &&
- setIsOpen(true)}>
- Open Modal
-
-
-
- Modal Without Header
-Modal with only body and footer content, no header section.
-
+
+
+ setActiveStep(step)} variant={isFloating ? 'single' : undefined} floating={isFloating}>
+ {steps.map((s, index) =>
+ {index === steps.length - 1 ? 'Deploy' : 'Next'}} />
+ )}
+
+
+
;
+ }
+}
+
+### MCP manifest
+const Draggable = function Render() {
+ const [panelVariant, setPanelVariant] = useState
+
+ setActiveStep(step)}
+ variant={isFloating ? 'single' : undefined}
+ floating={isFloating}
+ >
+ {steps.map((s, index) => (
+
+ {index === steps.length - 1 ? 'Deploy' : 'Next'}
+ }
+ />
+
+ ))}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/packages/design-system/src/components/ds-panel/ds-panel.stories.module.scss b/packages/design-system/src/components/ds-panel/ds-panel.stories.module.scss
new file mode 100644
index 000000000..d0e078ae5
--- /dev/null
+++ b/packages/design-system/src/components/ds-panel/ds-panel.stories.module.scss
@@ -0,0 +1,5 @@
+.draggableCanvas {
+ position: relative;
+ width: 600px;
+ height: 500px;
+}
diff --git a/packages/design-system/src/components/ds-panel/ds-panel.stories.tsx b/packages/design-system/src/components/ds-panel/ds-panel.stories.tsx
index b27f3f8c7..292da431b 100644
--- a/packages/design-system/src/components/ds-panel/ds-panel.stories.tsx
+++ b/packages/design-system/src/components/ds-panel/ds-panel.stories.tsx
@@ -1,9 +1,11 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
import { DsPanel } from './';
import { DsButton } from '../ds-button/';
import { DsStepper, DsStep, DsStepContent, DsNextStepButton } from '../ds-stepper';
-import { useState } from 'react';
+import { DsTypography } from '../ds-typography';
import type { DsPanelVariant } from './ds-panel.types';
+import styles from './ds-panel.stories.module.scss';
export default {
title: 'Components/Panel',
@@ -15,7 +17,12 @@ export default {
type Story = StoryObj- This is a panel. It can contain any content you like, such as text, images, or other components. -
+It is collapsible. Hover it to see the trigger button.
+This panel uses a responsive width.
-Large screens: 480px. Medium screens: 240px.
+
+
+
+
+ Release lock
+
+
+
+
+
+
+
+ John Smith • 23-May-2024 04:47 PM
+
+
+
+
+
+
+
+
+ Confirm
+
+
+
+
+
+### MCP manifest
+const WithContentItemsAndCTA = () =>
+
+ Release lock
+
+
+
+
+
+ John Smith • 23-May-2024 04:47 PM
+
+
+
+
+
+
+
+ Confirm
+
+
+
+ ;
+
+## Single Content Item
+
+### Show code
+
+
+
+ Set element status
+
+
+
+
+
+
+
+
+### MCP manifest
+const SingleContentItem = () =>
+
+ Set element status
+
+
+
+
+
+ ;
+
+## Legacy
+
+### Show code
+{
+ tags: ['deprecated'],
+ render: () => Legacy call form}>
+
+
+ Still works after the rewrite — same one-liner, new panel styling.
+
+
+
+}
+
+### MCP manifest
+const Legacy = () => (
+ Legacy call form}>
+
+
+ Still works after the rewrite — same one-liner, new panel styling.
+
+
+
+);
+
+## With Image
+
+### Show code
+
+
+
+ London
+
+
+
+
+
+ 
+
+
+
+
+
+### MCP manifest
+const WithImage = () =>
+
+ London
+
+
+
+
+ 
+
+
+
+ ;
\ No newline at end of file
diff --git a/packages/design-system/src/components/ds-toast/__tests__/__snapshots__/ds-toast.docs.snap b/packages/design-system/src/components/ds-toast/__tests__/__snapshots__/ds-toast.docs.snap
new file mode 100644
index 000000000..293a3f6d6
--- /dev/null
+++ b/packages/design-system/src/components/ds-toast/__tests__/__snapshots__/ds-toast.docs.snap
@@ -0,0 +1,578 @@
+# DsToast docs snippets
+
+## Success
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast
+ } = useToaster();
+ return createToast({
+ variant: 'success',
+ title: 'Success!',
+ description: 'Your action was completed successfully.'
+ })}>
+ Show success toast
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const Success = () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'success',
+ title: 'Success!',
+ description: 'Your action was completed successfully.',
+ })
+ }
+ >
+ Show success toast
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+## Info
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast
+ } = useToaster();
+ return createToast({
+ variant: 'info',
+ title: 'Information',
+ description: 'Here is some helpful information for you.'
+ })}>
+ Show info toast
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const Info = () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'info',
+ title: 'Information',
+ description: 'Here is some helpful information for you.',
+ })
+ }
+ >
+ Show info toast
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+## Warning
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast
+ } = useToaster();
+ return createToast({
+ variant: 'warning',
+ title: 'Warning',
+ description: 'Please be aware of this important notice.'
+ })}>
+ Show warning toast
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const Warning = () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'warning',
+ title: 'Warning',
+ description: 'Please be aware of this important notice.',
+ })
+ }
+ >
+ Show warning toast
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+## Error
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast
+ } = useToaster();
+ return createToast({
+ variant: 'error',
+ title: 'Error',
+ description: 'Something went wrong. Please try again.',
+ persistent: true
+ })}>
+ Show error toast
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const Error = () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'error',
+ title: 'Error',
+ description: 'Something went wrong. Please try again.',
+ persistent: true,
+ })
+ }
+ >
+ Show error toast
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+## No Title
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast
+ } = useToaster();
+ return createToast({
+ variant: 'warning',
+ description: 'Something went wrong. Please try again.'
+ })}>
+ Show toast without title
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const NoTitle = () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'warning',
+ description: 'Something went wrong. Please try again.',
+ })
+ }
+ >
+ Show toast without title
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+## With Actions
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast,
+ dismissToast
+ } = useToaster();
+ const showToast = () => {
+ const id = createToast({
+ variant: 'warning',
+ title: 'File upload failed',
+ description: 'Your file could not be uploaded.',
+ persistent: true,
+ actions:
+ dismissToast(id)}>
+ Abort
+
+ dismissToast(id)}>
+ Re-try
+
+
+ });
+ };
+ return
+ Show toast with actions
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const WithActions = () => {
+ const ToastTrigger = () => {
+ const { createToast, dismissToast } = useToaster();
+
+ const showToast = () => {
+ const id = createToast({
+ variant: 'warning',
+ title: 'File upload failed',
+ description: 'Your file could not be uploaded.',
+ persistent: true,
+ actions: (
+
+ dismissToast(id)}>
+ Abort
+
+ dismissToast(id)}>
+ Re-try
+
+
+ ),
+ });
+ };
+
+ return (
+
+ Show toast with actions
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+## Long Content
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast
+ } = useToaster();
+ return createToast({
+ variant: 'warning',
+ title: 'Important notice',
+ description: 'This is a longer message that demonstrates how the toast handles extended content. ' + 'The text wraps and stays readable while remaining within the toast boundaries.'
+ })}>
+ Show long content toast
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const LongContent = () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'warning',
+ title: 'Important notice',
+ description:
+ 'This is a longer message that demonstrates how the toast handles extended content. ' +
+ 'The text wraps and stays readable while remaining within the toast boundaries.',
+ })
+ }
+ >
+ Show long content toast
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+## Persistent
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast
+ } = useToaster();
+ return createToast({
+ variant: 'info',
+ title: 'Sync in progress',
+ description: 'This toast stays until you close it.',
+ persistent: true
+ })}>
+ Show persistent toast
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const Persistent = () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'info',
+ title: 'Sync in progress',
+ description: 'This toast stays until you close it.',
+ persistent: true,
+ })
+ }
+ >
+ Show persistent toast
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+## Multiple Toasts
+
+### Show code
+{
+ parameters: {
+ docs: {
+ source: {
+ type: 'code'
+ }
+ }
+ },
+ render: () => {
+ const ToastTrigger = () => {
+ const {
+ createToast,
+ dismissAllToasts
+ } = useToaster();
+ const showToasts = () => {
+ createToast({
+ variant: 'success',
+ title: 'First toast',
+ description: 'This is the first message.'
+ });
+ createToast({
+ variant: 'info',
+ title: 'Second toast',
+ description: 'This is the second message.'
+ });
+ createToast({
+ variant: 'warning',
+ title: 'Third toast',
+ description: 'This is the third message.'
+ });
+ };
+ return
+
+ Show multiple toasts
+
+ dismissAllToasts()}>
+ Dismiss all
+
+ ;
+ };
+ return
+ ;
+ }
+}
+
+### MCP manifest
+const MultipleToasts = () => {
+ const ToastTrigger = () => {
+ const { createToast, dismissAllToasts } = useToaster();
+
+ const showToasts = () => {
+ createToast({ variant: 'success', title: 'First toast', description: 'This is the first message.' });
+ createToast({ variant: 'info', title: 'Second toast', description: 'This is the second message.' });
+ createToast({ variant: 'warning', title: 'Third toast', description: 'This is the third message.' });
+ };
+
+ return (
+
+
+ Show multiple toasts
+
+ dismissAllToasts()}>
+ Dismiss all
+
+
+ );
+ };
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/packages/design-system/src/components/ds-toast/__tests__/ds-toast.browser.test.tsx b/packages/design-system/src/components/ds-toast/__tests__/ds-toast.browser.test.tsx
new file mode 100644
index 000000000..bc1d781ae
--- /dev/null
+++ b/packages/design-system/src/components/ds-toast/__tests__/ds-toast.browser.test.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { page } from 'vitest/browser';
+import { DsToastProvider, useToaster } from '../ds-toast-context';
+import { DsButton } from '../../ds-button';
+import { DsStack } from '../../ds-stack';
+
+describe('DsToast', () => {
+ it('renders a toast with actions and dismisses it when an action is clicked', async () => {
+ const onAbort = vi.fn();
+
+ const Harness = () => {
+ const { createToast, dismissToast } = useToaster();
+ const [lastAction, setLastAction] = useState();
+
+ const showToast = () => {
+ const id = createToast({
+ variant: 'warning',
+ title: 'File upload failed',
+ description: 'Your file could not be uploaded.',
+ persistent: true,
+ actions: (
+
+ {
+ onAbort();
+ setLastAction('abort');
+ dismissToast(id);
+ }}
+ >
+ Abort
+
+ dismissToast(id)}>
+ Re-try
+
+
+ ),
+ });
+ };
+
+ return (
+ <>
+
+ Show toast
+
+ {lastAction && {lastAction}}
+
+ );
+ };
+
+ await page.render(
+
+ ,
+ );
+
+ await page.getByRole('button', { name: 'Show toast' }).click();
+
+ await expect.element(page.getByText('File upload failed')).toBeVisible();
+ await expect.element(page.getByText('Your file could not be uploaded.')).toBeVisible();
+ await expect.element(page.getByRole('button', { name: 'Abort' })).toBeVisible();
+ await expect.element(page.getByRole('button', { name: 'Re-try' })).toBeVisible();
+
+ await page.getByRole('button', { name: 'Abort' }).click();
+
+ expect(onAbort).toHaveBeenCalledOnce();
+ await expect.element(page.getByTestId('last-action')).toHaveTextContent('abort');
+ await expect.element(page.getByText('File upload failed')).not.toBeInTheDocument();
+ });
+
+ it('stacks multiple toasts and clears them with Dismiss all', async () => {
+ const Harness = () => {
+ const { createToast, dismissAllToasts, getToastsCount } = useToaster();
+ const [count, setCount] = useState(0);
+
+ useEffect(() => {
+ const id = setInterval(() => setCount(getToastsCount()), 50);
+ return () => clearInterval(id);
+ }, [getToastsCount]);
+
+ const showToasts = () => {
+ createToast({ variant: 'success', title: 'First toast', description: 'First message.' });
+ createToast({ variant: 'info', title: 'Second toast', description: 'Second message.' });
+ createToast({ variant: 'warning', title: 'Third toast', description: 'Third message.' });
+ };
+
+ // Toasts render fixed at the top, so keep the controls clear of that overlay
+ // to ensure the "Dismiss all" trigger stays clickable while toasts are shown.
+ return (
+
+ ,
+ );
+
+ await expect.element(page.getByTestId('toast-count')).toHaveTextContent('0');
+
+ await page.getByRole('button', { name: 'Show multiple toasts' }).click();
+
+ await expect.element(page.getByTestId('toast-count')).toHaveTextContent('3');
+
+ await page.getByRole('button', { name: 'Dismiss all' }).click();
+
+ await expect.element(page.getByTestId('toast-count')).toHaveTextContent('0');
+ });
+});
diff --git a/packages/design-system/src/components/ds-toast/ds-toast.stories.module.scss b/packages/design-system/src/components/ds-toast/ds-toast.stories.module.scss
deleted file mode 100644
index be34745a7..000000000
--- a/packages/design-system/src/components/ds-toast/ds-toast.stories.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.demoContainer {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- align-items: center;
-}
-
-.actionButtonsContainer {
- display: flex;
- justify-content: end;
-}
-
-.buttonGroup {
- display: flex;
- gap: 0.5rem;
-}
diff --git a/packages/design-system/src/components/ds-toast/ds-toast.stories.tsx b/packages/design-system/src/components/ds-toast/ds-toast.stories.tsx
index 7d89da608..b8dd2665d 100644
--- a/packages/design-system/src/components/ds-toast/ds-toast.stories.tsx
+++ b/packages/design-system/src/components/ds-toast/ds-toast.stories.tsx
@@ -1,11 +1,9 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
-import { type ReactNode, useState } from 'react';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
import { DsToast } from './ds-toast';
import { DsToastProvider, useToaster } from './ds-toast-context';
+import { toastVariants } from './ds-toast.types';
import { DsButton } from '../ds-button';
-import { type DsToastProps, type ToastVariant, toastVariants } from './ds-toast.types';
-import styles from './ds-toast.stories.module.scss';
+import { DsStack } from '../ds-stack';
const meta: Meta = {
title: 'Components/Toast',
@@ -14,7 +12,9 @@ const meta: Meta = {
layout: 'centered',
docs: {
description: {
- component: 'A toast component for displaying temporary messages with different variants and actions.',
+ component:
+ 'Temporary, non-blocking messages surfaced through `DsToastProvider` and the `useToaster` hook. ' +
+ 'Toasts are created imperatively from an event handler, so every example wraps a trigger in the provider.',
},
},
},
@@ -22,27 +22,6 @@ const meta: Meta = {
variant: {
control: { type: 'select' },
options: toastVariants,
- description: 'The visual variant of the toast',
- },
- title: {
- control: { type: 'text' },
- description: 'The title of the toast',
- },
- description: {
- control: { type: 'text' },
- description: 'The description text of the toast',
- },
- persistent: {
- control: { type: 'boolean' },
- description: 'Whether the toast should persist until manually dismissed',
- },
- duration: {
- control: { type: 'number' },
- description: 'Duration in milliseconds before auto-dismiss (ignored if persistent is true)',
- },
- onDismiss: {
- control: false,
- description: 'Callback function called when the toast is dismissed',
},
},
};
@@ -50,370 +29,323 @@ const meta: Meta = {
export default meta;
type Story = StoryObj;
-const ToastDemo = ({
- variant,
- title,
- description,
- persistent,
- actions,
-}: {
- variant: ToastVariant;
- title?: string;
- description: string;
- persistent?: boolean;
- actions?: ReactNode;
-}) => {
- const { createToast } = useToaster();
-
- const showToast = () => {
- createToast({
- variant,
- title,
- description,
- persistent,
- actions,
- });
- };
+/**
+ * Confirms an action completed. Auto-dismisses after the default duration.
+ */
+export const Success: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
+ render: () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
- return (
-
+ createToast({
+ variant: 'success',
+ title: 'Success!',
+ description: 'Your action was completed successfully.',
+ })
+ }
+ >
+ Show success toast
+
+ );
+ };
-export const Success: Story = {
- render: () => (
-
-
- ),
+ return (
+
+
+ );
+ },
};
+/**
+ * Neutral, informational message.
+ */
export const Info: Story = {
- render: () => (
-
-
- ),
+ parameters: { docs: { source: { type: 'code' } } },
+ render: () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'info',
+ title: 'Information',
+ description: 'Here is some helpful information for you.',
+ })
+ }
+ >
+ Show info toast
+
+ );
+ };
+
+ return (
+
+
+ );
+ },
};
+/**
+ * Draws attention to something that may need action but is not an error.
+ */
export const Warning: Story = {
- render: () => (
-
-
- ),
+ parameters: { docs: { source: { type: 'code' } } },
+ render: () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'warning',
+ title: 'Warning',
+ description: 'Please be aware of this important notice.',
+ })
+ }
+ >
+ Show warning toast
+
+ );
+ };
+
+ return (
+
+
+ );
+ },
};
-export const WarningNoTitle: Story = {
- render: () => (
-
-
- ),
+/**
+ * Reports a failure. Errors are usually persistent so the user can read and act on them.
+ */
+export const Error: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
+ render: () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'error',
+ title: 'Error',
+ description: 'Something went wrong. Please try again.',
+ persistent: true,
+ })
+ }
+ >
+ Show error toast
+
+ );
+ };
+
+ return (
+
+
+ );
+ },
};
-export const WarningNoTitleAction: Story = {
- render: () => (
-
-
- Restart
-
- }
- persistent
- >
-
- ),
+/**
+ * Omit `title` for a compact, single-line toast that shows only the description.
+ */
+export const NoTitle: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
+ render: () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
+
+ return (
+
+ createToast({
+ variant: 'warning',
+ description: 'Something went wrong. Please try again.',
+ })
+ }
+ >
+ Show toast without title
+
+ );
+ };
+
+ return (
+
+
+ );
+ },
};
-export const WarningWithActions: Story = {
+/**
+ * Pass `actions` to render buttons inside the toast. Action handlers typically dismiss the
+ * toast with `dismissToast(id)` — pair actions with `persistent` so the toast waits for a choice.
+ */
+export const WithActions: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
render: () => {
- const WithActionsDemo = () => {
+ const ToastTrigger = () => {
const { createToast, dismissToast } = useToaster();
- const [action, setAction] = useState();
- const showToastWithAction = () => {
- const toastId = createToast({
+ const showToast = () => {
+ const id = createToast({
+ variant: 'warning',
title: 'File upload failed',
description: 'Your file could not be uploaded.',
- variant: 'warning',
+ persistent: true,
actions: (
-
+ Show toast with actions
+
);
};
return (
-
);
},
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
-
- // Test toast creation with actions
- await userEvent.click(canvas.getByTestId('show-toast-button'));
-
- // Wait for toast to appear and verify content
- await waitFor(async () => {
- await expect(canvas.getByText('File upload failed')).toBeInTheDocument();
- await expect(canvas.getByText('Your file could not be uploaded.')).toBeInTheDocument();
- });
-
- // Verify action buttons are present
- await expect(canvas.getByTestId('abort-button')).toBeInTheDocument();
- await expect(canvas.getByTestId('retry-button')).toBeInTheDocument();
-
- // Test abort button functionality
- await userEvent.click(canvas.getByTestId('abort-button'));
-
- // Verify toast is dismissed and action is recorded
- await waitFor(() => {
- return expect(canvas.getByTestId('action-result')).toHaveTextContent('abort');
- });
-
- // Wait a bit to ensure toast is dismissed
- await waitFor(
- () => {
- return expect(canvas.queryByText('File upload failed')).not.toBeInTheDocument();
- },
- { timeout: 1000 },
- );
- },
-};
-
-export const Error: Story = {
- render: () => (
-
-
- ),
};
+/**
+ * Long descriptions wrap and the toast grows to fit while staying within its max width.
+ */
export const LongContent: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
render: () => {
- const LongContentDemo = () => {
+ const ToastTrigger = () => {
const { createToast } = useToaster();
- const showLongToast = () => {
- createToast({
- title: 'Important Notice',
- description:
- 'This is a longer message that demonstrates how the toast component handles extended content. The text will wrap appropriately and maintain good readability while staying within the toast boundaries.',
- variant: 'warning',
- duration: 8000,
- });
- };
-
return (
-
+ createToast({
+ variant: 'warning',
+ title: 'Important notice',
+ description:
+ 'This is a longer message that demonstrates how the toast handles extended content. ' +
+ 'The text wraps and stays readable while remaining within the toast boundaries.',
+ })
+ }
+ >
+ Show long content toast
+
);
};
return (
-
);
},
};
-const MultipleToastsDemo = () => {
- const { createToast, dismissAllToasts, getToastsCount } = useToaster();
- const [count, setCount] = useState(getToastsCount());
-
- const createToastWithDelay = (toast: DsToastProps, delay: number = 0) => {
- setTimeout(() => {
- createToast(toast);
- setCount(getToastsCount());
- }, delay);
- };
-
- const dismissAllVisibleToasts = () => {
- dismissAllToasts();
- setTimeout(() => {
- setCount(getToastsCount());
- }, 500);
- };
-
- const createMultipleToasts = () => {
- createToastWithDelay({
- variant: 'success',
- title: 'First Toast',
- description: 'This is the first toast message.',
- });
-
- createToastWithDelay(
- {
- variant: 'info',
- title: 'Second Toast',
- description: 'This is the second toast message.',
- },
- 500,
- );
-
- createToastWithDelay(
- {
- variant: 'warning',
- title: 'Third Toast',
- description: 'This is the third toast message.',
- },
- 1000,
- );
- };
+/**
+ * Set `persistent` to keep a toast open until the user dismisses it. Persistent toasts never
+ * auto-dismiss, so they cannot also set `duration`.
+ */
+export const Persistent: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
+ render: () => {
+ const ToastTrigger = () => {
+ const { createToast } = useToaster();
- return (
-
-
- ),
- parameters: {
- docs: {
- description: {
- story: 'Demo showing multiple toasts stacked together with dismiss all functionality.',
- },
- },
- },
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
-
- // Verify initial state
- await expect(canvas.getByTestId('toast-count')).toHaveTextContent('0');
-
- // Test creating multiple toasts
- await userEvent.click(canvas.getByTestId('create-multiple-button'));
-
- // First toast should appear immediately
- await waitFor(() => {
- return expect(canvas.getByText('First Toast')).toBeInTheDocument();
- });
-
- // Wait for second toast (500ms delay)
- await waitFor(
- () => {
- return expect(canvas.getByText('Second Toast')).toBeInTheDocument();
- },
- { timeout: 1000 },
- );
+ );
+ };
- // Wait for third toast (1000ms delay)
- await waitFor(
- () => {
- return expect(canvas.getByText('Third Toast')).toBeInTheDocument();
- },
- { timeout: 1500 },
+ return (
+
+
);
+ },
+};
- // Verify all toasts are visible
- await expect(canvas.getByText('First Toast')).toBeInTheDocument();
- await expect(canvas.getByText('Second Toast')).toBeInTheDocument();
- await expect(canvas.getByText('Third Toast')).toBeInTheDocument();
-
- // Verify count shows 3 toasts
- await expect(canvas.getByTestId('toast-count')).toHaveTextContent('3');
+/**
+ * Toasts stack up to the provider's `max` (default 3). `dismissAllToasts` clears them at once.
+ */
+export const MultipleToasts: Story = {
+ parameters: { docs: { source: { type: 'code' } } },
+ render: () => {
+ const ToastTrigger = () => {
+ const { createToast, dismissAllToasts } = useToaster();
- // Test dismiss all functionality
- await userEvent.click(canvas.getByTestId('dismiss-all-button'));
+ const showToasts = () => {
+ createToast({ variant: 'success', title: 'First toast', description: 'This is the first message.' });
+ createToast({ variant: 'info', title: 'Second toast', description: 'This is the second message.' });
+ createToast({ variant: 'warning', title: 'Third toast', description: 'This is the third message.' });
+ };
- // Verify all toasts are dismissed
- await waitFor(async () => {
- await expect(canvas.queryByText('First Toast')).not.toBeInTheDocument();
- await expect(canvas.queryByText('Second Toast')).not.toBeInTheDocument();
- await expect(canvas.queryByText('Third Toast')).not.toBeInTheDocument();
- });
+ return (
+
+
+ Show multiple toasts
+
+ dismissAllToasts()}>
+ Dismiss all
+
+
+ );
+ };
- // Verify count is back to 0
- await waitFor(
- () => {
- return expect(canvas.getByTestId('toast-count')).toHaveTextContent('0');
- },
- { timeout: 1000 },
+ return (
+
+
);
},
};
diff --git a/packages/design-system/src/components/ds-tooltip/__tests__/__snapshots__/ds-tooltip.docs.snap b/packages/design-system/src/components/ds-tooltip/__tests__/__snapshots__/ds-tooltip.docs.snap
new file mode 100644
index 000000000..2e08f220b
--- /dev/null
+++ b/packages/design-system/src/components/ds-tooltip/__tests__/__snapshots__/ds-tooltip.docs.snap
@@ -0,0 +1,113 @@
+# DsTooltip docs snippets
+
+## Default
+
+### Show code
+
+
+
+### MCP manifest
+const Default = () =>
+
+
+### MCP manifest
+const LongText = () => Multi-line tooltip with JSX No truncation should occur. }>
+
+ Multi-line tooltip with JSX
+ No truncation should occur.
+ )}> ;
+
+## Placement End
+
+### Show code
+
+
+
+### MCP manifest
+const PlacementEnd = () =>
+
+
+### MCP manifest
+const Disabled = () => Open in catalog}
+ interactive
+>
+
+
+### MCP manifest
+const Interactive = () => Open in catalog
+ )}
+ interactive
+ closeDelay={150}> ;
+
+## Custom Width With Ellipsis
+
+### Show code
+
+
+
+### MCP manifest
+const CustomWidthWithEllipsis = () => = {
title: 'Components/Tooltip',
@@ -56,14 +58,17 @@ export const LongText: Story = {
},
};
+/**
+ * Tooltips accept rich JSX content, not just strings. Compose `DsStack` and
+ * `DsTypography` so the layout and text styles inherit the on-dark tooltip palette.
+ */
export const RichContent: Story = {
args: {
content: (
-
+ Multi-line tooltip with JSX
+ No truncation should occur.
+
),
children:
+
+
+ Show multiple toasts
+
+ dismissAllToasts()}>
+ Dismiss all
+
+ {count}
+
+ );
+ };
+
+ await page.render(
+
-
- Show {variant.charAt(0).toUpperCase() + variant.slice(1)} Toast
-
-
- );
-};
+ return (
+ {variant.charAt(0).toUpperCase() + variant.slice(1)} Toast
-
- {
- setAction('abort');
- dismissToast(toastId);
- }}
- variant="ghost"
- >
+
+ dismissToast(id)}>
Abort
- {
- setAction('retry');
- dismissToast(toastId);
- }}
- variant="danger"
- >
+ dismissToast(id)}>
Re-try
-
+
),
- persistent: true, // No auto-dismiss
});
};
return (
-
-
- Show Toast with Actions
-
- {action &&
+ Toast with Action
-{action}
} -
-
- Show Long Content Toast
-
-
+ Long Content Toast
-
-
- );
-};
-
-export const MultipleToasts: Story = {
- render: () => (
- Multiple Toasts Demo
-
+ return (
+ createToast({
+ variant: 'info',
+ title: 'Sync in progress',
+ description: 'This toast stays until you close it.',
+ persistent: true,
+ })
+ }
>
- Create Multiple Toasts
+ Show persistent toast
-
- Dismiss All
-
-
- Count: {count}
-
- Multi-line tooltip with JSX
-
- No truncation should occur. -
+ - No truncation should occur. -