From 235f2385b8da496e5c27e67cde534b0a96fc9b19 Mon Sep 17 00:00:00 2001 From: Jon Heslop Date: Mon, 29 Oct 2018 10:27:17 +0000 Subject: [PATCH 1/2] Add support for attributes on table cells MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It’s currently not possible to attach HTML attributes to table cells. This PR makes it possible by using the same object pattern that is used on other components (and also the element). I’ve updated the nunjucks template as well as the YAML and the README to reflect the new functionality. --- src/components/table/README.md | 24 +++++++ src/components/table/README.njk | 28 ++++++++ src/components/table/table.yaml | 8 +++ src/components/table/template.njk | 6 +- src/components/table/template.test.js | 92 +++++++++++++++++++++++++++ 5 files changed, 155 insertions(+), 3 deletions(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index fbf204ea17..36726aa949 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -442,6 +442,18 @@ If you are using Nunjucks,then macros take the following arguments + + + + + + + + + + + + @@ -502,6 +514,18 @@ If you are using Nunjucks,then macros take the following arguments + + + + + + + + + + + + diff --git a/src/components/table/README.njk b/src/components/table/README.njk index 5af86d4eed..d3a2def0f7 100644 --- a/src/components/table/README.njk +++ b/src/components/table/README.njk @@ -101,6 +101,20 @@ text: 'Specify how many rows a cell extends.' } ], + [ + { + text: 'rows.[].attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the cell.' + } + ], [ { text: 'head' @@ -171,6 +185,20 @@ text: 'Specify format of a cell. Currently we only use "numeric".' } ], + [ + { + text: 'head.[].attributes' + }, + { + text: 'object' + }, + { + text: 'No' + }, + { + text: 'Any extra HTML attributes (for example data attributes) to add to the cell.' + } + ], [ { text: 'caption' diff --git a/src/components/table/table.yaml b/src/components/table/table.yaml index 4641c02230..9b9524de83 100644 --- a/src/components/table/table.yaml +++ b/src/components/table/table.yaml @@ -28,6 +28,10 @@ params: type: integer required: false description: Specify how many rows a cell extends. + - name: attributes + type: object + required: false + description: HTML attributes (for example data attributes) to add to the table cell. - name: head type: array required: false @@ -57,6 +61,10 @@ params: type: integer required: false description: Specify how many rows a cell extends. + - name: attributes + type: object + required: false + description: HTML attributes (for example data attributes) to add to the table cell. - name: caption type: string required: false diff --git a/src/components/table/template.njk b/src/components/table/template.njk index 727c49cdb0..cf16cc0611 100644 --- a/src/components/table/template.njk +++ b/src/components/table/template.njk @@ -12,7 +12,7 @@ {%- if item.format %} govuk-table__header--{{ item.format }}{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %} - {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %} scope="col">{{ item.html |safe if item.html else item.text }} + {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %} scope="col">{{ item.html |safe if item.html else item.text }} {% endfor %} @@ -28,13 +28,13 @@ {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %} {%- if cell.classes %} {{ cell.classes }}{% endif %}" {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %} - {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }} + {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ cell.html | safe if cell.html else cell.text }} {% else %} + {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ cell.html | safe if cell.html else cell.text }} {% endif %} {% endfor %} diff --git a/src/components/table/template.test.js b/src/components/table/template.test.js index e49b820c00..96378e7f5e 100644 --- a/src/components/table/template.test.js +++ b/src/components/table/template.test.js @@ -418,4 +418,96 @@ describe('Table', () => { expect($component.attr('attribute-1')).toEqual('yes') expect($component.attr('attribute-2')).toEqual('no') }) + + it('renders with attributes on a head cell ', () => { + const $ = render('table', { + 'head': [ + { + 'text': 'Month you apply', + 'attributes': { + 'id': 'some-unique-id' + } + }, + { + 'text': 'Rate for bicycles', + 'format': 'numeric' + }, + { + 'text': 'Rate for vehicles', + 'format': 'numeric' + } + ], + 'rows': [ + [ + { + 'text': 'January' + }, + { + 'text': '£85', + 'format': 'numeric' + } + ], + [ + { + 'text': 'February' + }, + { + 'text': '£165', + 'format': 'numeric' + } + ] + ] + }) + + const $component = $('.govuk-table') + const $tableHeadCell = $component.find('.govuk-table__head .govuk-table__header') + + expect($tableHeadCell.eq(0).attr('id')).toMatch('some-unique-id') + }) + + it('renders with attributes on a body cell ', () => { + const $ = render('table', { + 'head': [ + { + 'text': 'Month you apply' + }, + { + 'text': 'Rate for bicycles', + 'format': 'numeric' + }, + { + 'text': 'Rate for vehicles', + 'format': 'numeric' + } + ], + 'rows': [ + [ + { + 'text': 'January', + 'attributes': { + 'id': 'some-unique-id' + } + }, + { + 'text': '£85', + 'format': 'numeric' + } + ], + [ + { + 'text': 'February' + }, + { + 'text': '£165', + 'format': 'numeric' + } + ] + ] + }) + + const $component = $('.govuk-table') + const $tableBodyCell = $component.find('.govuk-table__body .govuk-table__cell') + + expect($tableBodyCell.eq(0).attr('id')).toMatch('some-unique-id') + }) }) From c255929b0e20197eaaecce12fa9e9e52a797d7b8 Mon Sep 17 00:00:00 2001 From: Jon Heslop Date: Mon, 29 Oct 2018 10:45:59 +0000 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f87bfdd24b..2366dd9592 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,13 @@ ([PR #1037](https://github.com/alphagov/govuk-frontend/pull/1037)) +- Add support for attributes on table cells + + Can now use the familiar `attrubutes: {}` pattern to add various + attributes such as `id` or `data-attr` to cells within tables + + ([PR #1045](https://github.com/alphagov/govuk-frontend/pull/1045)) + - Pull Request Title goes here Description goes here (optional)
rows.[].attributesobjectNoAny extra HTML attributes (for example data attributes) to add to the cell.
head array
head.[].attributesobjectNoAny extra HTML attributes (for example data attributes) to add to the cell.
caption string
{{ cell.html | safe if cell.html else cell.text }}