nhsuk-frontend - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

package.json

 {
   "name": "nhsuk-frontend",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "The NHS website frontend styles, for creating NHS websites and services.",
@@ -5,0 +5,0 @@ "sasslintConfig": "config/sass-lint.yml",

packages/components/footer/README.md

@@ -19,26 +19,20 @@ # Footer
     <div class="nhsuk-width-container">
+      <div class="nhsuk-footer__logo">
+        <a href="/" class="global-footer__link">
+          <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
+            <g fill="none">
+              <path fill="#fff" d="M0 39.842h98.203V0H0z"></path>
+              <path fill="#0058ad" d="M9.548 3.817H20.16l6.52 22.08h.09l4.465-22.08h8.021l-6.74 31.84H21.939l-6.65-22.032h-.09l-4.424 22.031H2.754l6.794-31.84m32.852.001h8.518l-2.502 12.18h10.069l2.508-12.18h8.519l-6.61 31.84h-8.518l2.826-13.638H47.135L44.31 35.656h-8.518L42.4 3.816m49.53 7.209c-1.64-.773-3.873-1.457-7.016-1.457-3.37 0-6.106.498-6.106 3.056 0 4.512 12.35 2.828 12.35 12.499 0 8.802-8.16 11.085-15.54 11.085-3.281 0-7.065-.78-9.842-1.648l2.006-6.477c1.682 1.096 5.058 1.827 7.835 1.827 2.646 0 6.789-.503 6.789-3.786 0-5.111-12.35-3.194-12.35-12.176 0-8.214 7.202-10.676 14.176-10.676 3.92 0 7.608.413 9.75 1.413l-2.052 6.34"></path>
+            </g>
+            <image xlink:href="" src="/assets/logos/fallback/logo-nhs.png"></image>
+          </svg>
+          <span class="nhsuk-u-visually-hidden">NHS homepage</span>
+        </a>
+      </div>
       <ul class="nhsuk-footer__list">
-        <li class="nhsuk-footer__logo nhsuk-footer__list-item">
-          <a href="/" class="global-footer__link">
-            <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
-              <g fill="none">
-                <path fill="#fff" d="M0 39.842h98.203V0H0z"></path>
-                <path fill="#0058ad" d="M9.548 3.817H20.16l6.52 22.08h.09l4.465-22.08h8.021l-6.74 31.84H21.939l-6.65-22.032h-.09l-4.424 22.031H2.754l6.794-31.84m32.852.001h8.518l-2.502 12.18h10.069l2.508-12.18h8.519l-6.61 31.84h-8.518l2.826-13.638H47.135L44.31 35.656h-8.518L42.4 3.816m49.53 7.209c-1.64-.773-3.873-1.457-7.016-1.457-3.37 0-6.106.498-6.106 3.056 0 4.512 12.35 2.828 12.35 12.499 0 8.802-8.16 11.085-15.54 11.085-3.281 0-7.065-.78-9.842-1.648l2.006-6.477c1.682 1.096 5.058 1.827 7.835 1.827 2.646 0 6.789-.503 6.789-3.786 0-5.111-12.35-3.194-12.35-12.176 0-8.214 7.202-10.676 14.176-10.676 3.92 0 7.608.413 9.75 1.413l-2.052 6.34"></path>
-              </g>
-              <image xlink:href="" src="/assets/logos/fallback/logo-nhs.png"></image>
-            </svg>
-            <span class="nhsuk-u-visually-hidden">NHS homepage</span>
-          </a>
-        </li>
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/Pages/nhs-sites.aspx">NHS sites</a></li>
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/about-us">About us</a></li>
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/contact-us/">Contact us</a></li>
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/Personalisation/Login.aspx">Profile editor login</a></li>
-      </ul>
-      <ul class="nhsuk-footer__list">
         <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/about-us/sitemap/">Sitemap</a></li>
         <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/accessibility/">Accessibility</a></li>
         <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/our-policies/">Our policies</a></li>
-        <li class="nhsuk-footer__list-item">&copy; Crown Copyright</li>
       </ul>
+      <p class="nhsuk-footer__copyright">&copy; Crown Copyright</li>
     </div>
@@ -59,15 +53,15 @@ </div>
     {
-      "URL": "https://www.nhs.uk/Pages/nhs-sites.aspx",
+      "url": "https://www.nhs.uk/Pages/nhs-sites.aspx",
       "label": "NHS sites"
     },
     {
-      "URL": "https://www.nhs.uk/about-us",
+      "url": "https://www.nhs.uk/about-us",
       "label": "About us"
     },
     {
-      "URL": "https://www.nhs.uk/contact-us/",
+      "url": "https://www.nhs.uk/contact-us/",
       "label": "Contact us"
     },
     {
-      "URL": "https://www.nhs.uk/Personalisation/Login.aspx",
+      "url": "https://www.nhs.uk/Personalisation/Login.aspx",
       "label": "Profile editor login"
@@ -78,11 +72,11 @@ }
     {
-      "URL": "https://www.nhs.uk/about-us/sitemap/",
+      "url": "https://www.nhs.uk/about-us/sitemap/",
       "label": "Sitemap"
     },
     {
-      'URL': 'https://www.nhs.uk/accessibility/',
+      'url': 'https://www.nhs.uk/accessibility/',
       'label': 'Accessibility'
     },
     {
-      "URL": "https://www.nhs.uk/our-policies/",
+      "url": "https://www.nhs.uk/our-policies/",
       "label": "Our policies"
@@ -93,1 +87,15 @@ }
 ```
+
+#### Nunjucks arguments
+
+The footer Nunjucks macro takes the following arguments:
+
+| Name                         | Type     | Required  | Description  |
+| -----------------------------|----------|-----------|--------------|
+| **primaryLinks**             | array    | No        | Array of primary navigation items for use in the footer. |
+| **primaryLinks.[].url**      | string   | No        | The href of a primary navigation item in the footer. |
+| **primaryLinks.[].label**    | string   | No        | The label of a primary navigation item in the footer. |
+| **secondaryLinks**           | array    | No        | Array of secondary navigation items for use in the footer. |
+| **secondaryLinks.[].url**    | string   | No        | The href of a secondary navigation item in the footer. |
+| **secondaryLinks.[].label**  | string   | No        | The label of a secondary navigation item in the footer. |
+| **homeHref**                 | string   | No        | The href of the home link for the logo. Defaults to "/". |

packages/components/header/README.md

@@ -9,3 +9,3 @@ # Header
 
-For this component to work, you need to make sure you include the required JavaScript. You can either include the 
+For this component to work, you need to make sure you include the required JavaScript. You can either include the
 compiled JavaScript for all components `nhsuk.min.js` or the individual component JavaScript `header.js`.
@@ -30,8 +30,6 @@
       <a href="/" class="nhsuk-header__link" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
-          <g fill="none">
-            <path fill="#fff" d="M0 39.842h98.203V0H0z"></path>
-            <path fill="#0058ad" d="M9.548 3.817H20.16l6.52 22.08h.09l4.465-22.08h8.021l-6.74 31.84H21.939l-6.65-22.032h-.09l-4.424 22.031H2.754l6.794-31.84m32.852.001h8.518l-2.502 12.18h10.069l2.508-12.18h8.519l-6.61 31.84h-8.518l2.826-13.638H47.135L44.31 35.656h-8.518L42.4 3.816m49.53 7.209c-1.64-.773-3.873-1.457-7.016-1.457-3.37 0-6.106.498-6.106 3.056 0 4.512 12.35 2.828 12.35 12.499 0 8.802-8.16 11.085-15.54 11.085-3.281 0-7.065-.78-9.842-1.648l2.006-6.477c1.682 1.096 5.058 1.827 7.835 1.827 2.646 0 6.789-.503 6.789-3.786 0-5.111-12.35-3.194-12.35-12.176 0-8.214 7.202-10.676 14.176-10.676 3.92 0 7.608.413 9.75 1.413l-2.052 6.34"></path>
-          </g>
-          <image xlink:href="" src="/assets/logos/fallback/logo-nhs.png"></image>
+        <svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
+          <path fill="#fff" d="M0 0h40v16H0z"></path>
+          <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          <image xlink:href="" src="https://assets.nhs.uk/images/nhs-logo-white.png"></image>
         </svg>
@@ -54,3 +52,3 @@ </a>
             <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
-            <input class="nhsuk-search__input" id="search-field" placeholder="Enter a search term" autocomplete="off" name="search-field" type="search">
+            <input class="nhsuk-search__input" id="search-field" placeholder="Search" autocomplete="off" name="search-field" type="search">
             <button type="submit" class="nhsuk-search__submit">
@@ -86,3 +84,3 @@ <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
         <a href="/" class="nhsuk-header__navigation-link">
-          Home 
+          Home
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -95,3 +93,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/conditions" class="nhsuk-header__navigation-link">
-          Health A-Z 
+          Health A-Z
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -104,3 +102,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/live-well/" class="nhsuk-header__navigation-link">
-          Live Well 
+          Live Well
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -113,3 +111,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/conditions/social-care-and-support/" class="nhsuk-header__navigation-link">
-          Care and support 
+          Care and support
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -122,3 +120,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/news/" class="nhsuk-header__navigation-link">
-          Health news 
+          Health news
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -131,3 +129,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/service-search" class="nhsuk-header__navigation-link">
-          Services near you 
+          Services near you
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -179,2 +177,16 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
 
+#### Nunjucks arguments
+
+The header Nunjucks macro takes the following arguments:
+
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **showNav**                | boolean  | Yes       | Set to "true" to show the navigation links in the header. |
+| **showSearch**             | boolean  | Yes       | Set to "true" to show the site search input form. |
+| **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |
+| **primaryLinks**           | array    | No        | Array of navigation links. |
+| **primaryLinks.[].url**    | string   | No        | The href of the navigation link. |
+| **primaryLinks.[].label**  | string   | No        | The label of the navigation link. |
+
+
 ### Header with navigation
@@ -191,8 +203,6 @@
       <a href="/" class="nhsuk-header__link" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
-          <g fill="none">
-            <path fill="#fff" d="M0 39.842h98.203V0H0z"></path>
-            <path fill="#0058ad" d="M9.548 3.817H20.16l6.52 22.08h.09l4.465-22.08h8.021l-6.74 31.84H21.939l-6.65-22.032h-.09l-4.424 22.031H2.754l6.794-31.84m32.852.001h8.518l-2.502 12.18h10.069l2.508-12.18h8.519l-6.61 31.84h-8.518l2.826-13.638H47.135L44.31 35.656h-8.518L42.4 3.816m49.53 7.209c-1.64-.773-3.873-1.457-7.016-1.457-3.37 0-6.106.498-6.106 3.056 0 4.512 12.35 2.828 12.35 12.499 0 8.802-8.16 11.085-15.54 11.085-3.281 0-7.065-.78-9.842-1.648l2.006-6.477c1.682 1.096 5.058 1.827 7.835 1.827 2.646 0 6.789-.503 6.789-3.786 0-5.111-12.35-3.194-12.35-12.176 0-8.214 7.202-10.676 14.176-10.676 3.92 0 7.608.413 9.75 1.413l-2.052 6.34"></path>
-          </g>
-          <image xlink:href="" src="/assets/logos/fallback/logo-nhs.png"></image>
+        <svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
+          <path fill="#fff" d="M0 0h40v16H0z"></path>
+          <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          <image xlink:href="" src="https://assets.nhs.uk/images/nhs-logo-white.png"></image>
         </svg>
@@ -220,3 +230,3 @@ </a>
         <a href="/" class="nhsuk-header__navigation-link">
-          Home 
+          Home
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -229,3 +239,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/conditions" class="nhsuk-header__navigation-link">
-          Health A-Z 
+          Health A-Z
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -238,3 +248,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/live-well/" class="nhsuk-header__navigation-link">
-          Live Well 
+          Live Well
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -247,3 +257,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/conditions/social-care-and-support/" class="nhsuk-header__navigation-link">
-          Care and support 
+          Care and support
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -256,3 +266,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/news/" class="nhsuk-header__navigation-link">
-          Health news 
+          Health news
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -265,3 +275,3 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
         <a href="https://www.nhs.uk/service-search" class="nhsuk-header__navigation-link">
-          Services near you 
+          Services near you
           <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
@@ -313,2 +323,16 @@ <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"/>
 
+#### Nunjucks arguments
+
+The header with navigation Nunjucks macro takes the following arguments:
+
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **showNav**                | boolean  | Yes       | Set to "true" to show the navigation links in the header. |
+| **showSearch**             | boolean  | Yes       | Set to "false" to not show the site search input form. |
+| **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |
+| **primaryLinks**           | array    | No        | Array of navigation links. |
+| **primaryLinks.[].url**    | string   | No        | The href of the navigation link. |
+| **primaryLinks.[].label**  | string   | No        | The label of the navigation link. |
+
+
 ### Header with search
@@ -325,8 +349,6 @@
       <a href="/" class="nhsuk-header__link" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
-          <g fill="none">
-            <path fill="#fff" d="M0 39.842h98.203V0H0z"></path>
-            <path fill="#0058ad" d="M9.548 3.817H20.16l6.52 22.08h.09l4.465-22.08h8.021l-6.74 31.84H21.939l-6.65-22.032h-.09l-4.424 22.031H2.754l6.794-31.84m32.852.001h8.518l-2.502 12.18h10.069l2.508-12.18h8.519l-6.61 31.84h-8.518l2.826-13.638H47.135L44.31 35.656h-8.518L42.4 3.816m49.53 7.209c-1.64-.773-3.873-1.457-7.016-1.457-3.37 0-6.106.498-6.106 3.056 0 4.512 12.35 2.828 12.35 12.499 0 8.802-8.16 11.085-15.54 11.085-3.281 0-7.065-.78-9.842-1.648l2.006-6.477c1.682 1.096 5.058 1.827 7.835 1.827 2.646 0 6.789-.503 6.789-3.786 0-5.111-12.35-3.194-12.35-12.176 0-8.214 7.202-10.676 14.176-10.676 3.92 0 7.608.413 9.75 1.413l-2.052 6.34"></path>
-          </g>
-          <image xlink:href="" src="/assets/logos/fallback/logo-nhs.png"></image>
+        <svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
+          <path fill="#fff" d="M0 0h40v16H0z"></path>
+          <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          <image xlink:href="" src="https://assets.nhs.uk/images/nhs-logo-white.png"></image>
         </svg>
@@ -346,3 +368,3 @@ </a>
             <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
-            <input class="nhsuk-search__input" id="search-field" placeholder="Enter a search term" autocomplete="off" name="search-field" type="search">
+            <input class="nhsuk-search__input" id="search-field" placeholder="Search" autocomplete="off" name="search-field" type="search">
             <button type="submit" class="nhsuk-search__submit">
@@ -404,6 +426,20 @@ <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
 
-### Header with logo (transactional header)
+#### Nunjucks arguments
 
-[Preview the header with lgoo component](https://nhsuk.github.io/nhsuk-frontend/components/header-transactional.html)
+The header with search Nunjucks macro takes the following arguments:
 
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **showNav**                | boolean  | Yes       | Set to "false" to not show the navigation links in the header. |
+| **showSearch**             | boolean  | Yes       | Set to "true" to show the site search input form. |
+| **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |
+| **primaryLinks**           | array    | No        | Array of navigation links. |
+| **primaryLinks.[].url**    | string   | No        | The href of the navigation link. |
+| **primaryLinks.[].label**  | string   | No        | The label of the navigation link. |
+
+
+### Header with logo
+
+[Preview the header with logo component](https://nhsuk.github.io/nhsuk-frontend/components/header-logo.html)
+
 ### HTML markup
@@ -416,8 +452,6 @@
       <a href="/" class="nhsuk-header__link" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
-          <g fill="none">
-            <path fill="#fff" d="M0 39.842h98.203V0H0z"></path>
-            <path fill="#0058ad" d="M9.548 3.817H20.16l6.52 22.08h.09l4.465-22.08h8.021l-6.74 31.84H21.939l-6.65-22.032h-.09l-4.424 22.031H2.754l6.794-31.84m32.852.001h8.518l-2.502 12.18h10.069l2.508-12.18h8.519l-6.61 31.84h-8.518l2.826-13.638H47.135L44.31 35.656h-8.518L42.4 3.816m49.53 7.209c-1.64-.773-3.873-1.457-7.016-1.457-3.37 0-6.106.498-6.106 3.056 0 4.512 12.35 2.828 12.35 12.499 0 8.802-8.16 11.085-15.54 11.085-3.281 0-7.065-.78-9.842-1.648l2.006-6.477c1.682 1.096 5.058 1.827 7.835 1.827 2.646 0 6.789-.503 6.789-3.786 0-5.111-12.35-3.194-12.35-12.176 0-8.214 7.202-10.676 14.176-10.676 3.92 0 7.608.413 9.75 1.413l-2.052 6.34"></path>
-          </g>
-          <image xlink:href="" src="/assets/logos/fallback/logo-nhs.png"></image>
+        <svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
+          <path fill="#fff" d="M0 0h40v16H0z"></path>
+          <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          <image xlink:href="" src="https://assets.nhs.uk/images/nhs-logo-white.png"></image>
         </svg>
@@ -439,26 +473,266 @@ </a>
   "showNav": "false",
-  "showSearch": "false",
-  "primaryLinks": [
-    {
-      "url"  : "https://www.nhs.uk/conditions",
-      "label" : "Health A-Z"
+  "showSearch": "false"
+  })
+}}
+```
+
+#### Nunjucks arguments
+
+The header with logo Nunjucks macro takes the following arguments:
+
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **showNav**                | boolean  | Yes       | Set to "false" to not show the navigation links in the header. |
+| **showSearch**             | boolean  | Yes       | Set to "false" to not show the site search input form. |
+| **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |
+
+
+
+### Header with logo (transactional header)
+
+[Preview the header with logo component](https://nhsuk.github.io/nhsuk-frontend/components/header-transactional.html)
+
+### HTML markup
+
+```HTML
+<header class="nhsuk-header nhsuk-header--transactional" role="banner">
+  <div class="nhsuk-width-container nhsuk-header__container">
+    <div class="nhsuk-header__logo">
+      <a href="/" class="nhsuk-header__link" aria-label="NHS homepage">
+        <svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
+          <path fill="#fff" d="M0 0h40v16H0z"></path>
+          <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          <image xlink:href="" src="https://assets.nhs.uk/images/nhs-logo-white.png"></image>
+        </svg>   
+      </a>
+    </div>
+  </div>
+</header>
+```
+
+### Nunjucks macro
+
+If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
+
+```
+{% from 'components/header/macro.njk' import header %}
+
+{{ header({
+  "transactional": "true",
+  "showNav": "false",
+  "showSearch": "false"
+  })
+}}
+```
+
+#### Nunjucks arguments
+
+The transactional header with logo macro takes the following arguments:
+
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **showNav**                | boolean  | Yes       | Set to "false" to not show the navigation links in the header. |
+| **showSearch**             | boolean  | Yes       | Set to "false" to not show the site search input form. |
+| **transactional**          | boolean  | Yes       | Set to "true" to show the transactional header with logo. |
+| **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |
+
+
+### Header transactional with service name
+
+[Preview the header with logo component](https://nhsuk.github.io/nhsuk-frontend/components/header-transactional-service-name.html)
+
+### HTML markup
+
+```HTML
+<header class="nhsuk-header nhsuk-header--transactional" role="banner">
+  <div class="nhsuk-width-container nhsuk-header__container">
+    <div class="nhsuk-header__logo">
+      <a href="/" class="nhsuk-header__link" aria-label="NHS homepage">
+        <svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
+          <path fill="#fff" d="M0 0h40v16H0z"></path>
+          <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          <image xlink:href="" src="https://assets.nhs.uk/images/nhs-logo-white.png"></image>
+        </svg>
+      </a>
+    </div>
+    <div class="nhsuk-header__transactional-service-name ">
+      <a href="/" class="nhsuk-header__transactional-service-name--link">Register with a GP</a>
+    </div>
+  </div>
+</header>
+```
+
+### Nunjucks macro
+
+If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
+
+```
+{% from 'components/header/macro.njk' import header %}
+
+{{ header({
+  "transactionalService": {
+      "name": "Register with a GP",
+      "href": "https://beta.nhs.uk/book-a-gp-appointment/"
     },
-    {
-      'url' : 'https://www.nhs.uk/live-well/',
-      'label' : 'Live Well'
+    "showNav": "false",
+    "showSearch": "false"
+  })
+}}
+```
+
+#### Nunjucks arguments
+
+The transactional header with service name macro takes the following arguments:
+
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **showNav**                | boolean  | Yes       | Set to "false" to not show the navigation links in the header. |
+| **showSearch**             | boolean  | Yes       | Set to "false" to not show the site search input form. |
+| **transactionalService**   | object   | Yes       | Object containing the name and link of the transactional service. |
+| **name**                   | string   | Yes       | The name of the transactional service. |
+| **href**                   | string   | No        | The href of the transactional service. Defaults to "/". |
+| **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |
+
+
+### Header transactional with a long service name
+
+[Preview the header with logo component](https://nhsuk.github.io/nhsuk-frontend/components/header-transactional-long-service-name.html)
+
+### HTML markup
+
+```HTML
+<header class="nhsuk-header nhsuk-header--transactional" role="banner">
+  <div class="nhsuk-width-container nhsuk-header__container">
+    <div class="nhsuk-header__logo">
+      <a href="/" class="nhsuk-header__link" aria-label="NHS homepage">
+        <svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
+          <path fill="#fff" d="M0 0h40v16H0z"></path>
+          <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          <image xlink:href="" src="https://assets.nhs.uk/images/nhs-logo-white.png"></image>
+        </svg>
+      </a>
+    </div>
+    <div class="nhsuk-header__transactional-service-name nhsuk-header__transactional-service-name--long">
+      <a href="/" class="nhsuk-header__transactional-service-name--link">Find out why your NHS data matters</a>
+    </div>
+  </div>
+</header>
+```
+
+### Nunjucks macro
+
+If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
+
+```
+{% from 'components/header/macro.njk' import header %}
+
+{{ header({
+  "transactionalService": {
+      "name": "Find out why your NHS data matters",
+      "longName": "true",
+      "href": "https://www.nhs.uk/your-nhs-data-matters/"
     },
-    {
-      'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-      'label' : 'Care and support'
-    },
-    {
-      'url'  : 'https://www.nhs.uk/news/',
-      'label' : 'Health news'
-    },
-    {
-      'url' : 'https://www.nhs.uk/service-search',
-      'label' : 'Services near you'
-    }
-  ]
-}) }}
+    "showNav": "false",
+    "showSearch": "false"
+  })
+}}
 ```
+
+#### Nunjucks arguments
+
+The transactional header with a long service name macro takes the following arguments:
+
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **showNav**                | boolean  | Yes       | Set to "false" to not show the navigation links in the header. |
+| **showSearch**             | boolean  | Yes       | Set to "false" to not show the site search input form. |
+| **transactionalService**   | object   | Yes       | Object containing the name and link of the transactional service. |
+| **name**                   | string   | Yes       | The name of the transactional service. |
+| **longName**               | boolean  | Yes       | Set to "true" if the transactional name is longer than 22 characters. |
+| **href**                   | string   | No        | The href of the transactional service. Defaults to "/". |
+| **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |
+
+
+### Header with a service name and search
+
+[Preview the header with logo component](https://nhsuk.github.io/nhsuk-frontend/components/header-service-name.html)
+
+### HTML markup
+
+```HTML
+<header class="nhsuk-header" role="banner">
+  <div class="nhsuk-width-container nhsuk-header__container">
+    <div class="nhsuk-header__logo">
+      <a href="/" class="nhsuk-header__link  nhsuk-header__link--service " aria-label="NHS homepage">
+        <svg class="nhsuk-logo nhsuk-logo--white" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" viewBox="0 0 40 16">
+          <path fill="#fff" d="M0 0h40v16H0z"></path>
+          <path fill="#005eb8" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
+          <image xlink:href="" src="https://assets.nhs.uk/images/nhs-logo-white.png"></image>
+        </svg>
+        <span class="nhsuk-header__service-name">
+          Digital service manual
+        </span>
+      </a>
+    </div>
+    <div class="nhsuk-header__content" id="content-header">
+      <div class="nhsuk-header__search">
+        <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
+          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+            <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
+          </svg>
+          <span class="nhsuk-u-visually-hidden">Search</span>
+        </button>
+        <div class="nhsuk-header__search-wrap" id="wrap-search">
+          <form id="search" class="nhsuk-header__search-form" action="/search/" method="get" role="search">
+            <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
+            <input class="nhsuk-search__input" id="search-field" placeholder="Search" autocomplete="off" name="search-field" type="search">
+            <button type="submit" class="nhsuk-search__submit">
+              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
+              </svg>
+              <span class="nhsuk-u-visually-hidden">Search</span>
+            </button>
+            <button class="nhsuk-search__close" id="close-search">
+              <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
+              </svg>
+              <span class="nhsuk-u-visually-hidden">Close search</span>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+```
+
+### Nunjucks macro
+
+If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
+
+```
+{% from 'components/header/macro.njk' import header %}
+
+{{ header({
+  "service": {
+    "name": "Digital service manual",
+    "longName": "true"
+  },
+  "showNav": "false",
+  "showSearch": "true"
+  })
+}}
+```
+
+#### Nunjucks arguments
+
+The transactional header with a long service name macro takes the following arguments:
+
+| Name                       | Type     | Required  | Description  |
+| ---------------------------|----------|-----------|--------------|
+| **showNav**                | boolean  | Yes       | Set to "false" to not show the navigation links in the header. |
+| **showSearch**             | boolean  | Yes       | Set to "true" to show the site search input form. |
+| **service**                | object   | Yes       | Object containing the name and link of the service. |
+| **name**                   | string   | Yes       | The name of the service. |
+| **longName**               | boolean  | Yes       | Set to "true" if the service name is longer than 22 characters. |
+| **homeHref**               | string   | No        | The href of the home link for the logo and mobile home link in the navigation links. Defaults to "/". |

packages/components/inset-text/README.md

@@ -33,1 +33,11 @@ # Inset text
 ```
+
+#### Nunjucks arguments
+
+The inset text Nunjucks macro takes the following arguments:
+
+| Name                    | Type     | Required  | Description  |
+| ------------------------|----------|-----------|--------------|
+| **HTML**                | string   | Yes       | HTML content to be used within the inset text component. |
+| **classes**             | string   | No        | Optional additional classes to add to the inset text container. Separate each class with a space. |
+| **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the inset text container. |

packages/components/list-panel/README.md

@@ -16,83 +16,89 @@ # List panel
 ```html
-<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__list-item">
-      <a class="nhsuk-list-panel__list-item-link" href="/conditions/abdominal-aortic-aneurysm/">AAA</a>
-    </li>
-    <li class="nhsuk-list-panel__list-item">
-      <a class="nhsuk-list-panel__list-item-link" href="/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a>
-    </li>
-    <li class="nhsuk-list-panel__list-item">
-      <a class="nhsuk-list-panel__list-item-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">
-        <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>
-
-<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">
-        <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>
-
-<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__list-item">
-      <a class="nhsuk-list-panel__list-item-link" href="/conditions/chest-pain/">Chest pain</a>
-    </li>
-    <li class="nhsuk-list-panel__list-item">
-      <a class="nhsuk-list-panel__list-item-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">
-        <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>
-
-<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__list-item">
-      <a class="nhsuk-list-panel__list-item-link" href="/conditions/dandruff/">Dandruff</a>
-    </li>
-    <li class="nhsuk-list-panel__list-item">
-      <a class="nhsuk-list-panel__list-item-link" href="/conditions/dementia/">Dementia</a>
-    </li>
-    <li class="nhsuk-list-panel__list-item">
-      <a class="nhsuk-list-panel__list-item-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">
-        <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>
+<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__list-item">
+          <a class="nhsuk-list-panel__list-item-link" href="/conditions/abdominal-aortic-aneurysm/">AAA</a>
+        </li>
+        <li class="nhsuk-list-panel__list-item">
+          <a class="nhsuk-list-panel__list-item-link" href="/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a>
+        </li>
+        <li class="nhsuk-list-panel__list-item">
+          <a class="nhsuk-list-panel__list-item-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">
+            <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">
+            <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__list-item">
+          <a class="nhsuk-list-panel__list-item-link" href="/conditions/chest-pain/">Chest pain</a>
+        </li>
+        <li class="nhsuk-list-panel__list-item">
+          <a class="nhsuk-list-panel__list-item-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">
+            <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__list-item">
+          <a class="nhsuk-list-panel__list-item-link" href="/conditions/dandruff/">Dandruff</a>
+        </li>
+        <li class="nhsuk-list-panel__list-item">
+          <a class="nhsuk-list-panel__list-item-link" href="/conditions/dementia/">Dementia</a>
+        </li>
+        <li class="nhsuk-list-panel__list-item">
+          <a class="nhsuk-list-panel__list-item-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">
+            <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>
 ```
@@ -99,0 +105,0 @@

packages/components/pagination/README.md

@@ -17,16 +17,24 @@ # Pagination
 <nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
-  <a class="nhsuk-pagination-prev" href="/section/treatments">
-    <span class="nhsuk-pagination-link">Previous</span>
-    <span class="nhsuk-pagination-title">Treatments</span>
-    <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
-    </svg>
-  </a>
-  <a class="nhsuk-pagination-next" href="/section/symptoms">
-    <span class="nhsuk-pagination-link">Next</span>
-    <span class="nhsuk-pagination-title">Symptoms</span>
-    <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-      <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>
-  </a>
+  <ul class="nhsuk-list nhsuk-pagination__list">
+    <li class="nhsuk-pagination-item--previous">
+      <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="/section/treatments">
+        <span class="nhsuk-pagination__title">Previous</span>
+        <span class="visually-hidden">:</span>
+        <span class="nhsuk-pagination__page">Treatments</span>
+        <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
+        </svg>
+      </a>
+    </li>
+    <li class="nhsuk-pagination-item--next">
+      <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="/section/symptoms">
+        <span class="nhsuk-pagination__title">Next</span>
+        <span class="visually-hidden">:</span>
+        <span class="nhsuk-pagination__page">Symptoms</span>
+        <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+          <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>
+      </a>
+    </li>
+  </ul>
 </nav>
@@ -70,10 +78,16 @@ ```
 <nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
-  <a class="nhsuk-pagination-next" href="/section/symptoms">
-    <span class="nhsuk-pagination-link">Next</span>
-    <span class="nhsuk-pagination-title">Symptoms</span>
-    <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-      <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>
-  </a>
+  <ul class="nhsuk-list nhsuk-pagination__list">
+    <li class="nhsuk-pagination-item--next">
+      <a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="/section/symptoms">
+        <span class="nhsuk-pagination__title">Next</span>
+        <span class="visually-hidden">:</span>
+        <span class="nhsuk-pagination__page">Symptoms</span>
+        <svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+          <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>
+      </a>
+    </li>
+  </ul>
 </nav>
+
 ```
@@ -112,10 +126,16 @@
 <nav class="nhsuk-pagination" role="navigation" aria-label="Pagination">
-  <a class="nhsuk-pagination-prev" href="/section/treatments">
-    <span class="nhsuk-pagination-link">Previous</span>
-    <span class="nhsuk-pagination-title">Treatments</span>
-    <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
-      <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
-    </svg>
-  </a>
+  <ul class="nhsuk-list nhsuk-pagination__list">
+    <li class="nhsuk-pagination-item--previous">
+      <a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="/section/treatments">
+        <span class="nhsuk-pagination__title">Previous</span>
+        <span class="visually-hidden">:</span>
+        <span class="nhsuk-pagination__page">Treatments</span>
+        <svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
+        </svg>
+      </a>
+    </li>
+  </ul>
 </nav>
+
 ```
@@ -122,0 +142,0 @@

packages/core/README.md

@@ -118,9 +118,9 @@ # Core
 ```scss
-$colour_nhsuk-blue: #005EB8;
-$colour_nhsuk-white: #FFFFFF;
-$colour_nhsuk-black: #212B32;
-$colour_nhsuk-green: #007F3B;
-$colour_nhsuk-red: #DA291C;
-$colour_nhsuk-yellow: #ffeb3b;
-$colour_nhsuk-purple: #330072;
+$color_nhsuk-blue: #005EB8;
+$color_nhsuk-white: #FFFFFF;
+$color_nhsuk-black: #212B32;
+$color_nhsuk-green: #007F3B;
+$color_nhsuk-red: #DA291C;
+$color_nhsuk-yellow: #ffeb3b;
+$color_nhsuk-purple: #330072;
 ```
@@ -131,5 +131,5 @@
 ```scss
-$colour_nhsuk-pale-yellow: #FFF9C4;
-$colour_nhsuk-warm-yellow: #FFB81C;
-$colour_nhsuk-aqua-green: #00A499;
+$color_nhsuk-pale-yellow: #FFF9C4;
+$color_nhsuk-warm-yellow: #FFB81C;
+$color_nhsuk-aqua-green: #00A499;
 ```
@@ -136,0 +136,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

965035

increased by25.85%

Number of package files

236

increased by29.67%

Lines of code

6198

increased by22.39%

No dependency changes