To add a question to the page, add it to the homeOfficeKit_pageContent block.

To customise the page, you can set:
* homeOfficeKit_formLayout - for the styling of the page
* homeOfficeKit_pageHeading - for the heading level 1 and page title
* homeOfficeKit_pageTitle - only if you need a different page title to the heading level 1
* homeOfficeKit_nextPage - for the next page of the form
* homeOfficeKit_useSubmitButton - set to true for 'Submit' rather than 'Save and continue'
* homeOfficeKit_primaryButtonText - by default is 'Save and continue'
* homeOfficeKit_secondaryButtonText - to create a secondary button with this text
* homeOfficeKit_secondaryButtonFormAction - the page where the secondary button should go

You can also:
* customise styling (in css) to the homeOfficeKit_style block
* customise the back link by overriding the default in the homeOfficeKit_backLinkURL block
* customise or remove the buttons by overriding the default in the homeOfficeKit_buttons block
* add javascript to pageScripts block

$3

This prevents the need for multiple pages in your prototype for the pagination. Uses the homeOfficeKitPagination macro.

$3

$3

In order to test these services with users, use this example of the homeOfficeKitLegacyAccordion macro.

$3

Styling

You can use this kit with any styling, you do not need to use the Home Office header, footer and page background.

$3

$3

In app/assets/sass create settings.scss and add @import "node_modules/home-office-kit/sass/settings"

This changes your font from GDS Transport to Roboto, the font used in the Home Office design system.

Routes

There are some useful routes in the prototype:

$3

``
"pluginConfig": {
"home-office-kit": {
"logData": true
}
}
`

This should be inside the most outer { }. If there's a line before this one (say serviceName), you'll need to add a comma to the end.

If you need to ignore certain URLs then change this to:

`
"pluginConfig": {
"home-office-kit": {
"logData": {
"ignoreUrlsStartingWith": ["/plugin-assets/", "/public/", "/manage-prototype/", "/plugin-routes/", "/other-url-to-ignore"]
}
}
}
`

$3

In the value part of the radio button add ~home-office-kit-redirect-to~ followed by the URL to redirect to.

For example:
`


- {{ homeOfficeKit.today.day }} shows the day part of today
- {{ homeOfficeKit.today.month }} shows the month part of today
- {{ homeOfficeKit.today.year }} show the year part of today

- {{ homeOfficeKit.date() }} shows todays date in the format 5 May 2022
- {{ homeOfficeKit.date({day: 'numeric', month: 'numeric', year: 'numeric'}) }} is todays date in the format 05/05/2022
- {{ homeOfficeKit.date({day: 'numeric'}) }} shows the just the day of date 5
- {{ homeOfficeKit.date({day: 'numeric'}, {'day': -1}) }} shows just the date of yesterday
- {{ homeOfficeKit.date({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}) }} shows todays date in the format Tuesday, 5 July 2022.

Filters

There are some useful filters that are included automatically when you install the plugin. These include:

$3

For example, for an input with the name attribute full-name:
`
{{ data['full-name'] | homeOfficeKit.possessive }}
`

$3

For example, to replay a date input with namePrefix date:
`
{{ data['date-day'] + " " + data['date-month'] | homeOfficeKit.toMonth + " " + data['date-year'] }}
`

$3

For example, to replay a times, with a separate hour and minute input:
`
{{ data['time-hour'] | homeOfficeKit.padZero + ":" + data['time-minute'] | homeOfficeKit.padZero }}
`

$3

For example:
``
"passenger" + data['numberPassengers'] | pluralise('','s')
data['numberRooves'] | pluralise('roof', 'rooves')
`

Contributing

Read the GOV.UK prototype kit plugin guidance.

Raise issues and pull requests to:
* add new filters, layouts and macros
* update the scss to match the Home Office design system

$3

Before merging the pull request:
1. Update the version in package.json.
2. Update CHANGELOG.md with what has changed in this version.
3. Merge the pull request on GitHub.
4. Update your local version to the updated version of main.
5. Run npm publish`. This updates the code on npm.
6. On GitHub, create a new release.