From 3c77f32a2f8c329f0a0247bb8de1216c552d7c18 Mon Sep 17 00:00:00 2001 From: Jon Heslop Date: Mon, 29 Oct 2018 10:27:17 +0000 Subject: [PATCH] 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.njk | 28 ++++++++ src/components/table/table.yaml | 8 +++ src/components/table/template.njk | 6 +- src/components/table/template.test.js | 92 +++++++++++++++++++++++++++ 4 files changed, 131 insertions(+), 3 deletions(-) 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..ba15ec385c 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 container. - 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 container. - 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') + }) })
{{ cell.html | safe if cell.html else cell.text }}