Merge pull request #343 from torchbox/feature/twe-16-optional-intro-a…

…nd-buttons TWE-16 | FE | Optional intro and buttons
torchbox · Feb 12, 2025 · 20e383e · 20e383e
2 parents 9e2859d + 14a0be4
commit 20e383e
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 56 deletions.
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -38,7 +38,9 @@ module.exports = {
                 spacerMini: '15px',
                 spacerMiniPlus: '20px',
                 spacerSmall: '30px',
+                spacerSmallPlus: '40px',
                 spacerMedium: '60px',
+                spacerMediumPlus: '100px',
                 spacerLarge: '120px',
                 spacer: '160px',
                 spacerHalf: '80px',

diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html
@@ -9,26 +9,32 @@ <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">
 
 {# Section intro #}
 {% if value.intro %}
-    <div class="rich-text">
+    <div class="rich-text mb-spacerMedium">
         {{ 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>
+<div class="mb-spacerMedium lg:mb-spacerLarge">
+    <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 %}
+    {% if value.primary_button or value.secondary_button %}
+        <div class="md:ml-[225px] flex flex-wrap gap-4">
+            {# We expect only up to 1 primary button (`max_num=1` is set in the block definition.) #}
+            {% for button in value.primary_button %}
+                <a class="button" 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 %}
+            {# We expect only up to 1 secondary button (`max_num=1` is set in the block definition.) #}
+            {% for button in value.secondary_button %}
+                <a class="button" href="{{ button.value.url }}">{{ button.value.text }}</a>
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>
diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.yaml b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.yaml
@@ -1,15 +1,15 @@
 context:
   value:
     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: '#'
+    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

diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html
@@ -10,27 +10,31 @@ <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">
 
     {# Section intro #}
     {% if value.intro %}
-        <div class="rich-text">
+        <div class="rich-text mb-spacerMedium">
             {{ 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 %}
-            {% pageurl work_page as work_page_url %}
-            {% include "patterns/molecules/listing/listing--image.html" with title=work_page.title name=work_page.client link=work_page_url date=work_page.date reading_time=work_page.read_time tags=work_page.tags listing_image=work_page.listing_image tag_link_base=work_index_url tags_screenreader_text="See more work posts in this category" %}
-        {% endfor %}
-    </ul>
-{% endif %}
+    <div class="mb-spacerMedium lg:mb-spacerLarge">
+        <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 %}
+                {% pageurl work_page as work_page_url %}
+                {% include "patterns/molecules/listing/listing--image.html" with title=work_page.title name=work_page.client link=work_page_url date=work_page.date reading_time=work_page.read_time tags=work_page.tags listing_image=work_page.listing_image tag_link_base=work_index_url tags_screenreader_text="See more work posts in this category" %}
+            {% endfor %}
+        </ul>
+        {% if value.primary_button or value.secondary_button %}
+            <div class="flex flex-wrap gap-4">
+                {# We expect only up to 1 primary button (`max_num=1` is set in the block definition.) #}
+                {% for button in value.primary_button %}
+                    <a class="button" href="{{ button.value.url }}">{{ button.value.text }}</a>
+                {% endfor %}
 
-{# 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 %}
+                {# We expect only up to 1 secondary button (`max_num=1` is set in the block definition.) #}
+                {% for button in value.secondary_button %}
+                    <a class="button" href="{{ button.value.url }}">{{ button.value.text }}</a>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.yaml b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.yaml
@@ -1,15 +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: '#'
+    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'

diff --git a/tbx/static_src/sass/base/_typography.scss b/tbx/static_src/sass/base/_typography.scss
@@ -20,6 +20,7 @@ html {
     color: var(--color--heading);
     font-style: inherit;
     font-weight: inherit;
+    letter-spacing: -0.5px;
 }
 
 @mixin quote-text() {

diff --git a/tbx/static_src/sass/components/_listing.scss b/tbx/static_src/sass/components/_listing.scss
@@ -35,7 +35,7 @@
         margin-bottom: $spacer-mini;
 
         @include media-query(medium) {
-            margin-bottom: $spacer-small;
+            margin-bottom: $spacer-mini-plus;
         }
     }
 
@@ -82,7 +82,11 @@
     }
 
     &__tags {
-        margin-top: $spacer-small;
+        margin-top: $spacer-mini-plus;
+
+        @include media-query(large) {
+            margin-top: $spacer-small-plus;
+        }
     }
 
     &__tail {

diff --git a/tbx/static_src/sass/components/_section-title.scss b/tbx/static_src/sass/components/_section-title.scss
@@ -2,13 +2,12 @@
 
 .section-title {
     &--related-posts {
-        margin-bottom: $spacer-small;
+        margin-bottom: $spacer-mini;
         margin-top: $spacer-medium;
         grid-column: 2 / span 4;
 
         @include media-query(large) {
             margin-top: $spacer-medium;
-            margin-bottom: $spacer-medium;
             grid-column: 2 / span 12;
         }