diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b0ad8aa7a..6fa9186034 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/__tests__/app.test.js b/app/__tests__/app.test.js index 4f6c69a849..97f0db1679 100644 --- a/app/__tests__/app.test.js +++ b/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(``) + 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'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'est un nouveau service - vos commentaires nous aideront à l'amé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) => { diff --git a/app/app.js b/app/app.js index f0c4a73eba..552fd1581c 100644 --- a/app/app.js +++ b/app/app.js @@ -17,7 +17,8 @@ const appViews = [ configPaths.layouts, configPaths.partials, configPaths.examples, - configPaths.components + configPaths.components, + configPaths.src ] module.exports = (options) => { diff --git a/app/assets/scss/partials/_app.scss b/app/assets/scss/partials/_app.scss index 9ae74a34cf..26c410fb4f 100644 --- a/app/assets/scss/partials/_app.scss +++ b/app/assets/scss/partials/_app.scss @@ -1,7 +1,3 @@ -body { - margin: 0; -} - .app-iframe-in-component-preview { margin: 15px 0; } diff --git a/app/views/examples/header-and-footer/index.njk b/app/views/examples/header-and-footer/index.njk deleted file mode 100644 index ede5273a8e..0000000000 --- a/app/views/examples/header-and-footer/index.njk +++ /dev/null @@ -1,48 +0,0 @@ -{% extends "full-width.njk" %} - -{% from "skip-link/macro.njk" import govukSkipLink %} -{% from "header/macro.njk" import govukHeader %} -{% from "phase-banner/macro.njk" import govukPhaseBanner %} -{% from "footer/macro.njk" import govukFooter %} - -{% block content %} - -{{ govukSkipLink({ - href: '#content', - text: 'Skip to main content' -}) }} - -{{ govukHeader({ - homepageUrl: "/", - containerClasses: "govuk-width-container", - serviceName: "Service Name", - navigation: [ - { - href: '#1', - text: 'Navigation item 1', - active: true - }, - { - href: '#2', - text: 'Navigation item 2' - }, - { - href: '#3', - text: 'Navigation item 3' - } - ] -}) }} - -{{ govukPhaseBanner({ - classes: "govuk-width-container", - tag: { - text: "alpha" - }, - html: 'This is a new service – your feedback will help us to improve it.' -}) }} - -{{ govukFooter({ - -}) }} - -{% endblock %} diff --git a/app/views/examples/template-block-areas/index.njk b/app/views/examples/template-block-areas/index.njk new file mode 100644 index 0000000000..f6b5e5f8c0 --- /dev/null +++ b/app/views/examples/template-block-areas/index.njk @@ -0,0 +1,139 @@ +{% extends "template.njk" %} + +{% block head -%} + + + + + +{%- endblock %} + +{% block bodyStart -%} + {# Since we can't show the blocks in the ``, we pretend by creating a section in `bodyStart` #} +
+

+ Set this block for comments above the <!DOCTYPE html>, useful if you want to set a comment. +
+ For example: <!-- Hello, World. --> +

+
+
+

+ Set this block to override the default icons used for GOV.UK branded pages. +
+ For example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> +

+
+
+

+ Set this block to add additional items to the <head>. +
+ For example: <meta name="description" content="My page description"> +

+
+
+
+ {{- super() -}} +

+ Set this block to add content just after just after the opening <body> element +

+
+{%- endblock %} + +{% block skipLink -%} +
+

+ Set this block to override the default Skip link component. +

+ {% from 'skip-link/macro.njk' import govukSkipLink %} + + {{ govukSkipLink({ + "classes": ":focus", + "text": "Skip to main content (forced :focus for demonstration)", + "href": "#content" + }) }} +
+{%- endblock %} + +{% block header -%} +
+

+ Set this block to override the default Header component. +

+ {{- super() -}} +
+{%- endblock %} + +{% block main -%} +
+

+ Set this block to override the default <main> element. +

+ {{- super() -}} +
+{%- endblock %} + +{% block content -%} +
+ {{- super() -}} +

+ Set this block to add content that you want to appear centered in the <main> element. +

+
+{%- endblock %} + +{% block footer -%} +
+

+ Set this block to override the default Footer component. +

+ {{- super() -}} +
+{%- endblock %} + +{% block bodyEnd -%} +
+ {{- super() -}} +

+ Set this block to add content just after just before the closing </body> element +

+
+{%- endblock %} diff --git a/app/views/examples/template-custom/index.njk b/app/views/examples/template-custom/index.njk new file mode 100644 index 0000000000..1ba5142489 --- /dev/null +++ b/app/views/examples/template-custom/index.njk @@ -0,0 +1,124 @@ +{# Example that changes every setting in the template #} + +{% from "skip-link/macro.njk" import govukSkipLink %} +{% from "header/macro.njk" import govukHeader %} +{% from "phase-banner/macro.njk" import govukPhaseBanner %} +{% from "footer/macro.njk" import govukFooter %} + +{% extends "template.njk" %} + +{% block pageStart %} + +{% endblock %} + +{% set htmlClasses = 'app-html-class' %} +{% set htmlLang = 'fr' %} +{% set assetPath = '' %} +{% set themeColor = 'blue' %} +{% set bodyClasses = 'app-body-class' %} + +{% block pageTitle %}GOV.UK - Le meilleur endroit pour trouver des services gouvernementaux et de l'information{% endblock %} + +{% block headIcons %} + + {{ super() }} + +{% endblock %} + +{% block head %} + + + + + + +{% endblock %} + +{% block bodyStart %} + + +{% endblock %} + +{% block skipLink %} + + {{ govukSkipLink({ + href: '#main-content', + text: 'Passer au contenu principal' + }) }} + +{% endblock %} + +{% block header %} + + {{ govukHeader({ + homepageUrl: "/", + containerClasses: "govuk-width-container", + serviceName: "Nom du service", + navigation: [ + { + href: '#1', + text: 'Élément de navigation 1', + active: true + }, + { + href: '#2', + text: 'Élément de navigation 2' + }, + { + href: '#3', + text: 'Élément de navigation 3' + } + ] + }) }} + +{% endblock %} + +{% block main %} + + {{ govukPhaseBanner({ + classes: "govuk-width-container", + tag: { + text: "alpha" + }, + html: 'C\'est un nouveau service - vos commentaires nous aideront à l\'améliorer.' + }) }} + {{ super() }} + +{% endblock %} + +{% block content %} + + {{ super() }} + +{% endblock %} + +{% block footer %} + + {{ govukFooter({ + "meta": { + "items": [ + { + "href": "#1", + "text": "Aidez-moi" + }, + { + "href": "#2", + "text": "Politique de confidentialité" + }, + { + "href": "#3", + "text": "Contactez-nous" + } + ] + } + }) }} + +{% endblock %} + +{% block bodyEnd %} + + + +{% endblock %} diff --git a/app/views/examples/template-default/index.njk b/app/views/examples/template-default/index.njk new file mode 100644 index 0000000000..a5ca36c121 --- /dev/null +++ b/app/views/examples/template-default/index.njk @@ -0,0 +1,14 @@ +{% extends "template.njk" %} + +{% block head %} + + + + +{% endblock %} + +{% block bodyEnd %} + +{% endblock %} diff --git a/app/views/layouts/_generic.njk b/app/views/layouts/_generic.njk index 59a8519de4..2c139966ad 100644 --- a/app/views/layouts/_generic.njk +++ b/app/views/layouts/_generic.njk @@ -1,29 +1,27 @@ - - - - +{% extends "template.njk" %} + +{% block pageTitle %}GOV.UK Frontend{% endblock %} + +{% block head %} - GOV.UK Frontend - + - - {% block styles %} - {% endblock %} - - - - {% block body %} - {% block content %}{% endblock %} - {% endblock %} + + {% block styles %}{% endblock %} +{% endblock %} + +{# Turn the header and footer off #} +{% block header %}{% endblock %} +{% block footer %}{% endblock %} + +{% block bodyEnd %}