n-tourtip

Displays tour tips

Usage

npm install --save @financial-times/n-tourtip

or

bower install --save n-tourtip

Use handlebars template

{{ > node_modules/@financial-times/n-tourtip/template data}}

Javascript API

getById( id )

Returns a specific tip object from the config or undefined if no tip is found

id is a String denoting the id of the tip.

Example

const { getById } = require('@financial-times/n-tourtip');

getById('myft-s');

/*
Would return this tip object:
{
    id: 'myft-s',
    settings: { hasTourPageLink: true, isDismissable: false, size: 's' },
    content: {
        title: 'Track the topics most important to you all in one place',
        imageAlt: 'Illustration of the "Companies" page, showing an "Added" button next to the page heading',
        imageUrl: 'https://www.ft.com/__assets/creatives/tour/myft-7.svg',
        ctas: [{ url: '/tour', label: 'More tips' }]
    }
}
*/

getRandomOfSize( size )

Returns a random tip of a given size where the size is equal to the tips' settings.size property.

const { getRandomOfSize } = require('@financial-times/n-tourtip');

getRandomOfSize('s') // might return the object above

dismiss( flags, settings )

settings is an Object with three properties:

• tipContainer - a css selector for the element containing the tip
• appendDismisserTo - a css selector for the element to dismiss
• localStorageKey - a key to add to local storage to determine when a user has dismissed the tourtip

Example

const dismiss = require('@financial-times/n-tourtip/lib/dismiss');

dismiss(flags, {
    tipContainer: '.tour-tip-stream-container',
    appendDismisserTo: '.tour-tip-stream-container',
    localStorageKey: 'tour-tip-stream-dismissed'
});