Merge branch 'main' into update-changelog-with-breaking-change-notes

nhsuk · Sep 17, 2024 · 779015b · 779015b
2 parents 4c57898 + fb48afc
commit 779015b
Show file tree

Hide file tree

Showing 191 changed files with 133 additions and 150 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -42,14 +42,20 @@ You should have this:
 </div>
 ```
 
-The back link should also be placed within the `<div class="nhsuk-width-container">` container but before the `<main>` tag, as before.
+The back link should also be placed within the `<div class="nhsuk-width-container">` container but before the `<main>` tag. Previous guidance suggested placing at the bottom of the page, but this has been updated to recommend placing it at the top.
 
 The back link now contains some default margin above it, so you can remove any override classes you added previously, such as `nhsuk-u-margin-top-4`. However you can still include override classes if you want more or less spacing than the default.
 
-:wrench: **Fixes**
+:recycle: **Changes**
 
+- Large headings, legends and labels updated to use 36px rather than 32px. ([PR 989](https://github.com/nhsuk/nhsuk-frontend/pull/989))
+- Medium headings, legends and labels updated to use 26px rather than 24px. ([Issue 445](https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/445))
+- Add sizing classes for table caption
+- Reduce heading caption sizes
+- Adjust print styles, making headings and body type smaller
 - Fix Sass deprecation on `mix` function (passing a number without unit) ([PR 995](https://github.com/nhsuk/nhsuk-frontend/pull/995))
 - Add nhsukAttributes macro, copied from GOV.UK ([PR 998](https://github.com/nhsuk/nhsuk-frontend/pull/998))
+- Hide header's navigation links on print ([PR 1001](https://github.com/nhsuk/nhsuk-frontend/pull/1001))
 - Fix missing classes option for summary list rows ([PR 1007](https://github.com/nhsuk/nhsuk-frontend/pull/1007))
 - Add support for inline conditions on summary list rows ([PR 1008](https://github.com/nhsuk/nhsuk-frontend/pull/1008))
 - Change "Contact us" in the footer link examples to "Give us feedback" ([PR 972](https://github.com/nhsuk/nhsuk-frontend/pull/972))

diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -131,11 +131,7 @@
     <li><a href="../components/warning-callout/index.html">Warning callout</a></li>
     <li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
   </ul>
-
-  <h2>Styles</h2>
-  <ul class="nhsuk-list">
-    <li><a href="../styles/lists.html">Lists</a></li>
-  </ul>
+
 {% endblock %}
 
 {% block footer %}

diff --git a/app/styles/lists.njk b/app/styles/lists.njk
diff --git a/packages/components/action-link/_action-link.scss b/packages/components/action-link/_action-link.scss
@@ -62,14 +62,14 @@
     height: 36px;
     left: -3px;
     position: absolute;
-    top: -2px;
+    top: -3px;
     width: 36px;
 
     @include mq($until: tablet) {
       height: 24px;
       left: -2px;
       margin-bottom: 0;
-      top: 2px;
+      top: 1px;
       width: 24px;
     }
   }

diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss
@@ -181,7 +181,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
 }
 
 .nhsuk-card--care__heading {
-  @include nhsuk-font(24, $weight: bold);
+  @include nhsuk-font(26, $weight: bold);
   @include print-color($nhsuk-print-text-color);
 
   margin: 0;

diff --git a/packages/components/error-summary/_error-summary.scss b/packages/components/error-summary/_error-summary.scss
@@ -31,7 +31,7 @@
 }
 
 .nhsuk-error-summary__title {
-  @include nhsuk-font(24, $weight: bold);
+  @include nhsuk-font(26, $weight: bold);
 
   margin-top: 0;
   @include nhsuk-responsive-margin(4, "bottom");

diff --git a/packages/components/fieldset/_fieldset.scss b/packages/components/fieldset/_fieldset.scss
@@ -40,12 +40,12 @@
 }
 
 .nhsuk-fieldset__legend--l {
-  @include nhsuk-font($size: 32, $weight: bold);
+  @include nhsuk-font($size: 36, $weight: bold);
   margin-bottom: nhsuk-spacing(3);
 }
 
 .nhsuk-fieldset__legend--m {
-  @include nhsuk-font($size: 24, $weight: bold);
+  @include nhsuk-font($size: 26, $weight: bold);
   margin-bottom: nhsuk-spacing(3);
 }
 

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -485,6 +485,7 @@
 }
 
 .nhsuk-navigation-container {
+  @include print-hide();
   position: relative;
 }
 

diff --git a/packages/components/label/_label.scss b/packages/components/label/_label.scss
@@ -23,11 +23,11 @@
 }
 
 .nhsuk-label--l {
-  @include nhsuk-typography-responsive(32);
+  @include nhsuk-typography-responsive(36);
 }
 
 .nhsuk-label--m {
-  @include nhsuk-typography-responsive(24);
+  @include nhsuk-typography-responsive(26);
 }
 
 .nhsuk-label--s {

diff --git a/packages/components/tables/README.md b/packages/components/tables/README.md
@@ -321,7 +321,7 @@ The table Nunjucks macro takes the following arguments:
 | **tableClasses**                   | string  | No       | Optional additional classes to add to the table. Separate each class with a space.                                                            |
 | **attributes**                     | object  | No       | Any extra HTML attributes (for example data attributes) to add to the table.                                                                  |
 | **caption**                        | string  | No       | Optional caption for the table.                                                                                                               |
-| **captionClasses**                 | string  | No       | Optional additional classes to add to the table caption. Separate each class with a space.                                                    |
+| **captionClasses**                 | string  | No       | Optional additional classes to add to the table caption, for example `nhsuk-table__caption--l`. Separate each class with a space.             |
 | **head**                           | array   | No       | Optional array of table head cells.                                                                                                           |
 | **head.[].text or head.[].html**   | array   | No       | Optional array of table head cells. If `html` is specified, the `text` argument will be ignored.                                              |
 | **head.[].colspan**                | number  | No       | Specify how many columns a cell extends.                                                                                                      |

diff --git a/packages/components/tables/_tables.scss b/packages/components/tables/_tables.scss
@@ -6,6 +6,7 @@
  * Table container is used to ensure the table does not break the container.
  *
  * 1. Margin is removed so there isn't double spacing.
+ * 2. XS size not added because it matches the table header, so it'd be bad for hierarchy
  */
 
 .nhsuk-table-container {
@@ -22,6 +23,24 @@
   }
 }
 
+.nhsuk-table__caption--xl {
+  @include nhsuk-typography-responsive(48);
+}
+
+.nhsuk-table__caption--l {
+  @include nhsuk-typography-responsive(36);
+}
+
+.nhsuk-table__caption--m {
+  @include nhsuk-typography-responsive(26);
+}
+
+.nhsuk-table__caption--s {
+  @include nhsuk-typography-responsive(22);
+}
+
+/* [2] */
+
 /* Table row hover
 ========================================================================== */
 

diff --git a/packages/core/elements/_links.scss b/packages/core/elements/_links.scss
@@ -19,7 +19,7 @@ a {
     &:after {
       color: $color_nhsuk-black;
       content: " (Link: " attr(href) ")"; /* [1] */
-      font-size: 14pt; /* [2] */
+      font-size: inherit; /* [2] */
     }
   }
 }

diff --git a/packages/core/settings/_typography.scss b/packages/core/settings/_typography.scss
@@ -32,43 +32,57 @@ $nhsuk-typography-scale: (
   64: (
     null: (
       font-size: 48px,
-      line-height: 56px
+      line-height: 54px
     ),
     tablet: (
       font-size: 64px,
-      line-height: 72px
+      line-height: 70px
     ),
     print: (
-      font-size: 53pt,
+      font-size: 34pt,
       line-height: 1.1
     )
   ),
   48: (
     null: (
       font-size: 32px,
-      line-height: 40px
+      line-height: 38px
     ),
     tablet: (
       font-size: 48px,
-      line-height: 56px
+      line-height: 54px
     ),
     print: (
-      font-size: 32pt,
+      font-size: 26pt,
       line-height: 1.15
     )
   ),
-  32: (
+  36: (
     null: (
-      font-size: 24px,
-      line-height: 32px
+      font-size: 27px,
+      line-height: 33px
     ),
     tablet: (
-      font-size: 32px,
-      line-height: 40px
+      font-size: 36px,
+      line-height: 42px
     ),
     print: (
-      font-size: 24pt,
-      line-height: 1.05
+      font-size: 20pt,
+      line-height: 1.2
+    )
+  ),
+  26: (
+    null: (
+      font-size: 22px,
+      line-height: 29px
+    ),
+    tablet: (
+      font-size: 26px,
+      line-height: 32px
+    ),
+    print: (
+      font-size: 17pt,
+      line-height: 1.25
     )
   ),
   24: (
@@ -78,25 +92,25 @@ $nhsuk-typography-scale: (
     ),
     tablet: (
       font-size: 24px,
-      line-height: 32px
+      line-height: 31px
     ),
     print: (
-      font-size: 18pt,
-      line-height: 1.15
+      font-size: 16pt,
+      line-height: 1.25
     )
   ),
   22: (
     null: (
-      font-size: 18px,
-      line-height: 28px
+      font-size: 19px,
+      line-height: 27px
     ),
     tablet: (
       font-size: 22px,
-      line-height: 32px
+      line-height: 30px
     ),
     print: (
-      font-size: 18pt,
-      line-height: 1.15
+      font-size: 15pt,
+      line-height: 1.25
     )
   ),
   19: (
@@ -109,8 +123,8 @@ $nhsuk-typography-scale: (
       line-height: 28px
     ),
     print: (
-      font-size: 14pt,
-      line-height: 1.15
+      font-size: 13pt,
+      line-height: 1.25
     )
   ),
   16: (
@@ -123,8 +137,8 @@ $nhsuk-typography-scale: (
       line-height: 24px
     ),
     print: (
-      font-size: 14pt,
-      line-height: 1.2
+      font-size: 12pt,
+      line-height: 1.3
     )
   ),
   14: (
@@ -138,7 +152,7 @@ $nhsuk-typography-scale: (
     ),
     print: (
       font-size: 12pt,
-      line-height: 1.2
+      line-height: 1.3
     )
   )
 ) !default;