Merge branch 'main' into node-20-upgrade

nhsuk · Jun 13, 2024 · 9fb9ad6 · 9fb9ad6
2 parents 3f9dc3e + f2b2718
commit 9fb9ad6
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 63 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,21 @@
 # NHS.UK frontend Changelog
 
-## Unreleased
+## 8.2.0 - 12 June 2024
+
+:recycle: **Changes**
+
+- Align label bottom margins with fieldset legend bottom margins ([PR 946](https://github.com/nhsuk/nhsuk-frontend/pull/946))
 
 :wrench: **Fixes**
 
-- Align label bottom margins with fieldset legend bottom margins ([PR 946](https://github.com/nhsuk/nhsuk-frontend/pull/946)).
-- Adds `opacity: 1` to header search placeholder, to increase colour contrast on firefox.
-- Adds aria-hidden to labels in responsive tables that show only on small screens, to avoid screenreaders calling out them out twice ([PR 942](https://github.com/nhsuk/nhsuk-frontend/pull/942)).
-- Removing classes from icon card that are not doing anything.
-- Align label bottom margins with fieldset legend bottom margins ([PR 946](https://github.com/nhsuk/nhsuk-frontend/pull/946)).
-- Fixed bug with inset-text component requiring uppercase `html` argument. Fixes ([Issue 950](https://github.com/nhsuk/nhsuk-frontend/issues/950)).
+- Change example link to hash ([PR 962](https://github.com/nhsuk/nhsuk-frontend/pull/962))
+- Adjust nested list spacing ([PR 961](https://github.com/nhsuk/nhsuk-frontend/pull/961))
+- Fix header navigation item alignment ([PR 054](https://github.com/nhsuk/nhsuk-frontend/pull/954))
+- Fix bug with inset text component requiring uppercase `html` argument ([Issue 950](https://github.com/nhsuk/nhsuk-frontend/issues/950))
+- Remove unused CSS from icon card component ([PR 943](https://github.com/nhsuk/nhsuk-frontend/pull/943))
+- Remove unused CSS from breadcrumbs component ([PR 943](https://github.com/nhsuk/nhsuk-frontend/pull/943))
+- Add `aria-hidden` to responsive labels in responsive tables, to avoid screen readers repeating them ([PR 942](https://github.com/nhsuk/nhsuk-frontend/pull/942))
+- Add `opacity: 1` to header search placeholder, to increase colour contrast on Firefox ([PR 939](https://github.com/nhsuk/nhsuk-frontend/pull/939))
 
 ## 8.1.1 - 14 March 2024
 
@@ -131,15 +137,15 @@ We removed the need to add the last breadcrumb outside of the 'Items' list, now
   {{ breadcrumb({
     items: [
       {
-        href: "/level-one",
+        href: "#",
         text: "Level one"
       },
       {
-        href: "/level-one/level-two",
+        href: "#",
         text: "Level two"
       }
     ],
-    href: "/level-one/level-two/level-three",
+    href: "#",
     text: "Level three"
   }) }}
 ```
@@ -150,15 +156,15 @@ You will now only need this:
   {{ breadcrumb({
     items: [
       {
-        href: "/level-one",
+        href: "#",
         text: "Level one",
       },
       {
-        href: "/level-one/level-two",
+        href: "#",
         text: "Level two"
       },
       {
-        href: "/level-one/level-two/level-three",
+        href: "#",
         text: "Level three"
       }
     ]

diff --git a/app/components/all.njk b/app/components/all.njk
@@ -69,15 +69,15 @@
     items: [
       {
         text: "Home",
-        href: "https://www.nhs.uk/"
+        href: "#"
       },
       {
         text: "Health A-Z",
-        href: "https://www.nhs.uk/conditions"
+        href: "#"
       },
       {
         text: "Abscess",
-        href: "https://www.nhs.uk/conditions/abscess/"
+        href: "#"
       }
     ]
   }) }}
@@ -89,26 +89,26 @@
   {{ contentsList({
     items: [
       {
-        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/",
+        href: "#",
         text: "What is AMD?",
         current: "true"
       },
       {
-        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/",
+        href: "#",
         text: "Symptoms"
       },
       {
-        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/getting-diagnosed/",
+        href: "#",
         text: "Getting diagnosed"
       }
       ,
       {
-        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/treatment/",
+        href: "#",
         text: "Treatments"
       }
       ,
       {
-        href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/living-with-amd/",
+        href: "#",
         text: "Living with AMD"
       }
     ]

diff --git a/app/components/breadcrumb/index.njk b/app/components/breadcrumb/index.njk
@@ -8,21 +8,21 @@
   {{ breadcrumb({
     items: [
       {
-        href: "/level-one",
+        href: "#",
         text: "Level one",
         attributes: {lang: "en"}
       },
       {
-        href: "/level-one/level-two",
+        href: "#",
         text: "Level two"
       },
       {
-        href: "/level-one/level-two/level-three",
+        href: "#",
         text: "Level three",
         attributes: {lang: "en"}
       }
     ],
-    href: "/level-one/level-two/level-three/level-four",
+    href: "#",
     text: "Level four",
     classes: "example-class-one example-class-two",
     attributes: {lang: "en"}

diff --git a/app/components/button/link.njk b/app/components/button/link.njk
@@ -12,7 +12,7 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ button({
             "text": "Link button",
-            "href": "/nhsuk-frontend/"
+            "href": "/"
           }) }}
         </div>
       </div>

diff --git a/app/components/contents-list/index.njk b/app/components/contents-list/index.njk
@@ -13,26 +13,26 @@
         {{ contentsList({
           items: [
             {
-              href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/",
+              href: "#",
               text: "What is AMD?",
               current: "true"
             },
             {
-              href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/",
+              href: "#",
               text: "Symptoms"
             },
             {
-              href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/getting-diagnosed/",
+              href: "#",
               text: "Getting diagnosed"
             }
             ,
             {
-              href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/treatment/",
+              href: "#",
               text: "Treatments"
             }
             ,
             {
-              href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/living-with-amd/",
+              href: "#",
               text: "Living with AMD"
             }
           ]

diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -127,6 +127,11 @@
     <li><a href="../components/warning-callout/index.html">Warning callout</a></li>
     <li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
   </ul>
+
+  <h2>Styles</h2>
+  <ul class="nhsuk-list">
+    <li><a href="../styles/lists.html">Lists</a></li>
+  </ul>
 {% endblock %}
 
 {% block footer %}
@@ -156,4 +161,4 @@
     ]
   })}}
 
-{% endblock %}
+{% endblock %}
diff --git a/app/styles/lists.njk b/app/styles/lists.njk
@@ -0,0 +1,101 @@
+{% set title = 'Lists' %}
+
+{% extends 'page.njk' %}
+
+{% block header %}
+  {{ super() }}
+{% endblock %}
+
+{% block breadcrumb %}
+  {{ breadcrumb({
+    items: [
+      {
+        href: "../../",
+        text: "NHS.UK frontend"
+      },
+      {
+        href: "../pages/examples.html",
+        text: "Examples"
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+
+  <h1 class="nhsuk-heading-xl">Lists</h1>
+
+  <h2 class="nhsuk-heading-m">Plain list</h2>
+
+  <ul class="nhsuk-list">
+    <li><a href="#">Money, work and benefits</a></li>
+    <li><a href="#">Care after a hospital stay</a></li>
+    <li><a href="#">Support and benefits for carers</a></li>
+  </ul>
+
+  <h2 class="nhsuk-heading-m">Bulleted list</h2>
+
+  <ul class="nhsuk-list nhsuk-list--bullet">
+    <li>tiredness and lack of energy</li>
+    <li>shortness of breath</li>
+    <li>noticeable heartbeats (heart palpitations)</li>
+    <li>pale skin</li>
+  </ul>
+
+  <h2 class="nhsuk-heading-m">Numbered list</h2>
+
+  <ol class="nhsuk-list nhsuk-list--number">
+    <li>Dissolve half a teaspoon of salt in a glass of warm water.</li>
+    <li>Gargle with the solution then spit it out – don't swallow it.</li>
+    <li>Repeat as often as you like.</li>
+  </ol>
+
+  <h2 class="nhsuk-heading-m">Bulleted list with nested bulleted list</h2>
+
+  <ul class="nhsuk-list nhsuk-list--bullet">
+    <li>Accessibility</li>
+    <li>Policies
+      <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>Cookies</li>
+        <li>Terms and conditions</li>
+        <li>Privacy policy</li>
+      </ul>
+    </li>
+    <li>Sitemap</li>
+  </ul>
+
+  <h2 class="nhsuk-heading-m">Numbered list with nested numbered list</h2>
+
+  <ul class="nhsuk-list nhsuk-list--number">
+    <li>Accessibility</li>
+    <li>Policies
+      <ul class="nhsuk-list nhsuk-list--number">
+        <li>Cookies</li>
+        <li>Terms and conditions</li>
+        <li>Privacy policy</li>
+      </ul>
+    </li>
+    <li>Sitemap</li>
+  </ul>
+
+  <h2 class="nhsuk-heading-m">Bulleted list with 2 nested lists</h2>
+
+  <ul class="nhsuk-list nhsuk-list--bullet">
+    <li>Service standard</li>
+    <li>Design system
+      <ul class="nhsuk-list nhsuk-list--bullet">
+        <li>Styles</li>
+        <li>Components
+          <ul class="nhsuk-list nhsuk-list--bullet">
+            <li>Buttons</li>
+            <li>Checkboxes</li>
+          </ul>
+        </li>
+        <li>Patterns</li>
+      </ul>
+    </li>
+    <li>Content guide</li>
+  </ul>
+
+
+{% endblock %}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-frontend",
-  "version": "8.1.1",
+  "version": "8.2.0",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
   "scripts": {
     "prepare": "gulp bundle",

diff --git a/packages/components/breadcrumb/README.md b/packages/components/breadcrumb/README.md
@@ -36,16 +36,16 @@ Find out more about the breadcrumb component and when to use it in the [NHS digi
 {{ breadcrumb({
   items: [
     {
-      href: "/level-one",
+      href: "#",
       text: "Level one",
       attributes: {lang: "en"}
     },
     {
-      href: "/level-one/level-two",
+      href: "#",
       text: "Level two"
     },
     {
-      href: "/level-one/level-two/level-three",
+      href: "#",
       text: "Level three"
     }
   ],

diff --git a/packages/components/breadcrumb/_breadcrumb.scss b/packages/components/breadcrumb/_breadcrumb.scss
@@ -18,26 +18,6 @@
   padding-bottom: nhsuk-spacing(3);
   padding-top: 20px; /* [2] */
 
-  .nhsuk-icon__chevron-right {
-    fill: $color_nhsuk-grey-3;
-    height: 18px;
-    position: relative;
-    top: 5px;
-    width: 18px;
-
-    @include mq($from: large-desktop) {
-      margin: 0 3px 0 5px;
-    }
-  }
-
-  .nhsuk-icon__chevron-left {
-    float: left;
-    height: 24px;
-    left: -8px;
-    position: relative;
-    width: 24px;
-  }
-
   + .nhsuk-width-container .nhsuk-main-wrapper {
     padding-top: 0;
   }