TWE-28 | FE | New motifs

docs/front-end/themes_and_modes.md

@@ -12,9 +12,9 @@ There are currently 4 themes in use: coral, nebuline, lagoon and green. The CSS
 
 ???+ note
 
-    If you are adding a new theme, check the colour contrast for all the new accent colours added, used in the drop-caps (remember to check both dark mode and light mode). They need to pass colour contrast as if the entire drop-cap was filled with that colour.
+    If you are adding a new theme, check the colour contrast for all the new accent colours added, used in the heading motifs (remember to check both dark mode and light mode). They need to pass colour contrast as if the entire heading was filled with that colour.
 
-    The drop-caps svgs use a semi-transparent version of the accent colours, and the contrast of the resulting colour also needs to be checked. The [colour contrast checker](https://chromewebstore.google.com/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe?hl=en-GB&utm_source=ext_sidebar) is a useful chrome extension to assist with this.
+    The motifs svgs use a semi-transparent version of the accent colours, and the contrast of the resulting colour also needs to be checked. The [colour contrast checker](https://chromewebstore.google.com/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe?hl=en-GB&utm_source=ext_sidebar) is a useful chrome extension to assist with this.
 
 ## Defaults
 

mkdocs.yml

@@ -73,7 +73,6 @@ nav:
       - front-end/tooling.md
       - front-end/placeholder-images.md
       - front-end/utility-classes.md
-      - front-end/motif-headings.md
       - 'Markdown block and codehilite': 'front-end/markdown-codehilite.md'
       - front-end/impact-report.md
       - front-end/lite-youtube.md

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html

@@ -3,7 +3,7 @@
 {% if is_standard_page %}
     <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">{{ value.featured_blog_heading }}</h2>
 {% else %}
-    {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.featured_blog_heading classes="motif-heading--two motif-heading--static  motif-heading--half-width   section-title--related-posts" %}
+    <h2 class="motif-heading motif-heading--half-width section-title--related-posts">{{ value.featured_blog_heading }}</h2>
 {% endif %}
 
 <ul class="grid__related-posts streamfield__related-posts mb-spacerMedium lg:mb-spacerLarge">

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.html

@@ -1,7 +1,7 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 <div class="grid__featured-services featured-services">
     <div class="featured-services__header">
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static featured-services__title " %}
+        <h2 class="motif-heading featured-services__title">{{ value.title }}</h2>
         {% if value.intro %}
             <div class="featured-services__intro rich-text">{{ value.intro|richtext }}</div>
         {% endif %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/heading2_motif_block.html

@@ -1 +1 @@
-{% include "patterns/atoms/motif-heading/motif-heading.html" with heading=value heading_level=2 classes="motif-heading--two motif-heading--static grid__heading grid__heading--motif" %}
+<h2 class="motif-heading grid__heading grid__heading--motif">{{ value }}</h2>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html

@@ -1,12 +1,12 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 <div class="grid__stats-group stats-group">
     {% if value.title %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading motif-heading--two-c motif-heading--static stats-group__heading" %}
+        <h2 class="motif-heading stats-group__heading">{{ value.title }}</h2>
     {% endif %}
     {% if value.intro %}
         <div class="text text--five stats-group__intro">{{ value.intro|richtext }}</div>
     {% endif %}
     {# Stats #}
     {# Not sure if the impact report page (which uses stats_numeric.html) should be affected. #}
     {% include "patterns/molecules/streamfield/blocks/stats_numeric.html" with value=value.statistics %}
-</div>
+</div>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/partners_block.html

@@ -2,7 +2,7 @@
 
 <div class="partners grid__partners">
     {% if value.title %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=value.title heading_level=2 classes="partners__title motif-heading--two motif-heading--static" %}
+        <h2 class="motif-heading partners__title">{{ value.title }}</h2>
     {% endif %}
 
     {% include "patterns/molecules/partner_logos/partner_logos.html" with partner_logos=value.partner_logos %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/photo_collage_block.html

@@ -2,10 +2,10 @@
 <div class="photo-collage grid__photo-collage">
     {% if value.title %}
         {% if value.intro or value.button_text %}
-            {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=value.title heading_level=2 classes="motif-heading--two motif-heading--static photo-collage__heading" %}
+            <h2 class="motif-heading photo-collage__heading">{{ value.title }}</h2>
         {% else %}
             {# extra space below title if no intro or button #}
-            {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=value.title heading_level=2 classes="motif-heading--two motif-heading--static photo-collage__heading photo-collage__heading--no-intro" %}
+            <h2 class="motif-heading photo-collage__heading photo-collage__heading--no-intro">{{ value.title }}</h2>
         {% endif %}
     {% endif %}
 

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/showcase_block.html

@@ -2,7 +2,7 @@
 
 <div class="showcase grid__showcase {% if is_homepage_showcase %}showcase--home{% endif %} {% if value.intro %}showcase--with-intro{% endif %}">
     {% if value.title %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading=value.title heading_level=2 classes="showcase__title motif-heading--two-c motif-heading--static motif-heading--half-width" %}
+        <h2 class="motif-heading showcase__title motif-heading--half-width">{{ value.title }}</h2>
     {% endif %}
 
     {# homepage version only #}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/tabbed_paragraph_block.html

@@ -3,9 +3,9 @@
 <div class="tabbed-paragraph grid__tabbed-paragraph">
 
     {% if value.title and not value.intro %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static tabbed-paragraph__heading tabbed-paragraph__heading--no-intro" %}
+        <h2 class="motif-heading tabbed-paragraph__heading tabbed-paragraph__heading--no-intro">{{ value.title }}</h2>
     {% elif value.title %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static tabbed-paragraph__heading" %}
+        <h2 class="motif-heading tabbed-paragraph__heading">{{ value.title }}</h2>
     {% endif %}
 
     {% if value.intro %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/values_block.html

@@ -1,6 +1,6 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 <div class="values-header grid__values-header">
-    {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static values-header__title" %}
+    <h2 class="motif-heading values-header__title">{{ value.title }}</h2>
     <p class="values-header__intro">{{ value.intro }}</p>
 </div>
 <div class="values grid__values">

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/work_chooser_block.html

@@ -4,7 +4,7 @@
     {% if is_standard_page %}
         <h2 class="heading heading--two-b heading--light grid__heading mb-spacerMedium">{{ value.featured_work_heading }}</h2>
     {% else %}
-        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.featured_work_heading classes="motif-heading--two motif-heading--static  motif-heading--half-width section-title--related-posts" %}
+        <h2 class="motif-heading motif-heading--half-width section-title--related-posts">{{ value.featured_work_heading }}</h2>
     {% endif %}
 
     <ul class="grid__related-posts streamfield__related-posts mb-spacerMedium lg:mb-spacerLarge">

tbx/project_styleguide/templates/patterns/pages/blog/blog_detail.html

@@ -50,7 +50,7 @@ <h1 class="heading heading--one">{{ page.title }}</h1>
         {% include_block page.body %}
 
         {% if page.related_blog_posts %}
-            {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading="More" aria_label="Related blog posts" classes="motif-heading--two motif-heading--static section-title--related-posts section-title--large-gap" %}
+            <h2 class="motif-heading section-title--related-posts section-title--large-gap" aria-label="Related blog posts">More</h2>
 
             <ul class="grid__related-posts streamfield__related-posts">
                 {% for post in page.related_blog_posts %}

tbx/project_styleguide/templates/patterns/pages/team/team_detail.html

@@ -29,7 +29,7 @@ <h1 class="heading heading--mega">{{ page.title }}</h1>
         </div>
 
         {% if page.author_posts %}
-            {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=page.title.split.0|add:"'s thinking" classes="motif-heading--two motif-heading--static section-title--related-posts" %}
+            <h2 class="motif-heading section-title--related-posts">{{ page.title.split.0|add:"'s thinking" }}</h2>
 
             <ul class="grid__related-posts-simple streamfield__related-posts-simple">
                 {% for post in page.author_posts %}
@@ -41,7 +41,7 @@ <h1 class="heading heading--mega">{{ page.title }}</h1>
         {% endif %}
 
         {% if page.related_works %}
-            {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=page.title.split.0|add:"'s work" classes="motif-heading--two motif-heading--static section-title--related-posts" %}
+            <h2 class="motif-heading section-title--related-posts">{{ page.title.split.0|add:"'s work" }}</h2>
 
             <ul class="grid__related-posts streamfield__related-posts">
                 {% pageurl page.work_index as work_index_url %}

tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html

@@ -81,7 +81,7 @@ <h1 class="heading heading--one mb-spacerMini md:mb-spacerSmall">{{ page.title }
         </div>
 
         {% if page.related_works %}
-            {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading="More" aria_label="Related work pages" classes="motif-heading--two motif-heading--static section-title--related-posts section-title--large-gap" %}
+            <h2 class="motif-heading section-title--related-posts section-title--large-gap" aria-label="Related work pages">More</h2>
 
             <ul class="grid__related-posts streamfield__related-posts">
                 {% for work_page in page.related_works %}

tbx/project_styleguide/templates/patterns/styleguide/typography/typography.html

@@ -19,6 +19,9 @@ <h1 class="heading heading--one-b heading--extralight">Joining the battle to pro
         <p class="underline mt-8">Size 2 semibold</p>
         <h2 class="heading heading--two">Joining the battle to protect our oceans</h2>
 
+        <p class="underline mt-8">Size 2 semibold with motif</p>
+        <h2 class="motif-heading">Joining the battle to protect our oceans</h2>
+
         <p class="underline mt-8">Size 2B semibold & light</p>
         <h2 class="heading heading--two-b">Joining the battle to protect our oceans</h2>
         <h2 class="heading heading--two-b heading--light">Joining the battle to protect our oceans</h2>

tbx/static_src/sass/components/_motif-heading.scss

@@ -1,109 +1,27 @@
 @use 'config' as *;
 
 .motif-heading {
-    $root: &;
-    font-weight: $weight--light;
-    color: var(--color--heading);
+    @include font-size(size-two);
+    font-weight: $weight--semibold;
+    color: transparent;
+    background-image: var(--motif-heading);
+    background-clip: text;
+    // background-color is essential here as a fallback for browsers that don't support background-clip
+    background-color: var(--color--heading);
+    background-repeat: no-repeat;
+    background-size: 50%;
+    background-origin: border-box;
 
-    &__drop-cap {
-        color: transparent;
-        background-image: var(--letter-motif-two), var(--letter-motif-one);
-        background-clip: text;
-        // background-color is essential here as a fallback for browsers that don't support background-clip
-        background-color: var(--color--heading);
-        background-repeat: no-repeat;
-        background-size: 100%;
-        animation: motifAnimation 1.7s cubic-bezier(0.3, 0, 0.6, 1);
-        background-origin: border-box;
-        text-transform: uppercase;
-
-        @include reduced-motion() {
-            animation: none;
-        }
-
-        #{$root}--static & {
-            animation: none;
-        }
-
-        // The letter I gets a special version of the animation so that the flame
-        // is visible in its final resting place
-        &--i {
-            background-size: 200%;
-            animation: motifAnimationForLeterI 1.7s cubic-bezier(0.3, 0, 0.6, 1)
-                forwards;
-
-            @include reduced-motion() {
-                animation: none;
-            }
-        }
-
-        // Narrower letters look like they have too much space after them
-        // These classes add a small negative margin on the letters after - using ems to work for different font-sizes
-        // Affects T and Y
-        &--narrowest + span {
-            margin-left: -0.3em;
-        }
-
-        // Affects W
-        &--narrower + span {
-            margin-left: -0.15em;
-        }
-
-        // Affects F and P
-        &--narrow + span {
-            margin-left: -0.05em;
-        }
+    @include media-query('small') {
+        background-size: 40%;
     }
 
-    @keyframes motifAnimation {
-        0% {
-            background-position: 120px -40px, -120px -90px;
-        }
-        100% {
-            background-position: 0 0, 0 0;
-        }
+    @include media-query('medium') {
+        background-size: 30%;
     }
 
-    @keyframes motifAnimationForLeterI {
-        0% {
-            background-position: 120px -40px, -120px -90px;
-        }
-        100% {
-            background-position: 0 5px, 0 10px;
-        }
-    }
-
-    &--one {
-        @include font-size(size-one);
-
-        #{$root}__drop-cap {
-            @include drop-cap(100px, 160px);
-        }
-    }
-
-    &--one-b {
-        @include font-size(size-one-b);
-
-        #{$root}__drop-cap {
-            @include drop-cap(80px, 150px);
-        }
-    }
-
-    &--two {
-        @include font-size(size-two);
-
-        #{$root}__drop-cap {
-            @include drop-cap(72px, 90px);
-        }
-    }
-
-    // kept the same name as the heading variable for consistency
-    &--two-c {
-        @include font-size(size-two-b);
-
-        #{$root}__drop-cap {
-            @include drop-cap(46px, 90px);
-        }
+    @include media-query('large') {
+        background-size: 40%;
     }
 
     &--half-width {

tbx/static_src/sass/components/_promo.scss

@@ -29,10 +29,6 @@
         color: var(--color--light-background-text);
         margin-bottom: $spacer-mini;
 
-        .motif-heading__drop-cap {
-            background-color: var(--color--light-background-text);
-        }
-
         @include media-query(large) {
             margin-bottom: $spacer-small;
         }

tbx/static_src/sass/components/_section-title.scss

@@ -11,10 +11,6 @@
             margin-bottom: $spacer-medium;
             grid-column: 2 / span 12;
         }
-
-        &::first-letter {
-            @include drop-cap(72px, 90px);
-        }
     }
 
     &--large-gap {

tbx/static_src/sass/config/_mixins.scss

@@ -106,19 +106,6 @@
     }
 }
 
-/* ============================================
-    Drop cap - used for heading one, heading one-b and heading two
-*/
-@mixin drop-cap($small-size, $large-size) {
-    @include rem-font-size($small-size);
-    line-height: 1; // Reset line height to 1 to avoid spacing issues
-    font-weight: $weight--semibold;
-
-    @include media-query(large) {
-        @include rem-font-size($large-size);
-    }
-}
-
 @mixin focus-style(
     $color: var(--color--link),
     $shadow: false,