Update stepper

numerique-gouv · Dec 12, 2024 · c2f5b52 · c2f5b52
1 parent 4289fc3
commit c2f5b52
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/content_manager/blocks.py b/content_manager/blocks.py
@@ -621,7 +621,7 @@ class SeparatorBlock(blocks.StructBlock):
 
 class StepBlock(blocks.StructBlock):
     title = blocks.CharBlock(label=_("Title"))
-    detail = blocks.TextBlock(label=_("Detail"))
+    detail = blocks.TextBlock(label=_("Detail"), required=False)
 
 
 class StepsListBlock(blocks.StreamBlock):
@@ -955,6 +955,7 @@ class CommonStreamBlock(blocks.StreamBlock):
     events_recent_entries = EventsRecentEntriesBlock(
         label=_("Event calendar recent entries"), group=_("Website structure")
     )
+    stepper = StepperBlock(label=_("Stepper"), group=_("DSFR components"))
 
     class Meta:
         icon = "dots-horizontal"

diff --git a/content_manager/templates/content_manager/blocks/stepper.html b/content_manager/templates/content_manager/blocks/stepper.html
@@ -1,14 +1,22 @@
+{% load i18n %}
 <div class="fr-container fr-my-3w">
   <div class="fr-stepper">
-    <h2 class="fr-stepper__title">{{ value.title }}</h2>
+    <h2 class="fr-stepper__title">
+      {{ value.title }}
+      <span class="fr-stepper__state">
+        {% with current_step=value.current total_steps=value.total %}
+          {% blocktranslate %}Step {{ current_step }} of {{ total_steps }}{% endblocktranslate %}
+        {% endwith %}
+      </span>
+    </h2>
     <div class="fr-stepper__steps"
          data-fr-current-step="{{ value.current }}"
          data-fr-steps="{{ value.total }}"></div>
     <div class="fr-grid-row fr-grid-row--gutters">
       {% for step in value.steps %}
         <div class="fr-col-12 fr-col-sm">
           <p>
-            <strong>{{ step.value.title }}</strong>
+            <span class="fr-text--bold">{{ step.value.title }}</span>
           </p>
           <p>{{ step.value.detail|linebreaksbr }}</p>
         </div>