refactor arrow classes for valid BEM syntax

torchbox · Jul 22, 2024 · 03b8480 · 03b8480
1 parent cea4ace
commit 03b8480
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 6 deletions.
diff --git a/tbx/project_styleguide/templates/patterns/molecules/listing/listing--avatar.html b/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">

diff --git a/tbx/project_styleguide/templates/patterns/molecules/listing/listing--event.html b/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">

diff --git a/tbx/project_styleguide/templates/patterns/molecules/listing/listing--image.html b/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">

diff --git a/tbx/project_styleguide/templates/patterns/molecules/listing/listing--simple.html b/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">

diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/event_block.html b/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">

diff --git a/...oject_styleguide/templates/patterns/molecules/streamfield/blocks/featured_case_study.html b/...oject_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>
 

diff --git a/tbx/static_src/sass/components/_icon.scss b/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;