New guidance for using and setting up the Prototype Kit for an Internal Service

[simoneduca]

Why

The guidance on the GDS system covers when not to use GDS Transport font and this applies to most of our internal facing services. We can't find any practical guidance on how to setup the prototype kit to not use it and other elements like the header component, specifically the Crown logotype.

Guidance

To install the prototype kit and more general guidance https://dwp-design-manual.herokuapp.com/prototype-kit-training

Replace GDS Transport font

In your prototype, navigate to /manage-prototype/templates and create a new "Blank unbranded page", with the following path /layouts/unbranded.

Add Internal Service Header and Internal Service Footer

1. Install DWP Frontend (https://design-system.dwp.gov.uk/get-started/npm) via your terminal with this command npm i @dwp/dwp-frontend.

2. ln your prototype, navigate to app/views/layouts/unbranded.html and paste the internal header code before the content block and the internal footer after the content block. Your unbranded file should look something like this:

{% from "internal-service-header/macro.njk" import dwpHeader %}
{% from "internal-service-footer/macro.njk" import dwpFooter %}

{% block header %}
  {{
    dwpHeader({
        serviceName: "Internal service header",
        serviceHref: '#',
        container: true
    })
}}
{% endblock %}

{% block content %}
...
{% endblock %}

{% block footer %}
{{
    dwpFooter({
        meta: {
            visuallyHiddenTitle: "About this website",
            items: [
            {
                href: "",
                text: "Accessibility statement"
            },
            {
                href: "",
                text: "Privacy"
            },
            {
                href: "/manage-prototype/clear-data",
                text: "Clear data"
              }
            ]
        }
    }) 
}}
{% endblock %}

[htmlandbacon]

The guidance on type face is now at https://design-system.service.gov.uk/styles/typeface/

While this works it is a bit of a hack - and if anyone wants to set any other variables they can't!

A couple of ways forward with this:

1. Use unbranded layout

There is already unbranded guidance we can use and extend out of this.

• unbranded layout
• unbranded scss
• unbranded page

2. Create new sass file and override view

In a similar way as the unbranded we can build a custom sass file and import it

if we make a file called agent.scss in app/assets/sass

$govuk-font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
$govuk-canvas-background-colour: #000000;

@use "node_modules/govuk-prototype-kit/lib/assets/sass/prototype" with (
    $govuk-font-family: $govuk-font-family,
    $govuk-canvas-background-colour: $govuk-canvas-background-colour,
  );

This then can be done in a layout:

{% extends "govuk-prototype-kit/layouts/unbranded.html" %}

{% from "internal-service-header/macro.njk" import dwpHeader %}
{% from "internal-service-footer/macro.njk" import dwpFooter %}


{% block stylesheets %}
    <link href="/public/stylesheets/agent.css" rel="stylesheet" type="text/css" />

    {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
{% endblock %}

{% block header %}
  {{
    dwpHeader({
        serviceName: "Internal service header",
        serviceHref: '#',
        container: true
    })
}}
{% endblock %}

{% block footer %}
{{
    dwpFooter({
        meta: {
            visuallyHiddenTitle: "About this website",
            items: [
            {
                href: "",
                text: "Accessibility statement"
            },
            {
                href: "",
                text: "Privacy"
            },
            {
                href: "/manage-prototype/clear-data",
                text: "Clear data"
              }
            ]
        }
    }) 
}}
{% endblock %}

[simoneduca]

Guidance updated