GUA-899: Add Prototype Kit plugin config

[danacotoran]

What

Note: it looks like loads of files changed in this one but this is because dist is all compiled files, and some of the assets under docs were moved into a subfolder.

Implement configuration to make it easier for users of the prototype kit to install the header in their prototypes for user research. This configuration specifies load paths for the SCSS and JS as well as Nunjucks paths making it so that the Nunjucks template for the header can be included easily into any Prototype Kit project.

These changes do not make it that the header will automatically appear in the list of available plugins in the Prototype Kit UI. For that to happen the header must be added manually to an allow list of plugins by someone from the Prototype Kit team.

However, the header doesn't need to be on the list of plugins to be usable, it could still be installed using npm install github:alphagov/di-govuk-one-login-service-header

Other changes

• restructured src and dist based on file type so styles live under styles, JavaScript lives under scripts etc
• added a separate init-service-header.js for prototype kit use only (though I suppose services could import it for their live implementations too). The reason why is to make the header ✨ just work ✨ out of the box for service designers, user researchers etc who might not want to type up additional JS in their prototype to initialise the dropdown behaviour for mobile. The reason why I separated the declaration of the component from its initialisation to begin with was to allow devs the flexibility to run other JS before initialising the component should there be a need. There shouldn't be a need if the header is simply being used in a PK project therefore I've added the init-service-header.js script to be loaded automatically into PK projects that are using the header plugin
• added a di-govuk-one-login-service-header subfolder in nunjucks – this is so that the component and template are namespaced when they are included in external prototype kit projects
• added/amended links in the README
• refactored and documented the Nunjucks macro and template
• added documentation on how the Prototype Kit installation should work post-pluginification

Why

Our team had a meeting with folks working on the Prototype kit where they outlined steps to make the header easier to install for users of the Prototype Kit.

One of the suggestions was to make our header repo a prototype kit “plugin” for easy installation by less technical folks.

[alex9smith]

The install scripts etc. all look sensible. I figured the best way to test this was to use the plugin

I set up a new prototype kit app

mkdir prototype-kit-testing
cd prototype-kit-testing
npx govuk-prototype-kit-create

Then I installed the header plugin from this branch and started the kit

npm install github:alphagov/di-govuk-one-login-service-header#prototype-example
npm run dev

I can see the plugin in the list:

Clicking 'Create' makes a new page as I'd expect.

I did see that the body text in the created page and preview pages wasn't styled. Is that intentional?

Could we also change the name of the plugin and drop the 'Di' prefix (so it's GOV.UK One Login service header)? I don't think we use the Digital Identity name when we're talking about One Login.

[danacotoran]

@alex9smith thanks for the feedback and for testing; the name of the plugin should have been changed now to remove the "DI" bit.

I did see that the body text in the created page and preview pages wasn't styled. Is that intentional?]

The way typography works in the DS is text isn't styled by default so you need to apply some type of class to individual elements to make a paragraph look like a paragraph (govuk-body) or a link look like a link (govuk-link) etc. In this case I don't think it really matters since they would be replacing that bit with their own content anyway... 🤷🏻‍♀️ I guess I could have left it empty but I just put some placeholder text as I figured it might make it easier for users to work out where to put their own content if they don't know already.

This was also tested by Anisa who was able to set it up herself with not too many difficulties. She only had some suggestions for the doc so I've updated it based on her feedback.