Links columns block FE draft

torchbox · Jan 20, 2025 · 7d77713 · 7d77713
1 parent e8288e6
commit 7d77713
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 14 deletions.
diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html
@@ -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>

diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss
@@ -101,7 +101,8 @@
     }
 
     &__related-posts-simple,
-    &__team-listing {
+    &__team-listing,
+    &__link-columns {
         grid-column: 2 / span 4;
 
         @include media-query(large) {

diff --git a/tbx/static_src/sass/components/_link-columns.scss b/tbx/static_src/sass/components/_link-columns.scss
@@ -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);
+    }
+}
diff --git a/tbx/static_src/sass/config/_mixins.scss b/tbx/static_src/sass/config/_mixins.scss
@@ -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() {

diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss
@@ -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';