TWE-16 - BE - Optional intro & button fields for blog/work chooser bl…

…ocks (#339)

* Add intro to BlogChooserBlock

* Add intro to WorkChooserBlock

* Comment out intro from pattern library for now

* Add primary & secondary buttons also, commented out from the YAML file

* Add comments we only expect 1 button

tbx/core/blocks.py

@@ -654,11 +654,16 @@ def clean(self, value):
 
 class BlogChooserBlock(blocks.StructBlock):
     featured_blog_heading = blocks.CharBlock(max_length=255)
+    intro = blocks.RichTextBlock(
+        features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
+    )
     blog_pages = blocks.ListBlock(
         blocks.PageChooserBlock(page_type="blog.BlogPage"),
         min_num=1,
         max_num=3,
     )
+    primary_button = LinkBlock(label="Primary button", required=False)
+    secondary_button = LinkBlock(label="Secondary button", required=False)
 
     def get_context(self, value, parent_context=None):
         context = super().get_context(value, parent_context=parent_context)
@@ -680,11 +685,16 @@ def get_context(self, value, parent_context=None):
 
 class WorkChooserBlock(blocks.StructBlock):
     featured_work_heading = blocks.CharBlock(max_length=255)
+    intro = blocks.RichTextBlock(
+        features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
+    )
     work_pages = blocks.ListBlock(
         blocks.PageChooserBlock(page_type=["work.WorkPage", "work.HistoricalWorkPage"]),
         min_num=1,
         max_num=3,
     )
+    primary_button = LinkBlock(label="Primary button", required=False)
+    secondary_button = LinkBlock(label="Secondary button", required=False)
 
     def get_context(self, value, parent_context=None):
         context = super().get_context(value, parent_context)

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html

@@ -1,15 +1,34 @@
 {% load wagtailcore_tags %}
 
+{# Section heading #}
 {% if is_standard_page %}
     <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">{{ value.featured_blog_heading }}</h2>
 {% else %}
     {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.featured_blog_heading classes="motif-heading--two motif-heading--static  motif-heading--half-width   section-title--related-posts" %}
 {% endif %}
 
+{# Section intro #}
+{% if value.intro %}
+    <div class="rich-text">
+        {{ value.intro|richtext }}
+    </div>
+{% endif %}
+
+{# Blog posts #}
 <ul class="grid__related-posts streamfield__related-posts mb-spacerMedium lg:mb-spacerLarge">
     {% for blog_page in value.blog_pages %}
         {% pageurl blog_page.blog_index as blog_index_url %}
         {% pageurl blog_page as blog_post_url %}
         {% include "patterns/molecules/listing/listing--avatar.html" with title=blog_page.title name=blog_page.first_author.name job_title=blog_page.first_author.role link=blog_post_url date=blog_page.date reading_time=blog_page.read_time tags=blog_page.tags avatar=blog_page.first_author.image tag_link_base=blog_index_url %}
     {% endfor %}
 </ul>
+
+{# We expect only up to 1 primary button (`max_num=1` is set in the block definition.) #}
+{% for button in value.primary_button %}
+    <a href="{{ button.value.url }}">{{ button.value.text }}</a>
+{% endfor %}
+
+{# We expect only up to 1 secondary button (`max_num=1` is set in the block definition.) #}
+{% for button in value.secondary_button %}
+    <a href="{{ button.value.url }}">{{ button.value.text }}</a>
+{% endfor %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.yaml

@@ -1,6 +1,15 @@
 context:
   value:
-    featured_blog_heading: Case studies
+    featured_blog_heading: Blog posts
+    # intro: '<p>An injection of fresh ideas, and the occasional challenging opinion, to ignite your fire.</p>'
+    # primary_button:
+    #   - value:
+    #       text: Primary button
+    #       url: '#'
+    # secondary_button:
+    #   - value:
+    #       text: Secondary button
+    #       url: '#'
     blog_pages:
       - title: Explore the potential of AI in content management
         date: 20 Oct 2023

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html

@@ -1,12 +1,21 @@
 {% load wagtailcore_tags %}
 
 {% if work_pages %}
+    {# Section heading #}
     {% if is_standard_page %}
         <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">{{ value.featured_work_heading }}</h2>
     {% else %}
         {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.featured_work_heading classes="motif-heading--two motif-heading--static  motif-heading--half-width section-title--related-posts" %}
     {% endif %}
 
+    {# Section intro #}
+    {% if value.intro %}
+        <div class="rich-text">
+            {{ value.intro|richtext }}
+        </div>
+    {% endif %}
+
+    {# Work pages / Case study pages #}
     <ul class="grid__related-posts streamfield__related-posts mb-spacerMedium lg:mb-spacerLarge">
         {% for work_page in work_pages %}
             {% pageurl work_page.work_index as work_index_url %}
@@ -15,3 +24,13 @@ <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">
         {% endfor %}
     </ul>
 {% endif %}
+
+{# We expect only up to 1 primary button (`max_num=1` is set in the block definition.) #}
+{% for button in value.primary_button %}
+    <a href="{{ button.value.url }}">{{ button.value.text }}</a>
+{% endfor %}
+
+{# We expect only up to 1 secondary button (`max_num=1` is set in the block definition.) #}
+{% for button in value.secondary_button %}
+    <a href="{{ button.value.url }}">{{ button.value.text }}</a>
+{% endfor %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.yaml

@@ -1,6 +1,15 @@
 context:
   value:
     featured_work_heading: Case studies
+    # intro: '<p>An injection of fresh ideas, and the occasional challenging opinion, to ignite your fire.</p>'
+    # primary_button:
+    #   - value:
+    #       text: Primary button
+    #       url: '#'
+    # secondary_button:
+    #   - value:
+    #       text: Secondary button
+    #       url: '#'
   work_pages:
     - title: Imagining and designing a future product for MQ in 5 days flat
       client: 'MQ: Transforming Mental Health'