-
Notifications
You must be signed in to change notification settings - Fork 2
TWE-9 - BE - Featured services block (Division page) #327
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
SharmaineLim
merged 4 commits into
integration/2024-evolution
from
feature/twe-9-featured-services
Jan 20, 2025
+191
−13
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
c8b7e58
Create a dedicated accessible link text field
SharmaineLim 734bee9
Add featured services block to Division Page
SharmaineLim 6335201
TWE-9 | FE | Featured services (#340)
shyusu4 2987d2b
Merge branch 'integration/2024-evolution' into feature/twe-9-featured…
SharmaineLim File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
...t_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| {% load wagtailcore_tags wagtailimages_tags %} | ||
| <div class="grid__featured-services featured-services"> | ||
| <div class="featured-services__header"> | ||
| {% 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 " %} | ||
| {% if value.intro %} | ||
| <div class="featured-services__intro rich-text">{{ value.intro|richtext }}</div> | ||
| {% endif %} | ||
| </div> | ||
| <ul class="featured-services__cards"> | ||
| {% for card in value.cards %} | ||
| <li class="featured-services__card"> | ||
| {% srcset_image card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt="" %} | ||
| <div class="featured-services__text"> | ||
| <h3 class="featured-services__heading heading heading--two-b">{% firstof card.heading card.page.title %}</h3> | ||
| <div class="featured-services__description rich-text">{{ card.description|richtext }}</div> | ||
| </div> | ||
| {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #} | ||
| <a href="{% pageurl card.page %}" | ||
| class="button-link button-link--compact" | ||
| {% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %} | ||
| > | ||
| {{ card.link_text }} {% include "patterns/atoms/icons/icon.html" with name="arrow-wide-sm" classname="button-link__arrow" %} | ||
| </a> | ||
| </li> | ||
| {% endfor %} | ||
| </ul> | ||
| </div> |
23 changes: 23 additions & 0 deletions
23
...t_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| context: | ||
| value: | ||
| title: What we do | ||
| intro: 'Discover how we can help you achieve your goals through our range of services.' | ||
| cards: | ||
| - heading: Advocacy, Engagement & Income | ||
| description: '<p>Grow your audience, mobilise and increase your income through design, communication and strategy</p>' | ||
| link_text: Our services | ||
| accessible_link_text: Our Advocacy, Engagement & Income services | ||
| - heading: Measure, Analyse & Optimise | ||
| description: '<p>Organise your data to gain the insights and confidence needed to boost your charity's performance.</p>' | ||
| link_text: Our services | ||
| accessible_link_text: Our Measure, Analyse & Optimise services | ||
| - heading: Scale impact through Technology | ||
| description: '<p>We design technology that's built for humans. Scale your impact and better deliver your services by leveraging our expertise.</p>' | ||
| link_text: Our services | ||
| accessible_link_text: Our services on scaling impact through Technology | ||
|
|
||
| tags: | ||
| srcset_image: | ||
| 'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""': | ||
| raw: | | ||
| <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=""> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| @use 'config' as *; | ||
|
|
||
| .featured-services { | ||
| &__header { | ||
| margin-bottom: $spacer-medium; | ||
| } | ||
|
|
||
| &__cards { | ||
| display: grid; | ||
| gap: $spacer-mini-plus; | ||
| grid-template-columns: repeat(1, 1fr); | ||
|
|
||
| @include media-query(medium) { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| } | ||
|
|
||
| @include media-query(large) { | ||
| grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); | ||
| } | ||
| } | ||
|
|
||
| &__card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100%; | ||
| transition: background-color $transition-quick; | ||
| background-color: var(--color--dark-background); | ||
|
|
||
| &:has(.button-link:hover) { | ||
| background-color: var(--color--black); | ||
| } | ||
|
|
||
| @include high-contrast-mode() { | ||
| border: 1px solid var(--color--text); | ||
| } | ||
| } | ||
|
|
||
| &__text { | ||
| padding: $spacer-small-plus $spacer-small $spacer-medium; | ||
| margin-bottom: auto; | ||
| } | ||
|
|
||
| &__heading { | ||
| color: var(--color--white); | ||
| margin-bottom: $spacer-mini; | ||
| } | ||
|
|
||
| // override the rich-text font-size | ||
| &__description.rich-text { | ||
| @include font-size(size-seven); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@helenb @albinazs What are your thoughts on me adding a new field explicitly for accessible link text?
I tried having a descriptive
link_text(i.e. "Read more on out charity services") on staging but it doesn't look great, and appending{{ link_text }} about {{ heading }} divisioncan get a bit clunky depending on the content oflink_text.