Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add support for attributes on table cells
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 <table> element).

I’ve updated the nunjucks template as well as the YAML and the README
to reflect the new functionality.
  • Loading branch information
jonheslop committed Oct 29, 2018
1 parent 513a5cb commit 3c77f32
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 3 deletions.
28 changes: 28 additions & 0 deletions src/components/table/README.njk
Expand Up @@ -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'
Expand Down Expand Up @@ -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'
Expand Down
8 changes: 8 additions & 0 deletions src/components/table/table.yaml
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/components/table/template.njk
Expand Up @@ -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 }}</th>
{%- 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 }}</th>
{% endfor %}
</tr>
</thead>
Expand All @@ -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 }}</td>
{%- 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 }}</td>
{% else %}
<td class="govuk-table__cell
{%- 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 }}</td>
{%- 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 }}</td>
{% endif %}
{% endfor %}
</tr>
Expand Down
92 changes: 92 additions & 0 deletions src/components/table/template.test.js
Expand Up @@ -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')
})
})

0 comments on commit 3c77f32

Please sign in to comment.