Skip to content
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

TWE-19 - BE - Link columns block (Service area page) #337

Merged
Merged
Prev Previous commit
Next Next commit
Links columns block FE draft
shyusu4 committed Jan 20, 2025
commit 7d77713793bf202202382ae9ecea2fe4f35df481
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{% load wagtailcore_tags wagtailimages_tags %}
<div>
{# Section heading #}
<h2>{{ value.title }}</h2>
<div class="grid__link-columns link-columns">
<div class="link-columns__header">
{% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static link-columns__title " %}
{% if value.intro %}
<div class="link-columns__intro rich-text">{{ value.intro|richtext }}</div>
{% endif %}
</div>

{# Section intro #}
<div>{{ value.intro|richtext }}</div>

{# Links #}
<ul>
<ul class="link-columns__links">
{% for link in value.links %}
<li>
<a href="{{ link.value.url }}">{{ link.value.text }}</a>
<li class="link-columns__item">
<a href="{{ link.value.url }}" class="link-columns__link">{{ link.value.text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="link-columns__arrow" %}</a>
</li>
{% endfor %}
</ul>
3 changes: 2 additions & 1 deletion tbx/static_src/sass/components/_grid.scss
Original file line number Diff line number Diff line change
@@ -101,7 +101,8 @@
}

&__related-posts-simple,
&__team-listing {
&__team-listing,
&__link-columns {
grid-column: 2 / span 4;

@include media-query(large) {
43 changes: 43 additions & 0 deletions tbx/static_src/sass/components/_link-columns.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
@use 'config' as *;

.link-columns {
&__header {
margin-bottom: $spacer-half;
}

&__links {
display: grid;
grid-template-columns: 1fr;
column-gap: $spacer-half;

@include media-query(medium) {
grid-template-columns: repeat(2, 1fr);
}

@include media-query(large) {
grid-template-columns: repeat(3, 1fr);
}
}

&__item {
padding: $spacer-mini-plus 0;
border-top: 1px solid var(--color--border);
}

&__link {
@include font-size(size-six);
color: var(--color--white);

&:hover {
color: var(--color--theme-primary);
}
}

&__arrow {
@include arrow-link-icon-styles(
$width: 22px,
$interaction-color: var(--color--theme-primary)
);
color: var(--color--theme-primary);
}
}
8 changes: 5 additions & 3 deletions tbx/static_src/sass/config/_mixins.scss
Original file line number Diff line number Diff line change
@@ -185,13 +185,15 @@
@mixin arrow-link-icon-styles(
$mobile-hidden: false,
$color: var(--color--decoration),
$interaction-color: var(--color--link-interaction)
$interaction-color: var(--color--link-interaction),
$width: 72px,
$height: 22px
) {
// Apply all common styles regardless of mobile-hidden
display: inline-block;
color: $color;
width: 72px;
height: 22px;
width: $width;
height: $height;
transition: transform, $transition-quick;

@include reduced-motion() {
1 change: 1 addition & 0 deletions tbx/static_src/sass/main.scss
Original file line number Diff line number Diff line change
@@ -33,6 +33,7 @@
@use 'components/image';
@use 'components/instagram-gallery';
@use 'components/intro-with-images';
@use 'components/link-columns';
@use 'components/link';
@use 'components/listing';
@use 'components/listing-avatar';