Enable NHS.UK Prototyping in Now Prototype It

[nataliecarey]

Description

This Pull Request takes the behaviours from NHS.UK Prototype Kit and makes them available as a plugin to Now Prototype It.

Now Prototype It is an open source (MIT Licence) Prototype Kit based on the GOV.UK Prototype Kit, we have removed previously hard-coded GOV.UK references and improved the Plugin Framework to create a smoother integration. The goal is to make sure that all UK Government departments can share a prototyping tool regardless of whether or not they use GOV.UK Frontend. By providing the configuration as part of NHS.UK Frontend you are able to update the configuration in-sync with any changes to the design system. Now Prototype It by itself is not targeted towards any one design system and is suitable for use both inside and outside UK Government, we took this approach because we believe will bring even more features to a whole range of users.

The now-prototype-it.config.json in this Pull Request configures the integration including:

• SASS
• Javascript
• Nunjucks components, directories, and files to import the components into
• Static assets
• Settings - these are variables provided to Nunjucks, including the service name which can be changed by the user in the settings page
• Templates - these are taken from the NHS.UK Prototype Kit
• Related Plugins - I've included a couple of x-govuk plugins but this list can be longer or shorter, any plugins in the list will be easily discoverable by users in the Plugins pages

This PR leaves two templates out:

• Live Well which requires a significant amount of additional images
• Homepage which requires a significant amount of additional images and CSS

There is another branch which includes these if you want them to be included.

This PR also includes a now-prototype-it.variant.json which can be used to create an NHS.UK style prototype. This will include:

• Pre-installing nhsuk-frontend and jquery
• Setting the default port to 2000 instead of 3000
• Creating a familiar homepage for the prototype with relevant links

If these changes are merged and released then users will be able to create a prototype by running:

npx nowprototypeit create --variant=nhsuk-frontend the-name-of-your-prototype

This will install the nhsuk-frontend package from NPM, customising it based on the variant file inside nhsuk-frontend. To test the behaviour without merging/releasing you can use the command:

npx nowprototypeit create --variant=nhsuk-frontend --variant-dependency=github:nataliecarey/nhsuk-frontend#now-prototype-it-config the-name-of-your-prototype

There are other ways of approaching the integration which I'm happy to discuss, or you can explore for yourselves.

For more general information on Now Prototype It you can check out our website nowprototype.it and our youtube channel.

Checklist

• N/A Tested against our testing policy (Resolution, Browser & Accessibility)
• N/A Follows our coding standards and style guide
• CHANGELOG entry

[anandamaryon1]

Hi @nataliecarey thank you for sharing this and the work you’ve put in to open this PR.

It’s an interesting project but we’re not in a position to merge this. We’re working on some updates to our prototype kit and also have potentially conflicting plans for this frontend codebase in the near future. Also, we're not sure third-party prototype tools belong in the nhsuk-frontend.

We’ll keep an eye on the project and hope to be in a position to discuss it with you in future.

Generally we'd recommend reaching out and discussing changes in the future before opening PRs.