Review/2 card component release (#1904)

* Card component release --------- Co-authored-by: Sara Wilcox <sara.wilcox1@nhs.net>
nhsuk · Dec 4, 2023 · 582ab82 · 582ab82
1 parent df2616e
commit 582ab82
Show file tree

Hide file tree

Showing 22 changed files with 18,252 additions and 12,333 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,19 +1,32 @@
 # NHS digital service manual Changelog
 
-## 5.9.2 -  TBC 22 May 2023
+## 5.10.0 - 30 August 2023
+
+:new: **New features**
+
+- Add new card components variants, replacing older cards
+- Add updated design principles PDF
+- Add and amend entries in content style guide after June Style Council meeting - see What's new for detail
+
+:wrench: **Maintenance**
+
+- Fix typos in previous release
+- Add "Next" to bottom of first page in How to write good questions for froms
+- Update spacing around design principle 10
+- Update site map with Character count and Tabs
+
+## 5.9.2 - 22 May 2023
 
 :wrench: **Fixes**
 
 - Import and initialise the Error Summary JavaScript, and set focusOnPageLoad to false, so the component example works as expected [NHS.UK frontend issue #766](https://github.com/nhsuk/nhsuk-frontend/issues/766)
 
-
 ## 5.9.1 - 3 May 2023
 
 :wrench: **Maintenance**
 
 - Fix design principle 10 in mobile view
 
-
 ## 5.9.0 - 27 April 2023
 
 :new: **New features**
@@ -34,7 +47,6 @@
 - Duplicate accessibility guidance for testers on giving users time to act on devs and designers pages
 - Change "NHS Digital" to "NHS England"
 
-
 ## 5.8.0 - 17 January 2023
 
 :new: **New features**

diff --git a/app/assets/nhs-design-principles.pdf b/app/assets/nhs-design-principles.pdf
diff --git a/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk b/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk
@@ -24,7 +24,7 @@
   <div class="nhsuk-details__text">
 
     <p>Widgets typically sit in the banner or a corner of the page, sometimes obscuring key functionality. They often use icons that can be difficult for users to understand.</p>
-    <p>When a user clicks on the widget, by accident or on purpose, an overlay may pop up and cover up information or create a barrier that users can't get past. People find them confusing and unhelpful.</p>
+    <p>When a user clicks on the widget, by accident or on purpose, an overlay may pop up and cover up information or create a barrier that users cannot get past. People find them confusing and unhelpful.</p>
     <p>People with access needs often use their preferred assistive technologies across all websites. Widgets only meet some access needs and only deal with one part of a user journey. They cannot hand over from one system or site to another. Widgets can also cause problems for people who use assistive technologies.</p>
   </div>
 </details>

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
@@ -1,7 +1,7 @@
 {% set pageTitle = "A to Z of NHS health writing" %}
 {% set pageSection = "Content style guide" %}
 {% set pageDescription = "Words and phrases we use to make our content about health and the NHS easy to understand." %}
-{% set dateUpdated = "January 2023" %}
+{% set dateUpdated = "August 2023" %}
 {% set backlog_issue_id = "318" %}
 
 {% block extraMeta %}
@@ -279,13 +279,18 @@
       <p>We explain <a href="https://www.nhs.uk/conditions/social-care-and-support-guide/money-work-and-benefits/nhs-continuing-healthcare/">NHS continuing healthcare</a> on the NHS website.</p>
       <h3 id="contractions">contractions</h3>
       <p>To find out how we use contractions, like "we're" and "don't", see the guidance on <a href="/content/formatting-and-punctuation#contractions">contractions on the Formatting and punctuation page</a>.</p>
-      <h3 id="coronavirus-(covid-19)">coronavirus (COVID-19)</h3>
-      <p>Follow the <a href="https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#coronavirus-covid-19">entry on coronavirus (COVID-19) in the A to Z of GOV.UK style</a>.</p>
+      <h3 id="COVID-19">COVID-19</h3>
+      <p>Upper case.</p>
+      <p>Do not use:</p>
+      <ul>
+        <li>"Covid-19" with only the first letter capitalised</li>
+        <li>"covid-19" lower case</li>
+        <li>"coronavirus" as "COVID-19" is the specific condition</li>
+      </ul>
       <p>See also on this page:</p>
       <ul>
         <li><a href="#COVID-19-vaccination-status">COVID-19 vaccination status</a></li>
         <li><a href="#long-COVID">long COVID</a></li>
-        <li><a href="#NHS-COVID-19-app">NHS COVID-19 app</a></li>
         <li><a href="#NHS-COVID-Pass">NHS COVID Pass</a></li>
       </ul>
       <h3 id="COVID-19-vaccination-status">COVID-19 vaccination status</a></h3>
@@ -677,15 +682,6 @@
       </div>
       <p>When advising users about the browser version of the NHS App, we say: "You can also access NHS App services from the browser on your desktop or laptop computer".</p>
       <p><a href="https://digital.nhs.uk/services/nhs-app">Find out more about the NHS App on NHS Digital's website.</a></p>
-      <h3 id="NHS-COVID-19-app">NHS COVID-19 app</h3>
-      <p>Use "NHS COVID-19 app". Read about the <a href="https://www.gov.uk/government/collections/nhs-covid-19-app">NHS COVID-19 app on GOV.UK</a>.</p>
-      <p>Note that "app" is lowercase unlike the NHS App.</p>
-      <p>Do not use:</p>
-      <ul>
-        <li>"COVID-19 app"</li>
-        <li>"coronavirus app"</li>
-        <li>"NHS app"</li>
-      </ul>
       <h3 id="NHS-COVID-Pass">NHS COVID Pass</h3>
       <p>NHS COVID Pass is a service that shows someone's vaccination details or a positive NHS PCR test result if they need to travel abroad. Read about the <a href="https://www.nhs.uk/conditions/coronavirus-covid-19/nhs-covid-pass/">NHS COVID Pass on the NHS website</a>.</p>
       <p>Use "NHS COVID Pass" each time you mention it.</p>
@@ -697,8 +693,8 @@
         <li>"vaccination pass" or "passport"</li>
       </ul>
       <p>See also "<a href="#COVID-19-vaccination-status">COVID-19 vaccination status</a>" on this page.</p>
-      <h3 id="NHS-England-and-NHS-Improvement-NHSEI">NHS England and NHS Improvement (NHSEI)</h3>
-      <p>The full name of the organisation is NHS England and NHS Improvement. The abbreviation is NHSEI.</p>
+      <h3 id="NHS-England">NHS England (NHSE)</h3>
+      <p>The full name of the organisation is NHS England. The abbreviation is NHSE.</p>
       <h3 id="NHS-login">NHS login</h3>
       <p>We write "login" in lower case and as one word. <a href="https://www.nhs.uk/using-the-nhs/nhs-services/nhs-login/">The NHS login</a> lets people see their personal health information online.</p>
       <h3 id="NHS-number">NHS number</h3>
@@ -714,8 +710,6 @@
       <p>This number format makes it easier for people and assistive technologies to read. It also makes it less likely that people will make mistakes.</p>
       <p>Ask your frontend or coding colleagues how to stop the NHS number breaking over 2 lines.</p>
       <p>See our design pattern for <a href="/design-system/patterns/ask-users-for-their-nhs-number"> asking users for their NHS number</a>.</p>
-      <h3 id="NHS-Test-and-Trace">NHS Test and Trace</h3>
-      <p>NHS Test and Trace is the NHS service that tests people for coronavirus, traces contacts and manages local outbreaks.</p>
       <h3 id="NHS-website">NHS website</h3>
       <p>Lower case "website". The NHS website is the website at <a href="https://www.nhs.uk">nhs.uk</a>.</p>
       <h3 id="nhs.uk-and-NHS.UK">nhs.uk and NHS.UK</h3>
@@ -742,6 +736,16 @@
       <h3 id="OK">OK</h3>
       <p>It's OK to use OK.</p>
       <p>We've tested it on screen readers and it reads out OK.</p>
+      <h3 id="online-consultation">online consultation</h3>
+      <p>Do not use the term "online consultation" or any variation of it, like "eConsultation".</p>
+      <p>If you're writing about using an online form to contact a GP surgery, be clear about the task and the outcome. The best way to describe this may depend on the context and the service that's available.</p>
+      <p>For example, you could use phrases like:</p>
+      <ul>
+        <li>"Contact your GP using an online form"</li>
+        <li>"Request an appointment (online)" where this is relevant, for example on a GP website alongside offline booking options</li>
+      </ul>
+      <p>Our research showed people are not familiar with "online consultation". When the term is used for an online form it's misleading. Many people think it means they'll have a consultation with a doctor online, rather than complete a form to request an appointment.</p>
+      <p>If you are talking about a phone, video or face to face consultation with a doctor or other health professional, be clear about the format.</p>
       <h3 id="online services">online services</h3>
       <p>See <a href="#GP-system-supplier-names-and-patient-facing-services">GP system supplier names and patient-facing services</a>.</p>
       <h3 id="opticians-optometrists-ophthalmologists-and-orthoptists">opticians, optometrists, ophthalmologists and orthoptists</h3>
@@ -825,7 +829,6 @@
         <li>020 7450 4000</li>
         <li>0800 890 567</li>
         <li>07700 900 866</li>
-        <li>077718 300 300</li>
         <li>+44 (0)20 7450 4000</li>
         <li>+39 1 33 45 70 90</li>
       </ul>
@@ -937,8 +940,8 @@
       <h3 id="safety-precaution">safety precaution</h3>
       <p>We say "for safety".</p>
       <h3 id="secure-message">secure message</h3>
-      <p>We've found that people do not understand "secure message".</p>
-      <p>Use the words "text" or "email" instead.</p>
+      <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>
       <h3 id="sedating">sedating</h3>
       <p>See "<a href="#drowsy">drowsy</a>".</p>
       <h3 id="seek">seek</h3>

diff --git 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 style guide" %}
 {% set pageDescription = "Abbreviations, acronyms, capitalisation and other content styles." %}
-{% set dateUpdated = "February 2022" %}
+{% set dateUpdated = "August 2023" %}
 {% set backlog_issue_id = "322" %}
 
 {% extends "includes/app-layout.njk" %}
@@ -34,7 +34,7 @@
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#abbreviations-and-acronyms">Abbreviations and acronyms</a></li>
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#aligning-text">Aligning text</a></li>
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#apostrophes">Apostrophes</a></li>
-          <li class="app-side-nav__item"><a class="app-side-nav__link" href="#bold">Bold</a></li>
+          <li class="app-side-nav__item"><a class="app-side-nav__link" href="#bold-italics-and-underlining">Bold, italics and underlining</a></li>
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#capitalisation">Capitalisation</a></li>
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#contractions">Contractions</a></li>
           <li class="app-side-nav__item"><a class="app-side-nav__link" href="#full-stops">Full stops</a></li>
@@ -93,15 +93,34 @@
 
   <p>Read more about contractions like "you'll" and "can't" in the <a href="/content/formatting-and-punctuation#contractions"> contractions section</a>.</p>
 
-  <h2 id="bold">Bold</h2>
+  <h2 id="bold-italics-and-underlining">Bold, italics and underlining</h2>
+  <p>Use bold sparingly. Do not use italics or underlining (except for links, which are underlined by default).</p>
   <p>Use bold in technical instructions to tell users which element (for example, a text input or button) to select. For example: Select <strong>More</strong>, then select <strong>Messages</strong>.</p>
-  <p>Use bold sparingly – too much bold makes it difficult for users to know which parts of your content they need to pay most attention to.</p>
   <p>Do not use bold to emphasise text. To emphasise words or phrases, you can:</p>
   <ul>
     <li>front-load sentences</li>
     <li>use headings</li>
     <li>use bullets</li>
+    <li>use words like "important" in your content </li>
   </ul>
+  <details class="nhsuk-details">
+    <summary class="nhsuk-details__summary">
+      <span class="nhsuk-details__summary-text">
+        Why we say this
+      </span>
+    </summary>
+    <div class="nhsuk-details__text">
+    <p>Large areas of bold, italics or underlining can be difficult for some people to read. Too much bold makes it difficult for them to know which parts of your content to pay most attention to.</p>
+    <p>People may mistake stand-alone bold text for a heading and underlined text for a link.</p>
+    <p>By default, screen readers do not announce text in these HTML tags differently:</p>
+    <ul>
+      <li>&lt;b&gt; or &lt;strong&gt; for bold</li>
+      <li>&lt;i&gt; for italics</li>
+      <li>&lt;em&gt; for emphasis</li>
+    </ul>
+    <p>Users may miss anything you wanted to express by using them.</p>
+    </div>
+  </details>
 
   <h2 id="capitalisation">Capitalisation</h2>
   <p>We do not use block capitals as they're difficult for people to read.</p>
@@ -171,7 +190,41 @@
   <p>Use "long term" in phrases like "in the long term". But use a hyphen for "long-term" as an adjective, for example in "long-term care".  Do the same with "short term" and "short-term".</p>
   <p>Use "follow up" as a verb, but "follow-up" with a hyphen in "follow-up appointment".</p>
   <h3>Dashes</h3>
-  <p>Avoid using dashes to indicate a pause. Instead use a comma, or write shorter sentences.</p>
+  <p>Dashes can make content hard to read so we do not often use them.</p>
+  <p>You can use a dash, or a comma, in a bulleted list if you need to expand on an item. But follow our guidance on <a href="#lists">lists</a> and keep bullet points as short as possible.</p>
+    <div class="app-example app-example--content">
+    <strong class="nhsuk-tag app-example__heading">Example</strong>
+    <div class="nhsuk-do-dont-list">
+  <h3 class="nhsuk-do-dont-list__label">Do</h3>
+  <ul class="nhsuk-list nhsuk-list--tick" role="list">
+    <li>
+      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" width="34" height="34">
+        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12" stroke="#007f3b"></path>
+      </svg>
+      use insect repellent on your skin and make sure it's 50% DEET-based 
+    </li>
+    <li>
+      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" width="34" height="34">
+        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12" stroke="#007f3b"></path>
+      </svg>
+      sleep under mosquito nets treated with insecticide 
+    </li>
+    <li>
+      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true" width="34" height="34">
+        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12" stroke="#007f3b"></path>
+      </svg>
+      wear loose clothing that covers your arms and legs – the mosquitoes that carry Zika virus are most active during the day 
+    </li>
+  </ul>
+</div>
+</div>
+  <p>Consider other ways of formatting your content without dashes, for example:</p>
+  <ul>
+    <li>using a comma or brackets</li>
+    <li>writing shorter sentences</li>
+    <li>using subheadings</li>
+    <li>using a table</li>
+  </ul>
   <p>We use "to" instead of a dash for <a href="/content/numbers-measurements-dates-time#ranges">ranges of numbers, dates or time</a>.</p>
 
   <div class="nhsuk-inset-text nhsuk-u-margin-top-4">

diff --git a/app/views/content/how-to-write-good-questions-for-forms/index.njk b/app/views/content/how-to-write-good-questions-for-forms/index.njk
@@ -49,3 +49,12 @@
 
 
 {% endblock %}
+
+{% block afterContact %}
+
+{{ pagination({
+    "nextUrl": "/content/how-to-write-good-questions-for-forms/understand-the-problem-before-you-write-your-questions",
+    "nextPage": "Understand the problem before you write your questions"
+  }) }}
+
+{% endblock %}