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

+42-2
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

+2
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

+4
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

+6-1
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

+4-1
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

+27
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

+23
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

+5
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

+5
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

+10
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
}

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

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@use 'config' as *;
2+
3+
.featured-services {
4+
&__header {
5+
margin-bottom: $spacer-medium;
6+
}
7+
8+
&__cards {
9+
display: grid;
10+
gap: $spacer-mini-plus;
11+
grid-template-columns: repeat(1, 1fr);
12+
13+
@include media-query(medium) {
14+
grid-template-columns: repeat(2, 1fr);
15+
}
16+
17+
@include media-query(large) {
18+
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
19+
}
20+
}
21+
22+
&__card {
23+
display: flex;
24+
flex-direction: column;
25+
width: 100%;
26+
transition: background-color $transition-quick;
27+
background-color: var(--color--dark-background);
28+
29+
&:has(.button-link:hover) {
30+
background-color: var(--color--black);
31+
}
32+
33+
@include high-contrast-mode() {
34+
border: 1px solid var(--color--text);
35+
}
36+
}
37+
38+
&__text {
39+
padding: $spacer-small-plus $spacer-small $spacer-medium;
40+
margin-bottom: auto;
41+
}
42+
43+
&__heading {
44+
color: var(--color--white);
45+
margin-bottom: $spacer-mini;
46+
}
47+
48+
// override the rich-text font-size
49+
&__description.rich-text {
50+
@include font-size(size-seven);
51+
}
52+
}

‎tbx/static_src/sass/components/_grid.scss

+10-9
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,16 @@
109109
}
110110
}
111111

112+
&__division-signpost,
113+
&__featured-services {
114+
grid-column: 2 / span 4;
115+
margin-bottom: $spacer;
116+
117+
@include media-query(large) {
118+
grid-column: 2 / span 12;
119+
}
120+
}
121+
112122
&__wide-image {
113123
margin-bottom: $spacer-medium;
114124
grid-column: 2 / span 5;
@@ -326,15 +336,6 @@
326336
}
327337
}
328338

329-
&__division-signpost {
330-
grid-column: 2 / span 4;
331-
margin-bottom: $spacer;
332-
333-
@include media-query(large) {
334-
grid-column: 2 / span 12;
335-
}
336-
}
337-
338339
// header and navigation grid elements
339340
&__header-logo {
340341
grid-column: 2 / span 2;

‎tbx/static_src/sass/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@use 'components/employee-owned-icon';
2323
@use 'components/event-block';
2424
@use 'components/featured-case-study';
25+
@use 'components/featured-services';
2526
@use 'components/footer';
2627
@use 'components/footer-cta';
2728
@use 'components/form';

0 commit comments

Comments
 (0)