Review/1 release 7 0 0 (#2040)

* Add guidance for using heading classes and update examples

* Update changelog

* Update page template examples

* Make heading guidance firmer

* Update app/views/design-system/styles/page-template/index.njk

Co-authored-by: Frankie Roberto <[email protected]>

* Fix typo

* Update app/views/design-system/styles/page-template/index.njk

Co-authored-by: Frankie Roberto <[email protected]>

* Update app/views/design-system/styles/page-template/index.njk

Co-authored-by: Sara Wilcox <[email protected]>

* Update transactional content

* Further content tweaks

* Remove commented out content

* fix changelog from merge

* changelog tweak

* remove dots in class code snippets

* Remove outerContent, keeping only beforeContent. fixes #2023

* swap order of content page template nunjucks blocks, for a more logical order

* Change email and add content updates

* Tweak content re age

* Tweak content and update changelog

* Tweak age and A to Z pages

* macro options for dateInput values, fixes #2028

* nunjucks macro ioptions updated for captionClasses in table component, fixes: #2018

* update font sizes to align with updated type scale in frontend release. Fixes: #2017

* Update page about NHS service standard - request from DHSC team

* Delete outdated references to NHSX

* Merge outerContent and beforeContent blocks

This merges these two blocks into a single one named `beforeContent`, which appears within the `<div class="nhsuk-width-container">` container but before the `<main>` tag.

This should be used for components like the breadcrumb or back link, or any other component which should be within the same width as the rest of the page, but be skipped by the "skip to main content" link, not included when printing the page, and generally not considered part of the main content of the page.

* Remove default margin from back links

This is no longer be needed as the back link contains its own default margins.

* Update back link position guidance

This updates the back link guidance to recommend that generally the back link should appear at the top-left of the page.

It also explicitly says that it should appear before the `<main>` tag in the HTML so that the skip link will skip past it.

Previously the guidance here suggested that some services included the back link at the bottom of the content. However both of the services mentioned seem to have since moved their back link to the top-left.

* udpdate whats new, mention page options updated

* update whats new mention back link and breadcrumbs updated

* changelog

* Update app/views/design-system/components/back-link/index.njk

Co-authored-by: Sara Wilcox <[email protected]>

* Delete back link content, update What's new, amend page dates

* Tweak wording

* update whats new to mention breadcrumbs position

* changelog tweaks

* update version numbers

* add macros to nunjucks config

* update breadscrumbs and heading captions for nhsuk-frontend 9.0.0

* update nunjucks guidance

* wording tweak for macros update content

---------

Co-authored-by: Ed Horsford <[email protected]>
Co-authored-by: Frankie Roberto <[email protected]>
Co-authored-by: Sara Wilcox <[email protected]>
Co-authored-by: Ananda Maryon <[email protected]>
Co-authored-by: Sara Wilcox <[email protected]>
Co-authored-by: Ananda Maryon <[email protected]>

CHANGELOG.md

@@ -1,5 +1,27 @@
 # NHS digital service manual Changelog
 
+## 7.0.0 - 19 September 2024
+
+:new: **New features**
+- Add entries on Down's syndrome, fit note and period products to the A to Z of NHS health writing
+- Add guidance for heading classes
+– Add classes to style table captions similar to headings, detailed in Nunjucks macro option `captionClasses`
+
+:wrench: **Maintenance**
+- Update page template examples to make the default example size `l` and inside the grid system
+- Update page template Nunjucks options, to remove `outerContent` block
+- Make our guidance on age clearer
+- Update entries on fetus, microgram and NHS in the A to Z
+- Update links guidance to recommend avoiding "see"
+- Update content section on capitalisation to mention geographical names
+- Update service manual team page and email address
+- Update page about the NHS service standard
+- Delete outdated references to NHSX
+- Update Nunjucks macro options for date input component, adding values for day, month and year
+- Update type scale to increase font size of `m` and `l` headings, updates font size overrides to align with new sizes
+- Improve spacing around the back links and breadcrumbs components
+- Update guidance on back links to recommend putting them top of page
+
 ## 6.5.0 - 31 July 2024
 
 :new: **New features**

README.md

@@ -78,7 +78,7 @@ Code analysis results can be found in [SonarQube](https://sonar.nhswebsite.nhs.u
 
 ## Get in touch
 
-The NHS digital service manual is maintained by NHS Digital. [Email the service manual team](mailto:[email protected]), open a [GitHub issue](https://github.com/nhsuk/nhsuk-service-manual/issues/new) or get in touch on the [NHS digital service manual Slack workspace](https://service-manual.nhs.uk/slack).
+The NHS digital service manual is maintained by NHS Digital. [Email the service manual team](mailto:england.[email protected]), open a [GitHub issue](https://github.com/nhsuk/nhsuk-service-manual/issues/new) or get in touch on the [NHS digital service manual Slack workspace](https://service-manual.nhs.uk/slack).
 
 ## Licence
 

app.js

@@ -53,6 +53,7 @@ app.set('view engine', 'njk');
 const appViews = [
   path.join(__dirname, '/app/views/'),
   path.join(__dirname, '/node_modules/nhsuk-frontend/packages/components'),
+  path.join(__dirname, '/node_modules/nhsuk-frontend/packages/macros'),
 ];
 
 const env = nunjucks.configure(appViews, {

app/views/accessibility-statement.njk

@@ -9,6 +9,6 @@
   <p>We've designed our pages to meet the Web Content Accessibility Guidelines to level AA - and in some cases AAA - and we've tested them with users with access needs.</p>
 
   <h2>How to contact us</h2>
-  <p>If you have any questions about accessibility, please email us at <a href="mailto:[email protected]">[email protected]</a>. We will respond within 5 working days.</p>
+  <p>If you have any questions about accessibility, please email us at <a href="mailto:england.[email protected]">england.[email protected]</a>. We will respond within 5 working days.</p>
 
 {% endblock %}

app/views/accessibility/content.njk

@@ -3,7 +3,7 @@
 {% set subSection = "Accessibility" %}
 {% set pageDescription = "What content designers, writers and editors need to do to make digital services accessible." %}
 {% set theme = "Accessibility guidance for:" %}
-{% set dateUpdated = "July 2024" %}
+{% set dateUpdated = "September 2024" %}
 {% set backlog_issue_id = "347" %}
 
 {% extends "includes/app-layout.njk" %}

app/views/accessibility/design.njk

@@ -3,7 +3,7 @@
 {% set subSection = "Accessibility" %}
 {% set pageDescription = "What graphic and interaction designers need to do to make digital services accessible." %}
 {% set theme = "Accessibility guidance for:" %}
-{% set dateUpdated = "July 2024" %}
+{% set dateUpdated = "September 2024" %}
 {% set backlog_issue_id = "349" %}
 
 {% extends "includes/app-layout.njk" %}

app/views/accessibility/partials/get-in-touch-accessibility.njk

@@ -1,4 +1,4 @@
 <div class="nhsuk-panel">
   <h2>Get in touch</h2>
-  <p>Join us on the <a href="/slack">NHS digital service manual Slack workspace</a> or email the standards team at <a href="mailto:[email protected]">[email protected]</a>.</p>
+  <p>Join us on the <a href="/slack">NHS digital service manual Slack workspace</a> or email the service manual team at <a href="mailto:england.[email protected]">england.[email protected]</a>.</p>
 </div>

app/views/accessibility/partials/write-good-link-and-form-control-names.njk

@@ -5,7 +5,8 @@
       <li>Each link should clearly describe where it will take you. For example: "Find your nearest A&amp;E".</li>
       <li>Ideally link text should match the heading of the target page. If the target page has the heading "Sleep and tiredness", that's good link text.</li>
       <li>If the target page heading is too long, shorten it but use words from it so that users can predict where the link will take them.</li>
-      <li>Avoid ambiguous phrases such as "click here", "read more" and "find out more". It's OK to say: "Read more about <u>how to deal with stress</u>."</li>
+      <li>Avoid ambiguous phrases such as "click here" or "read more". Be specific, for example: "Learn more about <u>how to deal with stress</u>."</li>
+      <li>Avoid "see" or "read". Instead we use "find out about" or "learn about".</li>
       <li>Avoid having links or buttons open new tabs or windows. Find out more on our <a href="/content/links">Links page</a>.</li>
       <li>If the link goes to a document, include the file type and size in the link phrase. For example: "Link name (PDF, 200KB)".</li>
     </ul>

app/views/accessibility/testing.njk

@@ -3,7 +3,7 @@
 {% set subSection = "Accessibility" %}
 {% set pageDescription = "What testers and quality assurers need to do to make digital services accessible." %}
 {% set theme = "Accessibility guidance for:" %}
-{% set dateUpdated = "July 2024" %}
+{% set dateUpdated = "September 2024" %}
 {% set backlog_issue_id = "350" %}
 
 {% extends "includes/app-layout.njk" %}

app/views/community-and-contribution/develop-component-pattern.njk

@@ -15,7 +15,7 @@
   <h3>1. Sign up to work on a thing in the backlog</h3>
   <ul>
     <li>Anyone can work on items marked as "To do" in the <a href="https://github.com/nhsuk/nhsuk-service-manual-backlog">community backlog</a>.</li>
-    <li>If you see something you'd like to work on, email the team at <a href="mailto:[email protected]">[email protected]</a>.</li>
+    <li>If you see something you'd like to work on, email the team at <a href="mailto:england.[email protected]">england.[email protected]</a>.</li>
     <li>If you have an idea for something that's not in the backlog, you can <a href="/community-and-contribution/propose-component-pattern">propose it</a>.</li>
   </ul>
 
@@ -28,7 +28,7 @@
 
   <h3>3. Research and develop your contribution</h3>
   <ul>
-    <li>While you're working on your contribution, you can contact the <a href="mailto:[email protected]">service manual team</a> if you need any help.</li>
+    <li>While you're working on your contribution, you can contact the service manual team at <a href="mailto:england.[email protected]">england.service-manual@nhs.net</a> if you need any help.</li>
   </ul>
 
   <h3>4. Send your contribution for review</h3>

app/views/content/a-to-z-of-nhs-health-writing.njk

@@ -1,7 +1,7 @@
 {% set pageTitle = "A to Z of NHS health writing" %}
 {% set pageSection = "Content guide" %}
 {% set pageDescription = "Words and phrases we use to make our content about health and the NHS easy to understand." %}
-{% set dateUpdated = "March 2024" %}
+{% set dateUpdated = "September 2024" %}
 {% set backlog_issue_id = "318" %}
 
 {% block extraMeta %}
@@ -363,6 +363,8 @@
       <p>We use "Don't" in headings for <a href="/design-system/components/do-and-dont-lists">Do and Don't lists</a>. But we use "do not" for the commands in the list.</p>
       <h3 id="dosage">dosage</h3>
       <p>See <a href="/content/numbers-measurements-dates-time#dosage">dosage on our Numbers, measurements, dates and time page</a>.</p>
+      <h3 id="Downs-syndrome">Down's syndrome</h3>
+      <p>We use Down's syndrome.</p>
       <h3 id="drowsy">drowsy</h3>
       <p>Generally, we prefer the word "sleepy" to "drowsy" as people are more likely to search for "sleepy". But "drowsy" may be better if you're writing about feeling unusually sleepy in the daytime, particularly in the context of medicines.</p>
       <p>In information about medicines, for example antihistamines, we prefer the terms:</p>
@@ -416,11 +418,21 @@
       <h3 id="fart">fart</h3>
       <p>We use "fart" and "farting" when we're talking about symptoms. People understand "fart" better than "passing wind" or "<a href="#flatulence">flatulence</a>".</p>
       <p>We use "<a href="#wind">wind</a>" for "trapped wind" or bloating.</p>
+      <h3 id="fetus">fetus</h3>
+      <p>We spell "fetus" and "fetal" without an "o".</p>
+      <p>We do not commonly use "fetus", except in the names of conditions like "fetal alcohol syndrome". We prefer "pregnancy".</p>
       <h3 id="fever">fever</h3>
       <p>We prefer the words "high <a href="#temperature">temperature</a>" to "fever", for example in a list of symptoms. Our user research shows that "fever" is not a well understood word.</p>
       <p>But we still use it when we're writing specifically about fever or different types of fever (such as scarlet fever).</p>
       <h3 id="fit">fit</h3>
       <p>See <a href="#seizure-or-fit">seizure or fit</a>.</p>
+      <h3 id="fit-note">fit note</h3>
+      <p>Use "fit note (sick note)" at first mention, then use "fit note".</p>
+      <p>Or, if your users need more information, explain it in a sentence.</p>
+      <div class="app-example app-example--content">
+        <strong class="nhsuk-tag app-example__heading">Example</strong>
+        <p>If you are unwell and cannot work, you may need a fit note (sometimes called a sick note) for your employer.</p>
+      </div>
       <h3 id="flatulence">flatulence</h3>
       <p>We prefer "<a href="#fart">farting</a>" to "flatulence".</p>
       <p>We only use "flatulence" when we need to for clinical content (for example, in a health information page about flatulence). We explain that flatulence is the same as <a href="#wind">wind</a> or farting.</p>
@@ -431,7 +443,7 @@
       <p>People who are looking for information about flu vaccination in pregnancy search for "jab".</p>
       <p>For the annual flu vaccination programme, we use the term "flu vaccine" as that covers children and adults.</p>
       <h3 id="foetus">foetus</h3>
-      <p>We do not commonly use "foetus", except in the names of conditions like "foetal alcohol syndrome". We prefer "<a href="#baby">baby</a>".</p>
+      <p>Use <a href="#fetus">fetus</a>.</p>
       <h3 id="food-pipe">food pipe</h3>
       <p>We use "food pipe", not "gullet".</p>
       <h3 id="foot-and-mouth-disease">foot and mouth disease</h3>
@@ -529,6 +541,8 @@
       <p>A home help helps with domestic tasks like cleaning and doing the laundry. Compare this with a "<a href="#carer">carer</a>".</p>
       <h3 id="homeless">homeless</h3>
       <p>We do not say "the homeless" or "homeless people". We prefer to talk about "people who are homeless".</p>
+      <h3 id="hygiene-products">hygiene products</h3>
+      <p>See "<a href="#period-products">period products</a>".</p>
       <h3 id="hyphens">hyphens</h3>
       <p>See the guidance on <a href="/content/formatting-and-punctuation#hyphens-and-dashes">hyphens and dashes on the Formatting and punctuation page</a>.</p>
       <a class="nhsuk-back-to-top__link" href="#nhsuk-a-z-list">
@@ -635,10 +649,11 @@
       <h3 id="metric-measurements">metric measurements</h3>
       <p>See the guidance on <a href="/content/numbers-measurements-dates-time#metric-and-imperial">metric and imperial measurements on the Numbers, measurements, dates and time page</a>.</p>
       <h3 id="microgram">microgram</h3>
-      <p>Write "microgram" in full. Do not shorten it to "mcg".</p>
-      <p>It helps to explain that a microgram is 1,000 times smaller than a milligram (mg).</p>
-      <p>We only use the microgram symbol (μg) if people will find it helpful, for example, if they will see it on their medicines or vitamins packet. In cases like these, we add the following when we first mention micrograms: "The word microgram is sometimes written with the Greek symbol μ followed by the letter g (μg)." We explain that it's a Greek symbol so that people who use screen readers understand it when they hear an unexpected sound.</p>
-      <p>We do not use μg as an abbreviation in text that follows.</p>
+      <p>Write "microgram" in full.</p>
+      <p>We only shorten microgram to mcg or μg if people will find that helpful, for example, if they will see it on their medicines or vitamins packet. In cases like these, we add the following when we first mention micrograms:</p>
+      <p>"The word microgram is sometimes written as mcg or with the symbol μ followed by the letter g (μg)."</p>
+      <p>We explain that it's a symbol so that people who use screen readers understand it when they hear an unexpected sound.</p>
+      <p>We do not use mcg or μg as an abbreviation in text that follows.</p>
       <h3 id="milk">milk</h3>
       <p>In "cows' milk" and "goats' milk", the apostrophe comes after the "s".</p>
       <p>In "sheep's milk", the apostrophe comes before the "s", because "sheep" is plural.</p>
@@ -668,7 +683,11 @@
       <p>If you have to use "negative", because this is the word people will hear when they get their test results, explain what it means. Negative means the test did not find what it was looking for.</p>
       <h3 id="NHS">NHS</h3>
       <p>We do not usually spell out "National Health Service". It's fine to use the abbreviation.</p>
-      <p>We refer to it as "the NHS", unless we're using NHS as an adjective, for example "NHS services".</p>
+      <p>We refer to it as "the NHS", unless we're using NHS as an adjective, for example:</p>
+      <ul>
+        <li>"an NHS appointment"</li>
+        <li>"NHS services"</li>
+      </ul>
       <h3 id="NHS-111-online">NHS 111 online</h3>
       <p>On the NHS website and in national digital services, say "Go to <a href="https://111.nhs.uk">NHS 111 online</a> or call 111" if it's a call to action. Include the word "NHS" and give "online" a small "o". Shorten it to "111 online" if you mention it more than once on a page.</p>
       <p>On non-NHS services, always use "NHS 111 online".</p>
@@ -799,6 +818,8 @@
       <p>Do not use "perinatal". In our user research, most people did not use the term "perinatal". Instead, they refer to "pregnancy" and the stage of their pregnancy.</p>
       <p>If you need to use "perinatal" because users will come across the word, explain what it means, depending on the content. In most cases, it means the time you are pregnant and up to 12 months after giving birth.</p>
       <p>Perinatal mental health teams also offer support to people with mental health problems when they are planning to get pregnant.</p>
+      <h3 id="period-products">period products</h3>
+      <p>Do not use "sanitary products" or "hygiene products". You could use "period products" or specify the products you mean.</p>
       <h3 id="persist">persist</h3>
       <p>We use "carry on" or "keep going".</p>
       <h3 id="personal-child-health-record-(red-book)">personal child health record (red book)</h3>
@@ -929,6 +950,8 @@
       <p>It's hard to know what is really "safe" so we talk about "safer sex" or "safer drinking". That suggests that people can lower but not necessarily get rid of the risk altogether.</p>
       <h3 id="safety-precaution">safety precaution</h3>
       <p>We say "for safety".</p>
+      <h3 id="sanitary-products">sanitary products</h3>
+      <p>See "<a href="#period-products">period products</a>".</p>
       <h3 id="secure-message">secure message</h3>
       <p>We've found that people do not understand "secure message". Also, the word "secure" makes some users question security.</p>
       <p>Instead, make it clear how people will get a message. Use the words "text" or "email" or, for example, "messages through the NHS App".</p>
@@ -959,6 +982,8 @@
       <p>We use "being sick" instead of "vomiting". Again, you may want to put "vomiting" in brackets afterwards: being sick (vomiting).</p>
       <p>We use "vomiting" in phrases like "vomiting blood".</p>
       <p>We use "vomit" as the noun. For example, "blood in your vomit".</p>
+      <h3 id="sick-note">sick note</h3>
+      <p>See "<a href="#fit-note">fit note</a>".</p>
       <h3 id="side-effects">side effects</h3>
       <p>Two words.</p>
       <p>We say that people may "get" or "have" side effects, not "develop" or "experience" them.</p>

app/views/content/formatting-and-punctuation.njk

@@ -1,7 +1,7 @@
 {% set pageTitle = "Formatting and punctuation" %}
 {% set pageSection = "Content guide" %}
 {% set pageDescription = "Abbreviations, acronyms, capitalisation and other content styles." %}
-{% set dateUpdated = "August 2023" %}
+{% set dateUpdated = "September 2024" %}
 {% set backlog_issue_id = "322" %}
 
 {% extends "includes/app-layout.njk" %}
@@ -136,9 +136,7 @@
     <li>Codeine comes mixed with paracetamol (co-codamol) or with aspirin (co-codaprin) or with ibuprofen (Nurofen Plus).</li>
     <li>Watch these <a href="https://www.healthtalk.org/">healthtalk.org</a> videos.</li>
   </ul>
-  <p>Conditions are lower case except where they start with a proper name.</p>
-
-  <p>Examples:</p>
+  <p>Conditions are lower case except where they start with a proper name. For example:</p>
   <ul>
     <li>Alzheimer's disease</li>
     <li>cancer of the colon</li>
@@ -150,6 +148,12 @@
 
   <p>But note: caesarean section.</p>
 
+  <p>Do not use capital letters in phrases that refer to a geographical area but are now part of everyday speech. For example:</p> 
+  <ul>
+    <li>cheddar cheese</li>
+    <li>french fries</li>
+    <li>rubella (german measles)</li>
+  </ul>
   <p>Also see the entries for "<a href="/content/a-to-z-of-nhs-health-writing#Black-or-black">Black or black</a>" and "<a href="/content/a-to-z-of-nhs-health-writing#White-or-white">White or white</a>" in the A to Z of NHS health writing.</p>
 
   <h2 id="contractions">Contractions</h2>