| 1 |
import React from 'react' |
| 2 |
|
| 3 |
export interface CalloutContent { |
| 4 |
step: string |
| 5 |
title: string |
| 6 |
body: string |
| 7 |
} |
| 8 |
|
| 9 |
/** |
| 10 |
* Commentary on what a walkthrough is doing at the current stage, floating in |
| 11 |
* the corner of the viewport so it stays out of the page's flow. |
| 12 |
* |
| 13 |
* The demo pages announce each stage through their own live region, so this is |
| 14 |
* hidden from assistive technology rather than repeating it. |
| 15 |
*/ |
| 16 |
export const DemoCallout: React.FC<{ callout?: CalloutContent }> = ({ callout }) => |
| 17 |
callout |
| 18 |
// Keyed on the content rather than the stage: consecutive stages can |
| 19 |
// share a callout, and remounting between them replays the entrance |
| 20 |
// animation as a flicker. |
| 21 |
? <aside key={callout.title} className="demo-callout" aria-hidden="true"> |
| 22 |
<span className="demo-callout__step">{callout.step}</span> |
| 23 |
<h3 className="demo-callout__title">{callout.title}</h3> |
| 24 |
<p className="demo-callout__body">{callout.body}</p> |
| 25 |
</aside> |
| 26 |
: null |
| 27 |
|
