Merge pull request #276 from nhsuk/refactor/header-template

[refs #275] Header and breadcrumb templates

.github/PULL_REQUEST_TEMPLATE/component.md → .github/PULL_REQUEST_TEMPLATE.md

@@ -1,16 +1,11 @@
 ## Description
 
-## Component checklist
+## Checklist
 
 - [ ] SCSS
-- [ ] SCSS lint
-- [ ] HTML template
-- [ ] HTML validate & lint
 - [ ] Nunjucks macro
 - [ ] A standalone example
-- [ ] README/Documentation
-- [ ] Pseudocode tests
-- [ ] Visual tests 
+- [ ] README/Documentation with HTML snippet
 - [ ] Tested against our [testing policy](https://github.com/nhsuk/nhsuk-frontend/blob/master/docs/contributing/testing.md) (Resolution, Browser & Accessibility)
 - [ ] Print stylesheet considered
-- [ ] CHANGELOG
+- [ ] CHANGELOG entry

CHANGELOG.md

@@ -1,5 +1,19 @@
 # NHS.UK Frontend Changelog
 
+## 0.4.0 (Prerelease) - Dec 03, 2018
+
+:boom: **Breaking changes**
+
+- Breadcrumb - Updated nunjucks macro so now you do not need duplicate entries for it to work ([PR 276](https://github.com/nhsuk/nhsuk-frontend/pull/276))
+
+  Use the latest [Breadcrumb nunjucks macro arguments](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/breadcrumb#nunjucks-macro) and [Breadcrumb HTML markup](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/components/breadcrumb#html-markup) in your app.
+
+:wrench: **Fixes**
+
+- Header - Removed icon includes from nunjucks macro and added the SVG's inline ([PR 276](https://github.com/nhsuk/nhsuk-frontend/pull/276))
+
+- Footer - Removed icon includes from nunjucks macro and added the SVG's inline ([PR 272](https://github.com/nhsuk/nhsuk-frontend/pull/272))
+
 ## 0.3.0 (Prerelease) - Dec 03, 2018
 
 :boom: **Breaking changes**

docs/components/breadcrumb.njk

@@ -8,16 +8,16 @@
   {{ breadcrumb({
     items: [
       {
-        text: "Home",
-        href: "https://www.nhs.uk/"
+        href: "#",
+        text: "Level one"
       },
       {
-        text: "Health A-Z",
-        href: "https://www.nhs.uk/conditions"
+        href: "#",
+        text: "Level two"
       }
     ],
-    href: "https://www.nhs.uk/conditions/abscess/",
-    text: "Abscess"
+    href: "#",
+    text: "Level three"
   }) }}
 
 {% endblock %}

docs/pages/examples.njk

@@ -9,7 +9,7 @@
 
 {% block breadcrumb %}
   {{ breadcrumb({
-    href: "../",
+    href: "/",
     text: "Home"
   }) }}
 {% endblock %}

package.json

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

packages/components/back-link/template.njk

@@ -1,4 +1,8 @@
 <div class="nhsuk-back-link{%- if params.classes %} {{ params.classes }}{% endif -%}">
   <a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="nhsuk-back-link__link"
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{% include 'assets/icons/icon-chevron-left.svg' %} {{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
+  </svg>
+  {{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>
 </div>

packages/components/breadcrumb/README.md

@@ -16,10 +16,11 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 <nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
   <div class="nhsuk-width-container">
     <ol class="nhsuk-breadcrumb__list">
-      <li class="nhsuk-breadcrumb__item"><a href="https://www.nhs.uk/" class="nhsuk-breadcrumb__link">Home</a></li>
-      <li class="nhsuk-breadcrumb__item"><a href="https://www.nhs.uk/conditions" class="nhsuk-breadcrumb__link">Health A-Z</a></li>
+      <li class="nhsuk-breadcrumb__item"><a href="/level-one" class="nhsuk-breadcrumb__link">Level one</a></li>
+      <li class="nhsuk-breadcrumb__item"><a href="/level-one/level-two" class="nhsuk-breadcrumb__link">Level two</a></li>
+      <li class="nhsuk-breadcrumb__item"><a href="/level-one/level-two/level-three" class="nhsuk-breadcrumb__link">Level three</a></li>
     </ol>
-    <p class="nhsuk-breadcrumb__back"><a href="https://www.nhs.uk/conditions/abscess/" class="nhsuk-breadcrumb__backlink">Back to Abscess</a></p>
+    <p class="nhsuk-breadcrumb__back"><a href="/level-one/level-two/level-three" class="nhsuk-breadcrumb__backlink">Level three</a></p>
   </div>
 </nav>
 ```
@@ -34,16 +35,16 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 {{ breadcrumb({
   items: [
     {
-      text: "Home",
-      href: "https://www.nhs.uk/"
+      href: "/level-one",
+      text: "Level one"
     },
     {
-      text: "Health A-Z",
-      href: "https://www.nhs.uk/conditions"
+      href: "/level-one/level-two",
+      text: "Level two"
     }
   ],
-  href: "https://www.nhs.uk/conditions/abscess/",
-  text: "Abscess"
+  href: "/level-one/level-two/level-three",
+  text: "Level three"
 }) }}
 ```
 

packages/components/breadcrumb/template.html

@@ -1,9 +1,10 @@
 <nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
   <div class="nhsuk-width-container">
     <ol class="nhsuk-breadcrumb__list">
-      <li class="nhsuk-breadcrumb__item"><a href="https://www.nhs.uk/" class="nhsuk-breadcrumb__link">Home</a></li>
-      <li class="nhsuk-breadcrumb__item"><a href="https://www.nhs.uk/conditions" class="nhsuk-breadcrumb__link">Health A-Z</a></li>
+      <li class="nhsuk-breadcrumb__item"><a href="/level-one" class="nhsuk-breadcrumb__link">Level one</a></li>
+      <li class="nhsuk-breadcrumb__item"><a href="/level-one/level-two" class="nhsuk-breadcrumb__link">Level two</a></li>
+      <li class="nhsuk-breadcrumb__item"><a href="/level-one/level-two/level-three" class="nhsuk-breadcrumb__link">Level three</a></li>
     </ol>
-    <p class="nhsuk-breadcrumb__back"><a href="https://www.nhs.uk/conditions/abscess/" class="nhsuk-breadcrumb__backlink">Back to Abscess</a></p>
+    <p class="nhsuk-breadcrumb__back"><a href="/level-one/level-two/level-three" class="nhsuk-breadcrumb__backlink">Level three</a></p>
   </div>
 </nav>

packages/components/breadcrumb/template.njk

@@ -6,6 +6,7 @@
           <li class="nhsuk-breadcrumb__item"><a href="{{ item.href }}" class="nhsuk-breadcrumb__link" {% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.text }}</a> {% if not loop.last %}{% endif %}</li>
         {% endif %}
       {% endfor %}
+      <li class="nhsuk-breadcrumb__item"><a href="{{ params.href }}" class="nhsuk-breadcrumb__link" {% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.text }}</a></li>
     </ol>
     <p class="nhsuk-breadcrumb__back"><a href="{{ params.href }}" class="nhsuk-breadcrumb__backlink">Back to {{ params.text }}</a></p>
   </div>

packages/components/header/template.njk

@@ -2,7 +2,11 @@
   <div class="nhsuk-width-container nhsuk-header__container">
     <div class="nhsuk-header__logo">
       <a href="{% if params.homeHref %}{{ params.homeHref }}{% else %}/{% endif %}" class="nhsuk-header__link {% if params.service %} nhsuk-header__link--service {% endif %}" aria-label="NHS homepage">
-        {% include 'assets/logos/logo-nhs-white.svg' %}
+        <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>
         {% if params.service %}
         <span class="nhsuk-header__service-name">
           {{ params.service.name }}
@@ -33,19 +37,25 @@
 
         <div class="nhsuk-header__search">
           <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
-            {% include 'assets/icons/icon-search.svg' %}
+            <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">
-                {% include 'assets/icons/icon-search.svg' %}
+                <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">
-                {% include 'assets/icons/icon-close.svg' %}
+                <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>
@@ -59,14 +69,30 @@
     <nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
       <p class="nhsuk-header__navigation-title"><span id="label-navigation">Menu</span>
         <button class="nhsuk-header__navigation-close" id="close-menu">
-          {% include 'assets/icons/icon-close.svg' %}
+          <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 menu</span>
         </button>
       </p>
       <ul class="nhsuk-header__navigation-list">
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile"><a href="{% if params.homeHref %}{{ params.homeHref }}{% else %}/{% endif %}" class="nhsuk-header__navigation-link">Home {% include 'assets/icons/icon-chevron-right.svg' %}</a></li>
+        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
+          <a href="{% if params.homeHref %}{{ params.homeHref }}{% else %}/{% endif %}" class="nhsuk-header__navigation-link">
+            Home
+            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+              <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"></path>
+            </svg>
+          </a>
+        </li>
         {% for item in params.primaryLinks %}
-          <li class="nhsuk-header__navigation-item"><a href="{{item.url}}" class="nhsuk-header__navigation-link">{{item.label}} {% include 'assets/icons/icon-chevron-right.svg' %}</a></li>
+          <li class="nhsuk-header__navigation-item">
+            <a href="{{item.url}}" class="nhsuk-header__navigation-link">
+              {{item.label}}
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                <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"></path>
+              </svg>
+            </a>
+          </li>
         {% endfor %}
       </ul>
     </nav>
@@ -79,19 +105,25 @@
 
         <div class="nhsuk-header__search">
           <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
-            {% include 'assets/icons/icon-search.svg' %}
+            <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">
-                {% include 'assets/icons/icon-search.svg' %}
+                <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">
-                {% include 'assets/icons/icon-close.svg' %}
+                <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>
@@ -116,14 +148,30 @@
     <nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
       <p class="nhsuk-header__navigation-title"><span id="label-navigation">Menu</span>
         <button class="nhsuk-header__navigation-close" id="close-menu">
-          {% include 'assets/icons/icon-close.svg' %}
+          <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 menu</span>
         </button>
       </p>
       <ul class="nhsuk-header__navigation-list">
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile"><a href="{% if params.homeHref %}{{ params.homeHref }}{% else %}/{% endif %}" class="nhsuk-header__navigation-link">Home {% include 'assets/icons/icon-chevron-right.svg' %}</a></li>
+        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
+          <a href="{% if params.homeHref %}{{ params.homeHref }}{% else %}/{% endif %}" class="nhsuk-header__navigation-link">
+            Home
+            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+              <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"></path>
+            </svg>
+          </a>
+        </li>
         {% for item in params.primaryLinks %}
-        <li class="nhsuk-header__navigation-item"><a href="{{item.url}}" class="nhsuk-header__navigation-link">{{item.label}} {% include 'assets/icons/icon-chevron-right.svg' %}</a></li>
+        <li class="nhsuk-header__navigation-item">
+          <a href="{{item.url}}" class="nhsuk-header__navigation-link">
+            {{item.label}}
+            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+              <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"></path>
+            </svg>
+          </a>
+        </li>
         {% endfor %}
       </ul>
     </nav>