From 0d3e1bcb4e4936e3e2af8a8176126e1a538ce122 Mon Sep 17 00:00:00 2001 From: Roshaan Bajwa <119668404+roshaanbajwa@users.noreply.github.com> Date: Thu, 19 Sep 2024 16:42:22 +0100 Subject: [PATCH] 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 * Fix typo * Update app/views/design-system/styles/page-template/index.njk Co-authored-by: Frankie Roberto * Update app/views/design-system/styles/page-template/index.njk Co-authored-by: Sara Wilcox <45792959+sarawilcox@users.noreply.github.com> * 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 https://github.com/nhsuk/nhsuk-service-manual/issues/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 https://github.com/nhsuk/nhsuk-service-manual/issues/2028 * nunjucks macro ioptions updated for captionClasses in table component, fixes: https://github.com/nhsuk/nhsuk-service-manual/issues/2018 * update font sizes to align with updated type scale in frontend release. Fixes: https://github.com/nhsuk/nhsuk-service-manual/issues/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 `
` container but before the `
` 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 `
` 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 <45792959+sarawilcox@users.noreply.github.com> * 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 Co-authored-by: Frankie Roberto Co-authored-by: Sara Wilcox <45792959+sarawilcox@users.noreply.github.com> Co-authored-by: Ananda Maryon Co-authored-by: Sara Wilcox Co-authored-by: Ananda Maryon <159916913+anandamaryon1@users.noreply.github.com> --- CHANGELOG.md | 22 +++++++ README.md | 2 +- app.js | 1 + app/views/accessibility-statement.njk | 2 +- app/views/accessibility/content.njk | 2 +- app/views/accessibility/design.njk | 2 +- .../partials/get-in-touch-accessibility.njk | 2 +- ...write-good-link-and-form-control-names.njk | 3 +- app/views/accessibility/testing.njk | 2 +- .../develop-component-pattern.njk | 4 +- .../content/a-to-z-of-nhs-health-writing.njk | 39 +++++++++-- .../content/formatting-and-punctuation.njk | 12 ++-- app/views/content/inclusive-content/age.njk | 48 +++++++++++--- app/views/content/index.njk | 2 +- app/views/content/links.njk | 9 ++- .../components/back-link/index.njk | 16 ++--- .../components/date-input/macro-options.json | 24 +++++++ .../error-summary-placement-input/index.njk | 3 +- .../index.njk | 3 +- .../error-summary-placement/index.njk | 3 +- .../error-summary/placement-input/index.njk | 3 +- .../placement-multiple/index.njk | 3 +- .../error-summary/placement/index.njk | 3 +- .../design-system/components/header/index.njk | 7 +- .../components/table/macro-options.json | 2 +- .../mini-hub/example-symptoms/index.njk | 2 +- .../patterns/mini-hub/example/index.njk | 2 +- .../patterns/start-page/example/index.njk | 4 +- app/views/design-system/production.njk | 2 +- .../styles/page-template/annotated/index.njk | 21 ++---- .../styles/page-template/content/index.njk | 36 +++++----- .../styles/page-template/default/index.njk | 8 ++- .../styles/page-template/index.njk | 51 ++++++-------- .../page-template/transactional/index.njk | 15 ++--- .../styles/typography/headings-l/index.njk | 5 ++ .../{headings => headings-xl}/index.njk | 0 .../design-system/styles/typography/index.njk | 31 ++++++++- .../styles/typography/sizes/index.njk | 4 +- app/views/get-in-touch.njk | 4 +- app/views/includes/app-layout.njk | 2 +- .../design-example-wrapper-full-layout.njk | 1 - app/views/includes/layout.njk | 17 +++-- app/views/includes/template.njk | 4 +- app/views/index.njk | 2 +- app/views/page-not-found.njk | 2 +- app/views/service-manual-team.njk | 14 ++-- .../about-the-service-standard.njk | 10 +-- ...nd-their-needs-context-health-and-care.njk | 2 +- ...make-sure-everyone-can-use-the-service.njk | 2 +- .../technology/NHS-login.njk | 2 +- .../technology/about-technology.njk | 2 +- .../personal-demographics-service-PDS.njk | 2 +- app/views/whats-new/index.njk | 66 +++++++++++++++---- app/views/whats-new/updates.njk | 64 ++++++++++++++++++ package-lock.json | 12 ++-- package.json | 4 +- 56 files changed, 413 insertions(+), 199 deletions(-) create mode 100644 app/views/design-system/styles/typography/headings-l/index.njk rename app/views/design-system/styles/typography/{headings => headings-xl}/index.njk (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index a123ef15e..8b4e3b8a9 100644 --- a/CHANGELOG.md +++ b/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** diff --git a/README.md b/README.md index 1c3ebc3a3..fec7fac6e 100755 --- a/README.md +++ b/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:service-manual@nhs.net), 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.service-manual@nhs.net), 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 diff --git a/app.js b/app.js index 5fc7f767a..cdb7162b8 100755 --- a/app.js +++ b/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, { diff --git a/app/views/accessibility-statement.njk b/app/views/accessibility-statement.njk index b3253b050..8b24869fd 100644 --- a/app/views/accessibility-statement.njk +++ b/app/views/accessibility-statement.njk @@ -9,6 +9,6 @@

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.

How to contact us

-

If you have any questions about accessibility, please email us at service-manual@nhs.net. We will respond within 5 working days.

+

If you have any questions about accessibility, please email us at england.service-manual@nhs.net. We will respond within 5 working days.

{% endblock %} diff --git a/app/views/accessibility/content.njk b/app/views/accessibility/content.njk index 7a363c76f..8da5f2bf4 100644 --- a/app/views/accessibility/content.njk +++ b/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" %} diff --git a/app/views/accessibility/design.njk b/app/views/accessibility/design.njk index b7167a163..2541df32d 100644 --- a/app/views/accessibility/design.njk +++ b/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" %} diff --git a/app/views/accessibility/partials/get-in-touch-accessibility.njk b/app/views/accessibility/partials/get-in-touch-accessibility.njk index d05d2308f..90c0ce3d9 100644 --- a/app/views/accessibility/partials/get-in-touch-accessibility.njk +++ b/app/views/accessibility/partials/get-in-touch-accessibility.njk @@ -1,4 +1,4 @@

Get in touch

-

Join us on the NHS digital service manual Slack workspace or email the standards team at service-manual@nhs.net.

+

Join us on the NHS digital service manual Slack workspace or email the service manual team at england.service-manual@nhs.net.

diff --git a/app/views/accessibility/partials/write-good-link-and-form-control-names.njk b/app/views/accessibility/partials/write-good-link-and-form-control-names.njk index 68099616d..2a60a3438 100644 --- a/app/views/accessibility/partials/write-good-link-and-form-control-names.njk +++ b/app/views/accessibility/partials/write-good-link-and-form-control-names.njk @@ -5,7 +5,8 @@
  • Each link should clearly describe where it will take you. For example: "Find your nearest A&E".
  • 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.
  • 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.
    • -
  • Avoid ambiguous phrases such as "click here", "read more" and "find out more". It's OK to say: "Read more about how to deal with stress."
    • +
  • Avoid ambiguous phrases such as "click here" or "read more". Be specific, for example: "Learn more about how to deal with stress."
    • +
  • Avoid "see" or "read". Instead we use "find out about" or "learn about".
  • Avoid having links or buttons open new tabs or windows. Find out more on our Links page.
  • If the link goes to a document, include the file type and size in the link phrase. For example: "Link name (PDF, 200KB)".
    • diff --git a/app/views/accessibility/testing.njk b/app/views/accessibility/testing.njk index 99ce1048f..35262ce41 100644 --- a/app/views/accessibility/testing.njk +++ b/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" %} diff --git a/app/views/community-and-contribution/develop-component-pattern.njk b/app/views/community-and-contribution/develop-component-pattern.njk index 1bcd0ca34..ef13a646a 100644 --- a/app/views/community-and-contribution/develop-component-pattern.njk +++ b/app/views/community-and-contribution/develop-component-pattern.njk @@ -15,7 +15,7 @@

    1. Sign up to work on a thing in the backlog

    @@ -28,7 +28,7 @@

    3. Research and develop your contribution

      -
    • While you're working on your contribution, you can contact the service manual team if you need any help.
      • +
    • While you're working on your contribution, you can contact the service manual team at england.service-manual@nhs.net if you need any help.

    4. Send your contribution for review

    diff --git a/app/views/content/a-to-z-of-nhs-health-writing.njk b/app/views/content/a-to-z-of-nhs-health-writing.njk index 2e8d29638..c29b8c890 100644 --- a/app/views/content/a-to-z-of-nhs-health-writing.njk +++ b/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 @@

    We use "Don't" in headings for Do and Don't lists. But we use "do not" for the commands in the list.

    dosage

    See dosage on our Numbers, measurements, dates and time page.

    +

    Down's syndrome

    +

    We use Down's syndrome.

    drowsy

    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.

    In information about medicines, for example antihistamines, we prefer the terms:

    @@ -416,11 +418,21 @@

    fart

    We use "fart" and "farting" when we're talking about symptoms. People understand "fart" better than "passing wind" or "flatulence".

    We use "wind" for "trapped wind" or bloating.

    +

    fetus

    +

    We spell "fetus" and "fetal" without an "o".

    +

    We do not commonly use "fetus", except in the names of conditions like "fetal alcohol syndrome". We prefer "pregnancy".

    fever

    We prefer the words "high temperature" to "fever", for example in a list of symptoms. Our user research shows that "fever" is not a well understood word.

    But we still use it when we're writing specifically about fever or different types of fever (such as scarlet fever).

    fit

    See seizure or fit.

    +

    fit note

    +

    Use "fit note (sick note)" at first mention, then use "fit note".

    +

    Or, if your users need more information, explain it in a sentence.

    +
    + Example +

    If you are unwell and cannot work, you may need a fit note (sometimes called a sick note) for your employer.

    +

    flatulence

    We prefer "farting" to "flatulence".

    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 wind or farting.

    @@ -431,7 +443,7 @@

    People who are looking for information about flu vaccination in pregnancy search for "jab".

    For the annual flu vaccination programme, we use the term "flu vaccine" as that covers children and adults.

    foetus

    -

    We do not commonly use "foetus", except in the names of conditions like "foetal alcohol syndrome". We prefer "baby".

    +

    Use fetus.

    food pipe

    We use "food pipe", not "gullet".

    foot and mouth disease

    @@ -529,6 +541,8 @@

    A home help helps with domestic tasks like cleaning and doing the laundry. Compare this with a "carer".

    homeless

    We do not say "the homeless" or "homeless people". We prefer to talk about "people who are homeless".

    +

    hygiene products

    +

    See "period products".

    hyphens

    See the guidance on hyphens and dashes on the Formatting and punctuation page.

    @@ -635,10 +649,11 @@

    metric measurements

    See the guidance on metric and imperial measurements on the Numbers, measurements, dates and time page.

    microgram

    -

    Write "microgram" in full. Do not shorten it to "mcg".

    -

    It helps to explain that a microgram is 1,000 times smaller than a milligram (mg).

    -

    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.

    -

    We do not use μg as an abbreviation in text that follows.

    +

    Write "microgram" in full.

    +

    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:

    +

    "The word microgram is sometimes written as mcg or with the symbol μ followed by the letter g (μg)."

    +

    We explain that it's a symbol so that people who use screen readers understand it when they hear an unexpected sound.

    +

    We do not use mcg or μg as an abbreviation in text that follows.

    milk

    In "cows' milk" and "goats' milk", the apostrophe comes after the "s".

    In "sheep's milk", the apostrophe comes before the "s", because "sheep" is plural.

    @@ -668,7 +683,11 @@

    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.

    NHS

    We do not usually spell out "National Health Service". It's fine to use the abbreviation.

    -

    We refer to it as "the NHS", unless we're using NHS as an adjective, for example "NHS services".

    +

    We refer to it as "the NHS", unless we're using NHS as an adjective, for example:

    +
      +
    • "an NHS appointment"
      • +
    • "NHS services"
      • +

    NHS 111 online

    On the NHS website and in national digital services, say "Go to NHS 111 online 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.

    On non-NHS services, always use "NHS 111 online".

    @@ -799,6 +818,8 @@

    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.

    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.

    Perinatal mental health teams also offer support to people with mental health problems when they are planning to get pregnant.

    +

    period products

    +

    Do not use "sanitary products" or "hygiene products". You could use "period products" or specify the products you mean.

    persist

    We use "carry on" or "keep going".

    personal child health record (red book)

    @@ -929,6 +950,8 @@

    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.

    safety precaution

    We say "for safety".

    +

    sanitary products

    +

    See "period products".

    secure message

    We've found that people do not understand "secure message". Also, the word "secure" makes some users question security.

    Instead, make it clear how people will get a message. Use the words "text" or "email" or, for example, "messages through the NHS App".

    @@ -959,6 +982,8 @@

    We use "being sick" instead of "vomiting". Again, you may want to put "vomiting" in brackets afterwards: being sick (vomiting).

    We use "vomiting" in phrases like "vomiting blood".

    We use "vomit" as the noun. For example, "blood in your vomit".

    +

    sick note

    +

    See "fit note".

    side effects

    Two words.

    We say that people may "get" or "have" side effects, not "develop" or "experience" them.

    diff --git a/app/views/content/formatting-and-punctuation.njk b/app/views/content/formatting-and-punctuation.njk index 3d719e9b8..e66bfb611 100644 --- a/app/views/content/formatting-and-punctuation.njk +++ b/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 @@
  • Codeine comes mixed with paracetamol (co-codamol) or with aspirin (co-codaprin) or with ibuprofen (Nurofen Plus).
  • Watch these healthtalk.org videos.
    • -

    Conditions are lower case except where they start with a proper name.

    - -

    Examples:

    +

    Conditions are lower case except where they start with a proper name. For example:

    • Alzheimer's disease
    • cancer of the colon
      • @@ -150,6 +148,12 @@

      But note: caesarean section.

      +

      Do not use capital letters in phrases that refer to a geographical area but are now part of everyday speech. For example:

      +
        +
      • cheddar cheese
        • +
      • french fries
        • +
      • rubella (german measles)
        • +

      Also see the entries for "Black or black" and "White or white" in the A to Z of NHS health writing.

      Contractions

      diff --git a/app/views/content/inclusive-content/age.njk b/app/views/content/inclusive-content/age.njk index 60448915c..a4425eb81 100644 --- a/app/views/content/inclusive-content/age.njk +++ b/app/views/content/inclusive-content/age.njk @@ -1,8 +1,8 @@ {% set pageTitle = "Age" %} {% set pageSection = "Content guide" %} -{% set pageDescription = "How to talk about different age groups and stages of life." %} +{% set pageDescription = "How to talk about stages of life and different age groups." %} {% set subSection = "Inclusive content" %} -{% set dateUpdated = "September 2021" %} +{% set dateUpdated = "September 2024" %} {% set backlog_issue_id = "142" %} {% extends "includes/app-layout.njk" %} @@ -13,27 +13,55 @@ {% block bodyContent %} -

      Only include age if it's relevant, for example, with vaccination, screening or testing programmes for particular age groups. An example of this is chlamydia testing as tests are free for under-25s.

      Stages of life

      Here are some of the terms we use for different stages of life with some guidance about the ages they relate to.

      -

      When you need to be more specific, for example if you're writing about medicines dosage, give the actual age. For example, "teenagers aged 16 and over".

      We use:

      • fertilised egg: from conception to 14 days
      • embryo: from 2 to 6 weeks
        • -
      • baby: during pregnancy, at birth and up to 1 year. (Read more about how we use "baby" in the A to Z of NHS health writing.)
        • +
      • baby: during pregnancy, at birth and up to 1 year (learn more about how we use "baby" in the A to Z of NHS health writing)
      • toddler: 1 to 3 years
      • child: 4 to 12 years
      • teenager: 13 to 19 years
      • young people: 16 to 24 years
        • -
      • adult: generally from age 18 but this may vary. Be specific, for example: "adults aged 19 to 64" +
      • adult: generally from 18 years but this may vary (see below)
      -

      Babies and toddlers

      -

      With babies and toddlers, we count their age in weeks up until 6 months, then months up until 2 years.

      +

      Writing about specific age groups

      +

      Only include age if it's relevant, for example:

      +
        +
      • with vaccination, screening or testing programmes for particular age groups
        • +
      • to take medicines
        • +
      +

      When you need to be specific, give the actual age. An example of this is chlamydia testing as tests are free for people aged 24 and under.

      +

      People over or under a specific age

      +

      When the exact age is important, do not write "adults over 50" or "teenagers under 18 years old". This can be confusing for people who are that specific age. Instead, make it clear who's included, for example:

      +
        +
      • "adults aged 50 and over"
        • +
      • "teenagers aged 17 and under"
        • +
      +

      Only use "over x" or "under x" in general contexts or where your source is not specific, for example: "this mostly affects people over 60".

      +

      "And" or "or"

      +

      If you're writing about groups of people in the 3rd person, you can use either "aged 18 and over" or "aged 18 or over".

      +

      However, if you're addressing individuals in the 2nd person, use "or". For example, "if you are aged 18 or over".

      + +

      People between 2 ages

      +

      Do not use dashes between ages. Use "aged 4 to 16 years", not "4 – 16 years". For example:

      +
        +
      • children aged 6 months to 4 years
        • +
      • children aged 12 to 15 years
        • +
      • adults aged 19 to 64
        • +
      +

      Whether to include "years"

      +

      For adults you can use just the number, or add "years". For example: "adults aged 18 and over" or "adults aged 18 years and over".

      +

      Keep it brief. "Adults aged 18 years old and over" is too long.

      +

      If you're writing about young children, include "years" to make it clear you are not referring to months.

      + +

      Babies and young children

      +

      With babies and young children, we count their age in weeks up until 6 months, then months up until 2 years.

      Our research shows that this is how people talk about their child's age. Healthcare professionals also use weeks and months in this way. It means we can be consistent and accurate when writing about a baby's milestones, vaccinations and development reviews.

      Older people

      -

      We prefer to specify ages: over-65s, over-75s, over-80s.

      -

      In some contexts, we use "older person" or "older people", for example, where a health condition might affect people in their 60s or in their 90s.​

      +

      We prefer to specify ages, for example: "adults aged 65 and over".

      +

      In some contexts, we use "older person" or "older people", for example, where the risk of getting a condition increases as you get older.​

      Example

      Anyone can have a fall, but older people are more vulnerable and likely to fall, especially if they have a long-term health condition.

      diff --git a/app/views/content/index.njk b/app/views/content/index.njk index 60d7f423e..791a45d81 100644 --- a/app/views/content/index.njk +++ b/app/views/content/index.njk @@ -11,7 +11,7 @@

      This guide is for anyone creating content for the NHS, to help make things clear and consistent across all of our services.

      It's meant as a guide, not a rulebook. You're welcome to adapt a style pattern if it does not meet your users' needs.

      Check the GOV.UK A to Z style guide and GOV.UK content design guide for any points of style that you do not find here.

      -

      If it's not there, talk to colleagues on the #content channel on the service manual public Slack or email the service manual team to see if anyone has any experience of or research insight into the issue.

      +

      If it's not there, talk to colleagues on the #content channel on the service manual public Slack or email the service manual team to see if anyone has any experience of or research insight into the issue.

      More about the way we work

      Listen to a BBC radio interview about content design and the NHS website.

      diff --git a/app/views/content/links.njk b/app/views/content/links.njk index 828c39102..dbfa178b8 100644 --- a/app/views/content/links.njk +++ b/app/views/content/links.njk @@ -1,7 +1,7 @@ {% set pageTitle = "Links" %} {% set pageSection = "Content guide" %} {% set pageDescription = "How to handle links, including links to PDFs" %} -{% set dateUpdated = "June 2024" %} +{% set dateUpdated = "September 2024" %} {% set backlog_issue_id = "324" %} {% extends "includes/app-layout.njk" %} @@ -46,7 +46,12 @@ ] ] }) }} - +

      Avoid using "see", "read" or "view" in link text. Consider using:

      +
        +
      • "Find out about ..."
        • +
      • "Find out more about ..."
        • +
      • "Learn about ..."
        • +

      Avoid opening new tabs or windows

      Avoid using links or buttons that open new tabs or windows.

      diff --git a/app/views/design-system/components/back-link/index.njk b/app/views/design-system/components/back-link/index.njk index d09535a4c..860592236 100644 --- a/app/views/design-system/components/back-link/index.njk +++ b/app/views/design-system/components/back-link/index.njk @@ -3,7 +3,7 @@ {% set subSection = "Components" %} {% set pageDescription = "Use back links to help users go back to the previous page in a multi-page transaction." %} {% set theme = "Navigation" %} -{% set dateUpdated = "April 2024" %} +{% set dateUpdated = "September 2024" %} {% set backlog_issue_id = "32" %} {% extends "includes/app-layout.njk" %} @@ -61,8 +61,9 @@ type: "default"

      Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern. This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant Entry (W3C).

      -

      Consider where you put the back link. Do not put it close to other links or buttons where it might distract users - from what they need to do. Also think about people who use a screen reader.

      +

      Generally, the back link should go at the top left of the page. Within the HTML it should appear before the <main> tag. This is so that skip link skips past the back link to the main content.

      + +

      If you put the back link in a different position, do not put it close to other links or buttons where it might distract users from what they need to do. Also think about people who use a screen reader: is the page read out in a logical order?

      Information: @@ -75,11 +76,6 @@ type: "default" href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">WCAG 2.2 success criterion 2.5.8 Target Size (W3C).

      -

      The GOV.UK design system says that you - should put back links at the top of a page, but a couple of NHS services (NHS 111 - online and Find out why your NHS data matters) found that - it works better at the bottom of the page below the primary action. That's because we don't want to suggest to people - who use a screen reader that they leave the page prematurely.

      You can render the back link as a button element if necessary in order to post form @@ -95,9 +91,5 @@ type: "button"

      Research

      During testing, NHS 111 online found that some users wanted to change their answers, so they introduced a back link and labelled it to "Change my previous answer".

      -

      An accessibility audit recommended that Find out why your NHS data matters place their back link below - the primary action, because screen reader users were confused when they landed on a page and were immediately told to - go back.

      {% endblock %} \ No newline at end of file diff --git a/app/views/design-system/components/date-input/macro-options.json b/app/views/design-system/components/date-input/macro-options.json index aeba2d3b0..647ac1d16 100644 --- a/app/views/design-system/components/date-input/macro-options.json +++ b/app/views/design-system/components/date-input/macro-options.json @@ -76,6 +76,30 @@ "type": "object", "required": false, "description": "HTML attributes (for example data attributes) to add to the date-input container." + }, + { + "name": "values", + "type": "object", + "required": false, + "description": "An optional object use to specify value attributes for the date parts without setting rows." + }, + { + "name": "values.day", + "type": "string", + "required": false, + "description": "Value attribute for the day input." + }, + { + "name": "values.month", + "type": "string", + "required": false, + "description": "Value attribute for the month input." + }, + { + "name": "values.year", + "type": "string", + "required": false, + "description": "Value attribute for the year input." } ] } diff --git a/app/views/design-system/components/error-message/error-summary-placement-input/index.njk b/app/views/design-system/components/error-message/error-summary-placement-input/index.njk index 678209c1b..f1571185e 100644 --- a/app/views/design-system/components/error-message/error-summary-placement-input/index.njk +++ b/app/views/design-system/components/error-message/error-summary-placement-input/index.njk @@ -8,8 +8,7 @@ {% block beforeContent %} {{ backLink({ href: "#", - text: "Go back", - classes: "nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-4" + text: "Go back" }) }} {% endblock %} diff --git a/app/views/design-system/components/error-message/error-summary-placement-multiple/index.njk b/app/views/design-system/components/error-message/error-summary-placement-multiple/index.njk index fd6a22c3d..6e0bae5ac 100644 --- a/app/views/design-system/components/error-message/error-summary-placement-multiple/index.njk +++ b/app/views/design-system/components/error-message/error-summary-placement-multiple/index.njk @@ -8,8 +8,7 @@ {% block beforeContent %} {{ backLink({ href: "#", - text: "Go back", - classes: "nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-4" + text: "Go back" }) }} {% endblock %} diff --git a/app/views/design-system/components/error-message/error-summary-placement/index.njk b/app/views/design-system/components/error-message/error-summary-placement/index.njk index c0bcb6767..fca2c231b 100644 --- a/app/views/design-system/components/error-message/error-summary-placement/index.njk +++ b/app/views/design-system/components/error-message/error-summary-placement/index.njk @@ -8,8 +8,7 @@ {% block beforeContent %} {{ backLink({ href: "#", - text: "Go back", - classes: "nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-4" + text: "Go back" }) }} {% endblock %} diff --git a/app/views/design-system/components/error-summary/placement-input/index.njk b/app/views/design-system/components/error-summary/placement-input/index.njk index 678209c1b..f1571185e 100644 --- a/app/views/design-system/components/error-summary/placement-input/index.njk +++ b/app/views/design-system/components/error-summary/placement-input/index.njk @@ -8,8 +8,7 @@ {% block beforeContent %} {{ backLink({ href: "#", - text: "Go back", - classes: "nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-4" + text: "Go back" }) }} {% endblock %} diff --git a/app/views/design-system/components/error-summary/placement-multiple/index.njk b/app/views/design-system/components/error-summary/placement-multiple/index.njk index cb20ac9fa..ab1cd07f9 100644 --- a/app/views/design-system/components/error-summary/placement-multiple/index.njk +++ b/app/views/design-system/components/error-summary/placement-multiple/index.njk @@ -8,8 +8,7 @@ {% block beforeContent %} {{ backLink({ href: "#", - text: "Go back", - classes: "nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-4" + text: "Go back" }) }} {% endblock %} diff --git a/app/views/design-system/components/error-summary/placement/index.njk b/app/views/design-system/components/error-summary/placement/index.njk index c0bcb6767..fca2c231b 100644 --- a/app/views/design-system/components/error-summary/placement/index.njk +++ b/app/views/design-system/components/error-summary/placement/index.njk @@ -8,8 +8,7 @@ {% block beforeContent %} {{ backLink({ href: "#", - text: "Go back", - classes: "nhsuk-u-margin-bottom-0 nhsuk-u-margin-top-4" + text: "Go back" }) }} {% endblock %} diff --git a/app/views/design-system/components/header/index.njk b/app/views/design-system/components/header/index.njk index bff27d358..779276687 100644 --- a/app/views/design-system/components/header/index.njk +++ b/app/views/design-system/components/header/index.njk @@ -79,8 +79,7 @@

      If your content or service is on the NHS website and you need help with search, the service manual team can put you in touch with the team that manages our search functionality contract.

      If your service is on the nhs.uk domain but not part of the NHS website or is on another domain, you will have to arrange your own search functionality, if you need it.

      -

      Examples

      -
      NHS default header
      +

      NHS default header

      The NHS website has the default header with logo, navigation links and search.

      {{ designExample({ @@ -89,7 +88,7 @@ type: "default" }) }} -
      NHS header with service name
      +

      NHS header with service name

      The NHS digital service manual includes the logo, service name, navigation links and search.

      {{ designExample({ @@ -98,7 +97,7 @@ type: "service" }) }} -
      NHS transactional service header
      +

      NHS transactional service header

      Find your NHS number (on the NHS website) is a transactional service and includes the logo and service name only.

      {{ designExample({ diff --git a/app/views/design-system/components/table/macro-options.json b/app/views/design-system/components/table/macro-options.json index 5f826ae8d..b54656b5f 100644 --- a/app/views/design-system/components/table/macro-options.json +++ b/app/views/design-system/components/table/macro-options.json @@ -98,7 +98,7 @@ "name": "captionClasses", "type": "string", "required": false, - "description": "Classes for caption text size. Classes should correspond to the available typography heading classes." + "description": "Classes for caption text size. Classes to add to the table caption, for example `nhsuk-table__caption--l`." }, { "name": "firstCellIsHeader", diff --git a/app/views/design-system/patterns/mini-hub/example-symptoms/index.njk b/app/views/design-system/patterns/mini-hub/example-symptoms/index.njk index 25200b8b3..2ddf8593c 100644 --- a/app/views/design-system/patterns/mini-hub/example-symptoms/index.njk +++ b/app/views/design-system/patterns/mini-hub/example-symptoms/index.njk @@ -6,7 +6,7 @@ {% from 'inset-text/macro.njk' import insetText %} {% from 'pagination/macro.njk' import pagination %} -{% block outerContent %} +{% block beforeContent %} {{ breadcrumb({ items: [ { diff --git a/app/views/design-system/patterns/mini-hub/example/index.njk b/app/views/design-system/patterns/mini-hub/example/index.njk index 43aa467b8..410dc2252 100644 --- a/app/views/design-system/patterns/mini-hub/example/index.njk +++ b/app/views/design-system/patterns/mini-hub/example/index.njk @@ -4,7 +4,7 @@ {% from 'contents-list/macro.njk' import contentsList %} {% from 'pagination/macro.njk' import pagination %} -{% block outerContent %} +{% block beforeContent %} {{ breadcrumb({ items: [ { diff --git a/app/views/design-system/patterns/start-page/example/index.njk b/app/views/design-system/patterns/start-page/example/index.njk index be3133cb1..4f0326263 100644 --- a/app/views/design-system/patterns/start-page/example/index.njk +++ b/app/views/design-system/patterns/start-page/example/index.njk @@ -3,7 +3,9 @@ {% from 'breadcrumb/macro.njk' import breadcrumb %} {% from 'button/macro.njk' import button %} -{% block outerContent %} +{% set mainClasses = "nhsuk-main-wrapper--s" %} + +{% block beforeContent %} {{ breadcrumb({ items: [ { diff --git a/app/views/design-system/production.njk b/app/views/design-system/production.njk index de34848f5..d523da315 100644 --- a/app/views/design-system/production.njk +++ b/app/views/design-system/production.njk @@ -58,7 +58,7 @@

      A Nunjucks macro is a simple template that generates more complex HTML.

      Nunjucks macros save you time by managing repetitive or error-prone tasks, like linking form labels to their controls.

      Nunjucks macros also make it easier to keep your application up to date. You can run a command to update component code instead of having to manually update your HTML.

      -

      To use Nunjucks macros in your application, you’ll need to setup Nunjucks views to point to the location of NHS.UK frontend components, which is node_modules/nhsuk-frontend/packages/components/.

      +

      To use Nunjucks macros in your application, you’ll need to setup Nunjucks views to point to the location of NHS.UK frontend components, which is node_modules/nhsuk-frontend/packages/components/. From nhsuk-frontend version 9.0.0 and onwards, you will also have to add the path to the helper macros, which is /node_modules/nhsuk-frontend/packages/macros.

      To include a specific component macro in your page template, you need to import the macro.

      For example, to use the button macro, use the import statement % from 'node_modules/nhsuk-frontend/packages/components/button/macro.njk' import button %}.

      diff --git a/app/views/design-system/styles/page-template/annotated/index.njk b/app/views/design-system/styles/page-template/annotated/index.njk index f33300587..e87bea126 100644 --- a/app/views/design-system/styles/page-template/annotated/index.njk +++ b/app/views/design-system/styles/page-template/annotated/index.njk @@ -22,9 +22,15 @@ {%- endblock %} {% block beforeContent-%} -
      +
      block: beforeContent {{ super() }} + {% from 'back-link/macro.njk' import backLink %} + + {{ backLink({ + href: "/", + text: "Back" + }) }}
      {%- endblock %} @@ -35,19 +41,6 @@
      {%- endblock %} -{% block outerContent-%} -
      - block: outerContent - {{ super() }} - {% from 'back-link/macro.njk' import backLink %} - - {{ backLink({ - href: "/", - text: "Back" - }) }} -
      -{%- endblock %} - {% block content -%}
      block: content diff --git a/app/views/design-system/styles/page-template/content/index.njk b/app/views/design-system/styles/page-template/content/index.njk index 2d5b183c8..ae4c54ff4 100644 --- a/app/views/design-system/styles/page-template/content/index.njk +++ b/app/views/design-system/styles/page-template/content/index.njk @@ -6,23 +6,6 @@ Content page template {% endblock %} -{% block beforeContent %} - {{ breadcrumb({ - items: [ - { - href: "#", - text: "Level one" - }, - { - href: "#", - text: "Level two" - } - ], - href: "#", - text: "Level three" - }) }} -{% endblock %} - {% block header %} {{ header({ showNav: "true", @@ -53,10 +36,27 @@ }} {% endblock %} +{% block beforeContent %} + {{ breadcrumb({ + items: [ + { + href: "#", + text: "Level one" + }, + { + href: "#", + text: "Level two" + } + ], + href: "#", + text: "Level three" + }) }} +{% endblock %} + {% block content %}
      -

      +

      Content page template

      diff --git a/app/views/design-system/styles/page-template/default/index.njk b/app/views/design-system/styles/page-template/default/index.njk index eef28937c..153d4d048 100644 --- a/app/views/design-system/styles/page-template/default/index.njk +++ b/app/views/design-system/styles/page-template/default/index.njk @@ -1,5 +1,11 @@ {% extends "includes/template.njk" %} {% block content %} -

      Default page template

      +
      +
      +

      + Default page template +

      +
      +
      {% endblock %} diff --git a/app/views/design-system/styles/page-template/index.njk b/app/views/design-system/styles/page-template/index.njk index 179b15bdd..28426619c 100644 --- a/app/views/design-system/styles/page-template/index.njk +++ b/app/views/design-system/styles/page-template/index.njk @@ -2,7 +2,7 @@ {% set pageDescription = "Use this template to keep your pages consistent with other NHS services." %} {% set pageSection = "Design system" %} {% set subSection = "Styles" %} -{% set dateUpdated = "February 2021" %} +{% set dateUpdated = "September 2024" %} {% set backlog_issue_id = "200" %} {% extends "includes/app-layout.njk" %} @@ -41,7 +41,7 @@

      This page template combines boilerplate markup and components needed for a content page and a transactional page. This includes:

        -
      • JavaScript that adds a .js-enabled class, which components with JavaScript behaviour need
        • +
      • JavaScript that adds a js-enabled class, which components with JavaScript behaviour need
      • the skip link, header and footer components
      • favicons, and other page metadata
      @@ -68,7 +68,9 @@

      Content page template

      -

      The content page template example includes navigation and search in the header and a breadcrumbs component.

      +

      The content page template example includes navigation and search in the header and a breadcrumbs component.

      + +

      We recommend you use a larger {{ "

      " | escape }} heading size using the nhsuk-heading-xl modifier class. Content pages may need more heading levels and the larger size makes the heading hierarchy clearer.

      {{ designExample({ group: "styles", @@ -80,7 +82,7 @@

      Transactional page template

      -

      The transactional page template example uses the transactional header and a back link component.

      +

      The transactional page template example uses the transactional service header and a back link component.

      {{ designExample({ group: "styles", @@ -90,7 +92,8 @@ showArguments: false }) }} -

      Vertical padding is reduced on transactional services using the .nhsuk-main-wrapper--s modifier class. We also recommended you use a smaller page heading size using the .nhsuk-heading-l modifier class.

      +

      Vertical padding is reduced on transactional services using the nhsuk-main-wrapper--s modifier class. + We also recommend you use a smaller {{ "

      " | escape }} heading size using the nhsuk-heading-l modifier class.

      Changing template content

      @@ -141,19 +144,6 @@ - - - beforeContent - Block - - - Add content that needs to appear outside <main> element and <div class="nhsuk-width-container">. -
      - For example: the breadcrumbs component. -       - - - bodyAttributes Variable @@ -174,6 +164,17 @@ + + beforeContent + Block + + + Add content that needs to appear within the <div class="nhsuk-width-container"> container but outside the <main> element. +
      + For example: the breadcrumbs component and the back link. +       + + bodyEnd @@ -264,7 +265,7 @@ Block - Override the main section of the page, which by default wraps the <main> element, outerContent block and content block. + Override the main section of the page, which by default wraps the beforeContent block, the <main> element, and content block. @@ -278,18 +279,6 @@ - - outerContent - Block - - - Add content that needs to appear outside <main> element but inside the <div class="nhsuk-width-container">. -
      - For example: the back link component. -       - - - pageTitle Block diff --git a/app/views/design-system/styles/page-template/transactional/index.njk b/app/views/design-system/styles/page-template/transactional/index.njk index 2a369f2a6..21ce3550f 100644 --- a/app/views/design-system/styles/page-template/transactional/index.njk +++ b/app/views/design-system/styles/page-template/transactional/index.njk @@ -8,14 +8,6 @@ Transactional page template {% endblock %} -{% block outerContent %} - {{ backLink({ - href: "#", - text: "Back", - classes: "nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0" - }) }} -{% endblock %} - {% block header %} {{ header({ transactionalService: { @@ -28,6 +20,13 @@ }} {% endblock %} +{% block beforeContent %} + {{ backLink({ + href: "#", + text: "Back" + }) }} +{% endblock %} + {% block content %}
      diff --git a/app/views/design-system/styles/typography/headings-l/index.njk b/app/views/design-system/styles/typography/headings-l/index.njk new file mode 100644 index 000000000..e39978d01 --- /dev/null +++ b/app/views/design-system/styles/typography/headings-l/index.njk @@ -0,0 +1,5 @@ +

      nhsuk-heading-l

      +

      nhsuk-heading-m

      +

      nhsuk-heading-s

      +

      nhsuk-heading-xs

      + diff --git a/app/views/design-system/styles/typography/headings/index.njk b/app/views/design-system/styles/typography/headings-xl/index.njk similarity index 100% rename from app/views/design-system/styles/typography/headings/index.njk rename to app/views/design-system/styles/typography/headings-xl/index.njk diff --git a/app/views/design-system/styles/typography/index.njk b/app/views/design-system/styles/typography/index.njk index 03cd1e81a..ba88adc88 100644 --- a/app/views/design-system/styles/typography/index.njk +++ b/app/views/design-system/styles/typography/index.njk @@ -2,7 +2,7 @@ {% set pageDescription = "Our fonts and typographic styles, and how to apply them." %} {% set pageSection = "Design system" %} {% set subSection = "Styles" %} -{% set dateUpdated = "June 2024" %} +{% set dateUpdated = "September 2024" %} {% set backlog_issue_id = "1" %} {% extends "includes/app-layout.njk" %} @@ -56,7 +56,7 @@

      Frutiger has been the NHS brand font since 1999. We use the web font for consistency between online and offline materials.

      NHS England has a licence for the Frutiger webfont that the NHS website team can use. (The web font is hosted on www.nhs.uk and referenced in the NHS.UK frontend.)

      All other NHS England teams and other NHS organisations must have their own licence with Monotype.

      -

      If you're not sure whether you should be using Frutiger, you can email the service manual team at service-manual@nhs.net.

      +

      If you're not sure whether you should be using Frutiger, you can email the service manual team at england.service-manual@nhs.net.

      Fallback font

      Default to Arial when Frutiger isn't available.

      @@ -64,10 +64,35 @@

      Headings

      +

      Use heading tags, such as {{ "

      " | escape }}, {{ "

      " | escape }} and so on, to tag the headings on a page. Apply a heading class, such as nhsuk-heading-l, to style them visually. Style headings consistently to create a clear content structure throughout your service.

      + +

      Write all headings in sentence case.

      + +

      Question pages and shorter content pages

      + +

      Shorter pages, such as question pages, should use nhsuk-heading-l for the main page heading {{ "

      " | escape }}, followed by nhsuk-heading-m for {{ "

      " | escape }} and so on.

      + + {{ designExample({ + group: "styles", + item: "typography", + type: "headings-l", + htmlOnly: true + }) }} + +

      Other types of pages

      + +

      Some pages may benefit from a larger {{ "

      " | escape }} to allow for better visual balance and more heading levels. Examples include:

      +
        +
      • longer content pages
        • +
      • start pages
        • +
      • dashboards
        • +
      +

      For these pages, start with nhsuk-heading-xl for the {{ "

      " | escape }}, nhsuk-heading-l for {{ "

      " | escape }}, and so on.

      + {{ designExample({ group: "styles", item: "typography", - type: "headings", + type: "headings-xl", htmlOnly: true }) }} diff --git a/app/views/design-system/styles/typography/sizes/index.njk b/app/views/design-system/styles/typography/sizes/index.njk index 057a456d4..a752cb393 100644 --- a/app/views/design-system/styles/typography/sizes/index.njk +++ b/app/views/design-system/styles/typography/sizes/index.njk @@ -1,7 +1,7 @@

      nhsuk-u-font-size-64

      nhsuk-u-font-size-48

      -

      nhsuk-u-font-size-32

      -

      nhsuk-u-font-size-24

      +

      nhsuk-u-font-size-36

      +

      nhsuk-u-font-size-26

      nhsuk-u-font-size-22

      nhsuk-u-font-size-19

      nhsuk-u-font-size-16

      diff --git a/app/views/get-in-touch.njk b/app/views/get-in-touch.njk index 04fe2059d..9163958da 100644 --- a/app/views/get-in-touch.njk +++ b/app/views/get-in-touch.njk @@ -1,6 +1,6 @@ {% set pageTitle = "Get in touch" %} {% set pageDescription = "If you’ve got a question, idea or suggestion, get in touch with the service manual team." %} -{% set dateUpdated = "July 2021" %} +{% set dateUpdated = "September 2024" %} {% extends "includes/app-layout-two-thirds.njk" %} @@ -10,6 +10,6 @@

      Use the #general channel in the service manual public Slack workspace.

      Email

      -

      Email the service manual team on service-manual@nhs.net.

      +

      Email the service manual team on england.service-manual@nhs.net.

      {% endblock %} diff --git a/app/views/includes/app-layout.njk b/app/views/includes/app-layout.njk index 492bf3481..1f75c15cb 100644 --- a/app/views/includes/app-layout.njk +++ b/app/views/includes/app-layout.njk @@ -17,7 +17,7 @@

      {%- if landingPage or pageTitle == "Community" or pageTitle == "NHS standards and technical policy" %} {% else %} - + {%- if subSection %} {%- if theme %} {{theme}} diff --git a/app/views/includes/design-example-wrapper-full-layout.njk b/app/views/includes/design-example-wrapper-full-layout.njk index 821cc2699..a31d05fa1 100644 --- a/app/views/includes/design-example-wrapper-full-layout.njk +++ b/app/views/includes/design-example-wrapper-full-layout.njk @@ -1,4 +1,3 @@ -{% block outerContent %}{% endblock %}
      {% block beforeContent %}{% endblock %}
      diff --git a/app/views/includes/layout.njk b/app/views/includes/layout.njk index 610cfb92b..cef1af47b 100755 --- a/app/views/includes/layout.njk +++ b/app/views/includes/layout.njk @@ -92,14 +92,6 @@ {% include "includes/_header.njk" %} - {% block breadcrumb %} - {{ breadcrumb({ - href: "/", - text: "Home", - classes: "app-breadcrumb" - }) }} - {% endblock %} - {% block outerBody %}{% endblock %} {%- if beta %} @@ -108,7 +100,14 @@ {% if pageLayout != "Homepage" %}
      -
      + {% block breadcrumb %} + {{ breadcrumb({ + href: "/", + text: "Home", + classes: "app-breadcrumb" + }) }} + {% endblock %} +
      {% block body %}{% endblock %}
      diff --git a/app/views/includes/template.njk b/app/views/includes/template.njk index c90ada19a..2877d2611 100644 --- a/app/views/includes/template.njk +++ b/app/views/includes/template.njk @@ -53,11 +53,9 @@ {{ header({}) }} {% endblock %} - {% block beforeContent %}{% endblock %} - {% block main %}
      - {% block outerContent %}{% endblock %} + {% block beforeContent %}{% endblock %}
      {% block content %}{% endblock %}
      diff --git a/app/views/index.njk b/app/views/index.njk index 2d618924c..ef2ed2b68 100755 --- a/app/views/index.njk +++ b/app/views/index.njk @@ -22,7 +22,7 @@

      What's new

      -

      New warning button and some small design system guidance updates

      +

      Minor changes to typography. Also content guide updates.

      diff --git a/app/views/page-not-found.njk b/app/views/page-not-found.njk index 04aa1b0a6..2243adbe4 100644 --- a/app/views/page-not-found.njk +++ b/app/views/page-not-found.njk @@ -8,6 +8,6 @@

      Please check the web address to make sure it was correct.

      You can also browse the service manual homepage or search the service manual for the information you need.

      -

      If you think this link is broken, please get in touch on the NHS digital service manual Slack workspace or email the standards team at service-manual@nhs.net.

      +

      If you think this link is broken, please get in touch on the NHS digital service manual Slack workspace or email the service manual team at england.service-manual@nhs.net.

      {% endblock %} diff --git a/app/views/service-manual-team.njk b/app/views/service-manual-team.njk index 828fb1d47..11edc9b9e 100644 --- a/app/views/service-manual-team.njk +++ b/app/views/service-manual-team.njk @@ -1,6 +1,6 @@ {% set pageTitle = "Service manual team" %} {% set pageDescription = "The service manual team at NHS England maintains the service manual." %} -{% set dateUpdated = "April 2023" %} +{% set dateUpdated = "September 2024" %} {% extends "includes/app-layout-two-thirds.njk" %} @@ -10,13 +10,13 @@
        -
      • Dan Barker – Delivery Manager
        • -
      • Molly Lee – Product Manager
        • -
      • Sara Wilcox – Content Designer
        • +
      • Ananda Maryon – Senior Interaction Designer
        • +
      • Laura Driver – Senior User Researcher
        • +
      • Sara Wilcox – Senior Content Designer
      -

      Update (January 2023)

      -

      The service manual team is still running a reduced service, so that we can support other NHS.UK projects and while we firm up plans for 2023 with our stakeholders across the NHS.

      -

      We are open to contributions from the community as usual.

      +

      Update (September 2024)

      +

      We are now putting together a new service manual team as part of NHS England's Central User-Centred Design team.

      +

      We're open to contributions from the community as usual.

      {% endblock %} diff --git a/app/views/standards-and-technology/about-the-service-standard.njk b/app/views/standards-and-technology/about-the-service-standard.njk index e9f5aa71a..4f1840243 100644 --- a/app/views/standards-and-technology/about-the-service-standard.njk +++ b/app/views/standards-and-technology/about-the-service-standard.njk @@ -4,7 +4,7 @@ {% set subSection = "NHS service standard" %} {% set pageDescription = "The NHS service standard is designed to help teams meet the GOV.UK service standard in the context of health and care." %} {% set hideContact = "true" %} -{% set dateUpdated = "April 2023" %} +{% set dateUpdated = "September 2024" %} {% extends "includes/app-layout.njk" %} @@ -15,9 +15,9 @@ {% block bodyContent %}

      NHS services and the GOV.UK service standard

      Some NHS services go through a service assessment.

      -

      GOV.UK assesses services which have over 100,000 transactions a year. NHSX assesses some NHS services which have less than 100,000 transactions a year.

      -

      Teams which have an assessment have to meet all 14 points in the GOV.UK service standard. Other NHS teams follow the GOV.UK service standard because it's best practice.

      - +

      The Department of Health and Social Care (DHSC) assesses NHS services which have more than 100,000 transactions a year. This includes public and staff-facing services, at national level and in frontline, primary and secondary care.

      +

      Teams which have an assessment have to meet all 14 points in the GOV.UK service standard. Other NHS teams follow the GOV.UK or NHS service standard because it's best practice.

      +

      Read about what happens at a service assessment (GOV.UK) or email the DHSC standards and assurance team at dhsc.digitaltechcontrols@nhs.net for more information about service assessments.

      Why publish an NHS companion to the GOV.UK service standard?

      This NHS companion follows the GOV.UK standard point by point, but in our user research, we found that NHS digital teams also need:

      diff --git a/app/views/standards-and-technology/service-standard-points/5-make-sure-everyone-can-use-the-service.njk b/app/views/standards-and-technology/service-standard-points/5-make-sure-everyone-can-use-the-service.njk index a07bffcc4..5dc51d7bc 100644 --- a/app/views/standards-and-technology/service-standard-points/5-make-sure-everyone-can-use-the-service.njk +++ b/app/views/standards-and-technology/service-standard-points/5-make-sure-everyone-can-use-the-service.njk @@ -63,7 +63,7 @@ {% endblock %} diff --git a/app/views/standards-and-technology/technology/NHS-login.njk b/app/views/standards-and-technology/technology/NHS-login.njk index bf8d8b264..bd5786992 100644 --- a/app/views/standards-and-technology/technology/NHS-login.njk +++ b/app/views/standards-and-technology/technology/NHS-login.njk @@ -55,6 +55,6 @@
    • Websites and apps you can access with NHS login (NHS website)

    We're very interested in hearing what you think about the standards and technology section of the service manual and how it might, or might not, help you develop digital services in health.

    -

    Email us or get in touch on the service manual Slack channel.

    +

    Email us or get in touch on the service manual Slack channel.

    {% endblock %} diff --git a/app/views/standards-and-technology/technology/about-technology.njk b/app/views/standards-and-technology/technology/about-technology.njk index 48bcf3c93..85575d089 100644 --- a/app/views/standards-and-technology/technology/about-technology.njk +++ b/app/views/standards-and-technology/technology/about-technology.njk @@ -57,6 +57,6 @@

    We're very interested in hearing what you think about the standards and technology section of the service manual and how it might, or might not, help you develop digital services in health.

    -

    Email us or get in touch on the service manual Slack channel.

    +

    Email us or get in touch on the service manual Slack channel.

    {% endblock %} diff --git a/app/views/standards-and-technology/technology/personal-demographics-service-PDS.njk b/app/views/standards-and-technology/technology/personal-demographics-service-PDS.njk index 728b0139d..f9ec6ec5a 100644 --- a/app/views/standards-and-technology/technology/personal-demographics-service-PDS.njk +++ b/app/views/standards-and-technology/technology/personal-demographics-service-PDS.njk @@ -66,6 +66,6 @@
  • Information standard ISB 0149 NHS number (NHS Digital), which PDS supports

    • We're very interested in hearing what you think about the standards and technology section of the service manual and how it might, or might not, help you develop digital services in health.

    -

    Email us or get in touch on the service manual Slack channel.

    +

    Email us or get in touch on the service manual Slack channel.

    {% endblock %} diff --git a/app/views/whats-new/index.njk b/app/views/whats-new/index.njk index 17b1b5c43..54f2dee99 100644 --- a/app/views/whats-new/index.njk +++ b/app/views/whats-new/index.njk @@ -9,9 +9,9 @@

    Latest updates

    -

    July 2024

    +

    September 2024

    - + @@ -19,17 +19,57 @@ - - - - + + + + + + + + + + + + + + + + + + + +
    Updates to the service manual in July 2024Updates to the service manual in September 2024
    Section
    Design system -

    Added new warning button to buttons component

    -

    Updated table component examples and guidance, with information about responsive tables, including when to use them

    -

    Fixed alignment between header, footer and main content in page template examples

    -

    Improved fieldset component guidance to better explain their uses and importance for accessibility

    -

    Improved tabs component guidance to explain how tabs should operate using a keyboard or screen reader

    -

    Improved guidance on contrast and accessibility on colour page

    -
    Accessibility guidance +

    Updated link section to recommend avoiding "see"

    +
    Content guide +

    Rewrote our guidance on age to make it clearer

    +

    Added Down's syndrome, fit note and period products to the A to Z of NHS health writing

    +

    Updated fetus, microgram and NHS in the A to Z

    +

    Updated links guidance to recommend avoiding "see"

    +

    Updated section on capitalisation to mention geographical names

    +
    Design system +

    Made minor changes to typography section:

    +
      +
    • updated guidance on heading sizes
      • +
    • increased large and medium heading size on desktop and mobile
      • +
    • tweaked line-heights for headings
      • +
    • reduced heading captions sizes
      • +
    • tweaked the typography print styles
      • +
    +

    Tweaked the spacing around the breadcrumbs and back link, with a recommendation to put back link top of page

    +

    Updated page template guidance and examples:

    +
      +
    • new breadcrumbs position within content page template
      • +
    • added guidance on heading sizes for content pages
      • +
    • updated the Options table
      • +
    +

    Added table caption size classes

    + +
    NHS service standard +

    Updated About the NHS service standard

    +
    Other +

    Updated the service manual team page

    +

    Updated service manual team email address on Get in touch and other pages

    +
    diff --git a/app/views/whats-new/updates.njk b/app/views/whats-new/updates.njk index 4b8ae9a3c..4db63e290 100644 --- a/app/views/whats-new/updates.njk +++ b/app/views/whats-new/updates.njk @@ -10,6 +10,70 @@ {% block bodyContent %} +

    September 2024

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Updates to the service manual in September 2024
    SectionUpdate
    Accessibility guidance +

    Updated link section to recommend avoiding "see"

    +
    Content guide +

    Rewrote our guidance on age to make it clearer

    +

    Added Down's syndrome, fit note and period products to the A to Z of NHS health writing

    +

    Updated fetus, microgram and NHS in the A to Z

    +

    Updated links guidance to recommend avoiding "see"

    +

    Updated section on capitalisation to mention geographical names

    +
    Design system +

    Made minor changes to typography section:

    +
      +
    • updated guidance on heading sizes
      • +
    • increased large and medium heading size on desktop and mobile
      • +
    • tweaked line-heights for headings
      • +
    • reduced heading captions sizes
      • +
    • tweaked the typography print styles
      • +
    +

    Tweaked the spacing around the breadcrumbs and back link, with a recommendation to put back link top of page

    +

    Updated page template guidance and examples:

    +
      +
    • new breadcrumbs position within content page template
      • +
    • added guidance on heading sizes for content pages
      • +
    • updated the Options table
      • +
    +

    Added table caption size classes

    + +
    NHS service standard +

    Updated About the NHS service standard

    +
    Other +

    Updated the service manual team page

    +

    Updated service manual team email address on Get in touch and other pages

    +
    +

    July 2024

    diff --git a/package-lock.json b/package-lock.json index 7630e396f..3e521d5bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "nhsuk-service-manual", - "version": "6.5.0", + "version": "7.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "nhsuk-service-manual", - "version": "6.5.0", + "version": "7.0.0", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -22,7 +22,7 @@ "highlight.js": "^11.2.0", "js-beautify": "^1.14.0", "lunr": "^2.3.9", - "nhsuk-frontend": "^8.3.0", + "nhsuk-frontend": "^9.0.0", "nunjucks": "^3.2.4" }, "devDependencies": { @@ -10715,9 +10715,9 @@ "dev": true }, "node_modules/nhsuk-frontend": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/nhsuk-frontend/-/nhsuk-frontend-8.3.0.tgz", - "integrity": "sha512-oln8/+0ZJwQgWPrEWcI7+4SeHdAfr3dkvZ5PAKswa6+66f7dbnwYq/IU+Aaqzp25EJsQuSlwElZghJHUKIUOqg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/nhsuk-frontend/-/nhsuk-frontend-9.0.0.tgz", + "integrity": "sha512-JZtrvbVqeThf8FC6Ky44zyXs0+sZHI2qCYDgTsuBcWFlASBerduCiYJ0NAL3Y4uHcsj4fe2I1Bc5zXidklDaDA==", "engines": { "node": ">=20.0.0" } diff --git a/package.json b/package.json index 08d587ca1..ac20b111f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nhsuk-service-manual", - "version": "6.5.0", + "version": "7.0.0", "description": "NHS digital service manual", "main": "app.js", "directories": { @@ -56,7 +56,7 @@ "highlight.js": "^11.2.0", "js-beautify": "^1.14.0", "lunr": "^2.3.9", - "nhsuk-frontend": "^8.3.0", + "nhsuk-frontend": "^9.0.0", "nunjucks": "^3.2.4" }, "devDependencies": {
    Updates to the service manual in July 2024