Guidance for using and setting up the Prototype Kit for an Internal Service

[jonhurrell]

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 (https://design-system.service.gov.uk/styles/typography/#when-not-to-use-the-gds-transport-font). 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.

Related

• Add guidance for fonts to be used within internal services  #236
• Add guidance on how to integrate our components within the GOVUK Prototype kit on Training for designers using the Prototype Kit  #272

Guidance Draft

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

Replace GDS Transport font

To override the default font-family (GDS Transport), navigate or search for application.scss. At the top of this file paste the following $govuk-font-family: Helvetica, Arial, sans-serif;. This SASS declaration sets a new value for the font-family variable.

Add Internal Services Header

1. To use our internal service header, navigate to layout.html (path '/app/views/includes/layout.html'). Go to line 42 {% block header %} and remove everything within that block (from line 43 to 48) e.g.:

  {{ govukHeader({
    homepageUrl: "/",
    serviceName: serviceName,
    serviceUrl: "/",
    containerClasses: "govuk-width-container"
  }) }}

This removes the default govuk header.

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

3. From line 43 (between the block header) paste the internal service header Nunjucks code:

{% from "internal-services-header/macro.njk" import dwpHeader %}

{{ dwpHeader({
name: "Apply for a benefit",
serviceHref: '#',
container:true
}) }} 

4. Change the service name and URL using the Nunjucks macro options.

Add Internal Services Footer

1. To use our internal service footer, navigate to layout.html (path '/app/views/includes/layout.html'). Go to line 54 {% if useAutoStoreData %} and remove everything within that block (from line 54 to 72) e.g.:

<!-- {% if useAutoStoreData %}
  {% block footer %}
    {{ govukFooter({
      meta: {
        items: [
          {
            href: "https://govuk-prototype-kit.herokuapp.com/",
            text: "GOV.UK Prototype Kit " + releaseVersion
          },
          {
            href: "/prototype-admin/clear-data",
            text: "Clear data"
          }
        ],
        visuallyHiddenTitle: "Footer links"
      }
    }) }}
  {% endblock %}
{% endif %} -->

This removes the default govuk footer.

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

3. From line 54 define a new section on the template and identify with the footer name e.g:

{% block footer %}
{% endblock %}

4. Create a new line from line 55 (between the {% block footer %} and {% endblock %}) and paste the internal service footer Nunjucks code:

{% from "internal-services-footer/macro.njk" import dwpFooter %}

{{ dwpFooter({
  meta: {
    visuallyHiddenTitle: "Meta links",
    items: [
    {
      href: "#1",
      text: "Item 1"
    },
    {
      href: "#2",
      text: "Item 2"
    }
    ]
  }
}) }} 

5. Change the link names and URLs using the Nunjucks macro options.

Optional Clear Data

You can still use the clear data functionality within the prototype kit, by changing, or adding a link name and URL using the following values within the Nunjucks macro options:

{
  href: "/prototype-admin/clear-data",
  text: "Clear data"
}

[TonyDietrich]

Since the header is incorporated into your own page as part of the 'header' block, its actually more manageable to copy the code from the govuk-header/template.njk file, eliminate the logo as above (and make any other changes you want), then save the amended code into a new file local to your project (eg. views/partials/local_header.njk) and

{% block header %}
     {% include/[new file] %}
{% end block %}

[jonhurrell]

Thanks @TonyDietrich. I've updated the guidance to use the header block to call our internal services header.

[simoneduca]

There is an update version of this guidance #661