TWE-14 - BE - Contact CTA block description field (#338)

* Add PARAGRAPH_RICH_TEXT_FEATURES * Add optional description field to CTA block * TWE-14 | FE | Contact CTA redesign (#341) * Use |first instead of a for loop --------- Co-authored-by: Sherry <[email protected]>
torchbox · Feb 3, 2025 · 5a2f470 · 5a2f470
1 parent f8a6e88
commit 5a2f470
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 64 deletions.
diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py
@@ -235,6 +235,9 @@ def get_button_file_size(self):
 
 class CallToActionBlock(blocks.StructBlock):
     text = blocks.CharBlock(required=True, max_length=255)
+    description = blocks.RichTextBlock(
+        features=settings.PARAGRAPH_RICH_TEXT_FEATURES, required=False
+    )
     button_text = blocks.CharBlock(max_length=55)
     button_link = blocks.StreamBlock(
         [

diff --git a/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html b/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html
@@ -3,7 +3,7 @@
         <h2 class="heading heading--two-b heading--semibold">{{ contact_heading }}</h2>
         <p class="footer-cta__subtitle">{{ contact_text }}</p>
         <div class="footer-cta__container">
-            {% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--footer-cta" %}
+            {% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--cta" %}
             <div class="footer-cta__content">
                 <div class="footer-cta__text">
                     <p><span class="footer-cta__name">{{ contact_name }} </span>{{ contact_role }}</p>

diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.html
@@ -2,8 +2,14 @@
 
 <div class="call-to-action grid__call-to-action">
     <div class="call-to-action__inner">
-        <p class="call-to-action__text">{{ value.text }}</p>
-
+        <div class="call-to-action__text">
+            <h2 class="heading heading--two-b">{{ value.text }}</h2>
+            {% if value.description %}
+                <div class="call-to-action__description">
+                    {{ value.description|richtext }}
+                </div>
+            {% endif %}
+        </div>
         {% if value.button_text and value.button_link %}
             <a href="{{ value.get_button_link }}" class="call-to-action__button button">
                 {{ value.button_text }}

diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.yaml
@@ -1,6 +1,7 @@
 context:
   value:
     text: Get in touch to learn about our journey to becoming employee-owned
+    # description: '<p>Speak to our team to boost regular giving, improve supporter loyalty, or mobilise people behind your cause.</p>'
     button_text: 'Contact Us'
     button_link:
       - internal_link:

diff --git a/...ct_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html b/...ct_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html
@@ -1,26 +1,34 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 <div class="contact-cta grid__contact-cta">
-    {% for cta in value.call_to_action %}
-        <h2 class="contact-cta__text heading heading--three heading--light">{{ cta.value.text }}</h2>
-    {% endfor %}
-
+    {# Contact person photo #}
     {% if value.person %}
-        {% include "patterns/atoms/avatar/avatar.html" with avatar=value.person.image classes="contact-cta__avatar avatar--small" %}
+        {% include "patterns/atoms/avatar/avatar.html" with avatar=value.person.image classes="contact-cta__avatar avatar--cta" %}
     {% endif %}
 
-    {% if value.person %}
-        <p class="contact-cta__cite">
-            {% if value.person.name %}
-                <span class="contact-cta__name">{{ value.person.name }}</span>
+    {# call_to_action is a required field (streamblock) in the block definition #}
+    {% with cta=value.call_to_action|first %}
+        {# CTA main content #}
+        <div class="contact-cta__text">
+            <h2 class="heading heading--two-b">{{ cta.value.text }}</h2>
+            {% if cta.value.description %}
+                <div class="contact-cta__description">{{ cta.value.description|richtext }}</div>
             {% endif %}
+        </div>
 
-            {% if value.person.role %}
-                <span class="contact-cta__role">{{ value.person.role }}</span>
-            {% endif %}
-        </p>
-    {% endif %}
+        {# Contact person #}
+        {% if value.person %}
+            <p class="contact-cta__cite mr-2">
+                {% if value.person.name %}
+                    <span class="contact-cta__name mr-2">{{ value.person.name }}</span>
+                {% endif %}
+
+                {% if value.person.role %}
+                    <span class="contact-cta__role">{{ value.person.role }}</span>
+                {% endif %}
+            </p>
+        {% endif %}
 
-    {% for cta in value.call_to_action %}
+        {# CTA button #}
         {% if cta.value.button_text and cta.value.button_link %}
             <a href="{{ cta.value.get_button_link }}" class="contact-cta__button button">
                 {{ cta.value.button_text }}
@@ -29,5 +37,5 @@ <h2 class="contact-cta__text heading heading--three heading--light">{{ cta.value
                 {% endif %}
             </a>
         {% endif %}
-    {% endfor %}
+    {% endwith %}
 </div>
diff --git a/...ct_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml b/...ct_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml
@@ -3,6 +3,7 @@ context:
     call_to_action:
       - value:
           text: Get in touch to learn about our journey to becoming employee-owned
+          # description: '<p>Speak to our team to boost regular giving, improve supporter loyalty, or mobilise people behind your cause.</p>'
           button_text: 'Contact Us'
           button_link: True
     person:

diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html
@@ -15,8 +15,8 @@ <h2 class="underline mb-2">Avatar</h2>
         </div>
 
         <div>
-            <h2 class="underline mt-8 mb-2">Avatar (footer cta)</h2>
-            {% include "patterns/atoms/avatar/avatar.html" with classes="avatar--footer-cta" %}
+            <h2 class="underline mt-8 mb-2">Avatar (cta)</h2>
+            {% include "patterns/atoms/avatar/avatar.html" with classes="avatar--cta" %}
         </div>
 
         <div>

diff --git a/tbx/static_src/sass/components/_avatar.scss b/tbx/static_src/sass/components/_avatar.scss
@@ -21,7 +21,7 @@
         height: $avatar-size-145;
     }
 
-    &--footer-cta {
+    &--cta {
         width: $avatar-size-100;
         height: $avatar-size-100;
 

diff --git a/tbx/static_src/sass/components/_call-to-action.scss b/tbx/static_src/sass/components/_call-to-action.scss
@@ -1,7 +1,7 @@
 @use 'config' as *;
 
 .call-to-action {
-    background-color: var(--color--streamfield-background);
+    background-color: var(--color--theme-primary);
     padding: $spacer-small;
 
     @include media-query(large) {
@@ -18,12 +18,17 @@
     }
 
     &__text {
-        @include font-size(size-three);
-        color: var(--color--heading);
+        color: var(--color--white);
+        margin-bottom: $spacer-small;
         max-width: $streamfield-content-width;
     }
 
+    &__description {
+        @include font-size(size-four);
+    }
+
     &__button {
+        @include font-size('size-five');
         margin-top: $spacer-small;
 
         @include media-query(large) {

diff --git a/tbx/static_src/sass/components/_contact-cta.scss b/tbx/static_src/sass/components/_contact-cta.scss
@@ -1,58 +1,78 @@
 @use 'config' as *;
 
 .contact-cta {
+    background-color: var(--color--theme-primary);
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: 1fr;
+    padding: $spacer-small;
+
+    @include media-query(medium) {
+        grid-template-columns: auto 1fr;
+        padding: 50px 70px 50px $spacer-small-plus;
+    }
 
     &__text {
-        grid-column: 1 / span 11;
-        margin-bottom: $spacer-mini-plus;
+        color: var(--color--white);
+        margin-bottom: $spacer-small;
 
-        @include media-query(large) {
+        @include media-query(medium) {
             grid-column: 2 / span 10;
             grid-row: 1;
         }
-    }
-
-    &__avatar {
-        grid-row: 2 / span 3;
 
         @include media-query(large) {
-            margin-right: $spacer-small;
-            grid-row: 1 / span 2;
-            grid-column: 1 / span 1;
+            grid-column: 2 / span 1;
         }
     }
 
-    &__name {
-        color: var(--color--heading);
-        display: block;
-        font-weight: $weight--semibold;
+    &__description {
+        @include font-size(size-four);
+    }
+
+    &__avatar {
+        grid-column: span 1;
+        margin-bottom: $spacer-mini-plus;
+
+        @include media-query(medium) {
+            grid-row: span 2;
+            margin-right: $spacer-small-plus;
+            margin-bottom: 0;
+        }
     }
 
     &__cite {
-        margin-top: ($spacer-mini-plus * 0.5);
-        font-style: normal;
-        grid-column: 3 / span 10;
+        @include font-size(size-five);
+        display: flex;
+        flex-direction: column;
+        margin-bottom: $spacer-mini-plus;
 
-        @include media-query(large) {
-            margin-top: 0;
+        @include media-query(medium) {
+            flex-direction: row;
+            flex-wrap: wrap;
+            grid-column: 2 / span 1;
             grid-row: 2;
-            grid-column: 2 / span 5;
+            margin-bottom: 0;
         }
     }
 
+    &__name {
+        color: var(--color--white);
+        font-weight: $weight--semibold;
+    }
+
+    &__role {
+        color: var(--color--black);
+    }
+
     &__button {
-        grid-column: 1 / span 12;
-        margin-top: $spacer-small;
-        margin-right: auto;
+        @include font-size('size-five');
+        align-self: flex-start;
+        grid-column: span 1;
 
-        @include media-query(large) {
-            grid-row: 2;
-            grid-column: 9 / span 4;
-            margin-top: 0;
+        @include media-query(medium) {
             margin-left: auto;
-            margin-right: $spacer-medium;
+            grid-column: 9 / span 1;
+            grid-row: 2;
         }
 
         &:focus {

diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss
@@ -81,16 +81,7 @@
         }
     }
 
-    &__call-to-action {
-        margin-bottom: $spacer-medium;
-        grid-column: 2 / span 5;
-
-        @include media-query(large) {
-            margin-bottom: $spacer-large;
-            grid-column: 4 / span 12;
-        }
-    }
-
+    &__call-to-action,
     &__contact-cta {
         margin-bottom: $spacer-medium;
         grid-column: 2 / span 5;