Merge pull request #731 from alphagov/add-boilerplate

Add boilerplate template

CHANGELOG.md

@@ -50,6 +50,9 @@ Note: We're not following semantic versioning yet, we are going to talk about th
   See `src/settings/_assets.scss` for more information and examples.
   ([PR #733](https://github.com/alphagov/govuk-frontend/pull/733))
 
+- Add boilerplate template, which is a Nunjucks replacement for [GOV.UK Template](https://github.com/alphagov/govuk_template).
+  ([PR #731](https://github.com/alphagov/govuk-frontend/pull/731))
+
 🏠 Internal:
 
 - Improve release steps, based on doing a release

app/__tests__/app.test.js

@@ -64,6 +64,19 @@ const requestParamsExampleTypography = {
   }
 }
 
+const requestParamsExampleTemplateDefault = {
+  url: `http://localhost:${PORT}/examples/template-default`,
+  headers: {
+    'Content-Type': 'text/plain'
+  }
+}
+const requestParamsExampleTemplateCustom = {
+  url: `http://localhost:${PORT}/examples/template-custom`,
+  headers: {
+    'Content-Type': 'text/plain'
+  }
+}
+
 describe('frontend app', () => {
   describe('homepage', () => {
     it('should resolve with a http status code of 200', done => {
@@ -144,6 +157,130 @@ describe('frontend app', () => {
     })
   })
 
+  describe('template examples', () => {
+    describe('default', () => {
+      it('should resolve with a http status code of 200', done => {
+        request.get(requestParamsExampleTemplateDefault, (err, res) => {
+          expect(res.statusCode).toEqual(200)
+          done(err)
+        })
+      })
+    })
+    describe('custom', () => {
+      it('should resolve with a http status code of 200', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          expect(res.statusCode).toEqual(200)
+          done(err)
+        })
+      })
+      ;[
+        'pageStart',
+        'headIcons',
+        'bodyStart',
+        'main',
+        'content',
+        'bodyEnd'
+      ].forEach(block => {
+        it(`should have \`${block}\` set`, done => {
+          request.get(requestParamsExampleTemplateCustom, (err, res) => {
+            let $ = cheerio.load(res.body)
+            expect($.html()).toContain(`<!-- block:${block} -->`)
+            done(err)
+          })
+        })
+      })
+      it('should have additional `htmlClasses`', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $html = $('html')
+
+          expect($html.attr('class')).toBe('govuk-template app-html-class')
+          done(err)
+        })
+      })
+      it('should have assets overriden', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $linkAsset = $('link[href^="/images/"]')
+          expect($linkAsset.length).toBe(6)
+          done(err)
+        })
+      })
+      it('should have theme-color overriden', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $linkMaskIcon = $('link[rel="mask-icon"]')
+          const $metaThemeColor = $('meta[name="theme-color"]')
+
+          expect($linkMaskIcon.attr('color')).toBe('blue')
+          expect($metaThemeColor.attr('content')).toBe('blue')
+          done(err)
+        })
+      })
+      it('should have additional `bodyClasses`', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $body = $('body')
+
+          expect($body.attr('class')).toBe('govuk-template__body app-body-class')
+          done(err)
+        })
+      })
+      it('should have `pageTitle` overriden', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $title = $('title')
+
+          expect($title.html()).toBe('GOV.UK - Le meilleur endroit pour trouver des services gouvernementaux et de l&apos;information')
+          done(err)
+        })
+      })
+      it('should have an application stylesheet', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $appStylesheet = $('link[href="/public/app.css"]')
+          expect($appStylesheet.length).toBe(1)
+          done(err)
+        })
+      })
+      it('should have a custom Skip link component', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $skipLink = $('.govuk-skip-link')
+          expect($skipLink.html()).toBe('Passer au contenu principal')
+          done(err)
+        })
+      })
+      it('should have a custom Header component', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $header = $('.govuk-header')
+          const $serviceName = $header.find('.govuk-header__link--service-name')
+          expect($serviceName.html()).toContain('Nom du service')
+          done(err)
+        })
+      })
+      it('should have a Phase banner component', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $phaseBanner = $('.govuk-phase-banner')
+          const $text = $phaseBanner.find('.govuk-phase-banner__text')
+          expect($text.html()).toContain('C&apos;est un nouveau service - vos <a class="govuk-link" href="#">commentaires</a> nous aideront &#xE0; l&apos;am&#xE9;liorer.')
+          done(err)
+        })
+      })
+      it('should have a custom Footer component', done => {
+        request.get(requestParamsExampleTemplateCustom, (err, res) => {
+          let $ = cheerio.load(res.body)
+          const $footer = $('.govuk-footer')
+          const $footerLink = $footer.find('.govuk-footer__link')
+          expect($footerLink.html()).toContain('Aidez-moi')
+          done(err)
+        })
+      })
+    })
+  })
+
   describe('typography examples', () => {
     it('should resolve with a http status code of 200', done => {
       request.get(requestParamsExampleTypography, (err, res) => {

app/app.js

@@ -17,7 +17,8 @@ const appViews = [
   configPaths.layouts,
   configPaths.partials,
   configPaths.examples,
-  configPaths.components
+  configPaths.components,
+  configPaths.src
 ]
 
 module.exports = (options) => {

app/assets/scss/partials/_app.scss

@@ -1,7 +1,3 @@
-body {
-  margin: 0;
-}
-
 .app-iframe-in-component-preview {
   margin: 15px 0;
 }

app/views/examples/template-block-areas/index.njk

@@ -0,0 +1,139 @@
+{% extends "template.njk" %}
+
+{% block head -%}
+  <!--[if !IE 8]><!-->
+    <link rel="stylesheet" href="/public/app.css">
+  <!--<![endif]-->
+  <!--[if IE 8]>
+    <link rel="stylesheet" href="/public/app-ie8.css">
+  <![endif]-->
+  <style>
+    [data-block] {
+      position: relative;
+      outline: 2px dashed #6f777b;
+      padding: 15px;
+      padding-top: 3em;
+      margin: 30px;
+    }
+
+    [data-block]::before {
+      content: 'block: ' attr(data-block);
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: .25em .5em;
+      background: white;
+      border-bottom: 2px dashed #6f777b;
+      border-right: 2px dashed #6f777b;
+      font-family: 'nta', sans-serif;
+    }
+
+    [data-block] > .govuk-body:last-child {
+      margin-bottom: 0;
+    }
+
+    [data-block] > .govuk-body {
+      line-height: 1.5;
+    }
+
+    .block-break {
+      margin-top: 30px;
+      margin-bottom: 30px;
+      border: 0;
+      height: 0;
+      border-bottom: 2px dashed #6f777b;
+    }
+  </style>
+{%- endblock %}
+
+{% block bodyStart -%}
+  {# Since we can't show the blocks in the `<head>`, we pretend by creating a section in `bodyStart` #}
+  <div data-block="pageTop">
+    <p class="govuk-body">
+      Set this block for comments above the <code>&lt;!DOCTYPE html&gt;</code>, useful if you want to set a comment.
+      <br>
+      For example: <code>&lt;!-- Hello, World. --&gt;</code>
+    </p>
+  </div>
+  <div data-block="headIcons">
+    <p class="govuk-body">
+      Set this block to override the default icons used for GOV.UK branded pages.
+      <br>
+      For example: <code>&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;</code>
+    </p>
+  </div>
+  <div data-block="head">
+    <p class="govuk-body">
+      Set this block to add additional items to the <code>&lt;head&gt;</code>.
+      <br>
+      For example: <code>&lt;meta name="description" content="My page description"&gt;</code>
+    </p>
+  </div>
+  <hr class="block-break">
+  <div data-block="bodyStart">
+    {{- super() -}}
+    <p class="govuk-body">
+      Set this block to add content just after just after the opening <code>&lt;body&gt;</code> element
+    </p>
+  </div>
+{%- endblock %}
+
+{% block skipLink -%}
+  <div data-block="skipLink">
+    <p class="govuk-body">
+      Set this block to override the default <a href="/components/skip-link/">Skip link</a> component.
+    </p>
+    {% from 'skip-link/macro.njk' import govukSkipLink %}
+
+    {{ govukSkipLink({
+      "classes": ":focus",
+      "text": "Skip to main content (forced :focus for demonstration)",
+      "href": "#content"
+    }) }}
+  </div>
+{%- endblock %}
+
+{% block header -%}
+  <div data-block="header">
+    <p class="govuk-body">
+      Set this block to override the default <a href="/components/header/">Header</a> component.
+    </p>
+    {{- super() -}}
+  </div>
+{%- endblock %}
+
+{% block main -%}
+  <div data-block="main">
+    <p class="govuk-body">
+      Set this block to override the default <code>&lt;main&gt;</code> element.
+    </p>
+    {{- super() -}}
+  </div>
+{%- endblock %}
+
+{% block content -%}
+  <div data-block="content">
+    {{- super() -}}
+    <p class="govuk-body">
+      Set this block to add content that you want to appear centered in the <code>&lt;main&gt;</code> element.
+    </p>
+  </div>
+{%- endblock %}
+
+{% block footer -%}
+  <div data-block="footer">
+    <p class="govuk-body">
+      Set this block to override the default <a href="/components/footer/">Footer</a> component.
+    </p>
+    {{- super() -}}
+  </div>
+{%- endblock %}
+
+{% block bodyEnd -%}
+  <div data-block="bodyEnd">
+    {{- super() -}}
+    <p class="govuk-body">
+      Set this block to add content just after just before the closing <code>&lt;/body&gt;</code> element
+    </p>
+  </div>
+{%- endblock %}