Intégrer une story Storybook
Une diapositive peut afficher une story d'un Storybook publié en ligne. La story est rendue en direct : la diapositive montre l'état actuel du composant.
Les exemples de cette page affichent le Storybook public de react-dsfr, les composants React du Système de Design de l'État.
Trouver l'adresse du Storybook et l'identifiant de la story
- Ouvrez la story dans votre Storybook. L'adresse a la forme
https://storybook.example.com/?path=/story/components-card--default. - L'adresse du Storybook est la partie avant
/?path=:https://storybook.example.com. - L'identifiant de la story est la partie après
/story/:components-card--default.
Le Storybook doit accepter d'être affiché dans une autre page. Si la diapositive reste vide, le serveur du Storybook l'interdit : demandez à l'équipe qui le publie d'autoriser l'adresse du studio.
Une story dans une diapositive
Ajoutez l'adresse du Storybook dans l'en-tête, avec la clé storybook. Dans la diapositive, l'annotation :layout reçoit l'identifiant de la story dans story, et une mise en page dans name : media-below place la story sous le titre, sur toute la largeur, et media-right à droite du texte.
---
storybook: https://components.react-dsfr.codegouv.studio
---
### L'en-tête du site
:layout{name="media-below" story="components-header--header-with-quick-access-items" lightbox="true"}
Le bloc Marianne, le nom du service et les accès rapides.
lightbox="true" ouvre la story en plein écran au clic.
Plusieurs stories côte à côte
Screens place ses blocs StoryFrame en colonnes ; cols fixe leur nombre. Chaque StoryFrame reçoit l'identifiant de sa story dans story et une légende dans label.
---
storybook: https://components.react-dsfr.codegouv.studio
---
### Les trois variantes du bouton
:::Screens{cols="3"}
::StoryFrame{story="components-button--default" ratio="wide" previewWidth="260" label="Principal"}
::
::StoryFrame{story="components-button--button-secondary" ratio="wide" previewWidth="260" label="Secondaire"}
::
::StoryFrame{story="components-button--button-tertiary" ratio="wide" previewWidth="260" label="Tertiaire"}
::
:::
ratio donne la forme du cadre (wide pour 16/9, portrait pour 3/4) et previewWidth la largeur, en pixels, à laquelle la story est rendue avant d'être réduite au cadre. La référence de @vignettes/storybook décrit les autres réglages.