Merge pull request #354 from torchbox/feature/twe-12-service-area-fe

TWE-12 | FE | Service area page

Author: albinazs

tailwind.config.js

@@ -22,6 +22,7 @@ module.exports = {
             transparent: 'transparent',
             background: 'var(--color--background)',
             heading: 'var(--color--heading)',
+            themePrimary: 'var(--color--theme-primary)',
         },
         screens: {
             sm: '410px',

tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.yaml

@@ -8,9 +8,9 @@ tags:
       raw: |
         <img alt="" class="avatar__image" height="100" sizes="(max-width: 598px) 100px, (min-width: 599px) 145px" src="https://picsum.photos/100/100.webp" srcset="https://picsum.photos/100/100.webp 100w, https://picsum.photos/144/144.webp 144w, https://picsum.photos/286/286.webp 286w" width="100">
     # four_photo_collage_block.yaml
-    item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text:
+    'item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.alt_text':
       raw: |
-        <img alt="" width="100" height="100" loading="lazy" sizes="100px" src="https://picsum.photos/100/100.webp" srcset="https://picsum.photos/100/100.webp 100w">
+        <img alt="" width="500" height="500" loading="lazy" class="four-photo-collage__image" sizes="(max-width: 1022px) 600px, 500px" src="https://picsum.photos/500/500.webp" srcset="https://picsum.photos/500/500.webp 500w, https://picsum.photos/600/600.webp 600w">
   pageurl:
     # blog_chooser_block.yaml
     blog_page.blog_index as blog_index_url:

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

@@ -10,10 +10,16 @@
             {% endfor %}
         </div>
     </div>
-    {% if value.caption %}
-        <div class="heading heading--three heading--light four-photo-collage__caption rich-text">{{ value.caption|richtext }}</div>
-    {% endif %}
-    {% if value.description %}
-        {{ value.description|richtext }}
+    {% if value.caption or value.description %}
+        <div class="four-photo-collage__text">
+            {% if value.caption %}
+                <div class="rich-text heading heading--three heading--light mb-8">
+                    {{ value.caption|richtext }}
+                </div>
+            {% endif %}
+            {% if value.description %}
+                <div class="rich-text four-photo-collage__description">{{ value.description|richtext }}</div>
+            {% endif %}
+        </div>
     {% endif %}
 </div>

tbx/project_styleguide/templates/patterns/pages/service/service_area_page.html

@@ -1,15 +1,13 @@
 {% extends "patterns/base_page.html" %}
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load wagtailcore_tags %}
 
 {% block content %}
-    <div>
-        {# Division #}
-        <p>Division: {{ page.final_division.label }}</p>
+    <div class="grid grid--spacer-large streamfield service-area-page">
 
-        {# Title #}
-        <h1>{{ page.title }}</h1>
-        {# Subtitle #}
-        <p>{{ page.subtitle }}</p>
+        <div class="grid__title">
+            <h1 class="heading heading--mega">{{ page.title }}</h1>
+            <p class="heading heading--two-b heading--light text-themePrimary">{{ page.subtitle }}</p>
+        </div>
 
         {% include_block page.body %}
     </div>

tbx/static_src/sass/components/_four-photo-collage.scss

@@ -111,11 +111,16 @@
         object-fit: cover;
     }
 
-    &__caption {
+    &__text {
         grid-column: 1 / span 4;
 
         @include media-query(large) {
             grid-column: 1 / span 7;
         }
     }
+
+    // Override the default rich text font size
+    &__description.rich-text {
+        @include font-size('size-six');
+    }
 }

tbx/static_src/sass/components/_grid.scss

@@ -422,6 +422,17 @@
         }
     }
 
+    // Service area page adjustments
+    .template-service-area-page & {
+        &__title {
+            margin-bottom: $spacer-medium;
+
+            @include media-query(large) {
+                margin-bottom: $spacer-medium-plus;
+            }
+        }
+    }
+
     // Service page alignment
     .template-service-page & {
         &__intro,