Skip to content

Commit

Permalink
Adding new responsive table component and renaming original table con…
Browse files Browse the repository at this point in the history
…tainer
  • Loading branch information
Fenwick17 committed Sep 25, 2020
1 parent 0e0e711 commit dff98b7
Show file tree
Hide file tree
Showing 12 changed files with 470 additions and 86 deletions.
10 changes: 9 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
# NHS.UK frontend Changelog

## 3.2.0 - Unreleased
## 4.0.0 - Unreleased

:boom: **Breaking changes**

- Tables - New responsive table component, when viewed on a desktop the table component will behave like any other table. However, when viewed on a mobile the table collapses into what appears to be a group list style component. ([Pull request 635](https://github.com/nhsuk/nhsuk-frontend/pull/635))

If you are using the current responsive table class `nhsuk-table-responsive` you will need to rename the `nhsuk-table-responsive` class to `nhsuk-table-container`.

[Preview the responsive table component](https://nhsuk.github.io/nhsuk-frontend/components/tables/responsive-table.html)

:new: **New features**

Expand Down
136 changes: 136 additions & 0 deletions app/components/tables/responsive-table.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Tables' %}
{% from 'components/tables/macro.njk' import table %}
{% extends 'layout.njk' %}

{% block body %}

<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent">

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{{ table({
responsive: true,
panel: false,
caption: "Ibuprofen syrup dosages for children",
firstCellIsHeader: false,
head: [
{
text: "Age"
},
{
text: "How much?"
},
{
text: "How often?"
}
],
rows: [
[
{
header: "Age",
text: "3 to 5 months (weighing more than 5kg)"
},
{
header: "How much?",
text: "2.5ml"
},
{
header: "How often?",
text: "Max 3 times in 24 hours"
}
],
[
{
header: "Age",
text: "6 to 11 months"
},
{
header: "How much?",
text: "2.5l"
},
{
header: "How often?",
text: "Max 3 to 4 times in 24 hours"
}
],
[
{
header: "Age",
text: "1 to 3 years"
},
{
header: "How much?",
text: "5ml"
},
{
header: "How often?",
text: "Max 3 times in 24 hours"
}
],
[
{
header: "Age",
text: "4 to 6 years"
},
{
header: "How much?",
text: "7.5ml"
},
{
header: "How often?",
text: "Max 3 times in 24 hours"
}
],
[
{
header: "Age",
text: "7 to 9 years"
},
{
header: "How much?",
text: "10ml"
},
{
header: "How often?",
text: "Max 3 times in 24 hours"
}
],
[
{
header: "Age",
text: "10 to 11 years"
},
{
header: "How much?",
text: "15ml"
},
{
header: "How often?",
text: "Max 3 times in 24 hours"
}
],
[
{
header: "Age",
text: "12 to 17 years"
},
{
header: "How much?",
text: "15ml to 20ml"
},
{
header: "How often?",
text: "Max 3 to 4 times in 24 hours"
}
]
]
}) }}
</div>
</div>

</main>
</div>

{% endblock %}
1 change: 1 addition & 0 deletions app/components/tables/tables-panel.njk
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
panel: true,
heading: "Conditions similar to impetigo",
caption: "Other possible causes of your symptoms",
captionClasses: "nhsuk-u-visually-hidden",
firstCellIsHeader: false,
head: [
{
Expand Down
1 change: 1 addition & 0 deletions app/pages/examples.njk
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@
<li><a href="../components/summary-list/without-actions.html">Summary list without actions</a></li>
<li><a href="../components/summary-list/without-border.html">Summary list without border</a></li>
<li><a href="../components/tables/index.html">Table</a></li>
<li><a href="../components/tables/responsive-table.html">Responsive table</a></li>
<li><a href="../components/tables/tables-panel.html">Table as a panel</a></li>
<li><a href="../components/tag/index.html">Tag</a></li>
<li><a href="../components/textarea/index.html">Textarea</a></li>
Expand Down
37 changes: 19 additions & 18 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nhsuk-frontend",
"version": "3.1.1",
"version": "4.0.0",
"description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
"scripts": {
"prepare": "gulp bundle",
Expand Down Expand Up @@ -28,14 +28,14 @@
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"backstopjs": "^5.0.4",
"eslint": "^7.8.1",
"backstopjs": "^5.0.6",
"eslint": "^7.9.0",
"eslint-config-nhsuk": "^1.0.0",
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.3.0",
"gulp-connect": "^5.7.0",
"gulp-nunjucks": "^5.0.1",
"gulp-nunjucks": "^5.0.2",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.2",
Expand Down
Loading

0 comments on commit dff98b7

Please sign in to comment.