@uktrade/datahub-header

Data Hub header component

An npm module for the Data Hub header component. This provides a nunjucks macro that will take the permitted_applications from SSO and render the header. There are some additional options for more functionality.

This is published under the @uktrade scope in NPM. To install: npm install --save @uktrade/datahub-header

Nunjucks

If you add node_modules/@uktrade to the configure option of nunjucks:

nunjucks.configure( [
	`${__dirname}/views`,
	`node_modules/@uktrade`,
] );

You can import into your template with {% from 'datahub-header/component/header.njk' import datahubHeader %} and call the macro to render the header:

{{ datahubHeader( user.permitted_applications ) }}

Additional options for the macro

There are several options to control the items in the header.

• active - The key to mark as the active nav item in the top level navigation
• fluid - Stop the header from being fluid - fix to 960px wide and center
• signout - Specify a different signout url
• domains - Override the default domains for each app in the macro.
  • datahub - The Data Hub CRM domain
  • findExporters - The Find Exporters domain
  • marketAccess - The Market Access domain
• user - Specify some info about the user
  • name - The name to display in the top right of the header
• subNavigation - An array of items to display in the sub navigation
  • text - The text to display for the item
  • href - The url the text should link to
  • active - (Bool) - Whether to mark the item as active
• attributes - An array of attributes to add to the <header> element - GOVUK frontend style
• navigationClasses - An space separated list of classes to add the top level navigation <ul> element

SASS

After installation you need to add the CSS and JS to your app. If using SASS you should be able to @import 'node_modules/@uktrade/datahub-header/component/header';

JS

Similarly, the path to the JS file for inclusion in your bundler should be node_modules/@uktrade/datahub-header/component/header.js

Testing

To test the various headers in a browser there is a local Node.js server with multiple pages, first install the dependencies: npm install, generate the CSS files with npm run sass:dev, then run npm start to start it. You can control the port number by setting a PORT env variable.

Watching for changes

If you want to add more test scenarios then it will be easier to have the files watched for changes and restart automatically. Simply run npm run watch to start the server in watch mode.

The server is a basic http.createServer without any framework, so simply add a new template and update the switch statement with the new url path to match on. You will probably want to update the createSubnav function that is passed to the templates to add the new item, so you have a link to it.

Deployments

The deployment documentation is available here