Restore heading ids

x-govuk · Dec 10, 2023 · 2124e5f · 2124e5f
1 parent d703894
commit 2124e5f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/index.js b/index.js
@@ -15,21 +15,17 @@ module.exports = class GovukHTMLRenderer extends Renderer {
   }
 
   // Headings
-  heading (text, level) {
-    const modifiers = [
-      'xl',
-      'l',
-      'm',
-      's'
-    ]
+  heading (text, level, raw) {
+    const id = raw.toLowerCase().replace(/[^\w]+/g, '-')
 
     // Make modifiers relative to the starting heading level
+    const modifiers = ['xl', 'l', 'm', 's']
     const headingsStartWith = (modifiers.includes(this.options.headingsStartWith)) ? this.options.headingsStartWith : 'l'
     const modifierStartIndex = modifiers.indexOf(headingsStartWith)
 
     const modifier = modifiers[modifierStartIndex + level - 1] || 's'
 
-    return `<h${level} class="govuk-heading-${modifier}">${text}</h${level}>`
+    return `<h${level} class="govuk-heading-${modifier}" id="${id}">${text}</h${level}>`
   }
 
   // Paragraphs

diff --git a/test/index.mjs b/test/index.mjs
@@ -16,15 +16,21 @@ test('Renders blockquote', () => {
 test('Renders headings', () => {
   const result = marked('# Heading 1\n## Heading 2\n### Heading 3\n#### Heading 4')
 
-  assert.equal(result, '<h1 class="govuk-heading-l">Heading 1</h1><h2 class="govuk-heading-m">Heading 2</h2><h3 class="govuk-heading-s">Heading 3</h3><h4 class="govuk-heading-s">Heading 4</h4>')
+  assert.equal(result, '<h1 class="govuk-heading-l" id="heading-1">Heading 1</h1><h2 class="govuk-heading-m" id="heading-2">Heading 2</h2><h3 class="govuk-heading-s" id="heading-3">Heading 3</h3><h4 class="govuk-heading-s" id="heading-4">Heading 4</h4>')
+})
+
+test('Renders heading with id', () => {
+  const result = marked('# Heading with *emphasis*')
+
+  assert.equal(result, '<h1 class="govuk-heading-l" id="heading-with-emphasis">Heading with <em>emphasis</em></h1>')
 })
 
 test('Renders headings, using classes relative to given starting level', () => {
   marked.setOptions({ headingsStartWith: 'xl' })
 
   const result = marked('# Heading 1\n## Heading 2\n### Heading 3\n#### Heading 4')
 
-  assert.equal(result, '<h1 class="govuk-heading-xl">Heading 1</h1><h2 class="govuk-heading-l">Heading 2</h2><h3 class="govuk-heading-m">Heading 3</h3><h4 class="govuk-heading-s">Heading 4</h4>')
+  assert.equal(result, '<h1 class="govuk-heading-xl" id="heading-1">Heading 1</h1><h2 class="govuk-heading-l" id="heading-2">Heading 2</h2><h3 class="govuk-heading-m" id="heading-3">Heading 3</h3><h4 class="govuk-heading-s" id="heading-4">Heading 4</h4>')
 })
 
 test('Renders paragraph', () => {