Merge pull request #1184 from alphagov/allow-for-full-page-examples

Allow for full page examples

app/__tests__/app.test.js

@@ -17,7 +17,8 @@ const expectedPages = [
   '/examples/links',
   '/examples/typography',
   '/examples/template-default',
-  '/examples/template-custom'
+  '/examples/template-custom',
+  '/full-page-examples/start-page'
 ]
 
 // Returns a wrapper for `request` which applies these options by default
@@ -64,6 +65,40 @@ describe(`http://localhost:${PORT}`, () => {
         done(err)
       })
     })
+    describe('Banner', () => {
+      it('should be visible by default', done => {
+        requestPath('/', (err, res) => {
+          let $ = cheerio.load(res.body)
+
+          // Check the page responded correctly
+          expect(res.statusCode).toBe(200)
+          expect($.html()).toContain('GOV.UK Frontend')
+
+          // Check that the banner is visible
+          let appBanner = $('[data-module="app-banner"]')
+          expect(appBanner.length).toBeTruthy()
+          done(err)
+        })
+      })
+      it('should be dismissable', done => {
+        request.post({
+          url: `http://localhost:${PORT}/hide-banner`,
+          followAllRedirects: true,
+          jar: true // enable cookies
+        }, (err, res) => {
+          let $ = cheerio.load(res.body)
+
+          // Check the page responded correctly
+          expect(res.statusCode).toBe(200)
+          expect($.html()).toContain('GOV.UK Frontend')
+
+          // Check that the banner is not visible
+          let appBanner = $('[data-module="app-banner"]')
+          expect(appBanner.length).toBeFalsy()
+          done(err)
+        })
+      })
+    })
   })
 
   describe('/examples/template-custom', () => {

app/app.js

@@ -16,6 +16,7 @@ const appViews = [
   configPaths.layouts,
   configPaths.views,
   configPaths.examples,
+  configPaths.fullPageExamples,
   configPaths.components,
   configPaths.src
 ]
@@ -59,16 +60,21 @@ module.exports = (options) => {
   app.use('/vendor/html5-shiv/', express.static('node_modules/html5shiv/dist/'))
   app.use('/assets', express.static(path.join(configPaths.src, 'assets')))
 
+  // Handle the banner component serverside.
+  require('./banner.js')(app)
+
   // Define routes
 
   // Index page - render the component list template
   app.get('/', async function (req, res) {
     const components = fileHelper.allComponents
     const examples = await readdir(path.resolve(configPaths.examples))
+    const fullPageExamples = await readdir(path.resolve(configPaths.fullPageExamples))
 
     res.render('index', {
       componentsDirectory: components,
-      examplesDirectory: examples
+      examplesDirectory: examples,
+      fullPageExamplesDirectory: fullPageExamples
     })
   })
 
@@ -160,6 +166,17 @@ module.exports = (options) => {
     })
   })
 
+  // Full page examples view
+  app.get('/full-page-examples/:example', function (req, res, next) {
+    res.render(`${req.params.example}/index`, function (error, html) {
+      if (error) {
+        next(error)
+      } else {
+        res.send(html)
+      }
+    })
+  })
+
   app.get('/robots.txt', function (req, res) {
     res.type('text/plain')
     res.send('User-agent: *\nDisallow: /')

app/assets/scss/app.scss

@@ -2,3 +2,4 @@ $govuk-show-breakpoints: true;
 
 @import "../../../src/all";
 @import "partials/app";
+@import "partials/banner";

app/assets/scss/partials/_banner.scss

@@ -0,0 +1,36 @@
+.app-banner {
+  font-family: sans-serif;
+  font-size: 2rem;
+  line-height: 1.5;
+  overflow: hidden;
+  padding-bottom: govuk-spacing(6);
+  padding-top: govuk-spacing(6);
+
+  .app-banner__button {
+    margin-bottom: 0;
+  }
+
+  .govuk-body {
+    color: inherit;
+    font-size: inherit;
+  }
+
+  .govuk-link:not(:focus) {
+    color: inherit;
+  }
+}
+
+.app-banner--warning {
+  background: govuk-colour('red');
+  color: govuk-colour('white');
+
+  .app-banner__button,
+  .app-banner__button:active,
+  .app-banner__button:hover,
+  .app-banner__button:focus {
+    background: govuk-colour('white');
+    box-shadow: 0 2px 0 $govuk-text-colour;
+    color: $govuk-text-colour;
+    margin-bottom: 0;
+  }
+}

app/banner.js

@@ -0,0 +1,31 @@
+const cookieParser = require('cookie-parser')
+
+const BANNER_COOKIE_NAME = 'dismissed-app-banner'
+
+module.exports = function (app) {
+  // Detect if banner should be shown based on cookies set
+  app.use(cookieParser())
+  app.use(function (request, response, next) {
+    let cookie = request.cookies[BANNER_COOKIE_NAME]
+
+    if (cookie === 'yes') {
+      app.locals.shouldShowAppBanner = false
+      return next()
+    }
+
+    app.locals.shouldShowAppBanner = true
+
+    next()
+  })
+
+  app.post('/hide-banner', async function (request, response) {
+    let maxAgeInDays = 28
+    response.cookie(BANNER_COOKIE_NAME, 'yes', {
+      maxAge: maxAgeInDays * 24 * 60 * 60 * 1000,
+      httpOnly: true
+    })
+    // Redirect to where the user POSTed from.
+    let previousURL = request.header('Referer') || '/'
+    response.redirect(previousURL)
+  })
+}

app/views/full-page-examples/start-page/index.njk

@@ -0,0 +1,110 @@
+{# This example is based of the live "Apply online for a UK passport" start page: https://www.gov.uk/apply-renew-passport #}
+{% extends "_generic.njk" %}
+
+{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
+{% from "button/macro.njk" import govukButton %}
+{% from "tabs/macro.njk" import govukTabs %}
+
+{% set pageTitle = "Apply online for a UK passport" %}
+{% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBreadcrumbs({
+    items: [
+      {
+        text: "Home",
+        href: "#/"
+      },
+      {
+        text: "Passports, travel and living abroad",
+        href: "#/browse/abroad"
+      },
+      {
+        text: "Passports",
+        href: "#/browse/abroad/passports"
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>
+
+      <p class="govuk-body">You can apply for, renew, replace or update your passport and pay for it online.</p>
+
+      {{ govukButton({
+        text: "Start now",
+        href: "#",
+        classes: "govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
+      }) }}
+
+      {% set moreInformationHTML %}
+        <p>You’ll need a debit or credit card to use this service.</p>
+
+        <p><a class="govuk-link" href="/passport-fees">It’s £9.50 cheaper</a> to apply for a passport online than by post.</p>
+
+        <p>It should take around 6 weeks to get your first UK adult passport, but it can take longer.</p>
+
+        <p>All other application types (for example, renewing a passport or getting a child passport) should take 3 weeks. It can take longer if more information is needed or your application hasn’t been filled out correctly.</p>
+
+        <p>You should use a different service if you <a class="govuk-link" href="/get-a-passport-urgently">need your passport urgently</a>.</p>
+      {% endset %}
+
+      {% set otherWaysToApplyHTML %}
+        <p>You can pick up passport application forms from your <a class="govuk-link" rel="external" href="http://www.postoffice.co.uk/branch-finder">local Post Office</a> and apply by post, or use the <a class="govuk-link" href="/how-the-post-office-check-and-send-service-works">Post Office Check and Send service</a>.</p>
+      {% endset %}
+
+      {{ govukTabs({
+        items: [
+          {
+            label: "More information",
+            id: "more-information",
+            panel: {
+              html: moreInformationHTML
+            }
+          },
+          {
+            label: "Other ways to apply",
+            id: "other-ways-to-apply",
+            panel: {
+              html: otherWaysToApplyHTML
+            }
+          }
+        ]
+      }) }}
+    </div>
+
+    <div class="govuk-grid-column-one-third">
+
+      <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
+
+      <aside class="app-related-items" role="complementary">
+        <h2 class="govuk-heading-m" id="subsection-title">
+          Related content
+        </h2>
+        <nav role="navigation" aria-labelledby="subsection-title">
+          <ul class="govuk-list govuk-!-font-size-16">
+            <li class="gem-c-related-navigation__link">
+              <a class="govuk-link" href="#/get-a-passport-urgently">Get a passport urgently</a>
+            </li>
+            <li class="gem-c-related-navigation__link">
+              <a class="govuk-link" href="#/renew-adult-passport">Renew or replace your adult passport</a>
+            </li>
+            <li class="gem-c-related-navigation__link">
+              <a class="govuk-link" href="#/passport-fees">Passport fees</a>
+            </li>
+            <li class="gem-c-related-navigation__link">
+              <a class="govuk-link" href="#/government/news/need-to-renew-your-british-passport-go-online">Need to renew your British passport? Go online</a>
+            </li>
+            <li class="gem-c-related-navigation__link">
+              <a class="govuk-link" href="#/government/news/changes-to-passport-applications-for-british-nationals-living-abroad">Changes to passport applications for British nationals living abroad</a>
+            </li>
+          </ul>
+        </nav>
+      </aside>
+
+    </div>
+  </div>
+{% endblock %}

app/views/layouts/_generic.njk

@@ -1,12 +1,6 @@
 {% extends "template.njk" %}
 
-{% set htmlClasses = "app-no-canvas-background" %}
-
-{% block pageTitle %}GOV.UK Frontend{% endblock %}
-
 {% block head %}
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
   <!--[if !IE 8]><!-->
     <link rel="stylesheet" href="/public/app.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" integrity="sha256-vtR0hSWRc3Tb26iuN2oZHt3KRUomwTufNIf5/4oeCyg=" crossorigin="anonymous" />
@@ -22,20 +16,12 @@
   {% block styles %}{% endblock %}
 {% endblock %}
 
-{# Turn the header and footer off #}
-{% block header %}{% endblock %}
-{% block footer %}{% endblock %}
+{% block header %}
+  {% include "../partials/banner.njk" %}
+  {{ super() }}
+{% endblock %}
 
 {% block bodyEnd %}
   <script src="/public/all.js"></script>
   <script>window.GOVUKFrontend.initAll()</script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.min.js" integrity="sha256-NZjCYaMfryuJQRMgekHuC02c/Wv4sMRzHG2zyhrVwKU=" crossorigin="anonymous"></script>
-  <!--[if lte IE 8]>
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/ie8.polyfils.min.js"></script>
-  <![endif]-->
-  <script type="text/javascript">
-    var domReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
-    domReady(iFrameResize({}, '.js-component-preview'))
-  </script>
-  {% block scripts %}{% endblock %}
 {% endblock %}

app/views/layouts/component-preview.njk

@@ -6,6 +6,8 @@
 
 {% block skipLink %}{% endblock %}
 
+{% block header %}{% endblock %}
+
 {% block content %}
   <div class="app-whitespace-highlight">
     {{ componentView | safe }}

app/views/layouts/full-width.njk

@@ -1,4 +1,4 @@
-{% extends "_generic.njk" %}
+{% extends "layout.njk" %}
 
 {% block main %}
   <div class="govuk-width-container">

app/views/layouts/http-error.njk

@@ -1,4 +1,4 @@
-{% extends "layout-debug.njk" %}
+{% extends "layout.njk" %}
 
 {% block content %}
   <div class="govuk-content">

app/views/layouts/index.njk

@@ -7,7 +7,7 @@
 
   <div class="govuk-grid-row">
 
-    <div class="govuk-grid-column-one-half">
+    <div class="govuk-grid-column-one-third">
       <h2 class="govuk-heading-m">Components</h2>
 
       <ul class="govuk-list">
@@ -18,14 +18,24 @@
       </ul>
     </div>
 
-    <div class="govuk-grid-column-one-half">
+    <div class="govuk-grid-column-one-third">
       <h2 class="govuk-heading-m">Examples</h2>
 
       <ul class="govuk-list">
       {% for exampleName in examplesDirectory | sort %}
         <li><a href="/examples/{{ exampleName }}" class="govuk-link">{{ exampleName | replace("-", " ") | capitalize }}</a></li>
       {% endfor %}
       </ul>
+    </div>
+
+    <div class="govuk-grid-column-one-third">
+      <h2 class="govuk-heading-m">Full page examples</h2>
+
+      <ul class="govuk-list">
+      {% for exampleName in fullPageExamplesDirectory | sort %}
+        <li><a href="/full-page-examples/{{ exampleName }}" class="govuk-link">{{ exampleName | replace("-", " ") | capitalize }}</a></li>
+      {% endfor %}
+      </ul>
 
       <h2 class="govuk-heading-m">Misc</h2>