UNPKG

@financial-times/n-concept/README.md

Version:

2.28 kBMarkdownView Raw

1# n-concept
2
3n-concept is a card that shows a list of articles for a concept (topic, author, etc.) with links to myFT actions
4
5## Install
6
7Add the component to bower.json and package.json
8
9Run `npm install n-concept --save && bower install n-concept --save`
10
11Add the following line to your main sass file: `@import "n-concept/main";`
12
13## Usage
14
15Server-side
16```html
17	{{> n-concept/templates/concept }}
18```
19
20Client-side
21```javascript
22const myftTemplate = require('../../../views/partials/myft.html');
23const myFtHtml = myftTemplate(data);
24```
25
26n-concept requires at least the following data:
27 * `url` - url for the concept stream page
28 * `name` - name of the concept e.g. World
29 * `taxonomy` - what type of concept (e.g. author, topic)
30 * `conceptId`
31 * `items` an array of objects that are the headlines to show
32 * `imageUrl` for the image that appears at the top. You don't have to use the presenter to do this, but you will probably want to
33
34Please view the source for more information.
35
36## Extra data
37
38n-concept comes with 3 decorators
39
40`concept` combines the 2 decorators below
41
42`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 }`
43
44`concept-image` retrieves the image for the concept card. It requires the name of the taxonomy for the concept, and the list of articles in an array of objects called `items`, which should be in your data anyway.
45
46The decorator finds an image from the list of articles to be displayed, and if it cannot find one uses a default.
47
48##Demo page
49`$ make demo`: Serves examples of the component locally (`http://localhost:5005`), using dummy data and in isolation from an app.
50
51This 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.
52
53##Pa11y
54`$ make a11y`: Serves page of demo components, on which it runs [Pa11y](http://pa11y.org/) accessibility tests (errors flagging up accessibility infringements), which will also be run as part of the Continuous Integration (CI) process.

1	`# n-concept`
2
3	`n-concept is a card that shows a list of articles for a concept (topic, author, etc.) with links to myFT actions`
4
5	`## Install`
6
7	`Add the component to bower.json and package.json`
8
9	Run `npm install n-concept --save && bower install n-concept --save`
10
11	Add the following line to your main sass file: `@import "n-concept/main";`
12
13	`## Usage`
14
15	`Server-side`
16	```html
17	`{{> n-concept/templates/concept }}`
18	```
19
20	`Client-side`
21	```javascript
22	`const myftTemplate = require('../../../views/partials/myft.html');`
23	`const myFtHtml = myftTemplate(data);`
24	```
25
26	`n-concept requires at least the following data:`
27	* `url` - url for the concept stream page
28	* `name` - name of the concept e.g. World
29	* `taxonomy` - what type of concept (e.g. author, topic)
30	* `conceptId`
31	* `items` an array of objects that are the headlines to show
32	* `imageUrl` for the image that appears at the top. You don't have to use the presenter to do this, but you will probably want to
33
34	`Please view the source for more information.`
35
36	`## Extra data`
37
38	`n-concept comes with 3 decorators`
39
40	`concept` combines the 2 decorators below
41
42	`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 }`
43
44	`concept-image` retrieves the image for the concept card. It requires the name of the taxonomy for the concept, and the list of articles in an array of objects called `items`, which should be in your data anyway.
45
46	`The decorator finds an image from the list of articles to be displayed, and if it cannot find one uses a default.`
47
48	`##Demo page`
49	`$ make demo`: Serves examples of the component locally (`http://localhost:5005`), using dummy data and in isolation from an app.
50
51	`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.`
52
53	`##Pa11y`
54	`$ make a11y`: Serves page of demo components, on which it runs [Pa11y](http://pa11y.org/) accessibility tests (errors flagging up accessibility infringements), which will also be run as part of the Continuous Integration (CI) process.