diff --git a/app/__tests__/app.test.js b/app/__tests__/app.test.js
index db5bb8a2aa..8a6b1eadf5 100644
--- a/app/__tests__/app.test.js
+++ b/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)
})
})
diff --git a/app/app.js b/app/app.js
index 8de2f8c070..387a18edc1 100644
--- a/app/app.js
+++ b/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
diff --git a/app/views/examples/all-components/index.njk b/app/views/examples/all-components/index.njk
deleted file mode 100644
index 39b479b6a3..0000000000
--- a/app/views/examples/all-components/index.njk
+++ /dev/null
@@ -1,36 +0,0 @@
-{% extends "layout.njk" %}
-
-{% block beforeContent %}
- {% from "back-link/macro.njk" import govukBackLink %}
- {{ govukBackLink({
- "href": "/"
- }) }}
-{% endblock %}
-
-{% block content %}
- {% include "back-link/back-link.njk" %}
- {% include "breadcrumbs/breadcrumbs.njk" %}
- {% include "button/button.njk" %}
- {% include "checkboxes/checkboxes.njk" %}
- {% include "date-input/date-input.njk" %}
- {% include "details/details.njk" %}
- {% include "error-message/error-message.njk" %}
- {% include "error-summary/error-summary.njk" %}
- {% include "fieldset/fieldset.njk" %}
- {% include "file-upload/file-upload.njk" %}
- {% include "footer/footer.njk" %}
- {% include "header/header.njk" %}
- {% include "hint/hint.njk" %}
- {% include "input/input.njk" %}
- {% include "inset-text/inset-text.njk" %}
- {% include "label/label.njk" %}
- {% include "panel/panel.njk" %}
- {% include "phase-banner/phase-banner.njk" %}
- {% include "radios/radios.njk" %}
- {% include "select/select.njk" %}
- {% include "skip-link/skip-link.njk" %}
- {% include "table/table.njk" %}
- {% include "tag/tag.njk" %}
- {% include "textarea/textarea.njk" %}
- {% include "warning-text/warning-text.njk" %}
-{% endblock %}
diff --git a/app/views/layouts/all-components.njk b/app/views/layouts/all-components.njk
new file mode 100644
index 0000000000..ed1e1e5c00
--- /dev/null
+++ b/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 %}
+
+
+ All components
+
+
+ {% for data in componentData %}
+ {% set componentName = data.componentName %}
+ {% set componentNameHuman = componentName | replace("-", " ") %}
+ {{ showExamples(componentName, componentNameHuman, data) }}
+ {% endfor %}
+{% endblock %}
diff --git a/app/views/layouts/index.njk b/app/views/layouts/index.njk
index fcd4fa93b8..2027518e74 100644
--- a/app/views/layouts/index.njk
+++ b/app/views/layouts/index.njk
@@ -11,9 +11,10 @@
Components
diff --git a/lib/file-helper.js b/lib/file-helper.js
index 57bc572177..54890279e3 100644
--- a/lib/file-helper.js
+++ b/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
diff --git a/src/components/back-link/back-link.njk b/src/components/back-link/back-link.njk
deleted file mode 100644
index 8bb6ad4e73..0000000000
--- a/src/components/back-link/back-link.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-{% from "back-link/macro.njk" import govukBackLink %}
-
-{{ govukBackLink({
- text: "Back",
- href: "#"
-}) }}
diff --git a/src/components/breadcrumbs/breadcrumbs.njk b/src/components/breadcrumbs/breadcrumbs.njk
deleted file mode 100644
index 893a47e0a5..0000000000
--- a/src/components/breadcrumbs/breadcrumbs.njk
+++ /dev/null
@@ -1,14 +0,0 @@
-{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
-
-{{ govukBreadcrumbs({
- items: [
- {
- text: "Section 1",
- href: "/section"
- },
- {
- text: "Sub-section",
- href: "/section/sub-section"
- }
- ]
-}) }}
diff --git a/src/components/button/button.njk b/src/components/button/button.njk
deleted file mode 100644
index a7688d24ec..0000000000
--- a/src/components/button/button.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-{% from "button/macro.njk" import govukButton %}
-
-{{ govukButton({
- text: "Save and continue",
- href: "/"
-}) }}
diff --git a/src/components/checkboxes/checkboxes.njk b/src/components/checkboxes/checkboxes.njk
deleted file mode 100644
index f1c98bdafc..0000000000
--- a/src/components/checkboxes/checkboxes.njk
+++ /dev/null
@@ -1,27 +0,0 @@
-{% from "checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
- idPrefix: "waste-types",
- name: "waste-types",
- items: [
- {
- value: "waste-animal",
- text: "Waste from animal carcasses"
- },
- {
- id: "custom-id",
- value: "waste-mines",
- text: "Waste from mines or quarries"
- },
- {
- value: "waste-farm",
- text: "Farm or agricultural waste",
- checked: true
- },
- {
- value: "waste-disabled",
- text: "Disabled checkbox option",
- disabled: true
- }
- ]
-}) }}
diff --git a/src/components/date-input/date-input.njk b/src/components/date-input/date-input.njk
deleted file mode 100644
index cc64ea983d..0000000000
--- a/src/components/date-input/date-input.njk
+++ /dev/null
@@ -1,23 +0,0 @@
-{% from "date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
- fieldset: {
- legend: {
- text: "What is your date of birth?"
- }
- },
- id: "dob",
- name: "dob",
- items:[
- {
- name: "day"
- },
- {
- name: "month"
- },
- {
- name: "year"
- }
- ]
- })
-}}
diff --git a/src/components/details/details.njk b/src/components/details/details.njk
deleted file mode 100644
index 934f963178..0000000000
--- a/src/components/details/details.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-{% from "details/macro.njk" import govukDetails %}
-
-{{ govukDetails({
- summaryText: "Help with nationality",
- text: "If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card."
-}) }}
diff --git a/src/components/error-message/error-message.njk b/src/components/error-message/error-message.njk
deleted file mode 100644
index ddfed2f847..0000000000
--- a/src/components/error-message/error-message.njk
+++ /dev/null
@@ -1,5 +0,0 @@
-{% from "error-message/macro.njk" import govukErrorMessage %}
-
-{{ govukErrorMessage({
- text: "Error message about full name goes here"
-}) }}
diff --git a/src/components/error-summary/error-summary.njk b/src/components/error-summary/error-summary.njk
deleted file mode 100644
index 1b17989e38..0000000000
--- a/src/components/error-summary/error-summary.njk
+++ /dev/null
@@ -1,17 +0,0 @@
-{% from "error-summary/macro.njk" import govukErrorSummary %}
-
-{{ govukErrorSummary({
- titleText: "Message to alert the user to a problem goes here",
- descriptionText: "Optional description of the errors and how to correct them",
- classes: "optional-extra-class",
- errorList: [
- {
- text: "Descriptive link to the question with an error",
- href: "#example-error-1"
- },
- {
- text: "Descriptive link to the question with an error",
- href: "#example-error-1"
- }
- ]
-}) }}
diff --git a/src/components/fieldset/fieldset.njk b/src/components/fieldset/fieldset.njk
deleted file mode 100644
index ab7ce05a09..0000000000
--- a/src/components/fieldset/fieldset.njk
+++ /dev/null
@@ -1,13 +0,0 @@
-{% from "fieldset/macro.njk" import govukFieldset %}
-
-{{ govukFieldset({
- legend: {
- text: "Legend text goes here"
- },
- hint: {
- text: "Legend hint text goes here"
- },
- errorMessage: {
- text: "Error message goes here"
- }
-}) }}
diff --git a/src/components/file-upload/file-upload.njk b/src/components/file-upload/file-upload.njk
deleted file mode 100644
index 7e47bcce5d..0000000000
--- a/src/components/file-upload/file-upload.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-{% from "file-upload/macro.njk" import govukFileUpload %}
-
-{{ govukFileUpload({
- id: "file-upload-1",
- name: "file-upload-1",
- label: {
- text: "Upload a file"
- }
-}) }}
diff --git a/src/components/footer/footer.njk b/src/components/footer/footer.njk
deleted file mode 100644
index 4cfcceefb5..0000000000
--- a/src/components/footer/footer.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-{% from "footer/macro.njk" import govukFooter %}
-
-{{ govukFooter() }}
diff --git a/src/components/header/header.njk b/src/components/header/header.njk
deleted file mode 100644
index 735c313c18..0000000000
--- a/src/components/header/header.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-{% from "header/macro.njk" import govukHeader %}
-
-{{ govukHeader() }}
diff --git a/src/components/hint/hint.njk b/src/components/hint/hint.njk
deleted file mode 100644
index 7e42931e78..0000000000
--- a/src/components/hint/hint.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-{% from "hint/macro.njk" import govukHint %}
-
-{{ govukHint({
- text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.",
- id: "hint-id"
-}) }}
diff --git a/src/components/input/input.njk b/src/components/input/input.njk
deleted file mode 100644
index fdd49ad7e0..0000000000
--- a/src/components/input/input.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-{% from "input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "National Insurance Number"
- },
- id: "input-1",
- name: "test-name"
-}) }}
diff --git a/src/components/inset-text/inset-text.njk b/src/components/inset-text/inset-text.njk
deleted file mode 100644
index 788235d2c6..0000000000
--- a/src/components/inset-text/inset-text.njk
+++ /dev/null
@@ -1,5 +0,0 @@
-{% from "inset-text/macro.njk" import govukInsetText %}
-
-{{ govukInsetText({
- html: 'It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.'
-}) }}
diff --git a/src/components/label/label.njk b/src/components/label/label.njk
deleted file mode 100644
index fdee8356e4..0000000000
--- a/src/components/label/label.njk
+++ /dev/null
@@ -1,5 +0,0 @@
-{% from "label/macro.njk" import govukLabel %}
-
-{{ govukLabel({
- text: "National Insurance number"
-}) }}
diff --git a/src/components/panel/panel.njk b/src/components/panel/panel.njk
deleted file mode 100644
index 2cada80df9..0000000000
--- a/src/components/panel/panel.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-{% from "panel/macro.njk" import govukPanel %}
-
-{{ govukPanel({
- titleText: "Application complete",
- html: "Your reference number
HDJ2123F"
-}) }}
diff --git a/src/components/phase-banner/phase-banner.njk b/src/components/phase-banner/phase-banner.njk
deleted file mode 100644
index 83f9b8ce38..0000000000
--- a/src/components/phase-banner/phase-banner.njk
+++ /dev/null
@@ -1,7 +0,0 @@
-{% from "phase-banner/macro.njk" import govukPhaseBanner %}
-{{ govukPhaseBanner({
- tag: {
- text: "alpha"
- },
- html: 'This is a new service – your feedback will help us to improve it.'
-}) }}
diff --git a/src/components/radios/radios.njk b/src/components/radios/radios.njk
deleted file mode 100644
index 39be007af1..0000000000
--- a/src/components/radios/radios.njk
+++ /dev/null
@@ -1,27 +0,0 @@
-{% from "radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
- idPrefix: "radio",
- name: "radio-group",
- items: [
- {
- value: "waste-animal",
- text: "Waste from animal carcasses"
- },
- {
- id: "custom-id",
- value: "waste-mines",
- text: "Waste from mines or quarries"
- },
- {
- value: "waste-farm",
- text: "Farm or agricultural waste",
- checked: true
- },
- {
- value: "waste-disabled",
- text: "Disabled radio option",
- disabled: true
- }
- ]
-}) }}
diff --git a/src/components/select/select.njk b/src/components/select/select.njk
deleted file mode 100644
index b9691e8ab2..0000000000
--- a/src/components/select/select.njk
+++ /dev/null
@@ -1,24 +0,0 @@
-{% from "select/macro.njk" import govukSelect %}
-
-{{ govukSelect({
- id: "select-1",
- name: "select-1",
- label: {
- html: "Label text goes here"
- },
- items: [
- {
- value: 1,
- text: "GOV.UK frontend option 1"
- },
- {
- value: 2,
- text: "GOV.UK frontend option 2",
- selected: true
- },
- {
- value: 3,
- text: "GOV.UK frontend option 3"
- }
- ]
-}) }}
diff --git a/src/components/skip-link/skip-link.njk b/src/components/skip-link/skip-link.njk
deleted file mode 100644
index 37b96d846b..0000000000
--- a/src/components/skip-link/skip-link.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-{% from "skip-link/macro.njk" import govukSkipLink %}
-
-{{ govukSkipLink({
- text: "Skip to main content",
- href: "#content"
-}) }}
diff --git a/src/components/table/table.njk b/src/components/table/table.njk
deleted file mode 100644
index 7e54b937a8..0000000000
--- a/src/components/table/table.njk
+++ /dev/null
@@ -1,45 +0,0 @@
-{% from 'table/macro.njk' import govukTable %}
-
-{{ govukTable({
- rows: [
- [
- {
- text: "January"
- },
- {
- text: "£85",
- format: "numeric"
- },
- {
- text: "£95",
- format: "numeric"
- }
- ],
- [
- {
- text: "February"
- },
- {
- text: "£75",
- format: "numeric"
- },
- {
- text: "£55",
- format: "numeric"
- }
- ],
- [
- {
- text: "March"
- },
- {
- text: "£165",
- format: "numeric"
- },
- {
- text: "£125",
- format: "numeric"
- }
- ]
- ]
-}) }}
diff --git a/src/components/tabs/tabs.njk b/src/components/tabs/tabs.njk
deleted file mode 100644
index c792ba9f7f..0000000000
--- a/src/components/tabs/tabs.njk
+++ /dev/null
@@ -1,3 +0,0 @@
-{% from "tabs/macro.njk" import govukTabs %}
-
-{{ govukTabs() }}
diff --git a/src/components/tag/tag.njk b/src/components/tag/tag.njk
deleted file mode 100644
index da8a3ea3fd..0000000000
--- a/src/components/tag/tag.njk
+++ /dev/null
@@ -1,5 +0,0 @@
-{% from "tag/macro.njk" import govukTag %}
-
-{{ govukTag({
- text: "alpha"
-}) }}
diff --git a/src/components/textarea/textarea.njk b/src/components/textarea/textarea.njk
deleted file mode 100644
index fb8da5bded..0000000000
--- a/src/components/textarea/textarea.njk
+++ /dev/null
@@ -1,10 +0,0 @@
-{% from "textarea/macro.njk" import govukTextarea %}
-
-{{ govukTextarea({
- id: "more-detail",
- name: "more-detail",
- label: {
- text: "Can you provide more detail?",
- hintText: "Don't include personal or financial information, eg your National Insurance number or credit card details."
- }
-}) }}
diff --git a/src/components/warning-text/warning-text.njk b/src/components/warning-text/warning-text.njk
deleted file mode 100644
index ceec05decb..0000000000
--- a/src/components/warning-text/warning-text.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-{% from "warning-text/macro.njk" import govukWarningText %}
-
-{{- govukWarningText(
- {
- "classes": "",
- "text": "You can be fined up to £5,000 if you don’t register.",
- "iconFallbackText": "Warning"
- })
--}}