@times-components/ts-components 1.64.2 → 1.64.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/components/article-header/ArticleHeader.stories.js +11 -10
  3. package/dist/components/carousel/GalleryCarousel.stories.js +28 -12
  4. package/dist/components/in-article-big-numbers/BigNumbers.stories.js +25 -9
  5. package/dist/components/in-article-info-card/InfoCard.stories.js +35 -11
  6. package/dist/components/in-article-info-card-bulletpoints/InfoCardBulletPoints.stories.js +5 -6
  7. package/dist/components/in-article-puff/InArticlePuff.stories.js +25 -9
  8. package/dist/components/in-article-related-articles/InArticleRelatedArticles.stories.js +11 -12
  9. package/dist/components/in-article-timelines/Timelines.stories.js +15 -7
  10. package/dist/components/olympics/medal-table/OlympicsMedalTable.stories.js +4 -5
  11. package/dist/components/olympics/schedule/OlympicsSchedule.stories.js +4 -5
  12. package/dist/components/recommended-articles/RecommendedArticles.stories.js +36 -9
  13. package/dist/components/save-star/SaveStar.stories.js +4 -5
  14. package/package.json +16 -16
  15. package/src/components/article-header/ArticleHeader.stories.tsx +17 -16
  16. package/src/components/carousel/GalleryCarousel.stories.tsx +44 -19
  17. package/src/components/in-article-big-numbers/BigNumbers.stories.tsx +38 -13
  18. package/src/components/in-article-info-card/InfoCard.stories.tsx +54 -16
  19. package/src/components/in-article-info-card-bulletpoints/InfoCardBulletPoints.stories.tsx +10 -10
  20. package/src/components/in-article-puff/InArticlePuff.stories.tsx +42 -17
  21. package/src/components/in-article-related-articles/InArticleRelatedArticles.stories.tsx +26 -26
  22. package/src/components/in-article-timelines/Timelines.stories.tsx +22 -10
  23. package/src/components/olympics/medal-table/OlympicsMedalTable.stories.tsx +8 -11
  24. package/src/components/olympics/schedule/OlympicsSchedule.stories.tsx +8 -10
  25. package/src/components/recommended-articles/RecommendedArticles.stories.tsx +46 -15
  26. package/src/components/save-star/SaveStar.stories.tsx +16 -16
package/src/components/article-header/ArticleHeader.stories.tsx CHANGED
@@ -29,29 +29,30 @@ const getAttributes = () => {
29
29
  };
30
30
 
31
31
  storiesOf('Typescript Component/Article Header', module)
32
- .addDecorator((storyFn: () => React.ReactNode) => (
33
- <ArticleHarness>{storyFn()}</ArticleHarness>
34
- ))
35
32
  .add('Article Header with headline', () => {
36
33
  const props = getAttributes();
37
34
  return (
38
- <ArticleHeader
39
- updated={props.updated}
40
- // date={props.date}
41
- // time={props.time}
42
- breaking={props.breaking}
43
- headline={encodeURIComponent(props.headline)}
44
- />
35
+ <ArticleHarness>
36
+ <ArticleHeader
37
+ updated={props.updated}
38
+ // date={props.date}
39
+ // time={props.time}
40
+ breaking={props.breaking}
41
+ headline={encodeURIComponent(props.headline)}
42
+ />
43
+ </ArticleHarness>
45
44
  );
46
45
  })
47
46
  .add('Article Header without headline', () => {
48
47
  const props = getAttributes();
49
48
  return (
50
- <ArticleHeader
51
- updated={props.updated}
52
- // date={props.date}
53
- // time={props.time}
54
- breaking={props.breaking}
55
- />
49
+ <ArticleHarness>
50
+ <ArticleHeader
51
+ updated={props.updated}
52
+ // date={props.date}
53
+ // time={props.time}
54
+ breaking={props.breaking}
55
+ />
56
+ </ArticleHarness>
56
57
  );
57
58
  });
package/src/components/carousel/GalleryCarousel.stories.tsx CHANGED
@@ -10,7 +10,7 @@ import previewData from '../../fixtures/preview-data/gallery-carousel';
10
10
  import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
11
11
 
12
12
  storiesOf('Typescript Component/Gallery Carousel', module)
13
- .addDecorator((storyFn: () => React.ReactNode) => (
13
+ .add('Wide', () => (
14
14
  <TrackingContextProvider
15
15
  analyticsStream={analyticsStream}
16
16
  context={{
@@ -21,27 +21,52 @@ storiesOf('Typescript Component/Gallery Carousel', module)
21
21
  }
22
22
  }}
23
23
  >
24
- <ArticleHarness>{storyFn()}</ArticleHarness>
24
+ <ArticleHarness>
25
+ <FetchProvider previewData={previewData[43486]}>
26
+ <div style={{ margin: '20px 0px' }}>
27
+ <GalleryCarousel sectionColour="#13354E" />
28
+ </div>
29
+ </FetchProvider>
30
+ </ArticleHarness>
25
31
  </TrackingContextProvider>
26
32
  ))
27
- .add('Wide', () => (
28
- <FetchProvider previewData={previewData[43486]}>
29
- <div style={{ margin: '20px 0px' }}>
30
- <GalleryCarousel sectionColour="#13354E" />
31
- </div>
32
- </FetchProvider>
33
- ))
34
33
  .add('Regular', () => (
35
- <FetchProvider previewData={previewData[43484]}>
36
- <div style={{ margin: '20px 0px' }}>
37
- <GalleryCarousel sectionColour="#13354E" />
38
- </div>
39
- </FetchProvider>
34
+ <TrackingContextProvider
35
+ analyticsStream={analyticsStream}
36
+ context={{
37
+ component: 'ArticleSkeleton',
38
+ attrs: {
39
+ article_name: 'Headline',
40
+ section_details: 'Section'
41
+ }
42
+ }}
43
+ >
44
+ <ArticleHarness>
45
+ <FetchProvider previewData={previewData[43484]}>
46
+ <div style={{ margin: '20px 0px' }}>
47
+ <GalleryCarousel sectionColour="#13354E" />
48
+ </div>
49
+ </FetchProvider>
50
+ </ArticleHarness>
51
+ </TrackingContextProvider>
40
52
  ))
41
53
  .add('Small', () => (
42
- <FetchProvider previewData={previewData[43434]}>
43
- <div style={{ margin: '20px 0px' }}>
44
- <GalleryCarousel sectionColour="#13354E" />
45
- </div>
46
- </FetchProvider>
54
+ <TrackingContextProvider
55
+ analyticsStream={analyticsStream}
56
+ context={{
57
+ component: 'ArticleSkeleton',
58
+ attrs: {
59
+ article_name: 'Headline',
60
+ section_details: 'Section'
61
+ }
62
+ }}
63
+ >
64
+ <ArticleHarness>
65
+ <FetchProvider previewData={previewData[43434]}>
66
+ <div style={{ margin: '20px 0px' }}>
67
+ <GalleryCarousel sectionColour="#13354E" />
68
+ </div>
69
+ </FetchProvider>
70
+ </ArticleHarness>
71
+ </TrackingContextProvider>
47
72
  ));
package/src/components/in-article-big-numbers/BigNumbers.stories.tsx CHANGED
@@ -7,7 +7,7 @@ import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextP
7
7
  import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
8
8
 
9
9
  storiesOf('Typescript Component/In Article/Big Numbers', module)
10
- .addDecorator((storyFn: () => React.ReactNode) => (
10
+ .add('Standard without a headline', () => (
11
11
  <TrackingContextProvider
12
12
  context={{
13
13
  component: 'ArticleSkeleton',
@@ -18,21 +18,46 @@ storiesOf('Typescript Component/In Article/Big Numbers', module)
18
18
  }}
19
19
  analyticsStream={analyticsStream}
20
20
  >
21
- <ArticleHarness>{storyFn()}</ArticleHarness>
21
+ <ArticleHarness>
22
+ <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44335">
23
+ <BigNumbers sectionColour="#636C17" />
24
+ </FetchProvider>
25
+ </ArticleHarness>
22
26
  </TrackingContextProvider>
23
27
  ))
24
- .add('Standard without a headline', () => (
25
- <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44335">
26
- <BigNumbers sectionColour="#636C17" />
27
- </FetchProvider>
28
- ))
29
28
  .add('Standard with One Card', () => (
30
- <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44336">
31
- <BigNumbers sectionColour="#636C17" />
32
- </FetchProvider>
29
+ <TrackingContextProvider
30
+ context={{
31
+ component: 'ArticleSkeleton',
32
+ attrs: {
33
+ article_name: 'articleHeadline',
34
+ section_details: 'section'
35
+ }
36
+ }}
37
+ analyticsStream={analyticsStream}
38
+ >
39
+ <ArticleHarness>
40
+ <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44336">
41
+ <BigNumbers sectionColour="#636C17" />
42
+ </FetchProvider>
43
+ </ArticleHarness>
44
+ </TrackingContextProvider>
33
45
  ))
34
46
  .add('Wide with a headline', () => (
35
- <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44334">
36
- <BigNumbers sectionColour="#636C17" />
37
- </FetchProvider>
47
+ <TrackingContextProvider
48
+ context={{
49
+ component: 'ArticleSkeleton',
50
+ attrs: {
51
+ article_name: 'articleHeadline',
52
+ section_details: 'section'
53
+ }
54
+ }}
55
+ analyticsStream={analyticsStream}
56
+ >
57
+ <ArticleHarness>
58
+ <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/44334">
59
+ <BigNumbers sectionColour="#636C17" />
60
+ </FetchProvider>
61
+ </ArticleHarness>
62
+ </TrackingContextProvider>
38
63
  ));
package/src/components/in-article-info-card/InfoCard.stories.tsx CHANGED
@@ -10,7 +10,7 @@ import previewData from '../../fixtures/preview-data/in-article-info-card';
10
10
  import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
11
11
 
12
12
  storiesOf('Typescript Component/In Article/Info Card', module)
13
- .addDecorator((storyFn: () => React.ReactNode) => (
13
+ .add('Standard with Copy & Subtitle', () => (
14
14
  <TrackingContextProvider
15
15
  analyticsStream={analyticsStream}
16
16
  context={{
@@ -21,26 +21,64 @@ storiesOf('Typescript Component/In Article/Info Card', module)
21
21
  }
22
22
  }}
23
23
  >
24
- <ArticleHarness>{storyFn()}</ArticleHarness>
24
+ <ArticleHarness>
25
+ <FetchProvider previewData={previewData[43606]}>
26
+ <InfoCard sectionColour="#636C17" />
27
+ </FetchProvider>
28
+ </ArticleHarness>
25
29
  </TrackingContextProvider>
26
30
  ))
27
- .add('Standard with Copy & Subtitle', () => (
28
- <FetchProvider previewData={previewData[43606]}>
29
- <InfoCard sectionColour="#636C17" />
30
- </FetchProvider>
31
- ))
32
31
  .add('Standard with Image', () => (
33
- <FetchProvider previewData={previewData[43961]}>
34
- <InfoCard sectionColour="#636C17" />
35
- </FetchProvider>
32
+ <TrackingContextProvider
33
+ analyticsStream={analyticsStream}
34
+ context={{
35
+ component: 'ArticleSkeleton',
36
+ attrs: {
37
+ article_name: 'Headline',
38
+ section_details: 'Section'
39
+ }
40
+ }}
41
+ >
42
+ <ArticleHarness>
43
+ <FetchProvider previewData={previewData[43961]}>
44
+ <InfoCard sectionColour="#636C17" />
45
+ </FetchProvider>
46
+ </ArticleHarness>
47
+ </TrackingContextProvider>
36
48
  ))
37
49
  .add('Wide with Copy', () => (
38
- <FetchProvider previewData={previewData[43603]}>
39
- <InfoCard sectionColour="#636C17" />
40
- </FetchProvider>
50
+ <TrackingContextProvider
51
+ analyticsStream={analyticsStream}
52
+ context={{
53
+ component: 'ArticleSkeleton',
54
+ attrs: {
55
+ article_name: 'Headline',
56
+ section_details: 'Section'
57
+ }
58
+ }}
59
+ >
60
+ <ArticleHarness>
61
+ <FetchProvider previewData={previewData[43603]}>
62
+ <InfoCard sectionColour="#636C17" />
63
+ </FetchProvider>
64
+ </ArticleHarness>
65
+ </TrackingContextProvider>
41
66
  ))
42
67
  .add('Wide with Image', () => (
43
- <FetchProvider previewData={previewData[43614]}>
44
- <InfoCard sectionColour="#636C17" />
45
- </FetchProvider>
68
+ <TrackingContextProvider
69
+ analyticsStream={analyticsStream}
70
+ context={{
71
+ component: 'ArticleSkeleton',
72
+ attrs: {
73
+ article_name: 'Headline',
74
+ section_details: 'Section'
75
+ }
76
+ }}
77
+ >
78
+ <ArticleHarness>
79
+ <FetchProvider previewData={previewData[43614]}>
80
+ <InfoCard sectionColour="#636C17" />
81
+ </FetchProvider>
82
+ </ArticleHarness>
83
+ </TrackingContextProvider>
46
84
  ));
package/src/components/in-article-info-card-bulletpoints/InfoCardBulletPoints.stories.tsx CHANGED
@@ -6,8 +6,9 @@ import { InfoCardBulletPoints } from './InfoCardBulletPoints';
6
6
  import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
7
7
  import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
8
8
 
9
- storiesOf('Typescript Component/In Article/Info Card', module)
10
- .addDecorator((storyFn: () => React.ReactNode) => (
9
+ storiesOf('Typescript Component/In Article/Info Card', module).add(
10
+ 'Bullet Points',
11
+ () => (
11
12
  <TrackingContextProvider
12
13
  context={{
13
14
  component: 'ArticleSkeleton',
@@ -18,12 +19,11 @@ storiesOf('Typescript Component/In Article/Info Card', module)
18
19
  }}
19
20
  analyticsStream={analyticsStream}
20
21
  >
21
- <ArticleHarness>{storyFn()}</ArticleHarness>
22
+ <ArticleHarness>
23
+ <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/43978">
24
+ <InfoCardBulletPoints sectionColour="#636C17" />
25
+ </FetchProvider>
26
+ </ArticleHarness>
22
27
  </TrackingContextProvider>
23
- ))
24
-
25
- .add('Bullet Points', () => (
26
- <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/43978">
27
- <InfoCardBulletPoints sectionColour="#636C17" />
28
- </FetchProvider>
29
- ));
28
+ )
29
+ );
package/src/components/in-article-puff/InArticlePuff.stories.tsx CHANGED
@@ -10,7 +10,7 @@ import previewData from '../../fixtures/preview-data/in-article-puff';
10
10
  import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
11
11
 
12
12
  storiesOf('Typescript Component/In Article/In Article Puff', module)
13
- .addDecorator((storyFn: () => React.ReactNode) => (
13
+ .add('Image', () => (
14
14
  <TrackingContextProvider
15
15
  context={{
16
16
  component: 'ArticleSkeleton',
@@ -21,25 +21,50 @@ storiesOf('Typescript Component/In Article/In Article Puff', module)
21
21
  }}
22
22
  analyticsStream={analyticsStream}
23
23
  >
24
- <ArticleHarness>{storyFn()}</ArticleHarness>
24
+ <ArticleHarness>
25
+ <FetchProvider previewData={previewData[41548]}>
26
+ <InArticlePuff sectionColour="#13354e" />
27
+ </FetchProvider>
28
+ </ArticleHarness>
25
29
  </TrackingContextProvider>
26
30
  ))
27
- .add('Image', () => (
28
- <FetchProvider previewData={previewData[41548]}>
29
- <InArticlePuff sectionColour="#13354e" />
30
- </FetchProvider>
31
- ))
32
31
  .add('Image 3:2', () => (
33
- <FetchProvider previewData={previewData[41548]}>
34
- <InArticlePuff
35
- sectionColour="#13354e"
36
- forceImageAspectRatio="3:2"
37
- isLiveOrBreaking="breaking"
38
- />
39
- </FetchProvider>
32
+ <TrackingContextProvider
33
+ context={{
34
+ component: 'ArticleSkeleton',
35
+ attrs: {
36
+ article_name: 'articleHeadline',
37
+ section_details: 'section'
38
+ }
39
+ }}
40
+ analyticsStream={analyticsStream}
41
+ >
42
+ <ArticleHarness>
43
+ <FetchProvider previewData={previewData[41548]}>
44
+ <InArticlePuff
45
+ sectionColour="#13354e"
46
+ forceImageAspectRatio="3:2"
47
+ isLiveOrBreaking="breaking"
48
+ />
49
+ </FetchProvider>
50
+ </ArticleHarness>
51
+ </TrackingContextProvider>
40
52
  ))
41
53
  .add('No Image', () => (
42
- <FetchProvider previewData={previewData[41547]}>
43
- <InArticlePuff sectionColour="#184e13" isLiveOrBreaking="live" />
44
- </FetchProvider>
54
+ <TrackingContextProvider
55
+ context={{
56
+ component: 'ArticleSkeleton',
57
+ attrs: {
58
+ article_name: 'articleHeadline',
59
+ section_details: 'section'
60
+ }
61
+ }}
62
+ analyticsStream={analyticsStream}
63
+ >
64
+ <ArticleHarness>
65
+ <FetchProvider previewData={previewData[41547]}>
66
+ <InArticlePuff sectionColour="#184e13" isLiveOrBreaking="live" />
67
+ </FetchProvider>
68
+ </ArticleHarness>
69
+ </TrackingContextProvider>
45
70
  ));
package/src/components/in-article-related-articles/InArticleRelatedArticles.stories.tsx CHANGED
@@ -41,23 +41,9 @@ const article3 = {
41
41
  'https://www.thetimes.co.uk/imageserver/image/methode%2Ftimes%2Fprod%2Fweb%2Fbin%2Ff1a0847a-c3ea-11eb-a26e-4c086490cfe1.jpg?crop=4418%2C2945%2C0%2C0&resize=685'
42
42
  };
43
43
 
44
- storiesOf('Typescript Component/In Article/Related Articles', module)
45
- .addDecorator((storyFn: () => React.ReactNode) => (
46
- <TrackingContextProvider
47
- context={{
48
- component: 'ArticleSkeleton',
49
- attrs: {
50
- article_name: 'articleHeadline',
51
- section_details: 'section'
52
- }
53
- }}
54
- analyticsStream={analyticsStream}
55
- >
56
- <ArticleHarness>{storyFn()}</ArticleHarness>
57
- </TrackingContextProvider>
58
- ))
59
-
60
- .add('Related Articles', () => {
44
+ storiesOf('Typescript Component/In Article/Related Articles', module).add(
45
+ 'Related Articles',
46
+ () => {
61
47
  const numberOfArticles = select(
62
48
  'Number of Articles',
63
49
  { Three: 3, Two: 2, One: 1 },
@@ -66,13 +52,27 @@ storiesOf('Typescript Component/In Article/Related Articles', module)
66
52
  // @ts-ignore
67
53
  const sectionColor = select('Section', colours.section, '#636C17');
68
54
  return (
69
- <InArticleRelatedArticles
70
- sectionColour={sectionColor}
71
- heading="Related Articles"
72
- relatedArticles={[article1, article2, article3].filter(
73
- ({}, index) => index < numberOfArticles
74
- )}
75
- showImages={boolean('Show Images', true)}
76
- />
55
+ <TrackingContextProvider
56
+ context={{
57
+ component: 'ArticleSkeleton',
58
+ attrs: {
59
+ article_name: 'articleHeadline',
60
+ section_details: 'section'
61
+ }
62
+ }}
63
+ analyticsStream={analyticsStream}
64
+ >
65
+ <ArticleHarness>
66
+ <InArticleRelatedArticles
67
+ sectionColour={sectionColor}
68
+ heading="Related Articles"
69
+ relatedArticles={[article1, article2, article3].filter(
70
+ ({}, index) => index < numberOfArticles
71
+ )}
72
+ showImages={boolean('Show Images', true)}
73
+ />
74
+ </ArticleHarness>
75
+ </TrackingContextProvider>
77
76
  );
78
- });
77
+ }
78
+ );
package/src/components/in-article-timelines/Timelines.stories.tsx CHANGED
@@ -7,7 +7,7 @@ import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextP
7
7
  import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
8
8
 
9
9
  storiesOf('Typescript Component/In Article/Timelines', module)
10
- .addDecorator((storyFn: () => React.ReactNode) => (
10
+ .add('Timelines with Bullet Point', () => (
11
11
  <TrackingContextProvider
12
12
  context={{
13
13
  component: 'ArticleSkeleton',
@@ -18,16 +18,28 @@ storiesOf('Typescript Component/In Article/Timelines', module)
18
18
  }}
19
19
  analyticsStream={analyticsStream}
20
20
  >
21
- <ArticleHarness>{storyFn()}</ArticleHarness>
21
+ <ArticleHarness>
22
+ <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45060">
23
+ <Timelines sectionColour="#008347" />
24
+ </FetchProvider>
25
+ </ArticleHarness>
22
26
  </TrackingContextProvider>
23
27
  ))
24
- .add('Timelines with Bullet Point', () => (
25
- <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45060">
26
- <Timelines sectionColour="#008347" />
27
- </FetchProvider>
28
- ))
29
28
  .add('Timelines with Circular Image', () => (
30
- <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45061">
31
- <Timelines sectionColour="#008347" />
32
- </FetchProvider>
29
+ <TrackingContextProvider
30
+ context={{
31
+ component: 'ArticleSkeleton',
32
+ attrs: {
33
+ article_name: 'articleHeadline',
34
+ section_details: 'section'
35
+ }
36
+ }}
37
+ analyticsStream={analyticsStream}
38
+ >
39
+ <ArticleHarness>
40
+ <FetchProvider url="https://gobble.timesdev.tools/deck/api/deck-post-action/45061">
41
+ <Timelines sectionColour="#008347" />
42
+ </FetchProvider>
43
+ </ArticleHarness>
44
+ </TrackingContextProvider>
33
45
  ));
package/src/components/olympics/medal-table/OlympicsMedalTable.stories.tsx CHANGED
@@ -6,20 +6,17 @@ import { ArticleHarness } from '../../../fixtures/article-harness/ArticleHarness
6
6
  import { boolean, text } from '@storybook/addon-knobs';
7
7
  import { config } from '../OlympicsKeys';
8
8
 
9
- storiesOf('Typescript Component/Olympics', module)
10
- .addDecorator((storyFn: () => React.ReactNode) => (
11
- <ArticleHarness>{storyFn()}</ArticleHarness>
12
- ))
9
+ storiesOf('Typescript Component/Olympics', module).add('Medal Table', () => {
10
+ const inArticle = boolean('Is In Article', true);
11
+ const highlighted = text('Highlighted Country', 'GBR');
13
12
 
14
- .add('Medal Table', () => {
15
- const inArticle = boolean('Is In Article', true);
16
- const highlighted = text('Highlighted Country', 'GBR');
17
-
18
- return (
13
+ return (
14
+ <ArticleHarness>
19
15
  <OlympicsMedalTable
20
16
  keys={config.prod}
21
17
  highlighted={highlighted}
22
18
  inArticle={inArticle}
23
19
  />
24
- );
25
- });
20
+ </ArticleHarness>
21
+ );
22
+ });
package/src/components/olympics/schedule/OlympicsSchedule.stories.tsx CHANGED
@@ -6,13 +6,11 @@ import { ArticleHarness } from '../../../fixtures/article-harness/ArticleHarness
6
6
  import { boolean } from '@storybook/addon-knobs';
7
7
  import { config } from '../OlympicsKeys';
8
8
 
9
- storiesOf('Typescript Component/Olympics', module)
10
- .addDecorator((storyFn: () => React.ReactNode) => (
11
- <ArticleHarness>{storyFn()}</ArticleHarness>
12
- ))
13
-
14
- .add('Schedule', () => {
15
- const inArticle = boolean('Is In Article', true);
16
-
17
- return <OlympicsSchedule keys={config.prod} inArticle={inArticle} />;
18
- });
9
+ storiesOf('Typescript Component/Olympics', module).add('Schedule', () => {
10
+ const inArticle = boolean('Is In Article', true);
11
+ return (
12
+ <ArticleHarness>
13
+ <OlympicsSchedule keys={config.prod} inArticle={inArticle} />
14
+ </ArticleHarness>
15
+ );
16
+ });
package/src/components/recommended-articles/RecommendedArticles.stories.tsx CHANGED
@@ -1,16 +1,14 @@
1
1
  import React from 'react';
2
2
  import { storiesOf } from '@storybook/react';
3
-
4
3
  import { getArticles } from './helpers';
5
4
  import { FetchProvider } from '../../helpers/fetch/FetchProvider';
6
5
  import { TrackingContextProvider } from '../../helpers/tracking/TrackingContextProvider';
7
6
  import previewData from '../../fixtures/preview-data/recommended-articles';
8
7
  import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
9
-
10
8
  import { RecommendedArticles } from './RecommendedArticles';
11
9
 
12
10
  storiesOf('Typescript Component/Recommended Articles', module)
13
- .addDecorator((storyFn: () => React.ReactNode) => (
11
+ .add('Recommended Articles - 1 Article', () => (
14
12
  <TrackingContextProvider
15
13
  context={{
16
14
  component: 'ArticleSkeleton',
@@ -28,21 +26,54 @@ storiesOf('Typescript Component/Recommended Articles', module)
28
26
  }}
29
27
  analyticsStream={analyticsStream}
30
28
  >
31
- <div>{storyFn()}</div>
29
+ <FetchProvider previewData={getArticles(previewData, 1)}>
30
+ <RecommendedArticles heading="Today's News" />
31
+ </FetchProvider>
32
32
  </TrackingContextProvider>
33
33
  ))
34
- .add('Recommended Articles - 1 Article', () => (
35
- <FetchProvider previewData={getArticles(previewData, 1)}>
36
- <RecommendedArticles heading="Today's News" />
37
- </FetchProvider>
38
- ))
39
34
  .add('Recommended Articles - 2 Article', () => (
40
- <FetchProvider previewData={getArticles(previewData, 2)}>
41
- <RecommendedArticles heading="Today's Business" />
42
- </FetchProvider>
35
+ <TrackingContextProvider
36
+ context={{
37
+ component: 'ArticleSkeleton',
38
+ object: 'RecommendedArticles',
39
+ attrs: {
40
+ event_navigation_action: 'navigation',
41
+ event_navigation_name: 'widget:relevant article',
42
+ event_navigation_browsing_method: 'click',
43
+ section_details: 'section : <section>',
44
+ article_name: '<headline>',
45
+ widget_headline: '<headline>',
46
+ widget_section: '<section>',
47
+ widget_type: "today's section"
48
+ }
49
+ }}
50
+ analyticsStream={analyticsStream}
51
+ >
52
+ <FetchProvider previewData={getArticles(previewData, 2)}>
53
+ <RecommendedArticles heading="Today's Business" />
54
+ </FetchProvider>
55
+ </TrackingContextProvider>
43
56
  ))
44
57
  .add('Recommended Articles - 3 Article', () => (
45
- <FetchProvider previewData={previewData}>
46
- <RecommendedArticles heading="Today's Sport" />
47
- </FetchProvider>
58
+ <TrackingContextProvider
59
+ context={{
60
+ component: 'ArticleSkeleton',
61
+ object: 'RecommendedArticles',
62
+ attrs: {
63
+ event_navigation_action: 'navigation',
64
+ event_navigation_name: 'widget:relevant article',
65
+ event_navigation_browsing_method: 'click',
66
+ section_details: 'section : <section>',
67
+ article_name: '<headline>',
68
+ widget_headline: '<headline>',
69
+ widget_section: '<section>',
70
+ widget_type: "today's section"
71
+ }
72
+ }}
73
+ analyticsStream={analyticsStream}
74
+ >
75
+ <FetchProvider previewData={previewData}>
76
+ <RecommendedArticles heading="Today's Sport" />
77
+ </FetchProvider>
78
+ </TrackingContextProvider>
48
79
  ));