Merge pull request #304 from torchbox/feature/intro-weight

helenb · web-flow · commit a08d1b445fac · 2024-08-01T09:26:06.000+01:00
Update intro font sizes and rationalise intro styles
diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/story_container.html b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/story_container.html
@@ -1,3 +1,4 @@
+{% include "patterns/molecules/streamfield/blocks/intro_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/heading2_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/paragraph_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/heading3_block.html" %}
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 heading heading--four 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">
-                <div class="heading heading--four">{{page.intro|richtext}}</div>
-            </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/standard/standard_page.yaml b/tbx/project_styleguide/templates/patterns/pages/standard/standard_page.yaml
@@ -1,7 +1,7 @@
 context:
   page:
     title: Your Data, Privacy & Cookies
-    get_verbose_name: standard
+    get_verbose_name: standard page
 
 tags:
   include_block:
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">
-                <div class="heading heading--four">{{page.intro|richtext}}</div>
-            </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 heading heading--four">
-            {{ 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));
         }
@@ -13,6 +16,11 @@
                 margin-bottom: 0;
             }
         }
+
+        // override the rich-text font-size
+        &.rich-text {
+            @include font-size(intro);
+        }
     }
 
     &__embed {
@@ -66,10 +74,12 @@
     .template-work-page &,
     .template-historical-work-page & {
         &__intro {
-            margin-bottom: $spacer-small;
+            margin-top: $spacer-small;
+            margin-bottom: $spacer-medium;
 
             @include media-query(large) {
                 margin-bottom: 0;
+                margin-top: 0;
             }
         }
     }
diff --git a/tbx/static_src/sass/config/_variables.scss b/tbx/static_src/sass/config/_variables.scss
@@ -373,6 +373,10 @@ $large-font-sizes: (
         32px,
         1.4,
     ),
+    intro: (
+        24px,
+        1.6,
+    ),
 );
 
 $small-font-sizes: (
@@ -448,6 +452,10 @@ $small-font-sizes: (
         32px,
         1.4,
     ),
+    intro: (
+        20px,
+        1.6,
+    ),
 );
 
 // --------------------------------- Sizing ------------------------------------

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+{% include "patterns/molecules/streamfield/blocks/intro_block.html" %}`
`1`	`2`	`{% include "patterns/molecules/streamfield/blocks/heading2_block.html" %}`
`2`	`3`	`{% include "patterns/molecules/streamfield/blocks/paragraph_block.html" %}`
`3`	`4`	`{% include "patterns/molecules/streamfield/blocks/heading3_block.html" %}`
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`	`}`
`@@ -13,6 +16,11 @@`
`13`	`16`	`margin-bottom: 0;`
`14`	`17`	`}`
`15`	`18`	`}`
	`19`	`+`
	`20`	`+ // override the rich-text font-size`
	`21`	`+ &.rich-text {`
	`22`	`+ @include font-size(intro);`
	`23`	`+ }`
`16`	`24`	`}`
`17`	`25`
`18`	`26`	`&__embed {`
`@@ -66,10 +74,12 @@`
`66`	`74`	`.template-work-page &,`
`67`	`75`	`.template-historical-work-page & {`
`68`	`76`	`&__intro {`
`69`		`- margin-bottom: $spacer-small;`
	`77`	`+ margin-top: $spacer-small;`
	`78`	`+ margin-bottom: $spacer-medium;`
`70`	`79`
`71`	`80`	`@include media-query(large) {`
`72`	`81`	`margin-bottom: 0;`
	`82`	`+ margin-top: 0;`
`73`	`83`	`}`
`74`	`84`	`}`
`75`	`85`	`}`