nhsuk-frontend 5.0.0 → 6.0.0

package/CHANGELOG.md

@@ -1,6 +1,371 @@
 # NHS.UK frontend Changelog
 
-## 5.0.0 - Unreleased
+## 6.0.0 - 29 November 2021
+
+:boom: **Breaking changes**
+
+- Care card refactor
+
+Care card is now a variant of the card component.
+
+We've reworked the care cards component as a pattern to "Help users decide when and where to get care".  We've done this for 2 reasons.
+1. The care cards component was designed to deal with a specific problem in the context of health information. But we've seen teams use care cards in other ways and contexts with mixed results. By rewriting care cards as a pattern, we hope it's clearer what problem they're designed to solve.
+2. We're tidying up the frontend, reducing duplication in the code, making it easier to maintain and improving its performance. We're taking out things which aren't components in their own right. Care cards are a variation of the card component, used as a solution to a specific need, so we're taking them out of the frontend in a breaking change release today.
+
+- Remove Nav A-Z component & List panel component
+
+The Nav A-Z component & List Panel component are two components in the NHS.UK frontend that did not have guidance in the service manual. 
+
+### Nav A-Z
+
+#### Old code:
+
+```
+<nav class="nhsuk-nav-a-z" id="nhsuk-nav-a-z" role="navigation" aria-label="A to Z Navigation">
+  <ol class="nhsuk-nav-a-z__list" role="list">
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#A">A</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <span class="nhsuk-nav-a-z__link--disabled">B</span>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#C">C</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#D">D</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#E">E</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#F">F</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#G">G</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#H">H</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#I">I</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#J">J</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#K">K</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#L">L</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#M">M</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#N">N</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#O">O</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#P">P</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#Q">Q</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#R">R</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#S">S</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#T">T</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#U">U</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#V">V</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#W">W</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#X">X</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#Y">Y</a>
+    </li>
+    <li class="nhsuk-nav-a-z__item">
+      <a class="nhsuk-nav-a-z__link" href="#Z">Z</a>
+    </li>
+  </ol>
+</nav>
+```
+
+#### New code:
+
+The nav A-Z component can be recreated using `nhsuk-list`.
+
+```
+<nav class="nhsuk-u-margin-bottom-4 nhsuk-u-margin-top-4" id="nhsuk-nav-a-z" role="navigation" aria-label="A to Z Navigation">
+  <ol class="nhsuk-list nhsuk-u-clear nhsuk-u-margin-0" role="list">
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#A">A</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <span class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block nhsuk-u-secondary-text-color">B</span>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#C">C</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#D">D</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#E">E</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#F">F</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#G">G</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#H">H</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#I">I</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#J">J</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#K">K</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#L">L</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#M">M</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#N">N</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#O">O</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#P">P</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Q">Q</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#R">R</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#S">S</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#T">T</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#U">U</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#V">V</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#W">W</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#X">X</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Y">Y</a>
+    </li>
+    <li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
+      <a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Z">Z</a>
+    </li>
+  </ol>
+</nav>
+```
+
+The new code uses a new utility class:
+
+```
+.nhsuk-u-float-left {
+  float: left !important;
+}
+```
+
+All the other code already exists and the spacing utility classes can be customised to fit into your design.
+
+### List panel
+
+#### Old code:
+
+```
+<ol class="nhsuk-list">
+  <li>
+    <div class="nhsuk-list-panel">
+      <h2 class="nhsuk-list-panel__label" id="A">A</h2>
+      <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
+        <li class="nhsuk-list-panel__item">
+          <a class="nhsuk-list-panel__link" href="/conditions/abdominal-aortic-aneurysm/">AAA</a>
+        </li>
+        <li class="nhsuk-list-panel__item">
+          <a class="nhsuk-list-panel__link" href="/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a>
+        </li>
+        <li class="nhsuk-list-panel__item">
+          <a class="nhsuk-list-panel__link" href="/conditions/abscess/">Abscess</a>
+        </li>
+      </ul>
+      <div class="nhsuk-back-to-top">
+        <a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
+          <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="19" height="19">
+            <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
+          </svg>
+          Back to top
+        </a>
+      </div>
+    </div>
+  </li>
+  <li>
+    <div class="nhsuk-list-panel">
+      <h2 class="nhsuk-list-panel__label" id="B">B</h2>
+      <div class="nhsuk-list-panel__box nhsuk-list-panel__box--with-label">
+        <p class="nhsuk-list-panel--results-items__no-results">There are currently no conditions listed</p>
+      </div>
+      <div class="nhsuk-back-to-top">
+        <a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
+          <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="19" height="19">
+            <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
+          </svg>
+          Back to top
+        </a>
+      </div>
+    </div>
+  </li>
+  <li>
+    <div class="nhsuk-list-panel">
+      <h2 class="nhsuk-list-panel__label" id="C">C</h2>
+      <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
+        <li class="nhsuk-list-panel__item">
+          <a class="nhsuk-list-panel__link" href="/conditions/chest-pain/">Chest pain</a>
+        </li>
+        <li class="nhsuk-list-panel__item">
+          <a class="nhsuk-list-panel__link" href="/conditions/cold-sores/">Cold sore</a>
+        </li>
+      </ul>
+      <div class="nhsuk-back-to-top">
+        <a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
+          <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="19" height="19">
+            <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
+          </svg>
+          Back to top
+        </a>
+      </div>
+    </div>
+  </li>
+  <li>
+    <div class="nhsuk-list-panel">
+      <h2 class="nhsuk-list-panel__label" id="D">D</h2>
+      <ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
+        <li class="nhsuk-list-panel__item">
+          <a class="nhsuk-list-panel__link" href="/conditions/dandruff/">Dandruff</a>
+        </li>
+        <li class="nhsuk-list-panel__item">
+          <a class="nhsuk-list-panel__link" href="/conditions/dementia/">Dementia</a>
+        </li>
+        <li class="nhsuk-list-panel__item">
+          <a class="nhsuk-list-panel__link" href="/conditions/toothache/">Dental pain</a>
+        </li>
+      </ul>
+      <div class="nhsuk-back-to-top">
+        <a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
+          <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="19" height="19">
+            <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
+          </svg>
+          Back to top
+        </a>
+      </div>
+    </div>
+  </li>
+</ol>
+```
+
+The list panel component can be recreated by adding `nhsuk-list--border` to the [list styles in typography](https://service-manual.nhs.uk/design-system/styles/typography#lists)
+
+#### New code:
+
+```
+<ul class="nhsuk-list nhsuk-list--border">
+  <li><a href="#">List item as a link</a></li>
+  <li><a href="#">List item as a link</a></li>
+  <li><a href="#">List item as a link</a></li>
+</ul>
+```
+
+## 5.2.1 - 28 October 2021
+
+:wrench: **Fixes**
+
+- Tidying and removing of duplicate styles in header SCSS ([Issue 711](https://github.com/nhsuk/nhsuk-frontend/issues/711)), ([PR 779](https://github.com/nhsuk/nhsuk-frontend/pull/779)).
+- Removal of unnecessary static `aria-label="Open menu"` on the header menu button. Included more descriptive `aria-expanded="false"` on page load.
+- Fixing misaligned search magnifiying glass in header on landscape iOS devices ([Issue 781](https://github.com/nhsuk/nhsuk-frontend/issues/781), [PR 782](https://github.com/nhsuk/nhsuk-frontend/pull/782))
+
+## 5.2.0 - 22 September 2021
+
+:new: **New features**
+
+- Add "None of these" JavaScript behaviour to checkboxes - allowing all checkboxes in a group to be automatically unchecked when the "None of the above" option is checked ([PR 756](https://github.com/nhsuk/nhsuk-frontend/pull/756))
+
+:wrench: **Fixes**
+
+- Transactional header defaults to wrapping underneath the logo without the need for a modifier ([Issue 720](https://github.com/nhsuk/nhsuk-frontend/issues/720)).
+- Add width, height, stroke and fill attributes to inline SVGs in order that they render at appropriate sizes when viewed with disabled/broken/missing CSS  ([PR 761](https://github.com/nhsuk/nhsuk-frontend/pull/761)).
+- Search input focus state style (desktop) – fix border width ([Issue 768](https://github.com/nhsuk/nhsuk-frontend/issues/768), [PR 771](https://github.com/nhsuk/nhsuk-frontend/pull/771)).
+- Stop polyfilling details elements in browsers that support it natively since the polyfill was causing issues with JAWS/Firefox ([Issue 754](https://github.com/nhsuk/nhsuk-frontend/issues/754), [PR 773](https://github.com/nhsuk/nhsuk-frontend/pull/773))
+
+## 5.1.0 - 14 May 2021
+
+:new: **New features**
+
+- Ensure Error Summary receives keyboard focus when rendered ([Issue 702](https://github.com/nhsuk/nhsuk-frontend/issues/702)).
+- Enhance Error Summary link focus behaviour such that the nearest label/legend remains in view when scrolling ([PR 725](https://github.com/nhsuk/nhsuk-frontend/pull/725)).
+
+  If you are importing component JavaScript with ES6 imports, you will need to update your imports to include the Error Summary JavaScript:
+
+  ```javascript
+  // Components
+  import ErrorSummary from '../node_modules/nhsuk-frontend/packages/components/error-summary/error-summary';
+
+  // Initialize components
+  document.addEventListener('DOMContentLoaded', () => {
+    ErrorSummary();
+  });
+  ```
+
+  Note: You may need to change the path to `node_modules` depending on your project structure.
+- Added `$nhsuk-fonts-path` and `$nhsuk-include-font-face` variables to allow for self-hosted fonts or
+disabling font altogether
+
+  The default `@font-face`, "Frutiger", is loaded from `https://assets.nhs.uk`. The host for the fonts can be
+  overridden or disabled entirely.
+
+  - `$nhsuk-fonts-path`: base URL to load fonts from (e.g. `/fonts/`; trailing slash required)
+  - `$nhsuk-include-font-face`: set to false to disable the inclusion of the `@font-face` definition entirely
+
+:wrench: **Fixes**
+
+- Fix aXe accessibility warning on breadcrumb and expander components ([PR 718](https://github.com/nhsuk/nhsuk-frontend/pull/718))
+- Changed SCSS linting package to stylelint from sass-lint, which is more extensible and actively maintained.
+
+## 5.0.0 - 16 March 2021
 
 :boom: **Breaking changes**
 
@@ -68,7 +433,6 @@ NHS website specific and uses a third party supplier for the search results. ([I
 - Add a `max-width` to the service header with service name to accommodate longer service names ([Issue 708](https://github.com/nhsuk/nhsuk-frontend/issues/708))
 - Setting IE to use display block for the responsive table on small resolutions ([Issue 712](https://github.com/nhsuk/nhsuk-frontend/issues/712))
 
-
 ## 4.1.0 - 21 January 2021
 
 :new: **New features**
@@ -883,4 +1247,3 @@ See more about using ES6 modules in your project in the [installing with npm - i
 
 - This release includes all the content page components and the first
   installable npm package.
-

package/README.md

@@ -24,12 +24,9 @@ Visit our [support for browsers and assistive technology](/docs/contributing/bro
 
 Read our [contributing guidelines](CONTRIBUTING.md) to contribute to NHS.UK frontend.
 
-We created this library with help from:
+## Development environment
 
-- [Government Digital Service (GDS)](https://github.com/alphagov/)
-- [Harry Roberts (csswizardry)](https://github.com/csswizardry)
-- [Phil Sherry](https://github.com/philsherry)
-- [Caroline Jarrett](https://twitter.com/cjforms)
+[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/nhsuk/nhsuk-frontend)
 
 ## Get in touch