Featured services block FE

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

@@ -1,23 +1,23 @@
 {% load wagtailcore_tags wagtailimages_tags %}
-<div class="grid__featured-services">
+<div class="grid__featured-services {% if value.intro %}featured-services--with-intro{% endif %}">
     {# Section heading #}
-    {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static featured-services__title" %}
+    {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static featured-services__title " %}
     {# Section intro #}
     {% if value.intro %}
-    <div class="text text--five featured-services__intro">{{ value.intro|richtext }}</div>
+        <div class="text text--five featured-services__intro">{{ value.intro|richtext }}</div>
     {% endif %}
     {# Featured services cards #}
     <ul class="featured-services__cards featured-services__cards">
         {% for card in value.cards %}
             <li class="featured-services__card">
-                {% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" %}
+                {% srcset_image card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt="" %}
                 <div class="featured-services__text">
-                <h3 class="heading heading--two-b featured-services__heading">{% firstof card.heading card.page.title %}</h3>
-                <div class="text text--seven featured-services__description">{{ card.description|richtext }}</div>
+                    <h3 class="heading heading--two-b featured-services__heading">{% firstof card.heading card.page.title %}</h3>
+                    <div class="text text--seven featured-services__description">{{ card.description|richtext }}</div>
                 </div>
                 {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
                 <a href="{% pageurl card.page %}"
-                class="button-link"
+                   class="button-link"
                    {% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
                 >
                     {{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}

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

@@ -1,7 +1,7 @@
 context:
   value:
     title: What we do
-    intro: This is an optional field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    intro: 'Discover how we can help you achieve your goals through our range of services.'
     cards:
       - heading: Advocacy, Engagement & Income
         description: '<p>Grow your audience, mobilise and increase your income through design, communication and strategy</p>'
@@ -18,6 +18,6 @@ context:
 
 tags:
   srcset_image:
-    'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt=""':
+    'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""':
       raw: |
-        <img alt="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
+        <img height="420" sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" src="https://picsum.photos/750/420.webp" srcset="https://picsum.photos/750/420.webp 750w, https://picsum.photos/650/420.webp 650w" width="750" alt="">

tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml

@@ -119,9 +119,9 @@ tags:
         <img alt="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
       image:
     # featured services block
-    'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt=""':
+    'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""':
       raw: |
-        <img alt="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
+        <img height="420" sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" src="https://picsum.photos/750/420.webp" srcset="https://picsum.photos/750/420.webp 750w, https://picsum.photos/650/420.webp 650w" width="750" alt="">
       image:
     # company logo for pull quote
     value.logo max-110x70 format-webp class="pullquote__company-logo":

tbx/static_src/sass/components/_button-link.scss

@@ -10,7 +10,7 @@
     width: 100%;
     color: var(--color--white);
     transition: background-color $transition-quick;
-    // TODO: add default bg color for themed pages var(--color--accent) once color themes BE is ready
+    background-color: var(--color--theme-primary);
 
     @include reduced-motion() {
         transition: none;

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

@@ -1,6 +1,16 @@
 @use 'config' as *;
 
 .featured-services {
+    $root: &;
+
+    &__title {
+        margin-bottom: $spacer-medium;
+
+        #{$root}--with-intro & {
+            margin-bottom: $spacer-mini;
+        }
+    }
+
     &__intro {
         margin-bottom: $spacer-medium;
     }
@@ -40,9 +50,5 @@
         color: var(--color--white);
         margin-bottom: $spacer-mini;
     }
-
-    &__description {
-        color: var(--color--white);
-    }
 }