Skip to content

Commit ccbc4a1

Browse files
colinrotherhamcolinrotherham
committed
Merge branch 'main' into 1092-stacked-list-read-order
2 parents 68996a3 + 13d1d79 commit ccbc4a1

12 files changed

+68
-50
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
:new: **New features**
66

77
- Output source maps and use minified code in examples ([PR 1152](https://github.com/nhsuk/nhsuk-frontend/pull/1152))
8+
- Add table cell `classes` and `attributes` param support [PR 1172](https://github.com/nhsuk/nhsuk-frontend/pull/1172)
89

910
:wrench: **Fixes**
1011

‎app/components/all.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -553,8 +553,8 @@
553553
<table class="nhsuk-table">
554554
<thead class="nhsuk-table__head">
555555
<tr class="nhsuk-table__row">
556-
<th class="nhsuk-table__header" scope="col">Class name</th>
557-
<th class="nhsuk-table__header" scope="col" style="width: 120px">Tag</th>
556+
<th scope="col" class="nhsuk-table__header nhsuk-u-width-two-thirds">Class name</th>
557+
<th scope="col" class="nhsuk-table__header nhsuk-u-width-one-third">Tag</th>
558558
</tr>
559559
</thead>
560560
<tbody class="nhsuk-table__body">

‎app/components/tables/responsive-table.njk‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,16 @@
1717
firstCellIsHeader: false,
1818
head: [
1919
{
20-
text: "Age"
20+
text: "Age",
21+
classes: "nhsuk-u-width-one-half"
2122
},
2223
{
23-
text: "How much?"
24+
text: "How much?",
25+
classes: "nhsuk-u-width-one-quarter"
2426
},
2527
{
26-
text: "How often?"
28+
text: "How often?",
29+
classes: "nhsuk-u-width-one-quarter"
2730
}
2831
],
2932
rows: [

‎app/components/tag/index.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
<table class="nhsuk-table">
1515
<thead class="nhsuk-table__head">
1616
<tr class="nhsuk-table__row">
17-
<th class="nhsuk-table__header" scope="col">Class name</th>
18-
<th class="nhsuk-table__header" scope="col" style="width: 120px">Tag</th>
17+
<th scope="col" class="nhsuk-table__header nhsuk-u-width-two-thirds">Class name</th>
18+
<th scope="col" class="nhsuk-table__header nhsuk-u-width-one-third">Tag</th>
1919
</tr>
2020
</thead>
2121
<tbody class="nhsuk-table__body">

‎packages/components/tables/README.md‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ Find out more about the table component and when to use it in the [NHS digital s
1818
<caption class="nhsuk-table__caption">Skin symptoms and possible causes</caption>
1919
<thead class="nhsuk-table__head">
2020
<tr class="nhsuk-table__row">
21-
<th class="nhsuk-table__header" scope="col">Skin symptoms</th>
22-
<th class="nhsuk-table__header" scope="col">Possible cause</th>
21+
<th scope="col" class="nhsuk-table__header">Skin symptoms</th>
22+
<th scope="col" class="nhsuk-table__header">Possible cause</th>
2323
</tr>
2424
</thead>
2525
<tbody class="nhsuk-table__body">
@@ -185,21 +185,21 @@ Find out more about the table component and when to use it in the [NHS digital s
185185
<caption class="nhsuk-table__caption">Ibuprofen syrup dosages for children</caption>
186186
<thead role="rowgroup" class="nhsuk-table__head">
187187
<tr role="row">
188-
<th role="columnheader" class="" scope="col">
188+
<th scope="col" role="columnheader" class="nhsuk-table__header">
189189
Age
190190
</th>
191-
<th role="columnheader" class="" scope="col">
191+
<th scope="col" role="columnheader" class="nhsuk-table__header">
192192
How much?
193193
</th>
194-
<th role="columnheader" class="" scope="col">
194+
<th scope="col" role="columnheader" class="nhsuk-table__header">
195195
How often?
196196
</th>
197197
</tr>
198198
</thead>
199199
<tbody class="nhsuk-table__body">
200200
<tr role="row" class="nhsuk-table__row" >
201201
<td role="cell" class="nhsuk-table__cell">
202-
<span class="nhsuk-table-responsive__heading aria-hidden="true"">Age </span>3 to 5 months (weighing more than 5kg)
202+
<span class="nhsuk-table-responsive__heading aria-hidden="true">Age </span>3 to 5 months (weighing more than 5kg)
203203
</td>
204204
<td role="cell" class="nhsuk-table__cell">
205205
<span class="nhsuk-table-responsive__heading" aria-hidden="true">How much? </span>2.5ml
@@ -262,7 +262,8 @@ Find out more about the table component and when to use it in the [NHS digital s
262262
},
263263
{
264264
header: "How much?",
265-
text: "2.5ml"
265+
text: "2.5ml",
266+
classes: "nhsuk-u-width-one-quarter"
266267
},
267268
{
268269
header: "How often?",
@@ -312,8 +313,10 @@ The table Nunjucks macro takes the following arguments:
312313
| **rows** | array | Yes | Array of table rows and cells. |
313314
| **rows.[].text (or) rows.[].html** | string | Yes | Text or HTML for cells in table rows. If `html` is specified, the `text` argument will be ignored. |
314315
| **rows.[].format** | string | No | Specify format of a cell. Currently we only use "numeric". |
316+
| **rows.[].classes** | string | No | Classes to add to the table row cell. |
315317
| **rows.[].colspan** | number | No | Specify how many columns a cell extends. |
316318
| **rows.[].rowspan** | number | No | Specify how many rows a cell extends. |
319+
| **rows.[].attributes** | object | No | HTML attributes (for example data attributes) to add to the table cell. |
317320
| **panel** | boolean | No | If set to true, the table is rendered inside a [panel with a label](https://nhsuk.github.io/nhsuk-frontend/components/panel-with-label.html). |
318321
| **panelClasses** | string | No | Optional additional classes to add to the panel containing the table. Separate each class with a space. |
319322
| **heading** | string | No | Heading/label of the panel if the panel argument is set to true. |
@@ -324,9 +327,11 @@ The table Nunjucks macro takes the following arguments:
324327
| **captionClasses** | string | No | Optional additional classes to add to the table caption, for example `nhsuk-table__caption--l`. Separate each class with a space. |
325328
| **head** | array | No | Optional array of table head cells. |
326329
| **head.[].text or head.[].html** | array | No | Optional array of table head cells. If `html` is specified, the `text` argument will be ignored. |
330+
| **head.[].format** | string | No | Specify format of a cell. Currently we only use "numeric". |
331+
| **head.[].classes** | string | No | Classes to add to the table head cell. |
327332
| **head.[].colspan** | number | No | Specify how many columns a cell extends. |
328333
| **head.[].rowspan** | number | No | Specify how many rows a cell extends. |
329-
| **head.[].format** | string | No | Specify format of a cell. Currently we only use "numeric". |
334+
| **head.[].attributes** | object | No | HTML attributes (for example data attributes) to add to the table cell. |
330335
| **firstCellIsHeader** | boolean | No | If set to true, first cell in table row will be a TH instead of a TD. |
331336
| **responsive** | boolean | No | If set to true, responsive table classes will be applied. |
332337

‎packages/components/tables/template.njk‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -30,50 +30,59 @@
3030
</figure>
3131
{% endif %}
3232

33-
<table {%- if params.responsive %} {% endif %} class="nhsuk-table{%- if params.responsive %}-responsive{% endif %}
34-
{%- if params.tableClasses %} {{ params.tableClasses }}{% endif %}"
35-
{{- nhsukAttributes(params.attributes) }}>
33+
<table class="nhsuk-table
34+
{%- if params.responsive %}-responsive{% endif %}
35+
{%- if params.tableClasses %} {{ params.tableClasses }}{% endif %}"
36+
{{- nhsukAttributes(params.attributes) }}>
37+
3638
{%- if params.caption %}
3739
<caption class="nhsuk-table__caption
38-
{%- if params.captionClasses %} {{ params.captionClasses }}{% endif %}">{{ params.caption }}</caption>
40+
{%- if params.captionClasses %} {{ params.captionClasses }}{% endif %}">
41+
{{- params.caption -}}
42+
</caption>
3943
{%- endif %}
44+
4045
{%- if params.head %}
4146
<thead class="nhsuk-table__head">
42-
<tr>
43-
{%- for item in params.head %}
44-
<th role="columnheader" class="
45-
{%- if item.format %} nhsuk-table__header--{{ item.format }}{% endif %}" scope="col">
46-
{{ item.html |safe if item.html else item.text }}
47-
</th>
48-
{%- endfor %}
49-
</tr>
47+
<tr>
48+
{%- for item in params.head %}
49+
<th scope="col" class="nhsuk-table__header
50+
{%- if item.format %} nhsuk-table__header--{{ item.format }}{% endif %}
51+
{%- if item.classes %} {{ item.classes }}{% endif %}"
52+
{%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
53+
{%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}
54+
{{- nhsukAttributes(item.attributes) }}>
55+
{{- item.html | safe if item.html else item.text -}}
56+
</th>
57+
{%- endfor %}
58+
</tr>
5059
</thead>
5160
{%- endif %}
5261
<tbody class="nhsuk-table__body">
5362
{%- for row in params.rows %}
54-
<tr class="nhsuk-table__row" >
55-
{%- if params.responsive %}
56-
{%- for cell in row %}
57-
<td class="nhsuk-table__cell{% if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}">
58-
{{ cell.html | safe if cell.html else cell.text }}
63+
<tr class="nhsuk-table__row">
64+
{%- for cell in row %}
65+
{% set commonAttributes %}
66+
{%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
67+
{%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}
68+
{{- nhsukAttributes(cell.attributes) -}}
69+
{% endset -%}
70+
71+
{%- if loop.first and params.firstCellIsHeader %}
72+
<th scope="row" class="nhsuk-table__header
73+
{%- if cell.classes %} {{ cell.classes }}{% endif %}"
74+
{{- commonAttributes | safe }}>
75+
{{- cell.html | safe if cell.html else cell.text -}}
76+
</th>
77+
{%- else %}
78+
<td class="nhsuk-table__cell
79+
{%- if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}
80+
{%- if cell.classes %} {{ cell.classes }}{% endif %}"
81+
{{- commonAttributes | safe }}>
82+
{{- cell.html | safe if cell.html else cell.text -}}
5983
</td>
60-
{%- endfor %}
61-
{%- else %}
62-
{%- for cell in row %}
63-
{%- if loop.first and params.firstCellIsHeader %}
64-
<th class="nhsuk-table__header" scope="row">{{ cell.html | safe if cell.html else cell.text }}</th>
65-
{%- elseif loop.first %}
66-
<td class="nhsuk-table__cell
67-
{%- if cell.format %} nhsuk-table__cell--{{ cell.format }}{% endif %}"
68-
{%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
69-
{%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
70-
{%- else %}
71-
<td class="nhsuk-table__cell {% if cell.format %}nhsuk-table__cell--{{ cell.format }}{% endif %}"
72-
{%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
73-
{%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
74-
{%- endif %}
75-
{%- endfor %}
76-
{%- endif %}
84+
{%- endif %}
85+
{%- endfor %}
7786
</tr>
7887
{%- endfor %}
7988
</tbody>

‎tasks/docs.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ gulp.task(
137137

138138
gulp.task('docs:watch', () =>
139139
Promise.all([
140-
gulp.watch(['app/**/*.njk'], buildHTML),
140+
gulp.watch(['**/*.njk'], buildHTML),
141141
gulp.watch(['dist/**/*.html']).on('change', browserSync.reload),
142142
gulp.watch(['dist/*.min.{css,css.map}'], copyCSS),
143143
gulp.watch(['dist/*.min.{js,js.map}'], copyJS),

‎tests/backstop/bitmaps_reference/nhsuk-frontend_Responsive_table_0_document_3_Surface_iPad_Pro.png‎

-5.72 KB
Loading

‎tests/backstop/bitmaps_reference/nhsuk-frontend_Tag_0_document_0_iPhone_5_SE.png‎

-5.19 KB
Loading

‎tests/backstop/bitmaps_reference/nhsuk-frontend_Tag_0_document_1_iPhone_6-8.png‎

-3.8 KB
Loading

0 commit comments

Comments
 (0)