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.

Sign up for GitHub

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 | FE | Links columns block #345

Merged
merged 3 commits into from
Jan 21, 2025
Merged

TWE-19 | FE | Links columns block #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d77713
Links columns block FE draft
shyusu4 Jan 20, 2025
2666f42
Add to pattern library and fine-tune styles
shyusu4 Jan 20, 2025
8fd8459
Add underline in high contrast mode and add tail so arrow is attached…
shyusu4 Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions ...roject_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html
View file
Open in desktop
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 }}<span class="link-columns__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="link-columns__arrow" %}</span></a>
</li>
{% endfor %}
</ul>
Expand Down
5 changes: 5 additions & 0 deletions tbx/project_styleguide/templates/patterns/styleguide/components/components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,11 @@ <h2 class="underline mt-8 mb-2">Table block</h2>
{% include "patterns/molecules/streamfield/blocks/typed_table_block.html" %}
</div>

<div>
<h2 class="underline mt-8 mb-2">Link columns block</h2>
{% include "patterns/molecules/streamfield/blocks/link_columns_block.html" %}
</div>

<div>
<h2 class="underline mt-8 mb-2">Division signpost block</h2>
{% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %}
Expand Down
3 changes: 2 additions & 1 deletion tbx/static_src/sass/components/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,8 @@
}

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

@include media-query(large) {
Expand Down
58 changes: 58 additions & 0 deletions tbx/static_src/sass/components/_link-columns.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
@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 {
Copy link
Member

@chris-lawton chris-lawton Jan 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can see in the design that the links don't include underlines which goes against the rest of the site where we've included links - it might be worth mentioning this to Ben E to see if he'd be up for adding underlines.

If not we should add them back in when viewing in high contrast mode - there's a mixin you can use here: https://github.com/torchbox/torchbox.com/blob/main/tbx/static_src/sass/config/_mixins.scss#L243

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @chris-lawton thanks for flagging- I've asked Ben and he's mentioned that the underlines combined with the borders in between the links don't look the best and the arrows should indicate that these are links, so I've only added them in high contrast mode

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @shyusu4 having links on underlines is something we've kept really consistent throughout the site, so although I don't have all the context, I'd be reluctant to make an exception here.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @helenb, we've spoken to Ben about reconsidering this - will be updating this to include the underlines for links so it's consistent everywhere

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

&:hover {
transition: color $transition-quick;
color: var(--color--theme-primary);

@include reduced-motion() {
transition: none;
}
}

@include high-contrast-mode() {
text-decoration: underline;
}
}

&__tail {
// Keep the arrow attached to the last word so it's not orphaned on a new line
white-space: nowrap;
display: inline;
}

&__arrow {
@include arrow-link-icon-styles(
$width: 18px,
$interaction-color: var(--color--theme-primary)
);
color: var(--color--theme-primary);
}
}
8 changes: 5 additions & 3 deletions tbx/static_src/sass/config/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice little enhancement : )

) {
// 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() {
Expand Down
1 change: 1 addition & 0 deletions tbx/static_src/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Loading