Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Read component data from built fixtures.json #4042

Merged
merged 4 commits into from
Aug 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/govuk-frontend-review/nodemon.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"watch": [
"./src",
"../govuk-frontend/src/govuk/**/*.{json,yaml}",
"../govuk-frontend/dist/govuk/**/*.json",
"../../shared/config",
"../../shared/lib",
"../../shared/stats"
Expand All @@ -10,7 +10,7 @@
"events": {
"restart": "browser-sync reload --config browsersync.config.js"
},
"ext": "js,mjs,json,yaml",
"ext": "js,mjs,json",
"quiet": true,
"signal": "SIGINT"
}
61 changes: 35 additions & 26 deletions packages/govuk-frontend-review/src/app.mjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import express from 'express'
import {
getComponentsData,
getComponentsFixtures,
getComponentNames,
filterPath
} from 'govuk-frontend-lib/files'
Expand All @@ -18,13 +18,13 @@ export default async () => {

// Cache mapped components and examples
const [
componentsData,
componentsFixtures,
componentNames,
componentNamesWithJavaScript,
exampleNames,
fullPageExamples
] = await Promise.all([
getComponentsData(),
getComponentsFixtures(),

// Components list
getComponentNames(),
Expand Down Expand Up @@ -82,27 +82,28 @@ export default async () => {
})
})

// Whenever the route includes a :componentName parameter, read the component data
// from its YAML file
// Whenever the route includes a :componentName parameter, read the component fixtures
app.param('componentName', function (req, res, next, componentName) {
res.locals.componentData = componentsData.find(
({ name }) => name === componentName
res.locals.componentFixtures = componentsFixtures.find(
({ component }) => component === componentName
)
next()
})

// All components view
app.get('/components/all', function (req, res, next) {
res.locals.componentsData = componentsData.map((componentData) => {
const defaultExample = componentData.examples.find(
({ name }) => name === 'default'
)

return {
...componentData,
examples: [defaultExample]
res.locals.componentsFixtures = componentsFixtures.map(
(componentFixtures) => {
const defaultFixture = componentFixtures.fixtures.find(
({ name }) => name === 'default'
)

return {
...componentFixtures,
fixtures: [defaultFixture]
}
}
})
)

res.render('all-components', function (error, html) {
if (error) {
Expand Down Expand Up @@ -135,31 +136,32 @@ export default async () => {
const componentName = req.params.componentName
const exampleName = req.params.exampleName || 'default'

const previewLayout = res.locals.componentData?.previewLayout
/** @type {ComponentFixtures | undefined} */
const componentFixtures = res.locals.componentFixtures

const exampleConfig = res.locals.componentData?.examples.find(
(example) => nunjucks.filters.slugify(example.name) === exampleName
const fixture = componentFixtures?.fixtures.find(
(fixture) => nunjucks.filters.slugify(fixture.name) === exampleName
)

if (!exampleConfig) {
if (!fixture) {
next()
}

// Construct and evaluate the component with the data for this example
const macroName = componentNameToMacroName(componentName)
const macroParameters = JSON.stringify(exampleConfig.data, null, '\t')
const macroParameters = JSON.stringify(fixture.options, null, '\t')

res.locals.componentView = env.renderString(
outdent`
{% from "govuk/components/${componentName}/macro.njk" import ${macroName} %}
{{ ${macroName}(${macroParameters}) }}
`,
{% from "govuk/components/${componentName}/macro.njk" import ${macroName} %}
{{ ${macroName}(${macroParameters}) }}
`,
{}
)

let bodyClasses = 'app-template__body'

const layoutModifiers = exampleConfig.previewLayoutModifiers || []
const layoutModifiers = fixture.previewLayoutModifiers ?? []
for (const modifier of layoutModifiers) {
bodyClasses += ` app-template__body--${modifier}`
}
Expand All @@ -168,7 +170,10 @@ export default async () => {
bodyClasses += ' app-template__body--component-preview'
}

res.render('component-preview', { bodyClasses, previewLayout })
res.render('component-preview', {
bodyClasses,
previewLayout: componentFixtures.previewLayout
})
}
)

Expand Down Expand Up @@ -201,3 +206,7 @@ export default async () => {

return app
}

/**
* @typedef {import('govuk-frontend-lib/files').ComponentFixtures} ComponentFixtures
*/
4 changes: 2 additions & 2 deletions packages/govuk-frontend-review/src/views/all-components.njk
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
All components
</h1>
</div>
{% for componentData in componentsData %}
{{ showExamples(componentData) }}
{% for componentFixtures in componentsFixtures %}
{{ showExamples(componentFixtures) }}
{% endfor %}
{% endblock %}
2 changes: 1 addition & 1 deletion packages/govuk-frontend-review/src/views/component.njk
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,6 @@
</div>

{% block examples %}
{{ showExamples(componentData) }}
{{ showExamples(componentFixtures) }}
{% endblock %}
{% endblock %}
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{% from "govuk/components/details/macro.njk" import govukDetails %}

{% macro showExamples(componentData) %}
{% macro showExamples(componentFixtures) %}

{% set componentName = componentData.name %}
{% set componentName = componentFixtures.component %}

{% for example in componentData.examples | rejectattr('hidden') %}
{% for example in componentFixtures.fixtures | rejectattr('hidden') %}
{% set exampleName = example.name | slugify %}

{% if example.name == 'default' %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ params:

examples:
- name: default
data:
options:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense given we talk of macro "options" all around 🙌🏻

id: default-example
items:
- heading:
Expand All @@ -110,7 +110,7 @@ examples:
</ul>

- name: with additional descriptions
data:
options:
id: with-descriptions
items:
- heading:
Expand All @@ -136,7 +136,7 @@ examples:
</ul>

- name: with long content and description
data:
options:
id: with-long-content-and-description
items:
- heading:
Expand All @@ -159,7 +159,7 @@ examples:
</ul>

- name: with one section open
data:
options:
id: one-section-open-example
items:
- heading:
Expand All @@ -179,7 +179,7 @@ examples:
</ul>

- name: with all sections already open
data:
options:
id: all-sections-open-example
items:
- heading:
Expand All @@ -200,7 +200,7 @@ examples:
</ul>

- name: with focusable elements inside
data:
options:
id: with-focusable-elements
items:
- heading:
Expand All @@ -213,7 +213,7 @@ examples:
html: <a class="govuk-link" href="#">Link B</a>

- name: with translations
data:
options:
id: with-translations
hideAllSectionsText: Collapse all sections
showAllSectionsText: Expand all sections
Expand All @@ -237,7 +237,7 @@ examples:
# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
- name: classes
hidden: true
data:
options:
id: accordion-classes
classes: myClass
items:
Expand All @@ -247,7 +247,7 @@ examples:
text: Some content
- name: attributes
hidden: true
data:
options:
id: accordion-attributes
attributes:
data-attribute: value
Expand All @@ -258,7 +258,7 @@ examples:
text: Some content
- name: custom heading level
hidden: true
data:
options:
id: accordion-heading
headingLevel: 3
items:
Expand All @@ -268,7 +268,7 @@ examples:
text: Some content
- name: heading html
hidden: true
data:
options:
id: accordion-heading-html
items:
- heading:
Expand All @@ -277,7 +277,7 @@ examples:
text: Some content
- name: with falsey values
hidden: true
data:
options:
id: accordion-falsey
items:
- heading:
Expand All @@ -293,7 +293,7 @@ examples:
text: Some content
- name: with remember expanded off
hidden: true
data:
options:
id: accordion-remember-expanded-off
rememberExpanded: false
items:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,38 +22,38 @@ params:

examples:
- name: default
data:
options:
href: '#'
- name: with custom text
data:
options:
href: '#'
text: Back to home
- name: inverse
previewLayoutModifiers:
- inverse
data:
options:
classes: govuk-back-link--inverse
href: '#'

# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
- name: classes
hidden: true
data:
options:
classes: app-back-link--custom-class
href: '#'
- name: html as text
hidden: true
data:
options:
text: <b>Home</b>
href: '#'
- name: html
hidden: true
data:
options:
html: <b>Back</b>
href: '#'
- name: attributes
hidden: true
data:
options:
href: '#'
html: <b>Back to home</b>
attributes:
Expand Down
Loading