From d99a1195697f6599dc8519c8d7b9c30e22d9299f Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Mon, 3 Jun 2019 09:03:05 +0100 Subject: [PATCH 1/3] Abstract teaser component story data out of Storybook configuration into separate JSON files --- components/x-teaser/__fixtures__/article.json | 29 ++++++++++++ .../__fixtures__/content-package.json | 26 ++++++++++ components/x-teaser/__fixtures__/opinion.json | 31 ++++++++++++ .../x-teaser/__fixtures__/package-item.json | 23 +++++++++ components/x-teaser/__fixtures__/podcast.json | 24 ++++++++++ .../x-teaser/__fixtures__/promoted.json | 14 ++++++ .../x-teaser/__fixtures__/top-story.json | 46 ++++++++++++++++++ components/x-teaser/__fixtures__/video.json | 31 ++++++++++++ components/x-teaser/stories/article.js | 32 +------------ .../{package.js => content-package.js} | 31 ++---------- components/x-teaser/stories/index.js | 6 +-- components/x-teaser/stories/opinion.js | 36 ++------------ components/x-teaser/stories/package-item.js | 29 ++---------- components/x-teaser/stories/podcast.js | 27 +---------- components/x-teaser/stories/promoted.js | 15 +----- components/x-teaser/stories/top-story.js | 47 +------------------ components/x-teaser/stories/video.js | 36 +------------- 17 files changed, 248 insertions(+), 235 deletions(-) create mode 100644 components/x-teaser/__fixtures__/article.json create mode 100644 components/x-teaser/__fixtures__/content-package.json create mode 100644 components/x-teaser/__fixtures__/opinion.json create mode 100644 components/x-teaser/__fixtures__/package-item.json create mode 100644 components/x-teaser/__fixtures__/podcast.json create mode 100644 components/x-teaser/__fixtures__/promoted.json create mode 100644 components/x-teaser/__fixtures__/top-story.json create mode 100644 components/x-teaser/__fixtures__/video.json rename components/x-teaser/stories/{package.js => content-package.js} (57%) diff --git a/components/x-teaser/__fixtures__/article.json b/components/x-teaser/__fixtures__/article.json new file mode 100644 index 000000000..22486d022 --- /dev/null +++ b/components/x-teaser/__fixtures__/article.json @@ -0,0 +1,29 @@ +{ + "type": "article", + "id": "", + "url": "#", + "title": "Inside charity fundraiser where hostesses are put on show", + "altTitle": "Men Only, the charity fundraiser with hostesses on show", + "standfirst": "FT investigation finds groping and sexual harassment at secretive black-tie dinner", + "altStandfirst": "Groping and sexual harassment at black-tie dinner charity event", + "publishedDate": "2018-01-23T15:07:00.000Z", + "firstPublishedDate": "2018-01-23T13:53:00.000Z", + "metaPrefixText": "", + "metaSuffixText": "", + "metaLink": { + "url": "#", + "prefLabel": "Sexual misconduct allegations" + }, + "metaAltLink": { + "url": "#", + "prefLabel": "FT Investigations" + }, + "image": { + "url": "http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5", + "width": 2048, + "height": 1152 + }, + "indicators": { + "isEditorsChoice": true + } +} diff --git a/components/x-teaser/__fixtures__/content-package.json b/components/x-teaser/__fixtures__/content-package.json new file mode 100644 index 000000000..fa85fafe5 --- /dev/null +++ b/components/x-teaser/__fixtures__/content-package.json @@ -0,0 +1,26 @@ +{ + "type": "package", + "id": "", + "url": "#", + "title": "The royal wedding", + "altTitle": "", + "standfirst": "Prince Harry and Meghan Markle will tie the knot at Windsor Castle", + "altStandfirst": "", + "publishedDate": "2018-05-14T16:38:49.000Z", + "firstPublishedDate": "2018-05-14T16:38:49.000Z", + "metaPrefixText": "", + "metaSuffixText": "", + "metaLink": { + "url": "#", + "prefLabel": "FT Magazine" + }, + "metaAltLink": { + "url": "#", + "prefLabel": "FT Series" + }, + "image": { + "url": "http://prod-upp-image-read.ft.com/7e97f5b6-578d-11e8-b8b2-d6ceb45fa9d0", + "width": 2048, + "height": 1152 + } +} diff --git a/components/x-teaser/__fixtures__/opinion.json b/components/x-teaser/__fixtures__/opinion.json new file mode 100644 index 000000000..d455871bd --- /dev/null +++ b/components/x-teaser/__fixtures__/opinion.json @@ -0,0 +1,31 @@ +{ + "type": "article", + "id": "", + "url": "#", + "title": "Anti-Semitism and the threat of identity politics", + "altTitle": "", + "standfirst": "Today, hatred of Jews is mixed in with fights about Islam and Israel", + "altStandfirst": "Anti-Semitism and identity politics", + "publishedDate": "2018-04-02T12:22:01.000Z", + "firstPublishedDate": "2018-04-02T12:22:01.000Z", + "metaPrefixText": "", + "metaSuffixText": "", + "metaLink": { + "url": "#", + "prefLabel": "Gideon Rachman" + }, + "metaAltLink": { + "url": "#", + "prefLabel": "Anti-Semitism" + }, + "image": { + "url": "http://prod-upp-image-read.ft.com/1005ca96-364b-11e8-8b98-2f31af407cc8", + "width": 2048, + "height": 1152 + }, + "headshot": "fthead-v1:gideon-rachman", + "indicators": { + "isOpinion": true, + "isColumn": true + } +} diff --git a/components/x-teaser/__fixtures__/package-item.json b/components/x-teaser/__fixtures__/package-item.json new file mode 100644 index 000000000..cdb8a9985 --- /dev/null +++ b/components/x-teaser/__fixtures__/package-item.json @@ -0,0 +1,23 @@ +{ + "type": "article", + "id": "", + "url": "#", + "title": "Why so little has changed since the crash", + "standfirst": "Martin Wolf on the power of vested interests in today’s rent-extracting economy", + "publishedDate": "2018-09-02T15:07:00.000Z", + "firstPublishedDate": "2018-09-02T13:53:00.000Z", + "metaPrefixText": "FT Series", + "metaSuffixText": "", + "metaLink": { + "url": "#", + "prefLabel": "Financial crisis: Are we safer now? " + }, + "image": { + "url": "http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5", + "width": 2048, + "height": 1152 + }, + "indicators": { + "isOpinion": true + } +} diff --git a/components/x-teaser/__fixtures__/podcast.json b/components/x-teaser/__fixtures__/podcast.json new file mode 100644 index 000000000..fcb7b98f2 --- /dev/null +++ b/components/x-teaser/__fixtures__/podcast.json @@ -0,0 +1,24 @@ +{ + "type": "audio", + "id": "d1246074-f7d3-4aaf-951c-80a6db495765", + "url": "https://www.ft.com/content/d1246074-f7d3-4aaf-951c-80a6db495765", + "title": "Who sets the internet standards?", + "standfirst": "Hannah Kuchler talks to American social scientist and cyber security expert Andrea…", + "altStandfirst": "", + "publishedDate": "2018-10-24T04:00:00.000Z", + "firstPublishedDate": "2018-10-24T04:00:00.000Z", + "metaSuffixText": "12 mins", + "metaLink": { + "url": "#", + "prefLabel": "Tech Tonic podcast" + }, + "metaAltLink": null, + "image": { + "url": "https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F5d1a54aa-f49b-11e8-ae55-df4bf40f9d0d?source=next&fit=scale-down&compression=best&width=240", + "width": 2048, + "height": 1152 + }, + "indicators": { + "isPodcast": true + } +} diff --git a/components/x-teaser/__fixtures__/promoted.json b/components/x-teaser/__fixtures__/promoted.json new file mode 100644 index 000000000..aa95056a9 --- /dev/null +++ b/components/x-teaser/__fixtures__/promoted.json @@ -0,0 +1,14 @@ +{ + "type": "paid-post", + "id": "", + "url": "#", + "title": "Why eSports companies are on a winning streak", + "standfirst": "ESports is big business and about to get bigger: global revenues could hit $1.5bn by 2020", + "promotedPrefixText": "Paid post", + "promotedSuffixText": "by UBS", + "image": { + "url": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCrm_3yahABGAEyCMx3RoLss603", + "width": 700, + "height": 394 + } +} diff --git a/components/x-teaser/__fixtures__/top-story.json b/components/x-teaser/__fixtures__/top-story.json new file mode 100644 index 000000000..9b117bb93 --- /dev/null +++ b/components/x-teaser/__fixtures__/top-story.json @@ -0,0 +1,46 @@ +{ + "type": "article", + "id": "", + "url": "#", + "title": "Inside charity fundraiser where hostesses are put on show", + "altTitle": "Men Only, the charity fundraiser with hostesses on show", + "standfirst": "FT investigation finds groping and sexual harassment at secretive black-tie dinner", + "altStandfirst": "Groping and sexual harassment at black-tie dinner charity event", + "publishedDate": "2018-01-23T15:07:00.000Z", + "firstPublishedDate": "2018-01-23T13:53:00.000Z", + "metaPrefixText": "", + "metaSuffixText": "", + "metaLink": { + "url": "#", + "prefLabel": "Sexual misconduct allegations" + }, + "metaAltLink": { + "url": "#", + "prefLabel": "FT Investigations" + }, + "image": { + "url": "http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5", + "width": 2048, + "height": 1152 + }, + "relatedLinks": [ + { + "id": "", + "url": "#", + "type": "article", + "title": "Removing the fig leaf of charity" + }, + { + "id": "", + "url": "#", + "type": "article", + "title": "A dinner that demeaned both women and men" + }, + { + "id": "", + "url": "#", + "type": "video", + "title": "PM speaks out after Presidents Club dinner" + } + ] +} diff --git a/components/x-teaser/__fixtures__/video.json b/components/x-teaser/__fixtures__/video.json new file mode 100644 index 000000000..5db90c9d9 --- /dev/null +++ b/components/x-teaser/__fixtures__/video.json @@ -0,0 +1,31 @@ +{ + "type": "video", + "id": "0e89d872-5711-457b-80b1-4ca0d8afea46", + "url": "#", + "title": "FT View: Donald Trump, man of steel", + "standfirst": "The FT's Rob Armstrong looks at why Donald Trump is pushing trade tariffs", + "publishedDate": "2018-03-26T08:12:28.137Z", + "firstPublishedDate": "2018-03-26T08:12:28.137Z", + "metaPrefixText": "", + "metaSuffixText": "02:51min", + "metaLink": { + "url": "#", + "prefLabel": "Global Trade" + }, + "metaAltLink": { + "url": "#", + "prefLabel": "US" + }, + "image": { + "url": "http://com.ft.imagepublish.upp-prod-eu.s3.amazonaws.com/a27ce49b-85b8-445b-b883-db6e2f533194", + "width": 1920, + "height": 1080 + }, + "video": { + "url": "https://next-media-api.ft.com/renditions/15218247321960/640x360.mp4", + "width": 640, + "height": 360, + "mediaType": "video/mp4", + "codec": "h264" + } +} diff --git a/components/x-teaser/stories/article.js b/components/x-teaser/stories/article.js index 7da5fea98..79c5862db 100644 --- a/components/x-teaser/stories/article.js +++ b/components/x-teaser/stories/article.js @@ -4,35 +4,7 @@ exports.title = 'Article'; // This data will provide defaults for the Knobs defined below and used // to render examples in the documentation site. -exports.data = Object.assign({ - type: 'article', - id: '', - url: '#', - title: 'Inside charity fundraiser where hostesses are put on show', - altTitle: 'Men Only, the charity fundraiser with hostesses on show', - standfirst: 'FT investigation finds groping and sexual harassment at secretive black-tie dinner', - altStandfirst: 'Groping and sexual harassment at black-tie dinner charity event', - publishedDate: '2018-01-23T15:07:00.000Z', - firstPublishedDate: '2018-01-23T13:53:00.000Z', - metaPrefixText: '', - metaSuffixText: '', - metaLink: { - url: '#', - prefLabel: 'Sexual misconduct allegations' - }, - metaAltLink: { - url: '#', - prefLabel: 'FT Investigations' - }, - image: { - url: 'http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5', - width: 2048, - height: 1152 - }, - indicators: { - isEditorsChoice: true - } -}, presets.SmallHeavy); +exports.data = Object.assign(require('../__fixtures__/article.json'), presets.SmallHeavy); // A list of properties to pass to the component when rendered in Storybook. If a Knob // exists for the property then it will be editable with the default as defined above. @@ -69,7 +41,7 @@ exports.knobs = [ 'headlineTesting', // Variants 'layout', - 'modifiers', + 'modifiers' ]; // This reference is only required for hot module loading in development diff --git a/components/x-teaser/stories/package.js b/components/x-teaser/stories/content-package.js similarity index 57% rename from components/x-teaser/stories/package.js rename to components/x-teaser/stories/content-package.js index 05a3e1bbc..b96d5c6bc 100644 --- a/components/x-teaser/stories/package.js +++ b/components/x-teaser/stories/content-package.js @@ -4,32 +4,9 @@ exports.title = 'Content Package'; // This data will provide defaults for the Knobs defined below and used // to render examples in the documentation site. -exports.data = Object.assign({ - type: 'package', - id: '', - url: '#', - title: 'The royal wedding', - altTitle: '', - standfirst: 'Prince Harry and Meghan Markle will tie the knot at Windsor Castle', - altStandfirst: '', - publishedDate: '2018-05-14T16:38:49.000Z', - firstPublishedDate: '2018-05-14T16:38:49.000Z', - metaPrefixText: '', - metaSuffixText: '', - metaLink: { - url: '#', - prefLabel: 'FT Magazine' - }, - metaAltLink: { - url: '#', - prefLabel: 'FT Series' - }, - image: { - url: 'http://prod-upp-image-read.ft.com/7e97f5b6-578d-11e8-b8b2-d6ceb45fa9d0', - width: 2048, - height: 1152 - } -}, presets.Hero, { modifiers: 'centre' }); +exports.data = Object.assign(require('../__fixtures__/content-package.json'), presets.Hero, { + modifiers: 'centre' +}); // A list of properties to pass to the component when rendered in Storybook. If a Knob // exists for the property then it will be editable with the default as defined above. @@ -58,7 +35,7 @@ exports.knobs = [ // Variants 'layout', 'theme', - 'modifiers', + 'modifiers' ]; // This reference is only required for hot module loading in development diff --git a/components/x-teaser/stories/index.js b/components/x-teaser/stories/index.js index 63b6fac6d..216c17193 100644 --- a/components/x-teaser/stories/index.js +++ b/components/x-teaser/stories/index.js @@ -10,18 +10,18 @@ exports.dependencies = { 'o-typography': '^5.5.0', 'o-teaser': '^3.5.0', 'o-labels': '^4.2.1', - 'o-video': '^4.1.0', + 'o-video': '^4.1.0' }; exports.stories = [ require('./article'), require('./podcast'), require('./opinion'), - require('./package'), + require('./content-package'), require('./package-item'), require('./promoted'), require('./top-story'), - require('./video'), + require('./video') ]; exports.knobs = require('./knobs'); diff --git a/components/x-teaser/stories/opinion.js b/components/x-teaser/stories/opinion.js index bd6be8047..235bcf739 100644 --- a/components/x-teaser/stories/opinion.js +++ b/components/x-teaser/stories/opinion.js @@ -4,37 +4,9 @@ exports.title = 'Opinion Piece'; // This data will provide defaults for the Knobs defined below and used // to render examples in the documentation site. -exports.data = Object.assign({ - type: 'article', - id: '', - url: '#', - title: 'Anti-Semitism and the threat of identity politics', - altTitle: '', - standfirst: 'Today, hatred of Jews is mixed in with fights about Islam and Israel', - altStandfirst: 'Anti-Semitism and identity politics', - publishedDate: '2018-04-02T12:22:01.000Z', - firstPublishedDate: '2018-04-02T12:22:01.000Z', - metaPrefixText: '', - metaSuffixText: '', - metaLink: { - url: '#', - prefLabel: 'Gideon Rachman' - }, - metaAltLink: { - url: '#', - prefLabel: 'Anti-Semitism' - }, - image: { - url: 'http://prod-upp-image-read.ft.com/1005ca96-364b-11e8-8b98-2f31af407cc8', - width: 2048, - height: 1152 - }, - headshot: 'fthead-v1:gideon-rachman', - indicators: { - isOpinion: true, - isColumn: true - } -}, presets.SmallHeavy, { showHeadshot: true }); +exports.data = Object.assign(require('../__fixtures__/opinion.json'), presets.SmallHeavy, { + showHeadshot: true +}); // A list of properties to pass to the component when rendered in Storybook. If a Knob // exists for the property then it will be editable with the default as defined above. @@ -70,7 +42,7 @@ exports.knobs = [ 'layout', 'modifiers', // Indicators - 'indicators', + 'indicators' ]; // This reference is only required for hot module loading in development diff --git a/components/x-teaser/stories/package-item.js b/components/x-teaser/stories/package-item.js index 5de22f7a6..17dde23e3 100644 --- a/components/x-teaser/stories/package-item.js +++ b/components/x-teaser/stories/package-item.js @@ -4,29 +4,10 @@ exports.title = 'Package item'; // This data will provide defaults for the Knobs defined below and used // to render examples in the documentation site. -exports.data = Object.assign({ - type: 'article', - id: '', - url: '#', - title: 'Why so little has changed since the crash', - standfirst: 'Martin Wolf on the power of vested interests in today’s rent-extracting economy', - publishedDate: '2018-09-02T15:07:00.000Z', - firstPublishedDate: '2018-09-02T13:53:00.000Z', - metaPrefixText: 'FT Series', - metaSuffixText: '', - metaLink: { - url: '#', - prefLabel: 'Financial crisis: Are we safer now? ' - }, - image: { - url: 'http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5', - width: 2048, - height: 1152 - }, - indicators: { - isOpinion: true - } -}, presets.Hero, { parentTheme: 'extra-article', modifiers: 'centre' }); +exports.data = Object.assign(require('../__fixtures__/package-item.json'), presets.Hero, { + parentTheme: 'extra-article', + modifiers: 'centre' +}); // A list of properties to pass to the component when rendered in Storybook. If a Knob // exists for the property then it will be editable with the default as defined above. @@ -60,7 +41,7 @@ exports.knobs = [ 'layout', 'theme', 'parentTheme', - 'modifiers', + 'modifiers' ]; // This reference is only required for hot module loading in development diff --git a/components/x-teaser/stories/podcast.js b/components/x-teaser/stories/podcast.js index 4527ba98e..65b494525 100644 --- a/components/x-teaser/stories/podcast.js +++ b/components/x-teaser/stories/podcast.js @@ -4,30 +4,7 @@ exports.title = 'Podcast'; // This data will provide defaults for the Knobs defined below and used // to render examples in the documentation site. -exports.data = Object.assign({ - type: 'audio', - id: 'd1246074-f7d3-4aaf-951c-80a6db495765', - url: 'https://www.ft.com/content/d1246074-f7d3-4aaf-951c-80a6db495765', - title: 'Who sets the internet standards?', - standfirst: 'Hannah Kuchler talks to American social scientist and cyber security expert Andrea…', - altStandfirst: '', - publishedDate: '2018-10-24T04:00:00.000Z', - firstPublishedDate: '2018-10-24T04:00:00.000Z', - metaSuffixText: '12 mins', - metaLink: { - url: '#', - prefLabel: 'Tech Tonic podcast' - }, - metaAltLink: null, - image: { - url: 'https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F5d1a54aa-f49b-11e8-ae55-df4bf40f9d0d?source=next&fit=scale-down&compression=best&width=240', - width: 2048, - height: 1152 - }, - indicators: { - "isPodcast": true - } -}, presets.SmallHeavy); +exports.data = Object.assign(require('../__fixtures__/podcast.json'), presets.SmallHeavy); // A list of properties to pass to the component when rendered in Storybook. If a Knob // exists for the property then it will be editable with the default as defined above. @@ -64,7 +41,7 @@ exports.knobs = [ 'headlineTesting', // Variants 'layout', - 'modifiers', + 'modifiers' ]; // This reference is only required for hot module loading in development diff --git a/components/x-teaser/stories/promoted.js b/components/x-teaser/stories/promoted.js index 3ec41dcd5..1d7d22ed2 100644 --- a/components/x-teaser/stories/promoted.js +++ b/components/x-teaser/stories/promoted.js @@ -4,20 +4,7 @@ exports.title = 'Paid Post'; // This data will provide defaults for the Knobs defined below and used // to render examples in the documentation site. -exports.data = Object.assign({ - type: 'paid-post', - id: '', - url: '#', - title: 'Why eSports companies are on a winning streak', - standfirst: 'ESports is big business and about to get bigger: global revenues could hit $1.5bn by 2020', - promotedPrefixText: 'Paid post', - promotedSuffixText: 'by UBS', - image: { - url: 'https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCrm_3yahABGAEyCMx3RoLss603', - width: 700, - height: 394 - } -}, presets.SmallHeavy); +exports.data = Object.assign(require('../__fixtures__/promoted.json'), presets.SmallHeavy); // A list of properties to pass to the component when rendered in Storybook. If a Knob // exists for the property then it will be editable with the default as defined above. diff --git a/components/x-teaser/stories/top-story.js b/components/x-teaser/stories/top-story.js index ffc299040..ef9bc6cb2 100644 --- a/components/x-teaser/stories/top-story.js +++ b/components/x-teaser/stories/top-story.js @@ -4,52 +4,7 @@ exports.title = 'Top Story'; // This data will provide defaults for the Knobs defined below and used // to render examples in the documentation site. -exports.data = Object.assign({ - type: 'article', - id: '', - url: '#', - title: 'Inside charity fundraiser where hostesses are put on show', - altTitle: 'Men Only, the charity fundraiser with hostesses on show', - standfirst: 'FT investigation finds groping and sexual harassment at secretive black-tie dinner', - altStandfirst: 'Groping and sexual harassment at black-tie dinner charity event', - publishedDate: '2018-01-23T15:07:00.000Z', - firstPublishedDate: '2018-01-23T13:53:00.000Z', - metaPrefixText: '', - metaSuffixText: '', - metaLink: { - url: '#', - prefLabel: 'Sexual misconduct allegations' - }, - metaAltLink: { - url: '#', - prefLabel: 'FT Investigations' - }, - image: { - url: 'http://prod-upp-image-read.ft.com/a25832ea-0053-11e8-9650-9c0ad2d7c5b5', - width: 2048, - height: 1152 - }, - relatedLinks: [ - { - id: '', - url: '#', - type: 'article', - title: 'Removing the fig leaf of charity' - }, - { - id: '', - url: '#', - type: 'article', - title: 'A dinner that demeaned both women and men' - }, - { - id: '', - url: '#', - type: 'video', - title: 'PM speaks out after Presidents Club dinner' - } - ] -}, presets.TopStoryLandscape); +exports.data = Object.assign(require('../__fixtures__/top-story.json'), presets.TopStoryLandscape); // A list of properties to pass to the component when rendered in Storybook. If a Knob // exists for the property then it will be editable with the default as defined above. diff --git a/components/x-teaser/stories/video.js b/components/x-teaser/stories/video.js index 28059f0ba..bdb6db8fd 100644 --- a/components/x-teaser/stories/video.js +++ b/components/x-teaser/stories/video.js @@ -4,39 +4,7 @@ exports.title = 'Video'; // This data will provide defaults for the Knobs defined below and used // to render examples in the documentation site. -exports.data = Object.assign({ - type: 'video', - // The ID is required for the in-situ video demo to work - // NOTE: o-video is not be called on component mount so won't render anyway. - id: '0e89d872-5711-457b-80b1-4ca0d8afea46', - url: '#', - title: 'FT View: Donald Trump, man of steel', - standfirst: 'The FT\'s Rob Armstrong looks at why Donald Trump is pushing trade tariffs', - publishedDate: '2018-03-26T08:12:28.137Z', - firstPublishedDate: '2018-03-26T08:12:28.137Z', - metaPrefixText: '', - metaSuffixText: '02:51min', - metaLink: { - url: '#', - prefLabel: 'Global Trade' - }, - metaAltLink: { - url: '#', - prefLabel: 'US' - }, - image: { - url: 'http://com.ft.imagepublish.upp-prod-eu.s3.amazonaws.com/a27ce49b-85b8-445b-b883-db6e2f533194', - width: 1920, - height: 1080 - }, - video: { - url: 'https://next-media-api.ft.com/renditions/15218247321960/640x360.mp4', - width: 640, - height: 360, - mediaType: 'video/mp4', - codec: 'h264' - } -}, presets.HeroVideo); +exports.data = Object.assign(require('../__fixtures__/video.json'), presets.HeroVideo); // A list of properties to pass to the component when rendered in Storybook. If a Knob // exists for the property then it will be editable with the default as defined above. @@ -66,7 +34,7 @@ exports.knobs = [ 'video', // Variants 'layout', - 'modifiers', + 'modifiers' ]; // This reference is only required for hot module loading in development From 53a627ea8fc5e2023f3608214050bca8fafa420e Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Mon, 3 Jun 2019 09:14:14 +0100 Subject: [PATCH 2/3] Add separate teaser component snapshot tests --- .../__snapshots__/snapshots.test.js.snap | 4505 +++++++++++++++++ .../x-teaser/__tests__/snapshots.test.js | 27 + 2 files changed, 4532 insertions(+) create mode 100644 components/x-teaser/__tests__/__snapshots__/snapshots.test.js.snap create mode 100644 components/x-teaser/__tests__/snapshots.test.js diff --git a/components/x-teaser/__tests__/__snapshots__/snapshots.test.js.snap b/components/x-teaser/__tests__/__snapshots__/snapshots.test.js.snap new file mode 100644 index 000000000..353ffe0af --- /dev/null +++ b/components/x-teaser/__tests__/__snapshots__/snapshots.test.js.snap @@ -0,0 +1,4505 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`x-teaser / snapshots renders a Hero teaser with article data 1`] = ` +
+
+
+ +
+
+ + Inside charity fundraiser where hostesses are put on show + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Hero teaser with contentPackage data 1`] = ` +
+
+
+ +
+
+ + The royal wedding + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Hero teaser with opinion data 1`] = ` +
+
+
+ +
+
+ + Anti-Semitism and the threat of identity politics + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Hero teaser with packageItem data 1`] = ` +
+
+
+ +
+
+ + Why so little has changed since the crash + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Hero teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+
+ + Who sets the internet standards? + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Hero teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+
+ + Why eSports companies are on a winning streak + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Hero teaser with topStory data 1`] = ` +
+
+
+ +
+
+ + Inside charity fundraiser where hostesses are put on show + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Hero teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+
+ + FT View: Donald Trump, man of steel + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroNarrow teaser with article data 1`] = ` +
+
+
+ +
+
+ + Inside charity fundraiser where hostesses are put on show + +
+

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+`; + +exports[`x-teaser / snapshots renders a HeroNarrow teaser with contentPackage data 1`] = ` +
+
+
+ +
+
+ + The royal wedding + +
+

+ + Prince Harry and Meghan Markle will tie the knot at Windsor Castle + +

+
+
+`; + +exports[`x-teaser / snapshots renders a HeroNarrow teaser with opinion data 1`] = ` +
+
+
+ +
+
+ + Anti-Semitism and the threat of identity politics + +
+

+ + Today, hatred of Jews is mixed in with fights about Islam and Israel + +

+
+
+`; + +exports[`x-teaser / snapshots renders a HeroNarrow teaser with packageItem data 1`] = ` +
+
+
+ +
+
+ + Why so little has changed since the crash + +
+

+ + Martin Wolf on the power of vested interests in today’s rent-extracting economy + +

+
+
+`; + +exports[`x-teaser / snapshots renders a HeroNarrow teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+
+ + Who sets the internet standards? + +
+

+ + Hannah Kuchler talks to American social scientist and cyber security expert Andrea… + +

+
+
+`; + +exports[`x-teaser / snapshots renders a HeroNarrow teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+
+ + Why eSports companies are on a winning streak + +
+

+ + ESports is big business and about to get bigger: global revenues could hit $1.5bn by 2020 + +

+
+
+`; + +exports[`x-teaser / snapshots renders a HeroNarrow teaser with topStory data 1`] = ` +
+
+
+ +
+
+ + Inside charity fundraiser where hostesses are put on show + +
+

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+`; + +exports[`x-teaser / snapshots renders a HeroNarrow teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+
+ + FT View: Donald Trump, man of steel + +
+

+ + The FT's Rob Armstrong looks at why Donald Trump is pushing trade tariffs + +

+
+
+`; + +exports[`x-teaser / snapshots renders a HeroOverlay teaser with article data 1`] = ` +
+
+
+ +
+
+ + Inside charity fundraiser where hostesses are put on show + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroOverlay teaser with contentPackage data 1`] = ` +
+
+
+ +
+
+ + The royal wedding + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroOverlay teaser with opinion data 1`] = ` +
+
+
+ +
+
+ + Anti-Semitism and the threat of identity politics + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroOverlay teaser with packageItem data 1`] = ` +
+
+
+ +
+
+ + Why so little has changed since the crash + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroOverlay teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+
+ + Who sets the internet standards? + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroOverlay teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+
+ + Why eSports companies are on a winning streak + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroOverlay teaser with topStory data 1`] = ` +
+
+
+ +
+
+ + Inside charity fundraiser where hostesses are put on show + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroOverlay teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+
+ + FT View: Donald Trump, man of steel + +
+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroVideo teaser with article data 1`] = ` +
+
+
+ +
+
+ + Inside charity fundraiser where hostesses are put on show + +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroVideo teaser with contentPackage data 1`] = ` +
+
+
+ +
+
+ + The royal wedding + +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroVideo teaser with opinion data 1`] = ` +
+
+
+ +
+
+ + Anti-Semitism and the threat of identity politics + +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroVideo teaser with packageItem data 1`] = ` +
+
+
+ +
+
+ + Why so little has changed since the crash + +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroVideo teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+
+ + Who sets the internet standards? + +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroVideo teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+
+ + Why eSports companies are on a winning streak + +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroVideo teaser with topStory data 1`] = ` +
+
+
+ +
+
+ + Inside charity fundraiser where hostesses are put on show + +
+
+
+`; + +exports[`x-teaser / snapshots renders a HeroVideo teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+`; + +exports[`x-teaser / snapshots renders a Large teaser with article data 1`] = ` +
+
+ + +

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Large teaser with contentPackage data 1`] = ` +
+
+ + +

+ + Prince Harry and Meghan Markle will tie the knot at Windsor Castle + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Large teaser with opinion data 1`] = ` +
+
+ + +

+ + Today, hatred of Jews is mixed in with fights about Islam and Israel + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Large teaser with packageItem data 1`] = ` +
+
+ + +

+ + Martin Wolf on the power of vested interests in today’s rent-extracting economy + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Large teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+ +

+ + Hannah Kuchler talks to American social scientist and cyber security expert Andrea… + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Large teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+ +

+ + ESports is big business and about to get bigger: global revenues could hit $1.5bn by 2020 + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Large teaser with topStory data 1`] = ` +
+
+ + +

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Large teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+ +

+ + The FT's Rob Armstrong looks at why Donald Trump is pushing trade tariffs + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a Small teaser with article data 1`] = ` +
+
+ + +
+
+`; + +exports[`x-teaser / snapshots renders a Small teaser with contentPackage data 1`] = ` +
+
+ + +
+
+`; + +exports[`x-teaser / snapshots renders a Small teaser with opinion data 1`] = ` +
+
+ + +
+
+`; + +exports[`x-teaser / snapshots renders a Small teaser with packageItem data 1`] = ` +
+
+ + +
+
+`; + +exports[`x-teaser / snapshots renders a Small teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+ +
+
+`; + +exports[`x-teaser / snapshots renders a Small teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+ +
+
+`; + +exports[`x-teaser / snapshots renders a Small teaser with topStory data 1`] = ` +
+
+ + +
+
+`; + +exports[`x-teaser / snapshots renders a Small teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+ +
+
+`; + +exports[`x-teaser / snapshots renders a SmallHeavy teaser with article data 1`] = ` +
+
+ + +

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a SmallHeavy teaser with contentPackage data 1`] = ` +
+
+ + +

+ + Prince Harry and Meghan Markle will tie the knot at Windsor Castle + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a SmallHeavy teaser with opinion data 1`] = ` +
+
+ + +

+ + Today, hatred of Jews is mixed in with fights about Islam and Israel + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a SmallHeavy teaser with packageItem data 1`] = ` +
+
+ + +

+ + Martin Wolf on the power of vested interests in today’s rent-extracting economy + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a SmallHeavy teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+ +

+ + Hannah Kuchler talks to American social scientist and cyber security expert Andrea… + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a SmallHeavy teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+ +

+ + ESports is big business and about to get bigger: global revenues could hit $1.5bn by 2020 + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a SmallHeavy teaser with topStory data 1`] = ` +
+
+ + +

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a SmallHeavy teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+ +

+ + The FT's Rob Armstrong looks at why Donald Trump is pushing trade tariffs + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a TopStory teaser with article data 1`] = ` +
+
+ + +

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+`; + +exports[`x-teaser / snapshots renders a TopStory teaser with contentPackage data 1`] = ` +
+
+ + +

+ + Prince Harry and Meghan Markle will tie the knot at Windsor Castle + +

+
+
+`; + +exports[`x-teaser / snapshots renders a TopStory teaser with opinion data 1`] = ` +
+
+ + +

+ + Today, hatred of Jews is mixed in with fights about Islam and Israel + +

+
+
+`; + +exports[`x-teaser / snapshots renders a TopStory teaser with packageItem data 1`] = ` +
+
+ + +

+ + Martin Wolf on the power of vested interests in today’s rent-extracting economy + +

+
+
+`; + +exports[`x-teaser / snapshots renders a TopStory teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+ +

+ + Hannah Kuchler talks to American social scientist and cyber security expert Andrea… + +

+
+
+`; + +exports[`x-teaser / snapshots renders a TopStory teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+ +

+ + ESports is big business and about to get bigger: global revenues could hit $1.5bn by 2020 + +

+
+
+`; + +exports[`x-teaser / snapshots renders a TopStory teaser with topStory data 1`] = ` +
+
+ + +

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+ +
+`; + +exports[`x-teaser / snapshots renders a TopStory teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+ +

+ + The FT's Rob Armstrong looks at why Donald Trump is pushing trade tariffs + +

+
+
+`; + +exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with article data 1`] = ` +
+
+ + +

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with contentPackage data 1`] = ` +
+
+ + +

+ + Prince Harry and Meghan Markle will tie the knot at Windsor Castle + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with opinion data 1`] = ` +
+
+ + +

+ + Today, hatred of Jews is mixed in with fights about Islam and Israel + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with packageItem data 1`] = ` +
+
+ + +

+ + Martin Wolf on the power of vested interests in today’s rent-extracting economy + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with podcast data 1`] = ` +
+
+
+
+ + Tech Tonic podcast + + + 12 mins + +
+
+ +

+ + Hannah Kuchler talks to American social scientist and cyber security expert Andrea… + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with promoted data 1`] = ` +
+
+
+
+ + Paid post + + + by UBS + +
+
+ +

+ + ESports is big business and about to get bigger: global revenues could hit $1.5bn by 2020 + +

+
+
+
+ +
+
+
+`; + +exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with topStory data 1`] = ` +
+
+ + +

+ + FT investigation finds groping and sexual harassment at secretive black-tie dinner + +

+
+
+
+ +
+
+ +
+`; + +exports[`x-teaser / snapshots renders a TopStoryLandscape teaser with video data 1`] = ` +
+
+
+
+ + Global Trade + + + 02:51min + +
+
+ +

+ + The FT's Rob Armstrong looks at why Donald Trump is pushing trade tariffs + +

+
+
+
+ +
+
+
+`; diff --git a/components/x-teaser/__tests__/snapshots.test.js b/components/x-teaser/__tests__/snapshots.test.js new file mode 100644 index 000000000..ca85dd9ba --- /dev/null +++ b/components/x-teaser/__tests__/snapshots.test.js @@ -0,0 +1,27 @@ +const { h } = require('@financial-times/x-engine'); +const renderer = require('react-test-renderer'); +const { Teaser, presets } = require('../'); + +const storyData = { + article: require('../__fixtures__/article.json'), + opinion: require('../__fixtures__/opinion.json'), + contentPackage: require('../__fixtures__/content-package.json'), + packageItem: require('../__fixtures__/package-item.json'), + podcast: require('../__fixtures__/podcast.json'), + video: require('../__fixtures__/video.json'), + promoted: require('../__fixtures__/promoted.json'), + topStory: require('../__fixtures__/top-story.json') +}; + +describe('x-teaser / snapshots', () => { + Object.entries(storyData).forEach(([type, data]) => { + Object.entries(presets).forEach(([name, settings]) => { + it(`renders a ${name} teaser with ${type} data`, () => { + const props = { ...data, ...settings }; + const tree = renderer.create(h(Teaser, props)).toJSON(); + + expect(tree).toMatchSnapshot(); + }); + }); + }); +}); From 6ed75541b9f7b6be9e890c860bfc8d586ddd51f9 Mon Sep 17 00:00:00 2001 From: Matt Hinchliffe Date: Mon, 3 Jun 2019 09:17:34 +0100 Subject: [PATCH 3/3] Rename teaser component storybook configuration to skip automatic snapshot creation --- .storybook/register-components.js | 2 +- .../__snapshots__/snapshots.test.js.snap | 5841 ----------------- .../{stories => storybook}/article.js | 0 .../{stories => storybook}/content-package.js | 0 .../x-teaser/{stories => storybook}/index.js | 0 .../x-teaser/{stories => storybook}/knobs.js | 0 .../{stories => storybook}/opinion.js | 0 .../{stories => storybook}/package-item.js | 0 .../{stories => storybook}/podcast.js | 0 .../{stories => storybook}/promoted.js | 0 .../{stories => storybook}/top-story.js | 0 .../x-teaser/{stories => storybook}/video.js | 0 12 files changed, 1 insertion(+), 5842 deletions(-) rename components/x-teaser/{stories => storybook}/article.js (100%) rename components/x-teaser/{stories => storybook}/content-package.js (100%) rename components/x-teaser/{stories => storybook}/index.js (100%) rename components/x-teaser/{stories => storybook}/knobs.js (100%) rename components/x-teaser/{stories => storybook}/opinion.js (100%) rename components/x-teaser/{stories => storybook}/package-item.js (100%) rename components/x-teaser/{stories => storybook}/podcast.js (100%) rename components/x-teaser/{stories => storybook}/promoted.js (100%) rename components/x-teaser/{stories => storybook}/top-story.js (100%) rename components/x-teaser/{stories => storybook}/video.js (100%) diff --git a/.storybook/register-components.js b/.storybook/register-components.js index 6fad0c357..7ea941718 100644 --- a/.storybook/register-components.js +++ b/.storybook/register-components.js @@ -1,5 +1,5 @@ const components = [ - require('../components/x-teaser/stories'), + require('../components/x-teaser/storybook'), require('../components/x-increment/stories'), require('../components/x-styling-demo/stories'), require('../components/x-gift-article/stories'), diff --git a/__tests__/__snapshots__/snapshots.test.js.snap b/__tests__/__snapshots__/snapshots.test.js.snap index b549f95da..116317544 100644 --- a/__tests__/__snapshots__/snapshots.test.js.snap +++ b/__tests__/__snapshots__/snapshots.test.js.snap @@ -589,5844 +589,3 @@ exports[`@financial-times/x-styling-demo renders a default Styling x-styling-dem Click me! `; - -exports[`@financial-times/x-teaser renders a Hero Article x-teaser 1`] = ` -
- -
-
- -
-
-
-`; - -exports[`@financial-times/x-teaser renders a Hero Content Package x-teaser 1`] = ` -
- -
-
- -
-
-
-`; - -exports[`@financial-times/x-teaser renders a Hero Opinion Piece x-teaser 1`] = ` -
- -
-`; - -exports[`@financial-times/x-teaser renders a Hero Package item x-teaser 1`] = ` -
- -
-
- -
-
-
-`; - -exports[`@financial-times/x-teaser renders a Hero Paid Post x-teaser 1`] = ` -
- -
-
- -
-
-
-`; - -exports[`@financial-times/x-teaser renders a Hero Podcast x-teaser 1`] = ` -
- -
-
- -
-
-
-`; - -exports[`@financial-times/x-teaser renders a Hero Top Story x-teaser 1`] = ` -
- -
-
- -
-
- -
-`; - -exports[`@financial-times/x-teaser renders a Hero Video x-teaser 1`] = ` -
-
-
-
- - Global Trade - - - 02:51min - -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-`; - -exports[`@financial-times/x-teaser renders a HeroNarrow Article x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroNarrow Content Package x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroNarrow Opinion Piece x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroNarrow Package item x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroNarrow Paid Post x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroNarrow Podcast x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroNarrow Top Story x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroNarrow Video x-teaser 1`] = ` -
- -`; - -exports[`@financial-times/x-teaser renders a HeroOverlay Article x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroOverlay Content Package x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroOverlay Opinion Piece x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroOverlay Package item x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroOverlay Paid Post x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroOverlay Podcast x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroOverlay Top Story x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroOverlay Video x-teaser 1`] = ` -
-
-
-
- - Global Trade - - - 02:51min - -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-`; - -exports[`@financial-times/x-teaser renders a HeroVideo Article x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroVideo Content Package x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroVideo Opinion Piece x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroVideo Package item x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroVideo Paid Post x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroVideo Podcast x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroVideo Top Story x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a HeroVideo Video x-teaser 1`] = ` -
-
-
-
- - Global Trade - - - 02:51min - -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-`; - -exports[`@financial-times/x-teaser renders a Large Article x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Large Content Package x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Large Opinion Piece x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Large Package item x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Large Paid Post x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Large Podcast x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Large Top Story x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Large Video x-teaser 1`] = ` -
- -`; - -exports[`@financial-times/x-teaser renders a Small Article x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Small Content Package x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Small Opinion Piece x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Small Package item x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Small Paid Post x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Small Podcast x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Small Top Story x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Small Video x-teaser 1`] = ` -
-
-
-
- - Global Trade - - - 02:51min - -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-`; - -exports[`@financial-times/x-teaser renders a SmallHeavy Article x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a SmallHeavy Content Package x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a SmallHeavy Opinion Piece x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a SmallHeavy Package item x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a SmallHeavy Paid Post x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a SmallHeavy Podcast x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a SmallHeavy Top Story x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a SmallHeavy Video x-teaser 1`] = ` -
- -`; - -exports[`@financial-times/x-teaser renders a TopStory Article x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStory Content Package x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStory Opinion Piece x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStory Package item x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStory Paid Post x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStory Podcast x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStory Top Story x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStory Video x-teaser 1`] = ` -
- -`; - -exports[`@financial-times/x-teaser renders a TopStoryLandscape Article x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStoryLandscape Content Package x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStoryLandscape Opinion Piece x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStoryLandscape Package item x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStoryLandscape Paid Post x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStoryLandscape Podcast x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStoryLandscape Top Story x-teaser 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a TopStoryLandscape Video x-teaser 1`] = ` -
- -`; diff --git a/components/x-teaser/stories/article.js b/components/x-teaser/storybook/article.js similarity index 100% rename from components/x-teaser/stories/article.js rename to components/x-teaser/storybook/article.js diff --git a/components/x-teaser/stories/content-package.js b/components/x-teaser/storybook/content-package.js similarity index 100% rename from components/x-teaser/stories/content-package.js rename to components/x-teaser/storybook/content-package.js diff --git a/components/x-teaser/stories/index.js b/components/x-teaser/storybook/index.js similarity index 100% rename from components/x-teaser/stories/index.js rename to components/x-teaser/storybook/index.js diff --git a/components/x-teaser/stories/knobs.js b/components/x-teaser/storybook/knobs.js similarity index 100% rename from components/x-teaser/stories/knobs.js rename to components/x-teaser/storybook/knobs.js diff --git a/components/x-teaser/stories/opinion.js b/components/x-teaser/storybook/opinion.js similarity index 100% rename from components/x-teaser/stories/opinion.js rename to components/x-teaser/storybook/opinion.js diff --git a/components/x-teaser/stories/package-item.js b/components/x-teaser/storybook/package-item.js similarity index 100% rename from components/x-teaser/stories/package-item.js rename to components/x-teaser/storybook/package-item.js diff --git a/components/x-teaser/stories/podcast.js b/components/x-teaser/storybook/podcast.js similarity index 100% rename from components/x-teaser/stories/podcast.js rename to components/x-teaser/storybook/podcast.js diff --git a/components/x-teaser/stories/promoted.js b/components/x-teaser/storybook/promoted.js similarity index 100% rename from components/x-teaser/stories/promoted.js rename to components/x-teaser/storybook/promoted.js diff --git a/components/x-teaser/stories/top-story.js b/components/x-teaser/storybook/top-story.js similarity index 100% rename from components/x-teaser/stories/top-story.js rename to components/x-teaser/storybook/top-story.js diff --git a/components/x-teaser/stories/video.js b/components/x-teaser/storybook/video.js similarity index 100% rename from components/x-teaser/stories/video.js rename to components/x-teaser/storybook/video.js