Components

Being able to share components early and consistently between prototypes means you can create a consistent experience between multiple prototypes.

As an example component, I’ve outputted a version of two components.

An example of a prototype card and a layout of prototype cards.

This plugin also comes with some pre-made layouts.

Getting started

1. Install the component plugin

   npm i https://github.com/htmlandbacon/govuk-prototype-demo-component

2. Then we can add a simple card

   {{
       prototypeCard({
       title: "Example card 1",
       titleUrl: "/example-card-1-link",
       description: "This is information about an example card."
       })
   }}

We can also add a group of cards

{{
    prototypeCards({
    cards: [
        {
        title: "Card 1",
        titleUrl: "/card1",
        description: "More info about card 1"
        },
        {
        title: "Card 2",
        titleUrl: "/card2",
        description: "More info about card 2"
        },
        {
        title: "Card 3",
        titleUrl: "/card3",
        description: "More info about card 3"
        },
        {
        title: "Card 4",
        titleUrl: "/card4",
        description: "More info about card 4"
        },
        {
        title: "Card 5",
        titleUrl: "/card5",
        description: "More info about card 5"
        },
        {
        title: "Card 6",
        titleUrl: "/card6",
        description: "More info about card 6"
        }
    ]
    })
}}

If we want to try adding our own style we can disable the class in the page or template.

{% set bodyClasses = "prototype-component--remove-style" %}

Example configuration

The configure plugin guide gives an overview of how to configure the install for a plugin.

Below you can see the example of sharing the sass, macro and templates.

{
    "sass": [
      "/app/assets/sass/components/_card.scss",
      "/app/assets/sass/components/_cards.scss"
    ],
    "nunjucksPaths": [
        "/app/views/nunjucks"
    ],
    "nunjucksMacros": [
        {
          "macroName": "prototypeCard",
          "importFrom": "/components/card.njk"
        },
        {
            "macroName": "prototypeCards",
            "importFrom": "/components/cards.njk"
        }
    ],
    "templates": [
        {
            "path":  "/app/views/nunjucks/templates/example-card-page.njk",
            "name": "Example card page",
            "type": "nunjucks"
        },
        {
            "path":  "/app/views/nunjucks/templates/example-card-page-no-style.njk",
            "name": "Example card page with no style",
            "type": "nunjucks"
        }
    ]
}