From 5a2f4708a0d8362a701b55d4c05001b51a73ce77 Mon Sep 17 00:00:00 2001 From: Sharmaine Lim Date: Mon, 3 Feb 2025 15:27:07 +0800 Subject: [PATCH] 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 --- tbx/core/blocks.py | 3 + .../molecules/footer-cta/footer-cta.html | 2 +- .../streamfield/blocks/call_to_action.html | 10 ++- .../streamfield/blocks/call_to_action.yaml | 1 + .../blocks/contact_call_to_action.html | 40 ++++++---- .../blocks/contact_call_to_action.yaml | 1 + .../styleguide/components/components.html | 4 +- tbx/static_src/sass/components/_avatar.scss | 2 +- .../sass/components/_call-to-action.scss | 11 ++- .../sass/components/_contact-cta.scss | 78 ++++++++++++------- tbx/static_src/sass/components/_grid.scss | 11 +-- 11 files changed, 99 insertions(+), 64 deletions(-) diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 582815e54..42f467b3e 100644 --- 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 index 5c6e8a107..46a6f6a83 100644 --- 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 @@

{{ contact_heading }}

{{ contact_text }}

- {% 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" %}

{{ contact_name }} {{ contact_role }}

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 index 531ba6910..481d7bf48 100644 --- 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 @@
-

{{ value.text }}

- +
+

{{ value.text }}

+ {% if value.description %} +
+ {{ value.description|richtext }} +
+ {% endif %} +
{% if value.button_text and value.button_link %} {{ 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 index 863f282e7..0c29d660f 100644 --- 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: '

Speak to our team to boost regular giving, improve supporter loyalty, or mobilise people behind your cause.

' button_text: 'Contact Us' button_link: - internal_link: diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html index 539eb01ad..5bf2266a7 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html @@ -1,26 +1,34 @@ {% load wagtailcore_tags wagtailimages_tags %}
- {% for cta in value.call_to_action %} -

{{ cta.value.text }}

- {% 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 %} -

- {% if value.person.name %} - {{ value.person.name }} + {# call_to_action is a required field (streamblock) in the block definition #} + {% with cta=value.call_to_action|first %} + {# CTA main content #} +

+

{{ cta.value.text }}

+ {% if cta.value.description %} +
{{ cta.value.description|richtext }}
{% endif %} +
- {% if value.person.role %} - {{ value.person.role }} - {% endif %} -

- {% endif %} + {# Contact person #} + {% if value.person %} +

+ {% if value.person.name %} + {{ value.person.name }} + {% endif %} + + {% if value.person.role %} + {{ value.person.role }} + {% endif %} +

+ {% endif %} - {% for cta in value.call_to_action %} + {# CTA button #} {% if cta.value.button_text and cta.value.button_link %} {{ cta.value.button_text }} @@ -29,5 +37,5 @@

{{ cta.value {% endif %} {% endif %} - {% endfor %} + {% endwith %}

diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml index fd8e82f43..d177b551a 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.yaml +++ b/tbx/project_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: '

Speak to our team to boost regular giving, improve supporter loyalty, or mobilise people behind your cause.

' 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 index 8fe6b9f8c..b7d1b5708 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html @@ -15,8 +15,8 @@

Avatar

-

Avatar (footer cta)

- {% include "patterns/atoms/avatar/avatar.html" with classes="avatar--footer-cta" %} +

Avatar (cta)

+ {% include "patterns/atoms/avatar/avatar.html" with classes="avatar--cta" %}
diff --git a/tbx/static_src/sass/components/_avatar.scss b/tbx/static_src/sass/components/_avatar.scss index 7156e2f3e..80661b2c3 100644 --- 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 index 7533139d6..575e35102 100644 --- 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 index 3e5d7c1bf..005ca4c63 100644 --- 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 index fc4c04d5f..8a38c420a 100644 --- 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;