NHS.UK Decorated Components ·

Form components for the NHS.UK Design System that require less parameters to collect data. Replace the multiple parameters needed for saving data with a single decorate parameter.

Requirements

Node.js v20 or later.

Installation

[!NOTE] These components are included by default with the NHS.UK Prototype Rig.

npm install nhsuk-decorated-components --save

Usage

To add them to the NHS.UK Prototype Kit, follow these steps:

1. Add /node_modules/nhsuk-decorated-components to your application’s views (appViews) in server.js:

     // Set up App
     var appViews = extensions.getAppViews([
   +   path.join(projectDir, '/node_modules/nhsuk-decorated-components'),
       path.join(projectDir, '/app/views/'),
       path.join(projectDir, '/lib/')
     ])

2. Add the decorate global function to your Nunjucks environment (nunjucksAppEnv) in server.js:

     var nunjucksAppEnv = nunjucks.configure(appViews, nunjucksConfig)
   
     // Add Nunjucks Globals
   + const { decorate } = require('nhsuk-decorated-components')
   + nunjucksAppEnv.addGlobal('decorate', decorate)
   
     // Add Nunjucks filters
     utils.addNunjucksFilters(nunjucksAppEnv)

3. Replace imported NHS.UK Frontend macros with those provided by this package:

   + {% from "x-nhsuk/decorated/button/macro.njk" import button with context %}
   + {% from "x-nhsuk/decorated/checkboxes/macro.njk" import checkboxes with context %}
   + {% from "x-nhsuk/decorated/date-input/macro.njk" import dateInput with context %}
   + {% from "x-nhsuk/decorated/input/macro.njk" import input with context %}
   + {% from "x-nhsuk/decorated/radios/macro.njk" import radios with context %}
   + {% from "x-nhsuk/decorated/select/macro.njk" import select with context %}
   + {% from "x-nhsuk/decorated/textarea/macro.njk" import textarea with context %}

Releasing a new version

npm run release

This command will ask you what version you want to use. It will then publish a new version on NPM, create and push a new git tag and then generate release notes ready for posting on GitHub.

[!NOTE] Releasing a new version requires permission to publish packages to the @x-govuk organisation.