Use related navigation styles from GOV.UK Prototype Components

x-govuk · Dec 27, 2023 · c3d5d14 · c3d5d14
1 parent 72ed791
commit c3d5d14
Show file tree

Hide file tree

Showing 13 changed files with 21 additions and 15 deletions.
diff --git a/guide/content/building-blocks/fieldsets.slim b/guide/content/building-blocks/fieldsets.slim
@@ -18,4 +18,4 @@ p.govuk-body
       for screen reader users, the screen reader will announce the legend
       before reading the individual field labels.
 
-== render('/partials/related-info.*', links: fieldset_info)
+== render('/partials/related-navigation.*', links: fieldset_info)
diff --git a/guide/content/form-elements/checkboxes.slim b/guide/content/form-elements/checkboxes.slim
@@ -98,4 +98,4 @@ p.govuk-body
     | It usually makes sense to separate exclusive checkboxes from the others
       with a divider.
 
-== render('/partials/related-info.*', links: checkbox_info)
+== render('/partials/related-navigation.*', links: checkbox_info)
diff --git a/guide/content/form-elements/date-input.slim b/guide/content/form-elements/date-input.slim
@@ -65,4 +65,4 @@ ul.govuk-list.govuk-list--bullet
       This will default the day and month inputs to 2 characters and the year
       input to 4 characters.
 
-== render('/partials/related-info.*', links: date_info)
+== render('/partials/related-navigation.*', links: date_info)
diff --git a/guide/content/form-elements/file-upload.slim b/guide/content/form-elements/file-upload.slim
@@ -14,4 +14,4 @@ p.govuk-body
   caption: 'File upload with label and hint',
   code: file_upload)
 
-== render('/partials/related-info.*', links: file_info)
+== render('/partials/related-navigation.*', links: file_info)
diff --git a/guide/content/form-elements/radios.slim b/guide/content/form-elements/radios.slim
@@ -104,4 +104,4 @@ p.govuk-body
       argument, <code>item</code>, which is object representing the radio
       button.
 
-== render('/partials/related-info.*', links: radios_info)
+== render('/partials/related-navigation.*', links: radios_info)
diff --git a/guide/content/form-elements/select.slim b/guide/content/form-elements/select.slim
@@ -42,4 +42,4 @@ p.govuk-body
       li
         | manually specifying the options using a block of HTML
 
-== render('/partials/related-info.*', links: select_info)
+== render('/partials/related-navigation.*', links: select_info)
diff --git a/guide/content/form-elements/submit.slim b/guide/content/form-elements/submit.slim
@@ -49,4 +49,4 @@ p.govuk-body
       passed in as a block will be rendered in-line with the primary submit
       button.
 
-== render('/partials/related-info.*', links: submit_info)
+== render('/partials/related-navigation.*', links: submit_info)
diff --git a/guide/content/form-elements/text-input.slim b/guide/content/form-elements/text-input.slim
@@ -154,4 +154,4 @@ p.govuk-body
       text in the field more readable by adding some extra spacing between
       characters.
 
-== render('/partials/related-info.*', links: text_field_info)
+== render('/partials/related-navigation.*', links: text_field_info)
diff --git a/guide/content/form-elements/textarea.slim b/guide/content/form-elements/textarea.slim
@@ -36,4 +36,4 @@ p.govuk-body
     | To do this, set the <code>threshold</code> parameter in conjunction with a
       word or character limit.
 
-== render('/partials/related-info.*', links: text_area_info)
+== render('/partials/related-navigation.*', links: text_area_info)
diff --git a/guide/content/introduction/error-handling.slim b/guide/content/introduction/error-handling.slim
@@ -63,4 +63,4 @@ p.govuk-body
       will be instantiated with the associated object’s
       <code>#errors.messages</code>.
 
-== render('/partials/related-info.*', links: error_handling_info)
+== render('/partials/related-navigation.*', links: error_handling_info)
diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss
@@ -13,6 +13,7 @@ $govuk-page-width: 1100px;
 
 // Import GOV.UK Prototype Components
 @import "x-govuk/components/masthead/masthead";
+@import "x-govuk/components/related-navigation/related-navigation";
 @import "x-govuk/components/sub-navigation/sub-navigation";
 
 // Application components

diff --git a/guide/layouts/partials/related-info.slim b/guide/layouts/partials/related-info.slim
diff --git a/guide/layouts/partials/related-navigation.slim b/guide/layouts/partials/related-navigation.slim
@@ -0,0 +1,10 @@
+.x-govuk-related-navigation class="govuk-!-margin-top-9"
+  nav.x-govuk-related-navigation__nav-section role="navigation" aria-labelledby="related"
+    h2#related.x-govuk-related-navigation__main-heading
+      | Related information
+
+    ul.x-govuk-related-navigation__link-list
+      - links.each do |name, path|
+        li.x-govuk-related-navigation__link
+          a.x-govuk-related-navigation__section-link.govuk-link  href="#{path}"
+            | #{name}