add arrow-focus-style mixin and apply to arrows across the site - remove unused listing-avatar__arrow class

Author: chris-lawton

tbx/project_styleguide/templates/patterns/molecules/listing/listing--avatar.html

@@ -7,7 +7,7 @@
         <a class="listing-avatar__link listing__link" href="{{ link }}" aria-label="{{ aria_text|default:title }} by {{ name }}">
             <h2 class="listing-avatar__title listing__title">
                 {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-                <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-avatar__arrow listing__arrow" %}</span>
+                <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing__arrow" %}</span>
             </h2>
         </a>
         <div class="listing-avatar__details listing__details">

tbx/project_styleguide/templates/patterns/molecules/listing/listing--simple.html

@@ -2,7 +2,7 @@
     <a class="listing__link" href="{{ link }}" aria-label="{{ aria_text|default:title }} by {{ name }}">
         <h2 class="listing__title">
             {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-            <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-avatar__arrow listing__arrow" %}</span>
+            <span class="listing__title-text">{{ title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing__arrow" %}</span>
         </h2>
     </a>
     <div class="listing__details">

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

@@ -5,7 +5,7 @@
         <a class="event-block__title" href="{{ value.get_button_link }}" aria-label="{{ value.title }}">
             <h2>
                 {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-                <span>{{ value.title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-avatar__arrow listing__arrow" %}</span>
+                <span>{{ value.title }}</span><span class="listing__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="event-block__arrow listing__arrow" %}</span>
             </h2>
         </a>
         <div class="event-block__meta">

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

@@ -18,7 +18,7 @@
             <a href="{% pageurl link %}" class="featured-case-study__link">
                 <h2 class="featured-case-study__title">
                     {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
-                    <span class="featured-case-study__link-text">{{ link.title }}</span><span class="featured-case-study__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="listing-avatar__arrow listing__arrow" %}</span>
+                    <span class="featured-case-study__link-text">{{ link.title }}</span><span class="featured-case-study__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="featured-case-study__arrow listing__arrow" %}</span>
                 </h2>
             </a>
 

tbx/static_src/sass/components/_event-block.scss

@@ -1,6 +1,8 @@
 @use 'config' as *;
 
 .event-block {
+    $root: &;
+
     display: grid;
     grid-template-columns: 1fr;
     background-color: rgba($color--white, 0.04);
@@ -36,6 +38,12 @@
         @include media-query(large) {
             margin-bottom: $spacer-small;
         }
+
+        &:focus {
+            #{$root}__arrow {
+                @include arrow-focus-style();
+            }
+        }
     }
 
     &__meta {

tbx/static_src/sass/components/_featured-case-study.scss

@@ -1,6 +1,8 @@
 @use 'config' as *;
 
 .featured-case-study {
+    $root: &;
+
     $gradient-z-index: 1;
     position: relative;
     margin-top: $spacer-medium;
@@ -97,6 +99,10 @@
 
         &:focus {
             @include focus-style();
+
+            #{$root}__arrow {
+                @include arrow-focus-style();
+            }
         }
     }
 

tbx/static_src/sass/components/_listing.scss

@@ -3,6 +3,8 @@
 @use 'config' as *;
 
 .listing {
+    $root: &;
+
     list-style-type: none;
     margin-bottom: $spacer-small;
 
@@ -16,6 +18,10 @@
 
         &:focus {
             @include focus-style();
+
+            #{$root}__arrow {
+                @include arrow-focus-style();
+            }
         }
 
         @include media-query(medium) {

tbx/static_src/sass/components/_showcase.scss

@@ -54,7 +54,7 @@
             &:focus,
             &:hover {
                 #{$root}__arrow {
-                    transform: translate3d($link-transition-gap, 0, 0);
+                    @include arrow-focus-style();
                 }
 
                 #{$root}__heading {

tbx/static_src/sass/config/_mixins.scss

@@ -133,6 +133,15 @@
     }
 }
 
+@mixin arrow-focus-style() {
+    transform: translate3d($link-transition-gap, 0, 0);
+    color: var(--color--link-interaction);
+
+    @include reduced-motion() {
+        transform: none;
+    }
+}
+
 /* ============================================
     Link styles - set to be the same colour as the text by default
     but can be overridden by passing in a resting colour and interaction colour