Customer Stories Dialog

ProNew

Use this when customer stories deserve more than a card: a peeking row of story cards that opens a dialog with the full story and Previous and Next story buttons, returning focus to the card.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use it on a customers page where each story has a summary for the row and a longer version that should not leave the page.

Do not use it when stories are long articles with their own URL; link to the page instead so it can be shared and indexed.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`stories`	`CustomerStory[]`	`-`	Each has an id, customer, headline, summary, body, metric and cover node.
`label`	`string`	`-`	Accessible name of the row and the dialog.

Accessibility

Each card is a button that opens a modal dialog named by the story; focus is trapped inside and returns to the card on close.
The dialog has Previous story and Next story buttons that wrap, and the heading is announced when the story changes.
The cards are in a labelled carousel; focusing one brings it into view.
Keyboard: Enter or Space on a card: open the story
Keyboard: Escape: close and return to the card

Testing

The pattern ships with a Testing Library test (customer-stories-dialog.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.