Allow attributes on footer navigation and meta links

- Allow HTML atrributes to be added to footer navigation and meta links in the Nunjucks macro template - Add tests to check that attributes render correctly - Document new functionality in README.njk - Generate an updated README.md file
alphagov · Sep 11, 2018 · 94b05ba · 94b05ba
1 parent d7a407d
commit 94b05ba
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 2 deletions.
diff --git a/src/components/footer/README.md b/src/components/footer/README.md
@@ -177,6 +177,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">meta.items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the anchor in the footer meta section.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">navigation</th>
 
 <td class="govuk-table__cell ">array</td>
@@ -249,6 +261,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">navigation.items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">containerClasses</th>
 
 <td class="govuk-table__cell ">string</td>

diff --git a/src/components/footer/README.njk b/src/components/footer/README.njk
@@ -114,6 +114,20 @@
         text: 'List item href attribute in the meta section of the footer.'
       }
     ],
+    [
+      {
+        text: 'meta.items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the anchor in the footer meta section.'
+      }
+    ],
     [
       {
         text: 'navigation'
@@ -198,6 +212,20 @@
         text: 'List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.'
       }
     ],
+    [
+      {
+        text: 'navigation.items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.'
+      }
+    ],
     [
       {
         text: 'containerClasses'

diff --git a/src/components/footer/template.njk b/src/components/footer/template.njk
@@ -16,7 +16,7 @@
                 {% for item in item.items %}
                   {% if item.href and item.text %}
                     <li class="govuk-footer__list-item">
-                      <a class="govuk-footer__link" href="{{ item.href }}">
+                      <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                         {{ item.text }}
                       </a>
                     </li>
@@ -37,7 +37,7 @@
             <ul class="govuk-footer__inline-list">
               {% for item in params.meta.items %}
                 <li class="govuk-footer__inline-list-item">
-                  <a class="govuk-footer__link" href="{{ item.href }}">
+                  <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                     {{ item.text }}
                   </a>
                 </li>

diff --git a/src/components/footer/template.test.js b/src/components/footer/template.test.js
@@ -105,6 +105,27 @@ describe('footer', () => {
       const $custom = $component.find('.govuk-footer__meta-custom')
       expect($custom.text()).toContain('GOV.UK Prototype Kit v7.0.1')
     })
+
+    it('renders attributes on meta links', () => {
+      const $ = render('footer', {
+        meta: {
+          items: [
+            {
+              href: '#1',
+              text: 'meta item 1',
+              attributes: {
+                'data-attribute': 'my-attribute',
+                'data-attribute-2': 'my-attribute-2'
+              }
+            }
+          ]
+        }
+      })
+
+      const $metaLink = $('.govuk-footer__meta .govuk-footer__link')
+      expect($metaLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($metaLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
   })
 
   describe('navigation', () => {
@@ -139,6 +160,29 @@ describe('footer', () => {
       expect($firstItem.text()).toContain('Navigation item 1')
     })
 
+    it('renders attributes on links', () => {
+      const $ = render('footer', {
+        navigation: [
+          {
+            items: [
+              {
+                href: '#1',
+                text: 'Navigation item 1',
+                attributes: {
+                  'data-attribute': 'my-attribute',
+                  'data-attribute-2': 'my-attribute-2'
+                }
+              }
+            ]
+          }
+        ]
+      })
+
+      const $navigationLink = $('.govuk-footer__list .govuk-footer__link')
+      expect($navigationLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($navigationLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
+
     it('renders lists in columns', () => {
       const $ = render('footer', examples['with navigation'])