Skip to content

Commit 6335201

Browse files
shyusu4SharmaineLim
shyusu4
authored and
SharmaineLim
committed
TWE-9 | FE | Featured services (#340)
1 parent 734bee9 commit 6335201

9 files changed

Lines changed: 109 additions & 28 deletions

File tree

‎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/featured_services_block.html‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
{% load wagtailcore_tags wagtailimages_tags %}
2-
<div>
3-
{# Section heading #}
4-
<h2>{{ value.title }}</h2>
5-
6-
{# Section intro #}
7-
<div>{{ value.intro|richtext }}</div>
8-
9-
{# Signposting cards #}
10-
<ul>
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">
1110
{% for card in value.cards %}
12-
<li class="{{ card.card_colour }}">
13-
{% firstof card.heading card.page.title %}
14-
{{ card.description|richtext }}
15-
{% image card.image fill-100x100 %}
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 #}
1618
<a href="{% pageurl card.page %}"
19+
class="button-link button-link--compact"
1720
{% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
1821
>
19-
{{ card.link_text }}
22+
{{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide-sm" classname="button-link__arrow" %}
2023
</a>
2124
</li>
2225
{% endfor %}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
context:
22
value:
3-
title: Our featured services
4-
intro: This is an optional field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3+
title: What we do
4+
intro: 'Discover how we can help you achieve your goals through our range of services.'
55
cards:
66
- heading: Advocacy, Engagement & Income
77
description: '<p>Grow your audience, mobilise and increase your income through design, communication and strategy</p>'
@@ -17,7 +17,7 @@ context:
1717
accessible_link_text: Our services on scaling impact through Technology
1818

1919
tags:
20-
image:
21-
'card.image fill-100x100':
20+
srcset_image:
21+
'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""':
2222
raw: |
23-
<img alt="" height="100" src="https://picsum.photos/100/100.webp" width="100">
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
}

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

Lines changed: 52 additions & 0 deletions
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‎

Lines changed: 10 additions & 9 deletions
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‎

Lines changed: 1 addition & 0 deletions
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)