Merge branch 'feature/TMI-48-add-featured-services-block-to-service-area-page' into staging

Author: ianmeigh

tbx/core/blocks.py

@@ -1,4 +1,4 @@
-from collections import defaultdict
+from collections import OrderedDict, defaultdict
 from datetime import datetime
 import logging
 
@@ -307,6 +307,10 @@ class Meta:
         icon = "breadcrumb-expand"
 
 
+class ServiceAreaFeaturedPageCardBlock(FeaturedPageCardBlock):
+    image = ImageChooserBlock(required=False)
+
+
 class FeaturedServicesBlock(blocks.StructBlock):
     title = blocks.CharBlock(max_length=255, required=False)
     intro = blocks.RichTextBlock(
@@ -324,6 +328,54 @@ class Meta:
         template = "patterns/molecules/streamfield/blocks/featured_services_block.html"
 
 
+class ServiceAreaFeaturedServicesBlock(FeaturedServicesBlock):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        # Get all child blocks
+        child_blocks = self.child_blocks
+        # Define the desired order of fields
+        field_order = ["title", "intro", "is_displaying_card_images", "cards"]
+        # Create new OrderedDict with fields in desired order
+        self.child_blocks = OrderedDict(
+            [(name, child_blocks[name]) for name in field_order]
+        )
+
+    is_displaying_card_images = blocks.BooleanBlock(
+        default=True,
+        help_text="Hide images from all cards when unchecked",
+        label="Display card images?",
+        required=False,
+    )
+    cards = blocks.ListBlock(
+        ServiceAreaFeaturedPageCardBlock(),
+        max_num=8,
+        min_num=6,
+    )
+
+    def clean(self, value):
+        cleaned_data = super().clean(value)
+
+        if cleaned_data.get("is_displaying_card_images"):
+            errors = {}
+
+            for i, card in enumerate(cleaned_data.get("cards", [])):
+                if not card.get("image"):
+                    errors[i] = blocks.StructBlockValidationError(
+                        {
+                            "image": ValidationError(
+                                "Image is required when 'Display images' is selected"
+                            )
+                        }
+                    )
+
+            if errors:
+                raise blocks.StructBlockValidationError(
+                    {"cards": blocks.ListBlockValidationError(errors)}
+                )
+
+        return cleaned_data
+
+
 class FourPhotoCollageBlock(blocks.StructBlock):
     """
     Accepts 4 photos shown as a collage + text below.

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

@@ -9,7 +9,12 @@ <h2 class="motif-heading motif-heading--half-width">{{ value.title }}</h2>
     <ul class="featured-services__cards">
         {% for card in value.cards %}
             <li class="featured-services__card">
-                {% srcset_image card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt="" %}
+                {# The ServiceAreaFeaturedServicesBlock supports optional image display, other blocks always show images #}
+                {% if value.is_displaying_card_images or value.is_displaying_card_images is None %}
+                    {% if card.image %}
+                        {% srcset_image card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt="" %}
+                    {% endif %}
+                {% endif %}
                 <div class="featured-services__text">
                     <h3 class="featured-services__heading heading heading--two-b{% if value.cards|length >= 4 %} heading--three{% endif %}">{% firstof card.heading card.page.title %}</h3>
                     {% if card.subheading %}

tbx/services/blocks.py

@@ -13,6 +13,7 @@
     PartnersBlock,
     PhotoCollageBlock,
     PromoBlock,
+    ServiceAreaFeaturedServicesBlock,
     ShowcaseBlock,
     StoryBlock,
     StructBlockValidationError,
@@ -95,6 +96,7 @@ def clean(self, value):
 
 class ServiceAreaStoryBlock(StoryBlock):
     partners_block = PartnersBlock()
+    featured_services = ServiceAreaFeaturedServicesBlock()
     blog_chooser = BlogChooserBlock()
     four_photo_collage = FourPhotoCollageBlock()
     key_points = IconKeyPointsBlock(label="Key points with icons")

tbx/static_src/sass/components/_featured-services.scss

@@ -6,16 +6,21 @@
     }
 
     &__cards {
-        display: grid;
+        display: flex;
         gap: $spacer-mini-plus;
-        grid-template-columns: repeat(1, 1fr);
+        flex-wrap: wrap;
 
         @include media-query(medium) {
-            grid-template-columns: repeat(2, 1fr);
+            > * {
+                flex: 1 1 40%;
+            }
         }
 
         @include media-query(x-large) {
-            grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+            > * {
+                flex: 1 1 20%;
+                min-width: 20%;
+            }
         }
     }