@newskit-render/core 2.31.0 → 2.32.0-alpha.0

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 (19) hide show
  1. package/.eslintignore +1 -0
  2. package/CHANGELOG.md +8 -0
  3. package/Dockerfile +1 -0
  4. package/__tests__/pages/[articleSlug].test.tsx +2 -1
  5. package/__tests__/pages/__snapshots__/home.test.tsx.snap +135 -60
  6. package/components/ErrorPage/ErrorPage.tsx +2 -5
  7. package/components/article/__tests__/__snapshots__/index.test.tsx.snap +63 -69
  8. package/components/article/__tests__/index.test.tsx +7 -110
  9. package/components/article/__tests__/mocks.ts +105 -0
  10. package/components/article/index.tsx +196 -200
  11. package/components/footer/index.tsx +2 -6
  12. package/components/section/layouts/Block.tsx +1 -5
  13. package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap +33 -12
  14. package/components/teaser/index.test.tsx +8 -6
  15. package/components/teaser/index.tsx +15 -7
  16. package/jest.config.js +3 -4
  17. package/next.config.js +84 -58
  18. package/package.json +5 -5
  19. package/public/assets/plchldr150x100.png +0 -0
package/components/article/__tests__/index.test.tsx CHANGED
@@ -1,114 +1,10 @@
1
1
  import React from 'react'
2
- import {
3
- ArticleRecommendationsProviderContext,
4
- DpaTemplate,
5
- } from '@newskit-render/standalone-components'
2
+ import { ArticleRecommendationsProviderContext } from '@newskit-render/standalone-components'
6
3
  import { within } from '@testing-library/react'
7
- import Article, { ArticleProps } from '..'
8
- import { Slug, URL, Image, Video } from '../../../helpers/global-types'
4
+ import Article from '..'
5
+ import { Video } from '../../../helpers/global-types'
9
6
  import { renderWithTheme } from '../../../helpers/test-utils'
10
-
11
- const articleData: ArticleProps = {
12
- id: 'demo-1',
13
- url: 'https://mock-site-url/some-location' as URL,
14
- label: 'Mock label',
15
- slug: 'some-location' as Slug,
16
- publisher: 'DEMO',
17
- headline:
18
- 'Mock Article: Lorem ipsum dolor sit amet consectetur adipiscing elit',
19
- kicker: 'Kicker title',
20
- authors: undefined,
21
- flags: [],
22
- topics: [
23
- {
24
- name: 'Some topic one',
25
- slug: 'some-topic-one',
26
- link: undefined,
27
- },
28
- {
29
- name: 'Some topic one',
30
- slug: 'some-topic-one',
31
- link: undefined,
32
- },
33
- ],
34
- template: undefined,
35
- bylines: [
36
- {
37
- type: 'author',
38
- slug: 'mock-author',
39
- name: 'John Smith',
40
- },
41
- {
42
- value: 'Еditor, UK',
43
- type: 'inline',
44
- },
45
- ],
46
- publishedDateTime: '2019-02-14T00:00:00.000Z',
47
- updatedDateTime: '2019-02-14T00:37:17.000Z',
48
- summary: {
49
- children: [
50
- {
51
- text: 'paragraph one',
52
- },
53
- {
54
- text: 'paragraph two',
55
- },
56
- {
57
- url: 'http://this-is-a-url/',
58
- text: 'paragraph three',
59
- },
60
- {
61
- text: 'paragraph four',
62
- },
63
- ],
64
- },
65
- media: {
66
- crops: [{ url: 'img//url', alt: 'testIMG', aspectRatio: '1:1' }],
67
- },
68
- highlights: [
69
- {
70
- title: 'Test Box',
71
- href: 'https://plchldr.co/i/50x50',
72
- },
73
- {
74
- title: 'Prince Harry',
75
- href: 'https://plchldr.co/i/50x50',
76
- },
77
- ],
78
- relatedArticles: [
79
- {
80
- title: 'Prince Harry',
81
- text: 'news',
82
- href: 'https://plchldr.co/i/70x50',
83
- },
84
- {
85
- title: 'Meghan Markle',
86
- text: 'news',
87
- href: 'https://plchldr.co/i/70x50',
88
- },
89
- ],
90
- articleURL: 'http://article-url.com',
91
- twitterUsername: 'twitterUser',
92
- siteHost: 'hostname',
93
- gscId: '4320982',
94
- }
95
-
96
- const dpaTemplatesMock: DpaTemplate = [
97
- {
98
- templateId: 'list-1',
99
- columnCount: '1',
100
- size: 'small',
101
- recommendedArticles: articleData.relatedArticles,
102
- adlibraryMPU: [],
103
- },
104
- {
105
- templateId: 'list-2',
106
- columnCount: { xs: '1', sm: '2', lg: '4' },
107
- size: 'large',
108
- recommendedArticles: articleData.relatedArticles,
109
- adlibraryMPU: [],
110
- },
111
- ]
7
+ import { dpaTemplatesMock, articleData } from './mocks'
112
8
 
113
9
  const ArticleWrapper = (props) => (
114
10
  <ArticleRecommendationsProviderContext.Provider
@@ -216,8 +112,9 @@ describe('Article', () => {
216
112
  test('should render image', () => {
217
113
  const { getByAltText } = renderWithTheme(ArticleWrapper, articleData)
218
114
  const img = getByAltText('testIMG')
219
- const articleImage = articleData?.media as Image
220
- expect(img.getAttribute('src')).toBe(articleImage.crops[0].url)
115
+ expect(img.getAttribute('src')).toBe(
116
+ '/_next/image?url=%2Fimg%2Furl&w=3840&q=75'
117
+ )
221
118
  })
222
119
 
223
120
  test('should not render image', () => {
package/components/article/__tests__/mocks.ts ADDED
@@ -0,0 +1,105 @@
1
+ import { DpaTemplate } from '@newskit-render/standalone-components'
2
+ import { ArticleProps } from '..'
3
+ import { Slug, URL } from '../../../helpers/global-types'
4
+
5
+ export const articleData: ArticleProps = {
6
+ id: 'demo-1',
7
+ url: 'https://mock-site-url/some-location' as URL,
8
+ label: 'Mock label',
9
+ slug: 'some-location' as Slug,
10
+ publisher: 'DEMO',
11
+ headline:
12
+ 'Mock Article: Lorem ipsum dolor sit amet consectetur adipiscing elit',
13
+ kicker: 'Kicker title',
14
+ authors: undefined,
15
+ flags: [],
16
+ topics: [
17
+ {
18
+ name: 'Some topic one',
19
+ slug: 'some-topic-one',
20
+ link: undefined,
21
+ },
22
+ {
23
+ name: 'Some topic one',
24
+ slug: 'some-topic-one',
25
+ link: undefined,
26
+ },
27
+ ],
28
+ template: undefined,
29
+ bylines: [
30
+ {
31
+ type: 'author',
32
+ slug: 'mock-author',
33
+ name: 'John Smith',
34
+ },
35
+ {
36
+ value: 'Еditor, UK',
37
+ type: 'inline',
38
+ },
39
+ ],
40
+ publishedDateTime: '2019-02-14T00:00:00.000Z',
41
+ updatedDateTime: '2019-02-14T00:37:17.000Z',
42
+ summary: {
43
+ children: [
44
+ {
45
+ text: 'paragraph one',
46
+ },
47
+ {
48
+ text: 'paragraph two',
49
+ },
50
+ {
51
+ url: 'http://this-is-a-url/',
52
+ text: 'paragraph three',
53
+ },
54
+ {
55
+ text: 'paragraph four',
56
+ },
57
+ ],
58
+ },
59
+ media: {
60
+ crops: [{ url: '/img/url', alt: 'testIMG', aspectRatio: '1:1' }],
61
+ },
62
+ highlights: [
63
+ {
64
+ title: 'Test Box',
65
+ href: 'https://plchldr.co/i/50x50',
66
+ },
67
+ {
68
+ title: 'Prince Harry',
69
+ href: 'https://plchldr.co/i/50x50',
70
+ },
71
+ ],
72
+ relatedArticles: [
73
+ {
74
+ title: 'Prince Harry',
75
+ text: 'news',
76
+ href: 'https://plchldr.co/i/70x50',
77
+ },
78
+ {
79
+ title: 'Meghan Markle',
80
+ text: 'news',
81
+ href: 'https://plchldr.co/i/70x50',
82
+ },
83
+ ],
84
+ articleURL: 'http://article-url.com',
85
+ twitterUsername: 'twitterUser',
86
+ siteHost: 'hostname',
87
+ gscId: '4320982',
88
+ }
89
+
90
+ export const dpaTemplatesMock: DpaTemplate = [
91
+ {
92
+ templateId: 'list-1',
93
+ columnCount: '1',
94
+ size: 'small',
95
+ recommendedArticles: articleData.relatedArticles,
96
+ adlibraryMPU: [],
97
+ },
98
+ {
99
+ templateId: 'list-2',
100
+ columnCount: { xs: '1', sm: '2', lg: '4' },
101
+ size: 'large',
102
+ recommendedArticles: articleData.relatedArticles,
103
+ adlibraryMPU: [],
104
+ },
105
+ ]
package/components/article/index.tsx CHANGED
@@ -3,17 +3,19 @@ import React from 'react'
3
3
  import {
4
4
  Block,
5
5
  Cell,
6
- Image,
7
6
  VideoPlayer,
8
7
  Visible,
9
8
  Stack,
10
- styled,
11
9
  StackChild,
12
10
  Headline,
13
11
  TextBlock,
14
12
  Divider,
15
13
  } from 'newskit'
16
- import { SEOComponent } from '@newskit-render/shared-components'
14
+ import {
15
+ SEOComponent,
16
+ Image,
17
+ getAspectRatio,
18
+ } from '@newskit-render/shared-components'
17
19
  import { UserData } from '@newskit-render/my-account'
18
20
  import { Article } from '@newskit-render/standalone-components'
19
21
  import MetaBoxComponent from './MetaBox'
@@ -88,10 +90,6 @@ export type ArticleProps = {
88
90
  user?: UserData
89
91
  }
90
92
 
91
- const StyledFigure = styled.figure`
92
- margin: 0;
93
- `
94
-
95
93
  const ArticlePage: React.FC<ArticleProps> = ({
96
94
  publishedDateTime,
97
95
  updatedDateTime,
@@ -106,219 +104,217 @@ const ArticlePage: React.FC<ArticleProps> = ({
106
104
  siteHost,
107
105
  gscId,
108
106
  user,
109
- }) => (
110
- <>
111
- <SEOComponent
112
- title={headline as string}
113
- description={(summary ? summary.children[0].text : '') as string}
114
- url={articleURL}
115
- siteHost={siteHost}
116
- gscId={gscId}
117
- fbType="article"
118
- fbImageUrl={
119
- (media && 'crops' in media && media.crops[0]
120
- ? media.crops[0].url
121
- : '') as string
122
- }
123
- twUsername={twitterUsername}
124
- />
125
- <Layout
126
- withTopOffset
127
- withBottomOffset
128
- backgroundColor="interfaceBackground"
129
- user={user}
130
- >
131
- <Cell xs={12} md={10} lg={7} xsOffset={0} mdOffset={1}>
132
- <Block spaceStack="space050" data-testid="HeadLine">
133
- <Headline
134
- overrides={{
135
- typographyPreset: {
136
- xs: 'editorialHeadline050',
137
- md: 'editorialHeadline070',
138
- lg: 'editorialHeadline070',
139
- xl: 'editorialHeadline080',
140
- },
141
- heading: {
142
- stylePreset: 'inkContrast',
143
- },
144
- }}
145
- headingAs="h1"
146
- >
147
- {headline}
148
- </Headline>
149
- </Block>
150
- <Block spaceStack="space080" data-testid="Kicker">
151
- <Headline
152
- headingAs="h2"
153
- overrides={{
154
- typographyPreset: {
155
- xs: 'editorialSubheadline020',
156
- md: 'editorialSubheadline040',
157
- lg: 'editorialSubheadline040',
158
- xl: 'editorialSubheadline050',
159
- },
160
- heading: {
161
- stylePreset: 'inkBase',
162
- },
163
- }}
164
- >
165
- {kicker || 'Kicker title mock'}
166
- </Headline>
167
- </Block>
168
- <Block
169
- spaceStack={{
170
- xs: 'space040',
171
- md: 'space080',
172
- }}
173
- >
174
- <Visible xs sm>
175
- <Block
176
- spaceStack={{
177
- xs: 'space040',
107
+ }) => {
108
+ return (
109
+ <>
110
+ <SEOComponent
111
+ title={headline as string}
112
+ description={(summary ? summary.children[0].text : '') as string}
113
+ url={articleURL}
114
+ siteHost={siteHost}
115
+ gscId={gscId}
116
+ fbType="article"
117
+ fbImageUrl={
118
+ (media && 'crops' in media && media.crops[0]
119
+ ? media.crops[0].url
120
+ : '') as string
121
+ }
122
+ twUsername={twitterUsername}
123
+ />
124
+ <Layout
125
+ withTopOffset
126
+ withBottomOffset
127
+ backgroundColor="interfaceBackground"
128
+ user={user}
129
+ >
130
+ <Cell xs={12} md={10} lg={7} xsOffset={0} mdOffset={1}>
131
+ <Block spaceStack="space050" data-testid="HeadLine">
132
+ <Headline
133
+ overrides={{
134
+ typographyPreset: {
135
+ xs: 'editorialHeadline050',
136
+ md: 'editorialHeadline070',
137
+ lg: 'editorialHeadline070',
138
+ xl: 'editorialHeadline080',
139
+ },
140
+ heading: {
141
+ stylePreset: 'inkContrast',
142
+ },
178
143
  }}
144
+ headingAs="h1"
179
145
  >
180
- <MetaBoxComponent
181
- bylines={bylines as Byline[]}
182
- publishedDateTime={publishedDateTime as string}
183
- updatedDateTime={updatedDateTime}
184
- topics={topics}
185
- />
186
- </Block>
187
- <Block
188
- spaceStack={{
189
- xs: 'space040',
146
+ {headline}
147
+ </Headline>
148
+ </Block>
149
+ <Block spaceStack="space080" data-testid="Kicker">
150
+ <Headline
151
+ headingAs="h2"
152
+ overrides={{
153
+ typographyPreset: {
154
+ xs: 'editorialSubheadline020',
155
+ md: 'editorialSubheadline040',
156
+ lg: 'editorialSubheadline040',
157
+ xl: 'editorialSubheadline050',
158
+ },
159
+ heading: {
160
+ stylePreset: 'inkBase',
161
+ },
190
162
  }}
191
163
  >
192
- <Divider />
193
- </Block>
194
- <Block spaceStack="space050">
195
- <ShareButton />
196
- </Block>
197
- </Visible>
198
- <Visible md lg xl>
199
- <Stack
200
- flow="horizontal-bottom"
201
- stackDistribution="space-between"
202
- wrap="nowrap"
203
- data-testid="MetaBox"
204
- >
205
- <MetaBoxComponent
206
- bylines={bylines as Byline[]}
207
- publishedDateTime={publishedDateTime as string}
208
- updatedDateTime={updatedDateTime}
209
- topics={topics}
210
- />
211
- <StackChild alignSelf="flex-end">
212
- <ShareBarComponent />
213
- </StackChild>
214
- </Stack>
215
- </Visible>
216
- </Block>
217
- {media && 'crops' in media && (
164
+ {kicker || 'Kicker title mock'}
165
+ </Headline>
166
+ </Block>
218
167
  <Block
219
168
  spaceStack={{
220
- xs: 'space060',
221
- lg: 'space070',
169
+ xs: 'space040',
170
+ md: 'space080',
222
171
  }}
223
172
  >
224
- <StyledFigure>
173
+ <Visible xs sm>
174
+ <Block
175
+ spaceStack={{
176
+ xs: 'space040',
177
+ }}
178
+ >
179
+ <MetaBoxComponent
180
+ bylines={bylines as Byline[]}
181
+ publishedDateTime={publishedDateTime as string}
182
+ updatedDateTime={updatedDateTime}
183
+ topics={topics}
184
+ />
185
+ </Block>
186
+ <Block
187
+ spaceStack={{
188
+ xs: 'space040',
189
+ }}
190
+ >
191
+ <Divider />
192
+ </Block>
193
+ <Block spaceStack="space050">
194
+ <ShareButton />
195
+ </Block>
196
+ </Visible>
197
+ <Visible md lg xl>
198
+ <Stack
199
+ flow="horizontal-bottom"
200
+ stackDistribution="space-between"
201
+ wrap="nowrap"
202
+ data-testid="MetaBox"
203
+ >
204
+ <MetaBoxComponent
205
+ bylines={bylines as Byline[]}
206
+ publishedDateTime={publishedDateTime as string}
207
+ updatedDateTime={updatedDateTime}
208
+ topics={topics}
209
+ />
210
+ <StackChild alignSelf="flex-end">
211
+ <ShareBarComponent />
212
+ </StackChild>
213
+ </Stack>
214
+ </Visible>
215
+ </Block>
216
+ {media && 'crops' in media && (
217
+ <Block
218
+ spaceStack={{
219
+ xs: 'space060',
220
+ lg: 'space070',
221
+ }}
222
+ >
225
223
  <Image
226
- src={media.crops[0].url}
227
- alt={media.crops[0].alt}
228
- placeholderIcon={true}
229
- loading="lazy"
230
- loadingAspectRatio={
224
+ aspectRatio={getAspectRatio(
231
225
  ratioMap[media?.crops[0].aspectRatio]
232
226
  ? ratioMap[media?.crops[0].aspectRatio]
233
227
  : media?.crops[0].aspectRatio
234
- }
228
+ )}
229
+ src={media.crops[0].url}
230
+ alt={media.crops[0].alt}
235
231
  />
236
- </StyledFigure>
237
- </Block>
238
- )}
239
- {media && 'videoId' in media && (
232
+ </Block>
233
+ )}
234
+ {media && 'videoId' in media && (
235
+ <Block
236
+ spaceStack={{
237
+ xs: 'space060',
238
+ lg: 'space070',
239
+ }}
240
+ >
241
+ <VideoPlayer
242
+ config={{
243
+ 'data-video-id': media.videoId,
244
+ 'data-account': media.accountId,
245
+ 'data-player': 'default',
246
+ 'data-embed': 'default',
247
+ controls: true,
248
+ }}
249
+ />
250
+ </Block>
251
+ )}
240
252
  <Block
241
253
  spaceStack={{
242
254
  xs: 'space060',
243
- lg: 'space070',
255
+ md: 'space080',
256
+ lg: 'space100',
244
257
  }}
258
+ data-testid="ArticleContent"
245
259
  >
246
- <VideoPlayer
247
- config={{
248
- 'data-video-id': media.videoId,
249
- 'data-account': media.accountId,
250
- 'data-player': 'default',
251
- 'data-embed': 'default',
252
- controls: true,
253
- }}
254
- />
255
- </Block>
256
- )}
257
- <Block
258
- spaceStack={{
259
- xs: 'space060',
260
- md: 'space080',
261
- lg: 'space100',
262
- }}
263
- data-testid="ArticleContent"
264
- >
265
- {summary &&
266
- summary.children.map((p, i) => (
267
- <Block
268
- key={i}
269
- spaceStack={{
270
- xs: 'space050',
271
- lg: 'space070',
272
- }}
273
- data-testid="ArticleParagraph"
274
- >
275
- <TextBlock
276
- stylePreset="inkContrast"
277
- typographyPreset={{
278
- xs: 'editorialParagraph010',
279
- md: 'editorialParagraph020',
280
- xl: 'editorialParagraph030',
260
+ {summary &&
261
+ summary.children.map((p, i) => (
262
+ <Block
263
+ key={i}
264
+ spaceStack={{
265
+ xs: 'space050',
266
+ lg: 'space070',
281
267
  }}
268
+ data-testid="ArticleParagraph"
282
269
  >
283
- {p.text}
284
- </TextBlock>
285
- </Block>
286
- ))}
287
- </Block>
288
- <Visible xs sm>
289
- <Block spaceStack="space050">
290
- <Divider />
291
- </Block>
292
- <Block spaceStack="space100">
293
- <ShareButton />
294
- </Block>
295
- </Visible>
296
- <Visible md lg xl>
297
- <Block spaceStack="space050">
298
- <Divider />
270
+ <TextBlock
271
+ stylePreset="inkContrast"
272
+ typographyPreset={{
273
+ xs: 'editorialParagraph010',
274
+ md: 'editorialParagraph020',
275
+ xl: 'editorialParagraph030',
276
+ }}
277
+ >
278
+ {p.text}
279
+ </TextBlock>
280
+ </Block>
281
+ ))}
299
282
  </Block>
300
- <Block spaceStack="space100">
301
- <Stack
302
- flow="horizontal-bottom"
303
- stackDistribution="flex-end"
304
- wrap="nowrap"
305
- spaceInline="space060"
306
- >
307
- <ShareBarComponent />
308
- </Stack>
309
- </Block>
310
- </Visible>
311
- {topics && <RelatedTopics topics={topics} />}
312
- </Cell>
313
- <Cell xs={12} lg={3} lgOffset={1}>
314
- <Ad id="advert-article-sidebar" maxWidth="300px" />
315
- <Highlights />
316
- </Cell>
317
- <Cell xs={12}>
318
- <RelatedArticles />
319
- </Cell>
320
- </Layout>
321
- </>
322
- )
283
+ <Visible xs sm>
284
+ <Block spaceStack="space050">
285
+ <Divider />
286
+ </Block>
287
+ <Block spaceStack="space100">
288
+ <ShareButton />
289
+ </Block>
290
+ </Visible>
291
+ <Visible md lg xl>
292
+ <Block spaceStack="space050">
293
+ <Divider />
294
+ </Block>
295
+ <Block spaceStack="space100">
296
+ <Stack
297
+ flow="horizontal-bottom"
298
+ stackDistribution="flex-end"
299
+ wrap="nowrap"
300
+ spaceInline="space060"
301
+ >
302
+ <ShareBarComponent />
303
+ </Stack>
304
+ </Block>
305
+ </Visible>
306
+ {topics && <RelatedTopics topics={topics} />}
307
+ </Cell>
308
+ <Cell xs={12} lg={3} lgOffset={1}>
309
+ <Ad id="advert-article-sidebar" maxWidth="300px" />
310
+ <Highlights />
311
+ </Cell>
312
+ <Cell xs={12}>
313
+ <RelatedArticles />
314
+ </Cell>
315
+ </Layout>
316
+ </>
317
+ )
318
+ }
323
319
 
324
320
  export default ArticlePage