Add introductiona and styles page links FE

Author: shyusu4

tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html

@@ -1,25 +1,29 @@
 {% load wagtailcore_tags %}
 
-<div class="title-filters {% if hide_tags %}title-filters--no-tags{% endif %}">
+<div class="title-filters {% if introduction or page_links %}title-filters--no-tags{% endif %}">
     <div class="title-filters__title">
         <h1 class="heading heading--mega">{{ item.title }}</h1>
     </div>
 
-    {% if introduction %}
-        <div class="">
-            <p>{{ introduction|linebreaksbr }}</p>
-        </div>
-    {% endif %}
+    {% if introduction or page_links %}
+        <div class="title-filters__info">
+            {% if introduction %}
+                <div class="title-filters__introduction">
+                    <p>{{ introduction|linebreaksbr }}</p>
+                </div>
+            {% endif %}
 
-    {% if page_links %}
-        <div class="styled-page-links">
-            {% for block in page_links %}
-                {% include_block block %}
-            {% endfor %}
+            {% if page_links %}
+                <div class="title-filters__styled-page-links styled-page-links">
+                    {% for block in page_links %}
+                        {% include_block block %}
+                    {% endfor %}
+                </div>
+            {% endif %}
         </div>
     {% endif %}
 
-    {% if tags and not hide_tags %}
+    {% if tags and not introduction and not page_links %}
         <div class="title-filters__tags">
             <div class="tags">
                 <p class="sr-only">Filter by category</p>

tbx/static_src/sass/components/_title-filters.scss

@@ -48,13 +48,43 @@
     }
 
     &--no-tags {
+        @include media-query(large) {
+            flex-direction: column;
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: auto auto;
+        }
+
         #{$root}__title {
             @include media-query(large) {
-                flex-grow: 1;
+                flex-grow: 0;
+            }
+        }
+
+        &::before {
+            @include media-query(large) {
+                grid-column: 1;
+                grid-row: 1;
             }
         }
     }
 
+    &__introduction {
+        @include font-size('size-four');
+        font-weight: $weight--light;
+    }
+
+    &__styled-page-links {
+        margin-top: $spacer-small-plus;
+    }
+
+    &__info {
+        @include media-query(large) {
+            grid-column: 2;
+            grid-row: 2;
+        }
+    }
+
     &__title {
         margin-bottom: $spacer-small;
 
@@ -66,6 +96,12 @@
             #{$root}--team & {
                 flex-basis: 50%;
             }
+
+            #{$root}--no-tags & {
+                grid-column: 2;
+                grid-row: 1;
+                margin-bottom: $spacer-small-plus;
+            }
         }
     }