Documentation design update (supplemental)

guide/content/components/accordion.slim

@@ -24,4 +24,4 @@ p The accordion component lets users show and hide sections of related content o
 
     Keep summary lines as short as possible.
 
-== render('/partials/related-info.*', links: accordion_info)
+== render('/partials/related-navigation.*', links: accordion_info)

guide/content/components/back-link.slim

@@ -23,4 +23,4 @@ p
     When back links are displayed on darker backgrounds the `inverse` keyword argument can
     be used to make them readable.
 
-== render('/partials/related-info.*', links: back_link_info)
+== render('/partials/related-navigation.*', links: back_link_info)

guide/content/components/breadcrumbs.slim

@@ -49,4 +49,4 @@ markdown:
     When breadcrumbs are displayed on darker backgrounds the `inverse` keyword argument can
     be used to make them readable.
 
-== render('/partials/related-info.*', links: breadcrumbs_info)
+== render('/partials/related-navigation.*', links: breadcrumbs_info)

guide/content/components/cookie-banner.slim

@@ -16,4 +16,4 @@ p Allow users to accept or reject cookies which are not essential to making your
     or links and will be placed in a `govuk-button-group` at the bottom of the
     cookie banner.
 
-== render('/partials/related-info.*', links: cookie_banner_info)
+== render('/partials/related-navigation.*', links: cookie_banner_info)

guide/content/components/details.slim

@@ -30,4 +30,4 @@ p Make a page easier to scan by letting users reveal more detailed information
   markdown:
     You can make a details element start open by passing in `open: true`.
 
-== render('/partials/related-info.*', links: details_info)
+== render('/partials/related-navigation.*', links: details_info)

guide/content/components/exit-this-page.slim

@@ -54,4 +54,4 @@ p.govuk-body
     The defaults can be overwritten application wide by setting the appropriate
     values [in the configuration](/introduction/configuration/).
 
-== render('/partials/related-info.*', links: exit_this_page_info)
+== render('/partials/related-navigation.*', links: exit_this_page_info)

guide/content/components/footer.slim

@@ -54,4 +54,4 @@ p The footer provides copyright, licensing and other information about your
   caption: "Footer with navigation",
   code: footer_with_navigation)
 
-== render('/partials/related-info.*', links: footer_info)
+== render('/partials/related-navigation.*', links: footer_info)

guide/content/components/header.slim

@@ -51,4 +51,4 @@ p
     If an alternative logo is needed, it can be set using the `custom_logo` slot.
     This example uses an SVG graphic paired with text.
 
-== render('/partials/related-info.*', links: header_info)
+== render('/partials/related-navigation.*', links: header_info)

guide/content/components/notification-banner.slim

@@ -29,4 +29,4 @@ p
   code: notification_banner_success,
   rendered_partial: "/components/notification_banner/notification_banner_success")
 
-== render('/partials/related-info.*', links: notification_banner_info)
+== render('/partials/related-navigation.*', links: notification_banner_info)

guide/content/components/panel.slim

@@ -17,4 +17,4 @@ p
   markdown:
     Any content passed in via the block will be rendered beneath the title.
 
-== render('/partials/related-info.*', links: panel_info)
+== render('/partials/related-navigation.*', links: panel_info)

guide/content/components/section-break.slim

@@ -13,4 +13,4 @@ p
   caption: "Section break with a visible separator line and an extra large margin",
   code: section_break_visible_xl)
 
-== render('/partials/related-info.*', links: section_break_info)
+== render('/partials/related-navigation.*', links: section_break_info)

guide/content/components/start-button.slim

@@ -30,4 +30,4 @@ p
       | The GOV.UK Design system
       =< link_to("advises against submitting data with a start button", "https://design-system.service.gov.uk/components/button/#start-buttons").html_safe
 
-== render('/partials/related-info.*', links: start_button_info)
+== render('/partials/related-navigation.*', links: start_button_info)

guide/content/components/summary-list.slim

@@ -79,4 +79,4 @@ markdown:
   Arbitrary HTML content can be passed into the `govuk_summary_card` block and it will
   render in the place of a summary list.
 
-== render('/partials/related-info.*', links: summary_list_info)
+== render('/partials/related-navigation.*', links: summary_list_info)

guide/content/components/table.slim

@@ -82,4 +82,4 @@ p Use the table component to make information easier to compare and scan for
     Columns can be made to stretch across multiple rows with the `rowspan` and
     columns with the `colspan` parameters.
 
-== render('/partials/related-info.*', links: table_info)
+== render('/partials/related-navigation.*', links: table_info)

guide/content/components/tabs.slim

@@ -16,4 +16,4 @@ p
     `label` which will form the link at the top, and the content can be set
     either using the `text` argument or via a block of HTML.
 
-== render('/partials/related-info.*', links: tabs_info)
+== render('/partials/related-navigation.*', links: tabs_info)

guide/content/components/tag.slim

@@ -12,4 +12,4 @@ p Use the tag component to show users the status of something.
   caption: "Coloured tags",
   code: tag_colours)
 
-== render('/partials/related-info.*', links: tag_info)
+== render('/partials/related-navigation.*', links: tag_info)

guide/content/components/warning-text.slim

@@ -14,4 +14,4 @@ p Use the warning text component when you need to warn users about something
   caption: "Warning text provided by a block with custom icon fallback text",
   code: warning_text_with_custom_icon_fallback_text)
 
-== render('/partials/related-info.*', links: warning_text_info)
+== render('/partials/related-navigation.*', links: warning_text_info)

guide/content/stylesheets/application.scss

@@ -16,6 +16,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
@@ -28,7 +29,7 @@ $govuk-page-width: 1100px;
 
 // Classes used in examples
 
-// advanced table example, change some alignment to make multiple sets
+// Advanced table example, change some alignment to make multiple sets
 // of headers more readable
 .govuk-table {
   &.starter-pokemon-weights {
@@ -75,17 +76,6 @@ $govuk-page-width: 1100px;
   }
 }
 
-// Remove bottom border on header, i.e. when masthead appears below it
-.app-header--no-border {
-  border-bottom: 0;
-}
-
-// X-GOVUK custom logo used in header
-// Visually adjusts placement of X-GOVUK logo which has a height of 35px
-.x-govuk-header__logotype {
-  margin-bottom: -5px;
-}
-
 // Example custom logo used in documentation
 .app-header__logotype {
   display: inline-block;

guide/content/stylesheets/components/_header.scss

@@ -1,12 +1,16 @@
 .app-header {
+  // Remove bottom border on header, i.e. when masthead appears below it
+  &--no-border {
+    border-bottom: 0;
+  }
+
   .govuk-header__logo {
     width: auto;
   }
 
-  // visually adjust placement to accept larger icon with a height of 35px
-  .app-header__logotype--large {
-    margin-bottom: -10px;
-    position: relative;
-    top: -3px;
+  // X-GOVUK custom logo used in header
+  // Visually adjusts placement of X-GOVUK logo which has a height of 35px
+  .x-govuk-header__logotype {
+    margin-bottom: -5px;
   }
 }

guide/layouts/partials/links.slim

@@ -3,7 +3,8 @@
     nav class="govuk-grid-row"
       - navigation_links.each_with_index do |(theme, links), index|
         div class="govuk-grid-column-one-#{index == 2 ? 'half' : 'quarter'}"
-          h2.govuk-heading-m #{theme}
+          h2.govuk-heading-m
+            | #{theme}
           ul.govuk-list class=(index == 2 && "app-list--two-columns")
             - links.each do |name, path|
               li== govuk_link_to(name, path)

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}

guide/layouts/partials/sub-navigation.slim

@@ -1,9 +1,12 @@
 nav.x-govuk-sub-navigation aria-labelledby="sub-navigation-heading"
-  h2.govuk-visually-hidden#sub-navigation-heading Pages in this section
+  h2.govuk-visually-hidden#sub-navigation-heading
+    | Pages in this section
 
   - navigation_links.each do |theme, links|
-    h3.x-govuk-sub-navigation__theme #{theme}
+    h3.x-govuk-sub-navigation__theme
+      | #{theme}
     ul.x-govuk-sub-navigation__section
       - links.each do |name, path|
         li.x-govuk-sub-navigation__section-item class=(path == @item.path && "x-govuk-sub-navigation__section-item--current")
-          a.x-govuk-sub-navigation__link href="#{path}" aria-current=(path == @item.path && "true") #{name}
+          a.x-govuk-sub-navigation__link href="#{path}" aria-current=(path == @item.path && "true")
+            | #{name}