Fix intro colour and font-weight, and include a common intro file for all instances

helenb · helenb · commit b0e4478c25ae · 2024-07-30T16:11:08.000+01:00
diff --git a/tbx/project_styleguide/templates/patterns/molecules/intro/intro.html b/tbx/project_styleguide/templates/patterns/molecules/intro/intro.html
@@ -0,0 +1,4 @@
+{% load wagtailcore_tags %}
+<div class="grid__intro streamfield__intro rich-text">
+    {{ intro_text|richtext }}
+</div>
diff --git a/tbx/project_styleguide/templates/patterns/molecules/intro/intro.yaml b/tbx/project_styleguide/templates/patterns/molecules/intro/intro.yaml
@@ -0,0 +1,2 @@
+context:
+  intro_text: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin sagittis nisl rhoncus mattis. Augue eget arcu dictum varius duis at consectetur lorem donec.</p>'
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/intro_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/intro_block.html
@@ -1,4 +1 @@
-{% load wagtailcore_tags %}
-<div class="grid__intro streamfield__intro rich-text">
-    {{ value|richtext }}
-</div>
+{% include "patterns/molecules/intro/intro.html" with intro_text=value %}
diff --git a/tbx/project_styleguide/templates/patterns/pages/service/service_page.html b/tbx/project_styleguide/templates/patterns/pages/service/service_page.html
@@ -8,9 +8,7 @@
         </div>
 
         {% if page.intro %}
-            <div class="grid__intro streamfield__intro rich-text">
-                {{ page.intro|richtext }}
-            </div>
+            {% include "patterns/molecules/intro/intro.html" with intro_text=page.intro %}
         {% endif %}
 
         {% include_block page.body %}
diff --git a/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html b/tbx/project_styleguide/templates/patterns/pages/team/team_detail.html
@@ -21,9 +21,7 @@
         </div>
 
         {% if page.intro %}
-            <div class="grid__intro streamfield__intro rich-text">
-                {{ page.intro|richtext }}
-            </div>
+            {% include "patterns/molecules/intro/intro.html" with intro_text=page.intro %}
         {% endif %}
 
         <div class="grid__paragraph rich-text">
diff --git a/tbx/project_styleguide/templates/patterns/pages/work/work_page.html b/tbx/project_styleguide/templates/patterns/pages/work/work_page.html
@@ -3,9 +3,7 @@
 
 {% block intro %}
     {% if page.intro %}
-        <div class="streamfield__intro rich-text">
-            {{ page.intro|richtext }}
-        </div>
+        {% include "patterns/molecules/intro/intro.html" with intro_text=page.intro %}
     {% endif %}
 {% endblock %}
 
diff --git a/tbx/static_src/sass/components/_streamfield.scss b/tbx/static_src/sass/components/_streamfield.scss
@@ -2,6 +2,9 @@
 
 .streamfield {
     &__intro {
+        color: var(--color--heading);
+        font-weight: $weight--light;
+
         a {
             @include link-styles(var(--color--heading), var(--color--heading));
         }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+context:`
	`2`	`+ intro_text: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin sagittis nisl rhoncus mattis. Augue eget arcu dictum varius duis at consectetur lorem donec.</p>'`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,9 @@`
`2`	`2`
`3`	`3`	`.streamfield {`
`4`	`4`	`&__intro {`
	`5`	`+ color: var(--color--heading);`
	`6`	`+ font-weight: $weight--light;`
	`7`	`+`
`5`	`8`	`a {`
`6`	`9`	`@include link-styles(var(--color--heading), var(--color--heading));`
`7`	`10`	`}`