From 2b63137c43a5278f9196ed9d812fa7594b88984d Mon Sep 17 00:00:00 2001
From: Paul Robert Lloyd <paulrobertlloyd@users.noreply.github.com>
Date: Tue, 24 Jan 2023 18:35:00 +0000
Subject: [PATCH] Remove dependency on slugify filter

---
 x-govuk/components/related-navigation/README.md    |  2 ++
 x-govuk/components/related-navigation/template.njk | 10 ++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/x-govuk/components/related-navigation/README.md b/x-govuk/components/related-navigation/README.md
index 3ac4697..6273da6 100644
--- a/x-govuk/components/related-navigation/README.md
+++ b/x-govuk/components/related-navigation/README.md
@@ -47,6 +47,7 @@ If you’re using Nunjucks macros in production with `html` options, or ones end
 | Name | Type | Description |
 | :--- | :--- | :---------- |
 | **title** | string | The title text that displays above the list of navigation links. Default is `Related content`. |
+| **id** | string | ID attribute to add to the section container. |
 | **items** | array | **Required**. An array of navigation links within the section. See [items](#options-for-items). |
 | **subsections** | array | An array of sub-sections within the section. See [subsections](#options-for-subsections). |
 
@@ -55,6 +56,7 @@ If you’re using Nunjucks macros in production with `html` options, or ones end
 | Name | Type | Description |
 | :--- | :--- | :---------- |
 | **title** | string | The title text that displays above the list of navigation links. |
+| **id** | string | ID attribute to add to the subsection container. |
 | **items** | array | **Required**. An array of navigation links within the section. See [items](#options-for-items). |
 
 ### Options for items
diff --git a/x-govuk/components/related-navigation/template.njk b/x-govuk/components/related-navigation/template.njk
index 690e0a7..3044ecf 100644
--- a/x-govuk/components/related-navigation/template.njk
+++ b/x-govuk/components/related-navigation/template.njk
@@ -3,8 +3,9 @@
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for section in params.sections %}
     {% set sectionTitle = section.title or "Related content" %}
-    <nav class="x-govuk-related-navigation__nav-section" role="navigation" aria-labelledby="related-navigation-{{ sectionTitle | slugify }}">
-      <h{{ headingLevel }} class="x-govuk-related-navigation__main-heading" id="related-navigation-{{ sectionTitle | slugify }}">
+    {% set sectionId = section.id or sectionTitle | lower | replace(" ", "-") %}
+    <nav class="x-govuk-related-navigation__nav-section" role="navigation" aria-labelledby="related-navigation-{{ sectionId }}">
+      <h{{ headingLevel }} class="x-govuk-related-navigation__main-heading" id="related-navigation-{{ sectionId }}">
         {{ sectionTitle }}
       </h{{ headingLevel }}>
       {% if section.items %}
@@ -17,9 +18,10 @@
         </ul>
       {% endif %}
       {% for subsection in section.subsections %}
-        <nav role="navigation" class="x-govuk-related-navigation__nav-section"{% if subsection.title %} aria-labelledby="related-navigation-{{ subsection.title | slugify }}"{% endif %}>
+        {% set subsectionId = subsection.id or subsection.title | lower | replace(" ", "-") %}
+        <nav role="navigation" class="x-govuk-related-navigation__nav-section"{% if subsection.title %} aria-labelledby="related-navigation-{{ subsectionId }}"{% endif %}>
           {% if subsection.title %}
-            <h{{ headingLevel + 1 }} class="x-govuk-related-navigation__sub-heading" id="related-navigation-{{ subsection.title | slugify }}">
+            <h{{ headingLevel + 1 }} class="x-govuk-related-navigation__sub-heading" id="related-navigation-{{ subsectionId }}">
               {{ subsection.title }}
             </h{{ headingLevel + 1 }}>
           {% endif %}