@financial-times/n-topic-card

n-topic-card provides cards for concepts (e.g. topic, author) and their articles

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@financial-times/n-topic-card
11914.0.42 months ago5 years agoMinified + gzip package size for @financial-times/n-topic-card in KB

Readme

n-topic-card CircleCI
n-topic-card is a card that shows a list of articles for a concept (topic, author, etc.) with links to myFT actions.

Install

Add the component to package.json.
Run npm install n-topic-card --save.
Add the following line to your main sass file: @import "n-topic-card/main";.

Usage

Server-side

{{> n-topic-card/templates/concept }}

With custom slot

{{#> n-topic-card/templates/concept withCustomSlot=true}}
    <div>Some custom content you wish to inject at the bottom of the card before the footer</div>
{{/ n-topic-card/templates/concept}}

Client-side

const myftTemplate = require('../../../views/partials/myft.html');
const myFtHtml = myftTemplate(data);

n-topic-card requires at least the following data:
  • url - url for the concept stream page
  • name - name of the concept e.g. World
  • conceptId
  • items an array of objects that are the headlines to show

Please view the source for more information.
Make sure that when used, n-myft-ui component styles are included in the head stylesheet of the app. If your app doesn't have n-myft-ui/components/follow-button style, please add this:
@import '@financial-times/n-myft-ui/components/follow-button/main';

Extra data

responsive-grids handles scenarios where you want particular cards to be hidden at certain breakpoints. For example, on the home page only 3 myFT concept cards are shown between the medium and large breakpoints. This decorator requires the data item show with the settings in an object e.g. { default: true, M: false, XL: true }.
The decorator finds an image from the list of articles to be displayed, and if it cannot find one uses a default.

Demo page

make demo: Serves examples of the component locally (http://localhost:5005), using dummy data and in isolation from an app.
This is done on a simple express app which renders a single demo page that calls the partials to exhibit, populating them with data from a fixture.

Pa11y

make a11y: Serves page of demo components, on which it runs Pa11y accessibility tests (errors flagging up accessibility infringements), which will also be run as part of the Continuous Integration (CI) process.