Get started with the design system: how to integrate components with GOVUK Prototype kit and CASA

[jonhurrell]

What

Publish guides on how to integrate (via npm) DWP Design System components when using CASA or the GOVUK prototype kit. Explain how to get them into views.

Why

Now we have npm modules that can be integrated into builds, let's discuss how to do that.

New services (ARA) are using the CASA framework to build their services. Designers use the GOVUK prototype kit to design their services. Let's make it easier for them to include our components to drive adoption.

Low effort and high impact
Strategic alignment (ARA)

This will meet the follow needs:

• meet people at their tools
• have the latest pattern which is always up to date
• best (accessible) code examples

Done when

For prototype kit / designers (#296)

• Draft guidance (Get started: HTML and CSS guide #296)
• Review within team
• Review with users
• Publish
  • Get started: decide on location in IA and site nav #298
  • Get started: build index page and update other nav pages #308
  • CSS code samples #284
• Notify (from list below)

For CASA / developers (#297)

• Draft guidance (Get started: dwp-frontend install guidance #297)
• Review within team and with users
• Amends
• Publish
• Notify (from list below)

Outcomes

Drive adoption and use.

Who needs to know about this

UCD Community
Greenzone (through more general presentation)

Related stories

• Add CSS code samples CSS code samples #284
• Integrate guidance with @benfraserdesign's Training for designers using the Prototype Kit

[jonhurrell]

Let's have a thing about where we can embed this guidance inline, e.g: technical guidance.

[simoneduca]

General guidance to follow for the article:

1. Install dwp-frontend module.
2. Add module's path to the views configuration.
3. Add components to views as needed.