Move GOVUK Frontend templates from node_modules

`node_modules` isn't available in a live
environment so the `.njk` templates we're now
using from GOVUK Frontend need to go in the repo'
code.

Adds them in a new `app/templates/vendor` folder
to match how we do that in
`app/assets/stylesheets`.

app/__init__.py

@@ -720,7 +720,7 @@ def init_jinja(application):
     repo_root = os.path.abspath(os.path.join(os.path.dirname(__file__), '..'))
     template_folders = [
         os.path.join(repo_root, 'app/templates'),
-        os.path.join(repo_root, 'node_modules/govuk-frontend'),
+        os.path.join(repo_root, 'app/templates/vendor/govuk-frontend'),
     ]
     jinja_loader = jinja2.FileSystemLoader(template_folders)
     application.jinja_loader = jinja_loader

app/templates/vendor/govuk-frontend/components/footer/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukFooter(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/templates/vendor/govuk-frontend/components/footer/template.njk

@@ -0,0 +1,87 @@
+<footer class="govuk-footer {{ params.classes if params.classes }}" role="contentinfo"
+        {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
+    {% if params.navigation %}
+      <div class="govuk-footer__navigation">
+        {% for nav in params.navigation %}
+          <div class="govuk-footer__section">
+            <h2 class="govuk-footer__heading govuk-heading-m">{{ nav.title }}</h2>
+            {% if nav.items %}
+              {% set listClasses %}
+                {% if nav.columns %}
+                  govuk-footer__list--columns-{{ nav.columns }}
+                {% endif %}
+              {% endset %}
+              <ul class="govuk-footer__list {{ listClasses | trim }}">
+                {% for item in nav.items %}
+                  {% if item.href and item.text %}
+                    <li class="govuk-footer__list-item">
+                      <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+                        {{ item.text }}
+                      </a>
+                    </li>
+                  {% endif %}
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </div>
+        {% endfor %}
+      </div>
+      <hr class="govuk-footer__section-break">
+    {% endif %}
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+        {% if params.meta %}
+          <h2 class="govuk-visually-hidden">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
+          {% if params.meta.items %}
+            <ul class="govuk-footer__inline-list">
+              {% for item in params.meta.items %}
+                <li class="govuk-footer__inline-list-item">
+                  <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+                    {{ item.text }}
+                  </a>
+                </li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+          {% if params.meta.text or params.meta.html %}
+            <div class="govuk-footer__meta-custom">
+              {{ params.meta.html | safe if params.meta.html else params.meta.text }}
+            </div>
+          {% endif %}
+        {% endif %}
+        {#- The SVG needs `focusable="false"` so that Internet Explorer does not
+        treat it as an interactive element - without this it will be
+        'focusable' when using the keyboard to navigate. #}
+        <svg
+          role="presentation"
+          focusable="false"
+          class="govuk-footer__licence-logo"
+          xmlns="http://www.w3.org/2000/svg"
+          viewbox="0 0 483.2 195.7"
+          height="17"
+          width="41"
+        >
+          <path
+            fill="currentColor"
+            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
+          />
+        </svg>
+        <span class="govuk-footer__licence-description">
+          All content is available under the
+          <a
+            class="govuk-footer__link"
+            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
+            rel="license"
+          >Open Government Licence v3.0</a>, except where otherwise stated
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a
+          class="govuk-footer__link govuk-footer__copyright-logo"
+          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
+        >© Crown copyright</a>
+      </div>
+    </div>
+  </div>
+</footer>

app/templates/vendor/govuk-frontend/components/header/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukHeader(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/templates/vendor/govuk-frontend/components/header/template.njk

@@ -0,0 +1,84 @@
+<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="header"
+        {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
+
+    <div class="govuk-header__logo">
+      <a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
+        <span class="govuk-header__logotype">
+          {# We use an inline SVG for the crown so that we can cascade the
+          currentColor into the crown whilst continuing to support older browsers
+          which do not support external SVGs without a Javascript polyfill. This
+          adds approximately 1kb to every page load.
+
+          We use currentColour so that we can easily invert it when printing and
+          when the focus state is applied. This also benefits users who override
+          colours in their browser as they will still see the crown.
+
+          The SVG needs `focusable="false"` so that Internet Explorer does not
+          treat it as an interactive element - without this it will be
+          'focusable' when using the keyboard to navigate. #}
+          <svg
+            role="presentation"
+            focusable="false"
+            class="govuk-header__logotype-crown"
+            xmlns="http://www.w3.org/2000/svg"
+            viewbox="0 0 132 97"
+            height="32"
+            width="36"
+          >
+            <path
+              fill="currentColor" fill-rule="evenodd"
+              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
+            ></path>
+            {# Fallback PNG image for older browsers.
+
+            The <image> element is a valid SVG element. In SVG, you would specify
+            the URL of the image file with the xlink:href – as we don't reference an
+            image it has no effect. It's important to include the empty xlink:href
+            attribute as this prevents versions of IE which support SVG from
+            downloading the fallback image when they don't need to.
+
+            In other browsers <image> is synonymous for the <img> tag and will be
+            interpreted as such, displaying the fallback image. #}
+            <image src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
+          </svg>
+          <span class="govuk-header__logotype-text">
+            GOV.UK
+          </span>
+        </span>
+        {% if (params.productName) %}
+        <span class="govuk-header__product-name">
+          {{ params.productName }}
+        </span>
+        {% endif %}
+      </a>
+    </div>
+    {% if params.serviceName or params.navigation  %}
+    <div class="govuk-header__content">
+
+    {% if params.serviceName %}
+    <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__link--service-name">
+      {{ params.serviceName }}
+    </a>
+    {% endif %}
+
+    {% if params.navigation %}
+    <button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+    <nav>
+      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
+        {% for item in params.navigation %}
+          {% if item.href and item.text %}
+            <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
+              <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+                {{ item.text }}
+              </a>
+            </li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </nav>
+    {% endif %}
+    </div>
+    {% endif %}
+  </div>
+</header>

app/templates/vendor/govuk-frontend/components/skip-link/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukSkipLink(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/templates/vendor/govuk-frontend/components/skip-link/template.njk

@@ -0,0 +1,3 @@
+<a href="{{ params.href | default('#content') }}" class="govuk-skip-link{%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- params.html | safe if params.html else params.text -}}
+</a>

app/templates/vendor/govuk-frontend/template.njk

@@ -0,0 +1,60 @@
+{% from "./components/skip-link/macro.njk" import govukSkipLink -%}
+{% from "./components/header/macro.njk" import govukHeader -%}
+{% from "./components/footer/macro.njk" import govukFooter -%}
+{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
+{%- set assetUrl = assetUrl | default(assetPath) -%}
+<!DOCTYPE html>
+<html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses }}">
+  <head>
+    <meta charset="utf-8" />
+    <title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" /> {# Hardcoded value of $govuk-black #}
+    {# Ensure that older IE versions always render with the correct rendering engine #}
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    {% block headIcons %}
+      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon" />
+      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
+      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
+      <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
+      <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
+    {% endblock %}
+
+    {% block head %}{% endblock %}
+    {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
+    {# image url needs to be absolute e.g. http://wwww.domain.com/.../govuk-opengraph-image.png #}
+    <meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png">
+  </head>
+  <body class="govuk-template__body {{ bodyClasses }}">
+    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
+    {% block bodyStart %}{% endblock %}
+
+    {% block skipLink %}
+      {{ govukSkipLink({
+        href: '#main-content',
+        text: 'Skip to main content'
+      }) }}
+    {% endblock %}
+
+    {% block header %}
+      {{ govukHeader({}) }}
+    {% endblock %}
+
+    {% block main %}
+      <div class="govuk-width-container">
+        {% block beforeContent %}{% endblock %}
+        <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main">
+          {% block content %}{% endblock %}
+        </main>
+      </div>
+    {% endblock %}
+
+    {% block footer %}
+      {{ govukFooter({}) }}
+    {% endblock %}
+
+    {% block bodyEnd %}{% endblock %}
+  </body>
+</html>

gulpfile.js

@@ -49,6 +49,42 @@ const copy = {
     fonts: () => {
       return src(paths.govuk_frontend + 'assets/fonts/**/*')
         .pipe(dest(paths.dist + 'fonts/'));
+    },
+    templates: (cb) => {
+      // Put names of GOVUK Frontend templates here
+      const _templates = [
+        'template',
+        'skip-link',
+        'header',
+        'footer'
+      ];
+      let done = 0;
+
+      // Copy the templates for each component across, preserving their folder structure
+      _templates.forEach(name => {
+        let _src = [
+          paths.govuk_frontend + 'components/' + name + '/macro.njk',
+          paths.govuk_frontend + 'components/' + name + '/template.njk'
+        ];
+        let _dest = paths.templates + 'vendor/govuk-frontend/components/' + name;
+
+        // template.njk isn't a component
+        if (name === 'template') {
+          _src = paths.govuk_frontend + 'template.njk';
+          _dest = paths.templates + 'vendor/govuk-frontend';
+        }
+
+        src(_src)
+        .pipe(
+          dest(_dest)
+          .on('end', () => { // resolve promise if all copied
+            done = done + 1;
+            if (done === _templates.length) {
+              cb();
+            }
+          })
+        )
+      });
     }
   }
 };
@@ -207,8 +243,9 @@ const lint = {
 
 // Default: compile everything
 const defaultTask = parallel(
-  series(
+  parallel(
     copy.govuk_frontend.fonts,
+    copy.govuk_frontend.templates,
     images
   ),
   series(