{"_id":"@financial-times/n-teaser-v2","_rev":"40-2488345c58dccf255205495f4ce46414","name":"@financial-times/n-teaser-v2","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"name":"@financial-times/n-teaser-v2","version":"3.0.0","license":"MIT","_id":"@financial-times/n-teaser-v2@3.0.0","maintainers":[{"name":"financial-times","email":"strategic.products@ft.com"}],"homepage":"https://github.com/Financial-Times/n-teaser#readme","bugs":{"url":"https://github.com/Financial-Times/n-teaser/issues"},"dist":{"shasum":"d3142e03f319e5acb91f56daa00a633b3cea6cf0","tarball":"https://registry.npmjs.org/@financial-times/n-teaser-v2/-/n-teaser-v2-3.0.0.tgz","integrity":"sha512-hsFBT+ZJDn5MY/nkZddNMJ2zWWTlfGF46GMQNQpLgmlY94ZMNE6cpp4loUOexGOk81N6yx4ZhzrPSdq64FfMEw==","signatures":[{"sig":"MEUCIQDch/sP/qi42RtRkovc4H1Bjwu8jAY94jdIxIJMfpiYBgIgfu28J+kCnUc5oX0Bx2sOVsBiBKs7OTBSC5/ex4RissI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2HGeCRA9TVsSAnZWagAAfaAP/j20XUxnTN5ZeffrIZZ2\nujSLAQXvGnyrJnNPFCqBxix5bLIQQf/ZkX1bJLTHY788AdGseqhaD68ijsIy\nPhqEH5AsbEeiI4LdNnJiQjW55myqfhSYBc6A0MSmudbSq0wF0GXn2Q+AmLZv\nVjYkS8MgJMeVCHT8rFosx81KuUp2IkV3rbpm4dQJ5wv2vnLCn9nxPQoAMnud\nVUZTVf7bcMtRvsPBMadmI591SjeKdgmEynszwamX383tSi5MDIoIkfis7wob\nh0RX5Bmto2X2OaNvKC746CXYv62Cz+6VxytOVkv8Cle29mCNAp2KiDVKvgPX\n1P6RmfM+8hDdKGpI9VRKt44OmLZgUHaeQ2UL6pjvPdAG2Ilw3JIDsTl9d4OZ\nvcGvyfBMALJFVhKbpm7wQylFjLPNh8EUcke1sMl7/EKYyb0jDa7p2Mc4Ot46\nD6UsCdYprvnY8uTWv0y4g5D1QoVRNnCMflA6r5rCp71BPYhA+xde0gdIvJ0Y\nWoQ6umtA2orAaHX2+pp0yiOgTLFs5CIiYOHSJH9cVd4u0wNAn3q0+sNhXG84\nL+/7kKtH+plcZv2KfKJRLG6GWxW3FhTr0yWvjSZBGkzSMjJxGEe1JW4ysHnr\nAWykiJyLVHp62ujVWotPHB/rNs6KjJfGHNJMuUVVys+9WYMvaYuMJaB3dX28\nS5pn\r\n=awaa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"main.js","_from":".","_shasum":"d3142e03f319e5acb91f56daa00a633b3cea6cf0","scripts":{},"_npmUser":{"name":"financial-times","email":"strategic.products@ft.com"},"repository":{"url":"git+https://github.com/Financial-Times/n-teaser.git","type":"git"},"_npmVersion":"3.10.8","description":"n-card’s replacement: improved styles, simpler combinations, more basic templating","directories":{},"_nodeVersion":"6.9.0","dependencies":{},"devDependencies":{"chai":"^3.2.0","bower":"^1.7.9","chalk":"^1.1.3","mocha":"^2.2.5","eslint":"^2.10.2","pa11y-ci":"^1.1.1","node-sass":"^4.0.0","lintspaces-cli":"^0.1.1","npm-prepublish":"^1.2.1","@financial-times/n-internal-tool":"^1.2.3"},"_npmOperationalInternal":{"tmp":"tmp/n-teaser-v2-3.0.0.tgz_1496324844991_0.9860257538966835","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-06-01T13:47:25.898Z","modified":"2026-06-23T16:03:03.583Z","3.0.0":"2017-06-01T13:47:25.898Z"},"bugs":{"url":"https://github.com/Financial-Times/n-teaser/issues"},"license":"MIT","homepage":"https://github.com/Financial-Times/n-teaser#readme","repository":{"url":"git+https://github.com/Financial-Times/n-teaser.git","type":"git"},"description":"n-card’s replacement: improved styles, simpler combinations, more basic templating","maintainers":[{"email":"code.management@ft.com","name":"the-ft"},{"email":"info+npm@rowanmanning.com","name":"rowanmanning"},{"email":"yay@chee.party","name":"chee"},{"email":"a@ax.gy","name":"alexwilson"},{"email":"howdy@aendra.com","name":"aendra"},{"email":"emma.lewis@ft.com","name":"emmalewis"},{"email":"lee@leemoody.co.uk","name":"notlee"},{"email":"hamza.samih@ft.com","name":"hamza.samih"},{"email":"robert.boulton@ft.com","name":"robertboulton"},{"email":"leila.micollier@ft.com","name":"leila.micollier"},{"email":"rob.godfrey@ft.com","name":"robgodfrey"}],"readme":"# n-teaser\n\nServer and client-side teaser templates, along with their respective [next-api](https://github.com/Financial-Times/next-api) query fragments and presenters. Styling for teasers is in [o-teaser](https://github.com/Financial-Times/o-teaser).\n\n## What is a teaser?\n\nA teaser represents content – usually an article. It helps readers to decide if the content is relevant to them and showcases the breadth of FT content. It always links to a content page. Read the [o-teaser docs](http://registry.origami.ft.com/components/o-teaser) for more information.\n\n## How to use\n\n### Demo\n\nRun `make demo` to serve a set of demo templates on http://localhost:5005.\n\n### Use in an app\n\nIn the consuming app:\n\n- Add to package.json\n\n    It’s a node module only - no need to add to bower.json\n\n- Register the presenter in the express options\n```\n    helpers:  { nTeaserPresenter: require('@financial-times/n-teaser').presenter }\n```\n- Get the data from `next-api`\n\n    Use the data fragments from nTeaser that correspond to the teaser type(s) you will be using.\n- Add the teaser partials to your templates\n\n    Should be referenced as `> n-teaser/templates/standard`\n\n## Teaser Types\n\n| *Teaser* | *Tag* | *Title* | *Standfirst* | *Time Stamp* | *Headshot* | *Image* | *Actions* | *Related Content* | *Duration* (video content only) |\n|---|---|---|---|---|---|---|---|---|---|\n| Extra Light | only if opinion or brand | Y | N | Y | N | N | N | N | N |\n| Light | Y | Y | N | Y | Y | N | Y | N | Y |\n| Lifestyle(1) | Y | Y | N | Y | Y | Y | N | N | Y |\n| Standard | Y | Y | Y | Y | Y | N | Y | N | Y |\n| Heavy | Y | Y | Y | Y | N | Y | Y | N | Y |\n| TopStory | Y | Y | Y | Y | N | Heavy variant | Y | Y | Y |\n\n(1) Lifestyle branches off the hierarchy from Light\n\n## Data Queries\nIt is recommended that the data to populate n-teasers is sourced from `next-api`.\nThe required data properties for each of the teasers is contained in n-teaser.\n\nData fragments build cumulatively based on the hierarchy of teasers.\nSo to get all the data for a heavy teaser, you will need to use the fragments for ExtraLight, Light and Standard as well as Heavy.\n\nExample of a `next-api` query to populate Heavy Teasers;\n\n```\nconst teaserFragments = require('@financial-times/n-teaser').fragments;\n\nmodule.exports = `\n\n\t${teaserFragments.teaserExtraLight}\n\t${teaserFragments.teaserLight}\n\t${teaserFragments.teaserStandard}\n\t${teaserFragments.teaserHeavy}\n\n\tquery RelatedContent (\n\t\t$tagId: String!,\n\t\t$limit: Int!\n\t) {\n\t\tsearch(termName: \"metadata.idV1\", termValue: $tagId, limit: $limit) {\n\t\t\t...TeaserExtraLight\n\t\t\t...TeaserLight\n\t\t\t...TeaserStandard\n\t\t\t...TeaserHeavy\n\t\t}\n\t}\n`;\n```\n\n## Including templates\nTeasers are added to your template as partials.\nAdditional arguments can be passed to control display.\n\nExample of a teaser without an image;\n```\n<div data-o-grid-colspan=\"12 L6\">\n  {{#slice items offset=1 limit=3}}\n    {{>n-teaser/templates/standard mods=(array 'small')}}\n  {{/slice}}\n</div>\n```\nThe `mods` argument is for class modifiers that are added to the base `o-teaser` class name.\nDetails on these can be found in the `o-teaser` repository.\n\nExample of a teaser with an image;\n```\n<div data-o-grid-colspan=\"12 L6\">\n  {{#slice items offset=0 limit=1}}\n    {{>n-teaser/templates/heavy mods=(array 'large') colspan='{\"default\": 12, \"L\": 6}' position='{\"default\": \"bottom\"}' widths=\"[500, 332]\"}}\n  {{/slice}}\n</div>\n```\nThe `colspan`, `position` and `widths` arguments are passed on to `n-image` to determine the properties of how the image is displayed in the teaser.\nMore details on what is supported by `n-image` can be found in that repository.\n\n### Display options\nParameters can be passed to suppress some elements of teasers that would otherwise appear.\n\n#### Elements that rely on presenter logic\n- Related Content (on TopStory teasers) - set `noRelatedContent = true`\n- Tag (on all teasers) - set `noTag = true`\n- Author Headshot (on Light, Standard and Lifestyle teasers) - set `noHeadshot = true`\n#### Elements that are not transformed by presenter logic\n- Standfirst - set `standfirst = false`\n- Main Image - set `mainImage = false`\n\n## Demo page\n`$ make demo`: Serves examples of the component locally (`http://localhost:5005`), using dummy data and in isolation from an app.\n\nThis 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.\n\n## Pa11y\n`$ 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.\n","readmeFilename":"README.md"}