From dee5f5cf0f37e4669d804e2f00af53ad7825358c Mon Sep 17 00:00:00 2001 From: igloosi Date: Mon, 10 Sep 2018 10:42:00 +0100 Subject: [PATCH 1/6] Allow attributes on breadcrumb links - Allow HTML atrributes to be added to breadcrumb links in the Nunjucks macro template - Add tests for check that attributes render correctly - Document new functionality in README.njk - Generate an updated README.md file --- src/components/breadcrumbs/README.md | 12 ++++++++++++ src/components/breadcrumbs/README.njk | 14 ++++++++++++++ src/components/breadcrumbs/template.njk | 2 +- src/components/breadcrumbs/template.test.js | 19 +++++++++++++++++++ 4 files changed, 46 insertions(+), 1 deletion(-) diff --git a/src/components/breadcrumbs/README.md b/src/components/breadcrumbs/README.md index 8b7a6d2905..64f99d3f66 100644 --- a/src/components/breadcrumbs/README.md +++ b/src/components/breadcrumbs/README.md @@ -288,6 +288,18 @@ If you are using Nunjucks,then macros take the following arguments +items.{}.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item. + + + + + classes string diff --git a/src/components/breadcrumbs/README.njk b/src/components/breadcrumbs/README.njk index 58917e2b10..0faaec20b3 100644 --- a/src/components/breadcrumbs/README.njk +++ b/src/components/breadcrumbs/README.njk @@ -71,6 +71,20 @@ The Breadcrumbs component helps users to understand where they are within a webs text: 'Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item' } ], + [ + { + text: 'items.{}.attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.' + } + ], [ { text: 'classes' diff --git a/src/components/breadcrumbs/template.njk b/src/components/breadcrumbs/template.njk index 1c4e9cebfc..e89b9bf0a5 100644 --- a/src/components/breadcrumbs/template.njk +++ b/src/components/breadcrumbs/template.njk @@ -3,7 +3,7 @@ {% for item in params.items %} {% if item.href %}
  • - {{ item.html | safe if item.html else item.text }} + {{ item.html | safe if item.html else item.text }}
    • {% else %}
  • {{ item.html | safe if item.html else item.text }}
    • diff --git a/src/components/breadcrumbs/template.test.js b/src/components/breadcrumbs/template.test.js index daa33c24e0..dd2b20a2b7 100644 --- a/src/components/breadcrumbs/template.test.js +++ b/src/components/breadcrumbs/template.test.js @@ -79,6 +79,25 @@ describe('Breadcrumbs', () => { expect($item.html()).toEqual('<span>Section 1</span>') }) + it('renders item anchor with attributes', () => { + const $ = render('breadcrumbs', { + items: [ + { + 'text': 'Section 1', + 'href': '/section', + 'attributes': { + 'data-attribute': 'my-attribute', + 'data-attribute-2': 'my-attribute-2' + } + } + ] + }) + + const $breadcrumbLink = $('.govuk-breadcrumbs__link') + expect($breadcrumbLink.attr('data-attribute')).toEqual('my-attribute') + expect($breadcrumbLink.attr('data-attribute-2')).toEqual('my-attribute-2') + }) + it('renders item with html', () => { const $ = render('breadcrumbs', { items: [ From 57442fc51f088b0a5a3c7aaef085abb7f039fe8f Mon Sep 17 00:00:00 2001 From: igloosi Date: Mon, 10 Sep 2018 11:43:06 +0100 Subject: [PATCH 2/6] Allow attributes on header navigation links - Allow HTML atrributes to be added to header navigation 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 --- src/components/header/README.md | 12 ++++++++++++ src/components/header/README.njk | 14 ++++++++++++++ src/components/header/template.njk | 2 +- src/components/header/template.test.js | 18 ++++++++++++++++++ 4 files changed, 45 insertions(+), 1 deletion(-) diff --git a/src/components/header/README.md b/src/components/header/README.md index 3561e0c95f..9745f28c39 100644 --- a/src/components/header/README.md +++ b/src/components/header/README.md @@ -473,6 +473,18 @@ If you are using Nunjucks,then macros take the following arguments +navigation.{}.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the navigation item anchor. + + + + + navigationClasses string diff --git a/src/components/header/README.njk b/src/components/header/README.njk index 52d6440210..5307116e5e 100644 --- a/src/components/header/README.njk +++ b/src/components/header/README.njk @@ -156,6 +156,20 @@ text: 'Flag to mark the navigation item as active or not.' } ], + [ + { + text: 'navigation.{}.attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the navigation item anchor.' + } + ], [ { text: 'navigationClasses' diff --git a/src/components/header/template.njk b/src/components/header/template.njk index 62997030eb..45286d655a 100644 --- a/src/components/header/template.njk +++ b/src/components/header/template.njk @@ -69,7 +69,7 @@ {% for item in params.navigation %} {% if item.href and item.text %}
  • - + {{ item.text }}
    • diff --git a/src/components/header/template.test.js b/src/components/header/template.test.js index 51612a8a4a..5f3b10cb62 100644 --- a/src/components/header/template.test.js +++ b/src/components/header/template.test.js @@ -104,6 +104,24 @@ describe('header', () => { expect($firstItem.text()).toContain('Navigation item 1') }) + it('renders navigation item anchor with attributes', () => { + const $ = render('header', { + navigation: [ + { + 'text': 'Item', + 'href': '/link', + 'attributes': { + 'data-attribute': 'my-attribute', + 'data-attribute-2': 'my-attribute-2' + } + } + ] + }) + + const $navigationLink = $('.govuk-header__navigation-item a') + expect($navigationLink.attr('data-attribute')).toEqual('my-attribute') + expect($navigationLink.attr('data-attribute-2')).toEqual('my-attribute-2') + }) describe('menu button', () => { it('has an explicit type="button" so it does not act as a submit button', () => { const $ = render('header', examples['with navigation']) From 0a54e1aec414acc2692eae4cb566a679f1362117 Mon Sep 17 00:00:00 2001 From: igloosi Date: Mon, 10 Sep 2018 12:07:27 +0100 Subject: [PATCH 3/6] Allow attributes on tabs links and tabs panels - Allow HTML atrributes to be added to tabs links and tabs panels 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 --- src/components/tabs/README.md | 26 +++++++++++++++++- src/components/tabs/README.njk | 30 +++++++++++++++++++- src/components/tabs/template.njk | 4 +-- src/components/tabs/template.test.js | 41 ++++++++++++++++++++++++++++ 4 files changed, 97 insertions(+), 4 deletions(-) diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md index 235bbf94b5..95ff96dacf 100644 --- a/src/components/tabs/README.md +++ b/src/components/tabs/README.md @@ -286,7 +286,7 @@ If you are using Nunjucks,then macros take the following arguments No -Any extra HTML attributes (for example data attributes) to add to the details element +Any extra HTML attributes (for example data attributes) to add to the tabs container @@ -340,6 +340,18 @@ If you are using Nunjucks,then macros take the following arguments +items.{}.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the tab item anchor. + + + + + items.{}.panel.text (or) items.{}.panel.html string @@ -350,6 +362,18 @@ If you are using Nunjucks,then macros take the following arguments + + +items.{}.panel.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the tab panel. + + + diff --git a/src/components/tabs/README.njk b/src/components/tabs/README.njk index c9460dc84d..c5d53dc7e6 100644 --- a/src/components/tabs/README.njk +++ b/src/components/tabs/README.njk @@ -70,7 +70,7 @@ text: 'No' }, { - text: 'Any extra HTML attributes (for example data attributes) to add to the details element' + text: 'Any extra HTML attributes (for example data attributes) to add to the tabs container' } ], [ @@ -129,6 +129,20 @@ text: 'The text label of a tab item' } ], + [ + { + text: 'items.{}.attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the tab item anchor.' + } + ], [ { text: 'items.{}.panel.text (or) items.{}.panel.html' @@ -142,6 +156,20 @@ { text: 'Text or HTML to use within each tab panel. If `html` is provided, the `text` argument will be ignored.' } + ], + [ + { + text: 'items.{}.panel.attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the tab panel.' + } ] ] })}} diff --git a/src/components/tabs/template.njk b/src/components/tabs/template.njk index 4ec039b83f..1df1bb42e7 100644 --- a/src/components/tabs/template.njk +++ b/src/components/tabs/template.njk @@ -12,7 +12,7 @@ {% for item in params.items %} {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
  • - + {{ item.label }}
    • @@ -22,7 +22,7 @@ {% for item in params.items %} {% set id = item.id if item.id else idPrefix + "-" + loop.index %} -
    +
    {{ item.panel.html | safe if item.panel.html else item.panel.text }}
    {% endfor %} diff --git a/src/components/tabs/template.test.js b/src/components/tabs/template.test.js index ee4f5b3ab3..0a40f1c579 100644 --- a/src/components/tabs/template.test.js +++ b/src/components/tabs/template.test.js @@ -165,6 +165,47 @@ describe('Tabs', () => { const $firstPanel = $component.find('.govuk-tabs__panel') expect($firstPanel.html().trim()).toEqual('

    Panel 1 content

    ') }) + + it('render a tab anchor with attributes', () => { + const $ = render('tabs', { + items: [ + { + id: 'tab-1', + label: 'Tab 1', + attributes: { + 'data-attribute': 'my-attribute', + 'data-attribute-2': 'my-attribute-2' + } + } + ] + }) + + const $tabItemLink = $('.govuk-tabs__tab') + expect($tabItemLink.attr('data-attribute')).toEqual('my-attribute') + expect($tabItemLink.attr('data-attribute-2')).toEqual('my-attribute-2') + }) + + it('render a tab panel with attributes', () => { + const $ = render('tabs', { + items: [ + { + id: 'tab-1', + label: 'Tab 1', + panel: { + text: 'Panel text', + attributes: { + 'data-attribute': 'my-attribute', + 'data-attribute-2': 'my-attribute-2' + } + } + } + ] + }) + + const $tabPanelItems = $('.govuk-tabs__panel') + expect($tabPanelItems.attr('data-attribute')).toEqual('my-attribute') + expect($tabPanelItems.attr('data-attribute-2')).toEqual('my-attribute-2') + }) }) }) }) From d610758fb238d9fe4d01f2cb2b3ce7874a439ac1 Mon Sep 17 00:00:00 2001 From: igloosi Date: Mon, 10 Sep 2018 13:29:55 +0100 Subject: [PATCH 4/6] Allow attributes on error-summary links - Allow HTML atrributes to be added to error-summary links in the Nunjucks macro template - Add tests for check that attributes render correctly - Document new functionality in README.njk - Generate an updated README.md file --- src/components/error-summary/README.md | 12 ++++++++++++ src/components/error-summary/README.njk | 14 ++++++++++++++ src/components/error-summary/template.njk | 2 +- src/components/error-summary/template.test.js | 19 +++++++++++++++++++ 4 files changed, 46 insertions(+), 1 deletion(-) diff --git a/src/components/error-summary/README.md b/src/components/error-summary/README.md index adc2d9a4d2..845aa1ac8b 100644 --- a/src/components/error-summary/README.md +++ b/src/components/error-summary/README.md @@ -168,6 +168,18 @@ If you are using Nunjucks,then macros take the following arguments +errorList.{}.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the error link anchor. + + + + + classes string diff --git a/src/components/error-summary/README.njk b/src/components/error-summary/README.njk index c2dc633205..f3bcba49bd 100644 --- a/src/components/error-summary/README.njk +++ b/src/components/error-summary/README.njk @@ -101,6 +101,20 @@ text: 'Text or HTML for the error link item. If `html` is provided, the `text` argument will be ignored.' } ], + [ + { + text: 'errorList.{}.attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the error link anchor.' + } + ], [ { text: 'classes' diff --git a/src/components/error-summary/template.njk b/src/components/error-summary/template.njk index 79c9fab116..49b34b4595 100644 --- a/src/components/error-summary/template.njk +++ b/src/components/error-summary/template.njk @@ -14,7 +14,7 @@ {% for item in params.errorList %}
  • {% if item.href %} - {{ item.html | safe if item.html else item.text }} + {{ item.html | safe if item.html else item.text }} {% else %} {{ item.html | safe if item.html else item.text }} {% endif %} diff --git a/src/components/error-summary/template.test.js b/src/components/error-summary/template.test.js index 87494a0b3a..76bb66d0d5 100644 --- a/src/components/error-summary/template.test.js +++ b/src/components/error-summary/template.test.js @@ -128,6 +128,25 @@ describe('Error-summary', () => { expect(errorItem.attr('href')).toEqual('#example-error-1') }) + it('renders anchor tag with attributes', () => { + const $ = render('error-summary', { + errorList: [ + { + 'text': 'Error-1', + 'href': '#item', + 'attributes': { + 'data-attribute': 'my-attribute', + 'data-attribute-2': 'my-attribute-2' + } + } + ] + }) + + const $component = $('.govuk-error-summary__list a') + expect($component.attr('data-attribute')).toEqual('my-attribute') + expect($component.attr('data-attribute-2')).toEqual('my-attribute-2') + }) + it('renders error item text', () => { const $ = render('error-summary', examples.default) const errorItemText = $('.govuk-error-summary .govuk-error-summary__list li:first-child').text().trim() From 5186eb6b254e52f7baf724428a70bbdbf216387e Mon Sep 17 00:00:00 2001 From: igloosi Date: Mon, 10 Sep 2018 16:15:58 +0100 Subject: [PATCH 5/6] 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 --- src/components/footer/README.md | 24 ++++++++++++++ src/components/footer/README.njk | 28 ++++++++++++++++ src/components/footer/template.njk | 4 +-- src/components/footer/template.test.js | 44 ++++++++++++++++++++++++++ 4 files changed, 98 insertions(+), 2 deletions(-) diff --git a/src/components/footer/README.md b/src/components/footer/README.md index f29f108a75..924c8d49c5 100644 --- 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 +meta.items.{}.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the anchor in the footer meta section. + + + + + navigation array @@ -249,6 +261,18 @@ If you are using Nunjucks,then macros take the following arguments +navigation.items.{}.attributes + +object + +No + +Any extra HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. + + + + + containerClasses string diff --git a/src/components/footer/README.njk b/src/components/footer/README.njk index 8d606ca2a8..54adfd16f8 100644 --- 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 index 17378de66a..71f3dc00c1 100644 --- 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 %}
  • - + {{ item.text }}
    • @@ -37,7 +37,7 @@
      {% for item in params.meta.items %}
    • - + {{ item.text }}
      • diff --git a/src/components/footer/template.test.js b/src/components/footer/template.test.js index 26112a6c75..f2b258a412 100644 --- 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']) From ae9bfd245b7b8d0876b04aa4b4299e56c53da0f0 Mon Sep 17 00:00:00 2001 From: igloosi Date: Mon, 10 Sep 2018 16:31:33 +0100 Subject: [PATCH 6/6] Document in CHANGELOG --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b8facfb3c..79a22e61ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,12 @@ ([PR #990](https://github.com/alphagov/govuk-frontend/pull/990)) +- Allow attributes to be added to some child items in header, footer, breadcrumbs, tabs and error-summary components + + You can now pass additional attributes to links in header, footer, breadcrumbs, tabs and error-summary components + + ([PR #993](https://github.com/alphagov/govuk-frontend/pull/993)) + - Pull Request Title goes here Description goes here (optional)