Ajout des listes de boutons aux appels à action (#184)

* Improve icon picker

* Moved inline style to a class

* Add ability to use a button list in a text and call to action block

* Update translations

* Add buttons list to the heading

* Update test

content_manager/abstract.py

@@ -2,12 +2,12 @@
 from django.utils.translation import gettext_lazy as _
 from dsfr.constants import COLOR_CHOICES
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
-from wagtail.fields import StreamField
+from wagtail.fields import RichTextField, StreamField
 from wagtail.images import get_image_model_string
 from wagtail.models import Page
 from wagtail.search import index
 
-from content_manager.blocks import STREAMFIELD_COMMON_BLOCKS
+from content_manager.blocks import STREAMFIELD_COMMON_BLOCKS, ButtonsHorizontalListBlock
 from content_manager.utils import get_streamfield_raw_text
 
 
@@ -44,20 +44,39 @@ class SitesFacilesBasePage(Page):
     header_large = models.BooleanField(_("Full width"), default=False)  # type: ignore
     header_darken = models.BooleanField(_("Darken background image"), default=False)  # type: ignore
 
-    header_cta_text = models.CharField(
+    header_cta_text = RichTextField(
         _("Call to action text"),
         null=True,
         blank=True,
     )
 
+    header_cta_buttons = StreamField(
+        [
+            (
+                "buttons",
+                ButtonsHorizontalListBlock(
+                    help_text=_("Please use only one primary button. If you use icons, align them on the same side.")
+                ),
+            ),
+        ],
+        max_num=1,
+        null=True,
+        blank=True,
+    )
     header_cta_label = models.CharField(
         _("Call to action label"),
+        help_text=_(
+            "This field is obsolete and will be removed in the near future. Please replace with the CTA buttons above."
+        ),
         null=True,
         blank=True,
     )
 
     header_cta_link = models.URLField(
         _("Call to action link"),
+        help_text=_(
+            "This field is obsolete and will be removed in the near future. Please replace with the CTA buttons above."
+        ),
         null=True,
         blank=True,
     )
@@ -76,6 +95,10 @@ class SitesFacilesBasePage(Page):
                 FieldPanel("header_large"),
                 FieldPanel("header_darken"),
                 FieldPanel("header_cta_text"),
+                FieldPanel(
+                    "header_cta_buttons",
+                    heading=_("Call-to-action buttons"),
+                ),
                 FieldPanel("header_cta_label"),
                 FieldPanel("header_cta_link"),
             ],

content_manager/blocks.py

@@ -9,6 +9,7 @@
 from wagtailmarkdown.blocks import MarkdownBlock
 
 from content_manager.constants import (
+    BUTTON_ICON_SIDE,
     BUTTON_TYPE_CHOICES,
     HEADING_CHOICES,
     HORIZONTAL_CARD_IMAGE_RATIOS,
@@ -33,6 +34,27 @@ class Meta:
         icon = "view"
 
 
+class IconPickerBlock(blocks.FieldBlock):
+    def __init__(self, required=True, help_text=None, validators=(), **kwargs):
+        self.field_options = {
+            "required": required,
+            "help_text": help_text,
+            "max_length": 70,
+            "min_length": 0,
+            "validators": [],
+        }
+        super().__init__(**kwargs)
+
+    @cached_property
+    def field(self):
+        field_kwargs = {"widget": DsfrIconPickerWidget()}
+        field_kwargs.update(self.field_options)
+        return forms.CharField(**field_kwargs)
+
+    class Meta:
+        icon = "radio-full"
+
+
 class LinkStructValue(blocks.StructValue):
     def url(self):
         link = self.get("external_url", "")
@@ -88,6 +110,13 @@ class Meta:
 
 class ButtonBlock(LinkBlock):
     button_type = blocks.ChoiceBlock(label=_("Button type"), choices=BUTTON_TYPE_CHOICES, required=False)
+    icon_class = IconPickerBlock(label=_("Icon"), required=False)
+    icon_side = blocks.ChoiceBlock(
+        label=_("Icon side"),
+        choices=BUTTON_ICON_SIDE,
+        required=False,
+        default="",
+    )
 
     class Meta:
         value_class = LinkStructValue
@@ -110,27 +139,6 @@ class Meta:
         template = "content_manager/blocks/buttons_vertical_list.html"
 
 
-class IconPickerBlock(blocks.FieldBlock):
-    def __init__(self, required=True, help_text=None, validators=(), **kwargs):
-        self.field_options = {
-            "required": required,
-            "help_text": help_text,
-            "max_length": 70,
-            "min_length": 0,
-            "validators": [],
-        }
-        super().__init__(**kwargs)
-
-    @cached_property
-    def field(self):
-        field_kwargs = {"widget": DsfrIconPickerWidget()}
-        field_kwargs.update(self.field_options)
-        return forms.CharField(**field_kwargs)
-
-    class Meta:
-        icon = "radio-full"
-
-
 class SingleLinkBlock(LinkBlock):
     icon = blocks.ChoiceBlock(
         label=_("Icon"),
@@ -307,7 +315,12 @@ class CardBlock(blocks.StructBlock):
     call_to_action = blocks.StreamBlock(
         [
             ("links", LinksVerticalListBlock()),
-            ("buttons", ButtonsHorizontalListBlock()),
+            (
+                "buttons",
+                ButtonsHorizontalListBlock(
+                    help_text=_("Please use only one primary button. If you use icons, align them on the same side.")
+                ),
+            ),
         ],
         label=_("Bottom call-to-action: links or buttons"),
         help_text=_("Incompatible with the bottom detail text."),
@@ -614,12 +627,33 @@ class StepperBlock(blocks.StructBlock):
 
 class TextAndCTA(blocks.StructBlock):
     text = blocks.RichTextBlock(label=_("Rich text"), required=False)
+    cta_buttons = blocks.StreamBlock(
+        [
+            (
+                "buttons",
+                ButtonsHorizontalListBlock(
+                    help_text=_("Please use only one primary button. If you use icons, align them on the same side.")
+                ),
+            ),
+        ],
+        label=_("Call-to-action buttons"),
+        max_num=1,
+        required=False,
+    )
     cta_label = blocks.CharBlock(
-        label=_("Call to action label"),
-        help_text=_("The link appears as a button under the text block"),
+        label=_("Call to action label  (obsolete)"),
+        help_text=_(
+            "This field is obsolete and will be removed in the near future. Please replace with the CTA buttons above."
+        ),
+        required=False,
+    )
+    cta_url = blocks.CharBlock(
+        label=_("Link (obsolete)"),
+        help_text=_(
+            "This field is obsolete and will be removed in the near future. Please replace with the CTA buttons above."
+        ),
         required=False,
     )
-    cta_url = blocks.CharBlock(label=_("Link"), required=False)
 
     class Meta:
         icon = "link"

content_manager/constants.py

@@ -7,6 +7,11 @@
     ("fr-btn fr-btn--tertiary-no-outline", _("Tertiary without border")),
 )
 
+BUTTON_ICON_SIDE = (
+    ("fr-btn--icon-left", _("Left")),
+    ("fr-btn--icon-right", _("Right")),
+)
+
 HEADING_CHOICES = [
     ("h2", _("Heading 2")),
     ("h3", _("Heading 3")),