refactor arrow classes for valid BEM syntax

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__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 icon--listing-arrow" %}</span>
             </h2>
         </a>
         <div class="listing-avatar__details listing__details">

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

@@ -31,7 +31,7 @@
         <a class="listing-image__link listing__link" href="{{ link }}">
             <h2 class="listing-image__title listing__title">
                 {# The title and icon need to be on the same line with no whitespace to prevent the icon 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-image__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 icon--listing-arrow" %}</span>
             </h2>
         </a>
         <div class="listing-event__details listing__details">

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

@@ -26,7 +26,7 @@
         <a class="listing-image__link listing__link" href="{{ link }}">
             <h2 class="listing-image__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-image__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 icon--listing-arrow" %}</span>
             </h2>
         </a>
         <div class="listing-image__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__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 icon--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="event-block__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 icon--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="featured-case-study__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 icon--listing-arrow" %}</span>
                 </h2>
             </a>
 

tbx/static_src/sass/components/_icon.scss

@@ -24,6 +24,11 @@
         width: 100%;
     }
 
+    &--listing-arrow {
+        @include arrow-link-icon-styles();
+        margin-left: $spacer-mini-plus;
+    }
+
     .template-404-page & {
         &--broken-matchstick {
             margin: 0 auto;