Storybook previews

How Playground and Variants stories appear in Storybook, and how guidelines pages embed them on docs.easol.com.

A story appears in two places.

Playground is the full story view, opened from Playground in the sidebar. Authors change controls here.

Variants are the embedded previews on a guidelines page on docs.easol.com. Readers see the component in context, not the control panel.

Playground is unstyled: no centring, and no extra background.

Guidelines canvases on docs.easol.com always use the page-background token, --moments-semantic-colour-page-background-base-default.

Compact components stay centred in those canvases. Full-bleed components set parameters.moments.docsFill: true, which pads and fills the canvas instead of centring.