Skip to content

Commit 31ee0ae

Browse files
SharmaineLimshyusu4
SharmaineLim
and
shyusu4
authored
TWE-9 - BE - Featured services block (Division page) (#327)
* Create a dedicated accessible link text field * Add featured services block to Division Page * TWE-9 | FE | Featured services (#340) --------- Co-authored-by: Sherry <[email protected]>
1 parent 5d7ccb5 commit 31ee0ae

File tree

13 files changed

+191
-13
lines changed

13 files changed

+191
-13
lines changed

‎tbx/core/blocks.py

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,41 @@ class Meta:
281281
template = "patterns/molecules/streamfield/blocks/dynamic_hero_block.html"
282282

283283

284+
class FeaturedPageCardBlock(blocks.StructBlock):
285+
heading = blocks.CharBlock(required=False)
286+
description = blocks.RichTextBlock(features=settings.NO_HEADING_RICH_TEXT_FEATURES)
287+
image = ImageChooserBlock()
288+
link_text = blocks.CharBlock()
289+
accessible_link_text = blocks.CharBlock(
290+
help_text=(
291+
"Used by screen readers. This should be descriptive for accessibility. "
292+
'If not filled, the "Link text" field will be used instead.'
293+
),
294+
required=False,
295+
)
296+
page = blocks.PageChooserBlock()
297+
298+
class Meta:
299+
icon = "breadcrumb-expand"
300+
301+
302+
class FeaturedServicesBlock(blocks.StructBlock):
303+
title = blocks.CharBlock(max_length=255, required=False)
304+
intro = blocks.RichTextBlock(
305+
features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
306+
)
307+
cards = blocks.ListBlock(
308+
FeaturedPageCardBlock(),
309+
max_num=4,
310+
min_num=2,
311+
)
312+
313+
class Meta:
314+
group = "Custom"
315+
icon = "link"
316+
template = "patterns/molecules/streamfield/blocks/featured_services_block.html"
317+
318+
284319
class FourPhotoCollageBlock(blocks.StructBlock):
285320
"""
286321
Accepts 4 photos shown as a collage + text below.
@@ -391,8 +426,13 @@ class ColourTheme(models.TextChoices):
391426
heading = blocks.CharBlock(required=False)
392427
description = blocks.RichTextBlock(features=settings.NO_HEADING_RICH_TEXT_FEATURES)
393428
image = ImageChooserBlock()
394-
link_text = blocks.CharBlock(
395-
help_text=("This should be descriptive for accessibility."),
429+
link_text = blocks.CharBlock()
430+
accessible_link_text = blocks.CharBlock(
431+
help_text=(
432+
"Used by screen readers. This should be descriptive for accessibility. "
433+
'If not filled, the "Link text" field will be used instead.'
434+
),
435+
required=False,
396436
)
397437
page = blocks.PageChooserBlock()
398438

‎tbx/divisions/blocks.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
from tbx.core.blocks import (
2+
FeaturedServicesBlock,
23
FourPhotoCollageBlock,
34
IntroductionWithImagesBlock,
45
PartnersBlock,
@@ -10,3 +11,4 @@ class DivisionStoryBlock(StoryBlock):
1011
four_photo_collage = FourPhotoCollageBlock()
1112
introduction_with_images = IntroductionWithImagesBlock()
1213
partners_block = PartnersBlock()
14+
featured_services = FeaturedServicesBlock()

‎tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
<path fill="currentColor" d="M0 7.846h18.646L12.042.981l.83-.981 8.176 8.5-8.175 8.5-.83-.98 6.603-6.866H0V7.846z"/>
1616
</symbol>
1717

18+
<symbol id="arrow-wide-sm" viewBox="0 0 52 21">
19+
<path fill="currentColor" d="M0.5 9.69231L48.5325 9.69231L40.3757 1.21154L41.4011 -4.41436e-07L51.5 10.5L41.4011 21L40.3757 19.7885L48.5325 11.3077L1 11.3077L0.5 9.69231Z"/>
20+
</symbol>
21+
1822
<symbol id="arrow-wide" viewBox="0 0 72 22" fill="none">
1923
<path fill="currentColor" d="M0 10.192h69.032l-8.156-8.48L61.9.5 72 11 61.901 21.5l-1.025-1.212 8.157-8.48H0v-1.616Z"/>
2024
</symbol>

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/division_signpost_block.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,12 @@ <h2 class="heading heading--two division-signpost__heading">{% firstof card.head
1818
</div>
1919
{% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" %}
2020
{# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
21-
<a href="{% pageurl card.page %}" class="button-link button-link--{{ card.card_colour }}">{{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}<span class="sr-only"> about {% firstof card.heading card.page.title %} division</span></a>
21+
<a href="{% pageurl card.page %}"
22+
class="button-link button-link--{{ card.card_colour }}"
23+
{% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
24+
>
25+
{{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}
26+
</a>
2227
</li>
2328
{% endfor %}
2429
</ul>

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/division_signpost_block.yaml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,17 @@ context:
77
heading: Charity
88
description: Amplify your impact, reach more supporters and transform your organisation with tailored digital strategies and solutions
99
link_text: Find out more
10+
accessible_link_text: Find out more about our charity services
1011
- card_colour: 'theme-nebuline'
1112
heading: Public
1213
description: Navigate complex challenges. Accelerate your mission and transform public services through digital
1314
link_text: Find out more
15+
accessible_link_text: Find out more about our public sector services
1416
- card_colour: 'theme-lagoon'
15-
heading: Wagtail CMS services
17+
heading: Wagtail
1618
description: Empower your editors and developers to do their best work with Wagtail, the world's leading open-source Python CMS.
1719
link_text: Find out more
20+
accessible_link_text: Find out more about our Wagtail CMS services
1821

1922
tags:
2023
srcset_image:

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{% load wagtailcore_tags wagtailimages_tags %}
2+
<div class="grid__featured-services featured-services">
3+
<div class="featured-services__header">
4+
{% 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 " %}
5+
{% if value.intro %}
6+
<div class="featured-services__intro rich-text">{{ value.intro|richtext }}</div>
7+
{% endif %}
8+
</div>
9+
<ul class="featured-services__cards">
10+
{% for card in value.cards %}
11+
<li class="featured-services__card">
12+
{% srcset_image card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt="" %}
13+
<div class="featured-services__text">
14+
<h3 class="featured-services__heading heading heading--two-b">{% firstof card.heading card.page.title %}</h3>
15+
<div class="featured-services__description rich-text">{{ card.description|richtext }}</div>
16+
</div>
17+
{# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
18+
<a href="{% pageurl card.page %}"
19+
class="button-link button-link--compact"
20+
{% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
21+
>
22+
{{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide-sm" classname="button-link__arrow" %}
23+
</a>
24+
</li>
25+
{% endfor %}
26+
</ul>
27+
</div>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
context:
2+
value:
3+
title: What we do
4+
intro: 'Discover how we can help you achieve your goals through our range of services.'
5+
cards:
6+
- heading: Advocacy, Engagement & Income
7+
description: '<p>Grow your audience, mobilise and increase your income through design, communication and strategy</p>'
8+
link_text: Our services
9+
accessible_link_text: Our Advocacy, Engagement & Income services
10+
- heading: Measure, Analyse & Optimise
11+
description: '<p>Organise your data to gain the insights and confidence needed to boost your charity&apos;s performance.</p>'
12+
link_text: Our services
13+
accessible_link_text: Our Measure, Analyse & Optimise services
14+
- heading: Scale impact through Technology
15+
description: '<p>We design technology that&apos;s built for humans. Scale your impact and better deliver your services by leveraging our expertise.</p>'
16+
link_text: Our services
17+
accessible_link_text: Our services on scaling impact through Technology
18+
19+
tags:
20+
srcset_image:
21+
'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""':
22+
raw: |
23+
<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.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,11 @@ <h2 class="underline mt-8 mb-2">Division signpost block</h2>
204204
{% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %}
205205
</div>
206206

207+
<div>
208+
<h2 class="underline mt-8 mb-2">Featured services block</h2>
209+
{% include "patterns/molecules/streamfield/blocks/featured_services_block.html" %}
210+
</div>
211+
207212
<div>
208213
<h2 class="underline mt-8 mb-2">Footer CTA</h2>
209214
{% include "patterns/molecules/footer-cta/footer-cta.html" with value=partners_data %}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,11 @@ tags:
126126
raw: |
127127
<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">
128128
image:
129+
# featured services block
130+
'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""':
131+
raw: |
132+
<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="">
133+
image:
129134
# company logo for pull quote
130135
value.logo max-110x70 format-webp class="pullquote__company-logo":
131136
raw: |

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'config' as *;
22

33
.button-link {
4+
$root: &;
45
@include font-size('size-four');
56
@include high-contrast-text-decoration();
67
font-weight: $weight--semibold;
@@ -12,6 +13,15 @@
1213
transition: background-color $transition-quick;
1314
background-color: var(--color--theme-primary);
1415

16+
// compact variant of the button with reduced padding
17+
&--compact {
18+
padding: 13px $spacer-small;
19+
20+
#{$root}__arrow {
21+
margin-left: $spacer-mini;
22+
}
23+
}
24+
1525
@include reduced-motion() {
1626
transition: none;
1727
}

0 commit comments

Comments
 (0)