Merge pull request #1085 from alphagov/focus-state-on-extensive-relat…

…ed-content Fixes focus state spacing on 'extensive' related navigation links
alphagov · Sep 6, 2019 · 62774a8 · 62774a8
2 parents efe273f + ce41140
commit 62774a8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+* Fixes focus state spacing on 'extensive' related navigation links ([PR #1085](https://github.com/alphagov/govuk_publishing_components/pull/1085))
+
 ## 20.1.0
 
 * Add FAQPage schema ([PR #1087](https://github.com/alphagov/govuk_publishing_components/pull/1087))

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss b/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss
@@ -51,13 +51,17 @@
   @include govuk-template-link-focus-override;
 }
 
+.gem-c-related-navigation__link--truncated-links {
+  margin-top: govuk-spacing(2);
+}
+
 .gem-c-related-navigation__toggle {
   @include govuk-link-common;
   @include govuk-link-style-no-visited-state;
   display: none;
 
   .js-enabled & {
-    display: block;
+    display: inline-block;
    }
 }
 
@@ -79,6 +83,10 @@
   @include govuk-template-link-focus-override;
 }
 
+.gem-c-related-navigation__section-link--inline {
+  line-height: 1.45;
+}
+
 // reset the default browser styles
 .gem-c-related-navigation__link-list {
   padding: 0;
@@ -87,8 +95,16 @@
   margin-bottom: 1.25em;
 }
 
-.gem-c-related-navigation__toggle-more.js-hidden {
-  .js-enabled & {
-    display: none;
+.gem-c-related-navigation__toggle-more {
+  .gem-c-related-navigation__section-link {
+    @include govuk-media-query($from: tablet) {
+      line-height: 1.45;
+    }
+  }
+
+  &.js-hidden {
+    .js-enabled & {
+      display: none;
+    }
   }
 }
diff --git a/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb b/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb
@@ -26,7 +26,7 @@
         link_element = link_to(
           link[:text],
           link[:path],
-          class: related_nav_helper.section_css_class("gem-c-related-navigation__section-link", section_title, link),
+          class: related_nav_helper.section_css_class("gem-c-related-navigation__section-link", section_title, link, (index >= section_link_limit)),
           rel: link[:rel],
           lang: related_nav_helper.t_locale_check(link[:locale]),
           data: {
@@ -60,7 +60,7 @@
         </a>
       </li>
 
-      <li class="gem-c-related-navigation__link">
+      <li class="gem-c-related-navigation__link gem-c-related-navigation__link--truncated-links">
         <span id="toggle_<%= section_title %>" class="gem-c-related-navigation__toggle-more js-hidden">
           <%= to_sentence(constructed_link_array) %>
         </span>

diff --git a/lib/govuk_publishing_components/presenters/related_navigation_helper.rb b/lib/govuk_publishing_components/presenters/related_navigation_helper.rb
@@ -60,8 +60,10 @@ def construct_section_heading(section_title)
         end
       end
 
-      def section_css_class(css_class, section_title, link = {})
-        css_classes = [css_class, "#{css_class}--#{@context}"]
+      def section_css_class(css_class, section_title, link = {}, link_is_inline = false)
+        css_classes = [css_class]
+        css_classes << "#{css_class}--#{@context}" unless @context.nil?
+        css_classes << "#{css_class}--inline" if link_is_inline
 
         unless DEFINED_SECTIONS.include?(section_title) || link.fetch(:finder, false)
           css_classes << " #{css_class}--other"