Ajout des liens vers le storybook

guide/content/components/accordion.haml

@@ -28,4 +28,4 @@ title: Accordéon - Accordion
     Si le niveau de titre par défaut (`H3`) ne vous convient pas, vous pouvez le surcharger en passant l'option `starting_header_level`.
 
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Accordéons", "accordeon"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("accordeon", "accordion"))

guide/content/components/alert.haml

@@ -34,4 +34,4 @@ title: Alerte - Alert
          caption: "Alerte avec un bouton pour fermer",
          code: alert_md_with_close_button)
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Alerte"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("alerte", "alert"))

guide/content/components/badge.haml

@@ -18,4 +18,4 @@ title: Badge - Badge
 
 = render('/partials/example.haml', caption: "Vue d'ensemble", code: badge_default)
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Badge"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("badge", "badge"))

guide/content/components/breadcrumbs.haml

@@ -10,4 +10,4 @@ title: Fil d'Ariane – Breadcrumbs
 
 = render('/partials/example.haml', caption: "Vue d'ensemble", code: breadcrumbs)
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Fil d'Ariane", "fil-d-ariane"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("fil-d-ariane", "breadcrumb"))

guide/content/components/button.haml

@@ -35,4 +35,4 @@ title: Bouton - Button
     La taille `:sm` pourra être utilisé pour créer certains composants, évitez de l’utiliser en mobile car la zone de “touch” sur écran tactile n’est pas suffisante.
 
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Bouton"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("bouton", "button"))

guide/content/components/callout.haml

@@ -21,4 +21,4 @@ title: Mise en avant - Callout
     Si votre hiérarchie de titre requiert un autre niveau de titre que
     H3 vous pouvez le spécifier en passant `starting_header_level` au composant.
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Mise en avant", "mise-en-avant"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("mise-en-avant", "callout"))

guide/content/components/header.haml

@@ -50,4 +50,4 @@ title: En-tête - Header
   :markdown
     Cet exemple regroupe toutes les fonctionnalités d’un header.
 
-= render '/partials/related-info.haml', links: dsfr_component_doc_link("Header", "en-tete")
+= render '/partials/related-info.haml', links: dsfr_component_doc_links("en-tete", "header")

guide/content/components/highlight.haml

@@ -19,4 +19,4 @@ title: Mise en exergue - Highlight
   :markdown
     Rendu avec une taille de texte élargie
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Le composant Mise en exergue/Highlight", "mise-en-exergue"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("mise-en-exergue", "highlight"))

guide/content/components/modal.haml

@@ -32,7 +32,7 @@ title: Modale - Modal
     On peut donc par exemple utiliser des liens de navigation `dsfr_link_to` plutôt que des boutons.
     De la même manière, il faut aussi bien penser à modifier le bouton du header par un lien en utilisant le slot `header`.
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Modale"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("modale", "modal"))
 
 :css
   .fr-tabs__panel {

guide/content/components/skiplink.haml

@@ -10,4 +10,4 @@ title: Lien d’évitement - Skiplink
   :markdown
     Le rendu de base du SkiplinkComponent. Pour voir le rendu appuyez sur la touche `Tab` de votre clavier.
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("lien-d-evitement"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("lien-d-evitement", "skiplink"))

guide/content/components/stepper.haml

@@ -19,4 +19,4 @@ title: Indicateur d'étape - Stepper
     Le titre de l’étape suivante est obligatoire pour toutes les étapes sauf la dernière.
 
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Indicateur d'étape - Stepper", "indicateur-d-etapes"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("indicateur-d-etapes", "stepper"))

guide/content/components/tabs.haml

@@ -25,4 +25,4 @@ title: Onglet - Tab
     Chaque page affiche uniquement un onglet actif avec son contenu et les liens vers les autres onglets.
     L’onglet actif n’a pas besoin d’avoir de lien, il peut rester un bouton.
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Tabs", "onglet"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("onglet", "tabs"))

guide/content/components/tag.haml

@@ -24,4 +24,4 @@ title: Tag - Tag
 
     Le handler JS `onclick` donné en exemple est indicatif, à vous de l’implémenter dans votre environnement.
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Tag"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("tag", "tag"))

guide/content/components/tile.haml

@@ -29,4 +29,4 @@ title: Tuile - Tile
 
     Le niveau par défaut est `4`, vous pouvez l’augmenter ou le baisser selon votre contexte.
 
-= render('/partials/related-info.haml', links: dsfr_component_doc_link("Tuile"))
+= render('/partials/related-info.haml', links: dsfr_component_doc_links("tuile", "tile"))

guide/lib/helpers/content_helpers.rb

@@ -1,19 +1,19 @@
 module Helpers
   module ContentHelpers
     DSFR_COMPONENT_DOC_HREF = "https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants".freeze
+    DSFR_COMPONENT_STORYBOOK_HREF = "https://storybook.systeme-de-design.gouv.fr".freeze
 
     def site_title
       "Composants Rails ViewComponent pour le Système de Design de lʼÉtat"
     end
 
   private
 
-    def dsfr_component_doc_link(name, id = nil)
-      label = "#{name} sur la documentation du Système de Design de l'État"
-
-      id ||= name.downcase
-
-      { label => "#{DSFR_COMPONENT_DOC_HREF}/#{id}/" }
+    def dsfr_component_doc_links(doc_id = nil, storybook_id = nil)
+      {
+        "Voir #{@item[:title]} dans la documentation officielle" => "#{DSFR_COMPONENT_DOC_HREF}/#{doc_id}/",
+        "Voir #{@item[:title]} sur le Storybook officiel" => "#{DSFR_COMPONENT_STORYBOOK_HREF}/?path=/docs/#{storybook_id}--docs"
+      }
     end
   end
 end