@financial-times/kat-header

kat-header

Handlebars header template for KAT apps.

Usage

If using n-internal-tool you'll have to add the path to your node-modules/@financial-times directory as the partialsDirectory option to n-internal-tool so that it can resolve the partial location.

HTML

npm install --save @financial-times/kat-header

or

bower install --save kat-header

Use handlebars template

{{> kat-header/header }}

{{!-- Put the rest of your body content here. The footer should be included before the drawer --}}

{{>kat-header/drawer}}

It will display a licence switcher form if a licenceList property exists in the template. See the demo for example usage. /* You should provide a route for the core form to fallback to, this ideally would be a route that directs the user to the same page but for the licence selected via the form */

Navigation Config

Pass an object with a nav property to your handlebars template.

This will have a heading property which will act as the heading of the page (defaults to "Knowledge & administration tools").

It also will take an items property which is an array of objects to populate the navigation links, each of these have the following properties:

• name - String - the text to render
• href - String - the URL to link to
• showFlag - String (optional) - if the nav item requires a flag to be on, the value of this is the flag name. When that flag is true this nav item will render
• hideFlag - String (optional) - if the nav item requires a flag to be off, the value of this is the flag name. When that flag is false this nav item will render
• selected - Boolean (optional) - when true this nav item will render as "selected" to denote the current page. Only one nav item should be "selected".
• last - Boolean (optional) - when true this nav item will float to the right of the header

There is a default config object you can use by calling the function and extend if needed. Pass in the licenceId as the first parameter in order to populate the link URLs, In order to mark an item as "selected" you can pass the trackable value to the function which will mark that item as selected. You can use this in your controller as the example shown below:

const navigationConfig = require('@financial-times/kat-header/navigation-config');

res.render('index', navigationConfig('licenceId123')) // this won't show any tabs as selected
// or
res.render('overview', navigationConfig('licenceId123', 'overview', '/overview/')) // this will show overview as the selected tab

Styles

Include the styles for the header by adding the following to your SCSS

@import 'kmt-header/main';

Javascript

Include the javascript by adding the following to your JS and initialise when ready using the init function. This will add an enhanced experience to the licence switcher.

const katHeader = require('@financial-times/kat-header');

// when ready
katHeader.init();

Local Development

Demos

Run the demos using

make build run

And view the demos on http://local.ft.com:5005/