Remove example files govuk frontend

app/__tests__/app.test.js

@@ -16,7 +16,7 @@ const requestParamsHomepage = {
 }
 
 const requestParamsExampleAllComponents = {
-  url: `http://localhost:${PORT}/examples/all-components`,
+  url: `http://localhost:${PORT}/components/all`,
   headers: {
     'Content-Type': 'text/plain'
   }
@@ -90,7 +90,10 @@ describe('frontend app', () => {
       request.get(requestParamsHomepage, (err, res) => {
         let $ = cheerio.load(res.body)
         let componentsList = $('li a[href^="/components/"]').get()
-        expect(componentsList.length).toEqual(lib.allComponents.length)
+        // Since we have an 'all' component link that renders the default example of all
+        // components, there will always be one more expected link.
+        let expectedComponentLinks = lib.allComponents.length + 1
+        expect(componentsList.length).toEqual(expectedComponentLinks)
         done(err)
       })
     })

app/app.js

@@ -4,7 +4,6 @@ const nunjucks = require('nunjucks')
 const util = require('util')
 const fs = require('fs')
 const path = require('path')
-const yaml = require('js-yaml')
 
 const readdir = util.promisify(fs.readdir)
 
@@ -66,16 +65,31 @@ module.exports = (options) => {
   // Whenever the route includes a :component parameter, read the component data
   // from its YAML file
   app.param('component', function (req, res, next, componentName) {
-    let yamlPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
+    res.locals.componentData = fileHelper.getComponentData(componentName)
+    next()
+  })
+
+  // All components view
+  app.get('/components/all', function (req, res, next) {
+    const components = fileHelper.allComponents
 
-    try {
-      res.locals.componentData = yaml.safeLoad(
-        fs.readFileSync(yamlPath, 'utf8'), { json: true }
+    res.locals.componentData = components.map(componentName => {
+      let componentData = fileHelper.getComponentData(componentName)
+      let defaultExample = componentData.examples.find(
+        example => example.name === 'default'
       )
-      next()
-    } catch (e) {
-      next(new Error('failed to load component YAML file'))
-    }
+      return {
+        componentName,
+        examples: [defaultExample]
+      }
+    })
+    res.render(`all-components`, function (error, html) {
+      if (error) {
+        next(error)
+      } else {
+        res.send(html)
+      }
+    })
   })
 
   // Component 'README' page

app/views/layouts/all-components.njk

@@ -0,0 +1,27 @@
+{% extends "full-width.njk" %}
+
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "macros/showExamples.njk" import showExamples %}
+
+{% set bodyClasses %}
+  language-markup
+{% endset %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    "href": "/"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-width-container">
+    <h1 class="govuk-heading-xl">
+      All components
+    </h1>
+  </div>
+  {% for data in componentData %}
+    {% set componentName = data.componentName %}
+    {% set componentNameHuman = componentName | replace("-", " ") %}
+    {{ showExamples(componentName, componentNameHuman, data) }}
+  {% endfor %}
+{% endblock %}

app/views/layouts/index.njk

@@ -11,9 +11,10 @@
       <h2 class="govuk-heading-m">Components</h2>
 
       <ul class="govuk-list">
-      {% for componentName in componentsDirectory | sort %}
-        <li><a href="/components/{{ componentName }}" class="govuk-link">{{ componentName | replace("-", " ") | capitalize }}</a></li>
-      {% endfor %}
+        <li><a href="/components/all" class="govuk-link">All</a></li>
+        {% for componentName in componentsDirectory | sort %}
+          <li><a href="/components/{{ componentName }}" class="govuk-link">{{ componentName | replace("-", " ") | capitalize }}</a></li>
+        {% endfor %}
       </ul>
     </div>
 

lib/file-helper.js

@@ -2,6 +2,7 @@
 
 const fs = require('fs')
 const path = require('path')
+const yaml = require('js-yaml')
 
 const configPaths = require('../config/paths.json')
 
@@ -20,3 +21,16 @@ const readFileContents = filePath => {
 }
 
 exports.readFileContents = readFileContents
+
+const getComponentData = componentName => {
+  try {
+    let yamlPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
+    return yaml.safeLoad(
+      fs.readFileSync(yamlPath, 'utf8'), { json: true }
+    )
+  } catch (error) {
+    return new Error(error)
+  }
+}
+
+exports.getComponentData = getComponentData