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

Support Prototype Kit v13 #2851

Merged
merged 3 commits into from
Nov 4, 2022
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
1 change: 1 addition & 0 deletions docs/contributing/tasks.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
- clean the `./package` folder
- copy Sass files, applying Autoprefixer via PostCSS
- copy Nunjucks component template/macro files, including JSON configs
- copy GOV.UK Prototype Kit config files
- copy JavaScript ESM source files
- compile JavaScript ESM to CommonJS (`gulp js:compile`)
- runs `npm run test:build:package` (which will test the output is correct)
Expand Down
4 changes: 3 additions & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ require('./tasks/gulp/watch.js')

// Node tasks
const { updateDistAssetsVersion } = require('./tasks/asset-version.js')
const { updatePrototypeKitConfig } = require('./tasks/prototype-kit-config.js')
const { clean } = require('./tasks/clean.js')
const { npmScriptTask } = require('./tasks/run.js')

Expand Down Expand Up @@ -73,7 +74,8 @@ gulp.task('dev', gulp.series(
gulp.task('build:package', gulp.series(
clean,
'copy:files',
'js:compile'
'js:compile',
updatePrototypeKitConfig
))

/**
Expand Down
119 changes: 117 additions & 2 deletions package/govuk-prototype-kit.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,127 @@
"/"
],
"scripts": [
"/govuk/all.js"
"/govuk/all.js",
"/govuk/_govuk-prototype-kit-init.js"
],
"assets": [
"/govuk/assets"
],
"sass": [
"/govuk/all.scss"
"/govuk/_govuk-prototype-kit.scss"
],
"nunjucksMacros": [
{
"importFrom": "govuk/components/accordion/macro.njk",
"macroName": "govukAccordion"
},
{
"importFrom": "govuk/components/back-link/macro.njk",
"macroName": "govukBackLink"
},
{
"importFrom": "govuk/components/breadcrumbs/macro.njk",
"macroName": "govukBreadcrumbs"
},
{
"importFrom": "govuk/components/button/macro.njk",
"macroName": "govukButton"
},
{
"importFrom": "govuk/components/character-count/macro.njk",
"macroName": "govukCharacterCount"
},
{
"importFrom": "govuk/components/checkboxes/macro.njk",
"macroName": "govukCheckboxes"
},
{
"importFrom": "govuk/components/cookie-banner/macro.njk",
"macroName": "govukCookieBanner"
},
{
"importFrom": "govuk/components/date-input/macro.njk",
"macroName": "govukDateInput"
},
{
"importFrom": "govuk/components/details/macro.njk",
"macroName": "govukDetails"
},
{
"importFrom": "govuk/components/error-message/macro.njk",
"macroName": "govukErrorMessage"
},
{
"importFrom": "govuk/components/error-summary/macro.njk",
"macroName": "govukErrorSummary"
},
{
"importFrom": "govuk/components/fieldset/macro.njk",
"macroName": "govukFieldset"
},
{
"importFrom": "govuk/components/file-upload/macro.njk",
"macroName": "govukFileUpload"
},
{
"importFrom": "govuk/components/input/macro.njk",
"macroName": "govukInput"
},
{
"importFrom": "govuk/components/inset-text/macro.njk",
"macroName": "govukInsetText"
},
{
"importFrom": "govuk/components/notification-banner/macro.njk",
"macroName": "govukNotificationBanner"
},
{
"importFrom": "govuk/components/pagination/macro.njk",
"macroName": "govukPagination"
},
{
"importFrom": "govuk/components/panel/macro.njk",
"macroName": "govukPanel"
},
{
"importFrom": "govuk/components/phase-banner/macro.njk",
"macroName": "govukPhaseBanner"
},
{
"importFrom": "govuk/components/radios/macro.njk",
"macroName": "govukRadios"
},
{
"importFrom": "govuk/components/select/macro.njk",
"macroName": "govukSelect"
},
{
"importFrom": "govuk/components/skip-link/macro.njk",
"macroName": "govukSkipLink"
},
{
"importFrom": "govuk/components/summary-list/macro.njk",
"macroName": "govukSummaryList"
},
{
"importFrom": "govuk/components/table/macro.njk",
"macroName": "govukTable"
},
{
"importFrom": "govuk/components/tabs/macro.njk",
"macroName": "govukTabs"
},
{
"importFrom": "govuk/components/tag/macro.njk",
"macroName": "govukTag"
},
{
"importFrom": "govuk/components/textarea/macro.njk",
"macroName": "govukTextarea"
},
{
"importFrom": "govuk/components/warning-text/macro.njk",
"macroName": "govukWarningText"
}
]
}
44 changes: 44 additions & 0 deletions src/govuk-prototype-kit/govuk-prototype-kit.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { join, relative } from 'path'
import slash from 'slash'
Copy link
Contributor

Choose a reason for hiding this comment

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

Ah-ah!
Separator of the universe
Slash
Ah-ah!
He'll separate out the filesystem!

(That was in my head and I wanted to share it with you)


import { filterPath, getDirectories, getListing } from '../../lib/file-helper.js'
import { componentNameToMacroName } from '../../lib/helper-functions.js'
import configPaths from '../../config/paths.js'

/**
* GOV.UK Prototype Kit config builder
*/
export default async () => {
const componentsFiles = await getListing(configPaths.components)
const componentNames = await getDirectories(configPaths.components)

// Build array of macros
const nunjucksMacros = componentNames
.map((componentName) => {
const [macroPath] = componentsFiles
.filter(filterPath([`${componentName}/macro.njk`]))

// Relative path to src without 'govuk'
const rootPath = join(configPaths.src, '../')

return {
importFrom: slash(relative(rootPath, join(configPaths.components, macroPath))),
macroName: componentNameToMacroName(componentName)
}
})

return {
assets: [
'/govuk/assets'
],
sass: [
'/govuk-prototype-kit/init.scss'
],
scripts: [
'/govuk/all.js',
'/govuk-prototype-kit/init.js'
],
nunjucksMacros,
nunjucksPaths: ['/']
}
}
163 changes: 163 additions & 0 deletions src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
import configFn from './govuk-prototype-kit.config.mjs'

describe('GOV.UK Prototype Kit config', () => {
let config

beforeAll(async () => {
config = await configFn()
})

it('includes paths for assets, scripts, sass', () => {
expect(config.assets).toEqual([
'/govuk/assets'
])

expect(config.sass).toEqual([
'/govuk-prototype-kit/init.scss'
])

expect(config.scripts).toEqual([
'/govuk/all.js',
'/govuk-prototype-kit/init.js'
])
})

describe('Nunjucks', () => {
it('includes macros list', () => {
expect(config.nunjucksMacros).toEqual([
Copy link
Contributor

Choose a reason for hiding this comment

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

This doesn't quite feel like it's testing the right thing – if we added a new component and (somehow) the code we'd written meant that it didn't get added to the list of macro imports, the tests would still pass. Conversely, as currently written this test will fail every time we add a new component.

Would it make sense to either test that the macros lists includes all current components, or stub out getDirectories with a mock return value and just test the transformations?

Copy link
Contributor

Choose a reason for hiding this comment

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

Don't mind at all

But yep, new components will automatically break this test

I lifted and shifted the old nunjucksMacros array (plus missing components like header/footer) just to guarantee that nothing was missing and all the componentNameToMacroName() transforms exactly matched.

We use expect.arrayContaining([]) for PostCSS plugins, shall I do that here?

It'll get stale and miss new components but at least tests won't fail

Copy link
Contributor

Choose a reason for hiding this comment

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

Depending on what we decide to do re my other comment, I think I'd be inclined to stub out getDirectories and check that the transform does what we expect, and then check for the 'correctness' of the actual list of macros by testing the JSON output.

{
importFrom: 'govuk/components/accordion/macro.njk',
macroName: 'govukAccordion'
},
{
importFrom: 'govuk/components/back-link/macro.njk',
macroName: 'govukBackLink'
},
{
importFrom: 'govuk/components/breadcrumbs/macro.njk',
macroName: 'govukBreadcrumbs'
},
{
importFrom: 'govuk/components/button/macro.njk',
macroName: 'govukButton'
},
{
importFrom: 'govuk/components/character-count/macro.njk',
macroName: 'govukCharacterCount'
},
{
importFrom: 'govuk/components/checkboxes/macro.njk',
macroName: 'govukCheckboxes'
},
{
importFrom: 'govuk/components/cookie-banner/macro.njk',
macroName: 'govukCookieBanner'
},
{
importFrom: 'govuk/components/date-input/macro.njk',
macroName: 'govukDateInput'
},
{
importFrom: 'govuk/components/details/macro.njk',
macroName: 'govukDetails'
},
{
importFrom: 'govuk/components/error-message/macro.njk',
macroName: 'govukErrorMessage'
},
{
importFrom: 'govuk/components/error-summary/macro.njk',
macroName: 'govukErrorSummary'
},
{
importFrom: 'govuk/components/fieldset/macro.njk',
macroName: 'govukFieldset'
},
{
importFrom: 'govuk/components/file-upload/macro.njk',
macroName: 'govukFileUpload'
},
{
importFrom: 'govuk/components/footer/macro.njk',
macroName: 'govukFooter'
},
{
importFrom: 'govuk/components/header/macro.njk',
macroName: 'govukHeader'
},
{
importFrom: 'govuk/components/hint/macro.njk',
macroName: 'govukHint'
},
{
importFrom: 'govuk/components/input/macro.njk',
macroName: 'govukInput'
},
{
importFrom: 'govuk/components/inset-text/macro.njk',
macroName: 'govukInsetText'
},
{
importFrom: 'govuk/components/label/macro.njk',
macroName: 'govukLabel'
},
{
importFrom: 'govuk/components/notification-banner/macro.njk',
macroName: 'govukNotificationBanner'
},
{
importFrom: 'govuk/components/pagination/macro.njk',
macroName: 'govukPagination'
},
{
importFrom: 'govuk/components/panel/macro.njk',
macroName: 'govukPanel'
},
{
importFrom: 'govuk/components/phase-banner/macro.njk',
macroName: 'govukPhaseBanner'
},
{
importFrom: 'govuk/components/radios/macro.njk',
macroName: 'govukRadios'
},
{
importFrom: 'govuk/components/select/macro.njk',
macroName: 'govukSelect'
},
{
importFrom: 'govuk/components/skip-link/macro.njk',
macroName: 'govukSkipLink'
},
{
importFrom: 'govuk/components/summary-list/macro.njk',
macroName: 'govukSummaryList'
},
{
importFrom: 'govuk/components/table/macro.njk',
macroName: 'govukTable'
},
{
importFrom: 'govuk/components/tabs/macro.njk',
macroName: 'govukTabs'
},
{
importFrom: 'govuk/components/tag/macro.njk',
macroName: 'govukTag'
},
{
importFrom: 'govuk/components/textarea/macro.njk',
macroName: 'govukTextarea'
},
{
importFrom: 'govuk/components/warning-text/macro.njk',
macroName: 'govukWarningText'
}
])
})

it('includes paths', () => {
expect(config.nunjucksPaths).toEqual(['/'])
})
})
})
7 changes: 7 additions & 0 deletions src/govuk-prototype-kit/init.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
if (window.GOVUKPrototypeKit &&
window.GOVUKPrototypeKit.documentReady &&
window.GOVUKPrototypeKit.majorVersion >= 13) {
window.GOVUKPrototypeKit.documentReady(function () {
window.GOVUKFrontend.initAll()
})
}
12 changes: 12 additions & 0 deletions src/govuk-prototype-kit/init.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
$govuk-prototype-kit-major-version: 0 !default;

$govuk-assets-path: if(
$govuk-prototype-kit-major-version > 12,
$govuk-extensions-url-context + "/govuk-frontend/govuk/assets/",
"/govuk/assets/"
) !default;

$govuk-global-styles: true !default;
$govuk-new-link-styles: true !default;

@import "../govuk/all";
Loading