IPM plugin for GOV.UK prototype kit

Plugin for the GOV.UK prototype kit to provide IPM components and page templates

Use

Used with the GOV.UK prototype kit version 13 and above.

Setup

1. Create a GOV.UK prototype.
2. Install the Home Office plugin. Run npm install home-office-kit
3. Change the prototype font to Roboto. In app/assets/sass create settings.scss, and add one line: @import "node_modules/home-office-kit/sass/settings"
4. Install the IPM plugin. Run npm install ipm-prototype-kit
5. Set the prototype to use IPM's main layout. In app/views/layouts/main.html change {% extends "govuk-prototype-kit/layouts/main.html" %} to {% extends "ipm-layout" %}
6. Set some initial session data (see below).

Initial session data

IPM has a dynamic UI which includes various elements that are likely to need updating as a user progresses through the stages of a workflow. It can be a good idea to make use of session data to store and update content for your prototype.

To get set up with some initial dummy data, replace the contents of app/data/session-data-defaults.js with:

module.exports = {

  home: {
    panels: {
      'panel_1': {
        header: {
          href: '#',
          text: 'Phase 1',
          count: 88
        }
      },
      'panel_2': {
        header: {
          href: '#',
          text: 'Phase 2',
          count: 88
        },
        body: {
          'stage_id1': {
            href: '#',
            text: 'Stage count',
            count: 1,
            alert: true
          },
          'stage_id2':{
            href: '#',
            text: 'Stage count',
            count: 1,
            alert: false
          },
          'stage_id3':{
            href: '#',
            text: 'Stage count',
            count: 1,
            alert: false
          }
        }
      }
    }
  },

  caseList: {
    'PREF-0038453': {
      href: '#',
      phase: 'Phase',
      stage: {
        name: 'Stage name',
        color: 'green'
      },
      fields: {
        'Label 1': {
          value: 'value'
        },
        'Label 2': {
          value: 'value'
        },
        'Label 3': {
          value: 'value'
        },
        'Label 4': {
          value: 'value',
          fullWidth: true
        }
      }
    },
    'PREF-6579422': {
      href: '#',
      phase: 'Phase',
      stage: {
        name: 'Stage name',
        color: 'green'
      },
      fields: {
        'Label 1': {
          value: 'value'
        },
        'Label 2': {
          value: 'value'
        },
        'Label 3': {
          value: 'value'
        },
        'Label 4': {
          value: 'value'
        },
        'Label 5': {
          value: 'value',
          fullWidth: true
        }
      }
    }
  },

  case: {
    prefix: 'PREF',
    id: '4759362',
    phase: 'Phase',
    stage: {
      name: 'Stage name',
      color: 'green'
    },
    header: {
      'Label': 'Value',
      'Label 1': 'Value',
      'Label 2': 'Value',
      'Label 3': 'Value'
    },
    navigation: [
      {
        label: 'Overview',
        href: '#'
      },
      {
        label: 'Case details',
        href: '#'
      },
      {
        label: 'Linked cases',
        href: '#'
      },
      {
        label: 'Correspondence',
        href: '#'
      }
    ],
    timelineImportant: [
      {
        eyebrow: 'Max Powell added an important note:',
        description: 'An example important case note',
        timestamp: '20 July 2023 09:16am',
        avatar: {
          colour: 'red',
          initial: '!'
        }
      }
    ],
    timeline: [
      {
        description: 'New case created',
        timestamp: '20 July 2023 09:16am'
      },
      {
        description: 'New case created',
        timestamp: '20 July 2023 09:16am'
      }
    ]
  }

}

Components list

All IPM components that this plugin makes available as nunjuck macros can be seen by adding the 'Components list' template in Manage your prototype.