Skip to content

Commit

Permalink
Merge pull request #4630 from alphagov/complex-table-modifier
Browse files Browse the repository at this point in the history
Add a modifier for tables with lots of data
  • Loading branch information
owenatgov authored Jan 18, 2024
2 parents 07c7b1a + 30d1ce8 commit 95e7291
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 1 deletion.
10 changes: 10 additions & 0 deletions packages/govuk-frontend/src/govuk/components/table/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,16 @@
border-collapse: collapse;
}

// Modifier for tables with a lot of data. Tables with lots of data benefit
// from a smaller font size on small screens.
.govuk-table--small-text-until-tablet {
@include govuk-font-size($size: 16);

@include govuk-media-query($from: tablet) {
@include govuk-font-size($size: 19);
}
}

.govuk-table__header {
@include govuk-typography-weight-bold;
}
Expand Down
20 changes: 19 additions & 1 deletion packages/govuk-frontend/src/govuk/components/table/table.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,25 @@ examples:
format: numeric
- text: £125
format: numeric

- name: with small text modifier for tables with a lot of data
options:
classes: govuk-table--small-text-until-tablet
rows:
- - text: January
- text: £85
format: numeric
- text: £95
format: numeric
- - text: February
- text: £75
format: numeric
- text: £55
format: numeric
- - text: March
- text: £165
format: numeric
- text: £125
format: numeric
# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
- name: classes
hidden: true
Expand Down

0 comments on commit 95e7291

Please sign in to comment.