@newskit-render/core 2.1.1 → 2.2.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [2.2.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.2.0-alpha.0...@newskit-render/core@2.2.0) (2022-10-03)
7
+
8
+ **Note:** Version bump only for package @newskit-render/core
9
+
10
+
11
+
12
+
13
+
14
+ ## [2.1.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.1.3-alpha.0...@newskit-render/core@2.1.3) (2022-10-03)
15
+
16
+ **Note:** Version bump only for package @newskit-render/core
17
+
18
+
19
+
20
+
21
+
22
+ ## [2.1.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.1.2-alpha.0...@newskit-render/core@2.1.2) (2022-09-29)
23
+
24
+ **Note:** Version bump only for package @newskit-render/core
25
+
26
+
27
+
28
+
29
+
6
30
  ## [2.1.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.1.1-alpha.0...@newskit-render/core@2.1.1) (2022-09-28)
7
31
 
8
32
  **Note:** Version bump only for package @newskit-render/core
@@ -163,7 +163,7 @@ describe('Recommendation', () => {
163
163
  swrMock.mockReturnValueOnce({ data: recomendationsMock })
164
164
  result = renderWithTheme(Article, props)
165
165
  })
166
- expect(result.findByTestId('highlightsArticles-1')).toBeDefined()
166
+ expect(result.findByTestId('article-recommendation-small')).toBeDefined()
167
167
  expect(result.findByTestId('articleRec-1')).toBeDefined()
168
168
  })
169
169
  })
@@ -995,6 +995,9 @@ exports[`Recommendation render related article page when data is null page 1`] =
995
995
  <div
996
996
  class="css-1ji12ea"
997
997
  >
998
+ <div
999
+ class="css-9z2crs"
1000
+ />
998
1001
  <div
999
1002
  class="css-6gys8z"
1000
1003
  >
@@ -1140,8 +1143,7 @@ exports[`Recommendation render related article page when data is null page 1`] =
1140
1143
  </div>
1141
1144
  </div>
1142
1145
  <div
1143
- class="css-34i7av"
1144
- data-testid="RelatedArticlesVerticalCard"
1146
+ class="css-14pl72w"
1145
1147
  />
1146
1148
  <div
1147
1149
  class="css-75g92e"
@@ -10,7 +10,7 @@ import {
10
10
  Visible,
11
11
  TitleBar,
12
12
  } from 'newskit'
13
- import { ArticleRecommendation } from '@newskit-render/standalone-components'
13
+ import { AricleGrid } from '@newskit-render/standalone-components'
14
14
  import ViewMoreButton from '../common/ViewMoreButton'
15
15
 
16
16
  const Highlights: React.FC<{
@@ -59,19 +59,7 @@ const Highlights: React.FC<{
59
59
 
60
60
  <Block spaceStack="space040">
61
61
  <Grid xsMargin="space000">
62
- {highlightsArticles.map((article, i) => (
63
- <Cell
64
- data-testid={`highlightsArticles-${i}`}
65
- key={article.title}
66
- xs={12}
67
- sm={6}
68
- lg={12}
69
- >
70
- <Block spaceStack="space040" data-testid="HighlightsHorizontalCard">
71
- <ArticleRecommendation article={article} size="small" />
72
- </Block>
73
- </Cell>
74
- ))}
62
+ <AricleGrid articles={highlightsArticles} size="small" />
75
63
  <Cell xs={12}>
76
64
  <Visible xs lg xl>
77
65
  <Divider />
@@ -1,8 +1,8 @@
1
1
  import React from 'react'
2
2
  import { Block, TitleBar, Stack, StackChild, Divider, Visible } from 'newskit'
3
3
  import { useRouter } from 'next/router'
4
+ import { AricleGrid } from '@newskit-render/standalone-components'
4
5
  import ViewMoreButton from '../common/ViewMoreButton'
5
- import { BasicRow } from '../section/layouts'
6
6
 
7
7
  const RelatedArticles: React.FC<{
8
8
  relatedArticles: {
@@ -39,13 +39,11 @@ const RelatedArticles: React.FC<{
39
39
  Related
40
40
  </TitleBar>
41
41
  </Block>
42
-
43
- <BasicRow
44
- data-testid="RelatedArticlesVerticalCard"
45
- colums={{ xs: '1fr', sm: '1fr 1fr', lg: '1fr 1fr 1fr 1fr' }}
42
+ <AricleGrid
46
43
  articles={relatedArticles}
44
+ size="large"
45
+ columnCount={{ xs: '1', sm: '2', lg: '4' }}
47
46
  />
48
-
49
47
  <Visible xs lg>
50
48
  <Divider />
51
49
  <Stack>
@@ -1068,105 +1068,91 @@ exports[`Article should render tile and sub title 1`] = `
1068
1068
  class="css-1ji12ea"
1069
1069
  >
1070
1070
  <div
1071
- class="css-3jmwfs"
1072
- data-testid="highlightsArticles-0"
1071
+ class="css-9z2crs"
1073
1072
  >
1074
1073
  <div
1075
- class="css-14xhfxi"
1076
- data-testid="HighlightsHorizontalCard"
1074
+ class="css-1z995g"
1075
+ data-testid="article-recommendation-small"
1077
1076
  >
1078
1077
  <div
1079
- class="css-1z995g"
1078
+ class="css-14avdtw"
1080
1079
  >
1081
- <div
1082
- class="css-14avdtw"
1080
+ <picture
1081
+ class="css-1li59sn"
1083
1082
  >
1084
- <picture
1085
- class="css-1li59sn"
1086
- >
1087
- <div
1088
- class="css-5pczz7"
1089
- />
1090
- <img
1091
- alt="Card Media"
1092
- class="css-n57idg"
1093
- src="https://plchldr.co/i/50x50"
1094
- />
1095
- </picture>
1096
- </div>
1083
+ <div
1084
+ class="css-5pczz7"
1085
+ />
1086
+ <img
1087
+ alt="Card Media"
1088
+ class="css-n57idg"
1089
+ src="https://plchldr.co/i/50x50"
1090
+ />
1091
+ </picture>
1092
+ </div>
1093
+ <div
1094
+ class="css-1r2lt0d"
1095
+ >
1097
1096
  <div
1098
- class="css-1r2lt0d"
1097
+ class="css-h6wt93"
1099
1098
  >
1100
- <div
1101
- class="css-h6wt93"
1099
+ <a
1100
+ class="nk-card-link css-j3tblu"
1101
+ href="http://localhost"
1102
1102
  >
1103
- <a
1104
- class="nk-card-link css-j3tblu"
1105
- href="http://localhost"
1103
+ <section
1104
+ class="css-v6h0se"
1106
1105
  >
1107
- <section
1108
- class="css-v6h0se"
1106
+ <h4
1107
+ class="nk-headline-heading css-l6hs79"
1109
1108
  >
1110
- <h4
1111
- class="nk-headline-heading css-l6hs79"
1112
- >
1113
- Test Box
1114
- </h4>
1115
- </section>
1116
- </a>
1117
- </div>
1109
+ Test Box
1110
+ </h4>
1111
+ </section>
1112
+ </a>
1118
1113
  </div>
1119
1114
  </div>
1120
1115
  </div>
1121
- </div>
1122
- <div
1123
- class="css-3jmwfs"
1124
- data-testid="highlightsArticles-1"
1125
- >
1126
1116
  <div
1127
- class="css-14xhfxi"
1128
- data-testid="HighlightsHorizontalCard"
1117
+ class="css-1z995g"
1118
+ data-testid="article-recommendation-small"
1129
1119
  >
1130
1120
  <div
1131
- class="css-1z995g"
1121
+ class="css-14avdtw"
1132
1122
  >
1133
- <div
1134
- class="css-14avdtw"
1123
+ <picture
1124
+ class="css-1li59sn"
1135
1125
  >
1136
- <picture
1137
- class="css-1li59sn"
1138
- >
1139
- <div
1140
- class="css-5pczz7"
1141
- />
1142
- <img
1143
- alt="Card Media"
1144
- class="css-n57idg"
1145
- src="https://plchldr.co/i/50x50"
1146
- />
1147
- </picture>
1148
- </div>
1126
+ <div
1127
+ class="css-5pczz7"
1128
+ />
1129
+ <img
1130
+ alt="Card Media"
1131
+ class="css-n57idg"
1132
+ src="https://plchldr.co/i/50x50"
1133
+ />
1134
+ </picture>
1135
+ </div>
1136
+ <div
1137
+ class="css-1r2lt0d"
1138
+ >
1149
1139
  <div
1150
- class="css-1r2lt0d"
1140
+ class="css-h6wt93"
1151
1141
  >
1152
- <div
1153
- class="css-h6wt93"
1142
+ <a
1143
+ class="nk-card-link css-j3tblu"
1144
+ href="http://localhost"
1154
1145
  >
1155
- <a
1156
- class="nk-card-link css-j3tblu"
1157
- href="http://localhost"
1146
+ <section
1147
+ class="css-v6h0se"
1158
1148
  >
1159
- <section
1160
- class="css-v6h0se"
1149
+ <h4
1150
+ class="nk-headline-heading css-l6hs79"
1161
1151
  >
1162
- <h4
1163
- class="nk-headline-heading css-l6hs79"
1164
- >
1165
- Prince Harry
1166
- </h4>
1167
- </section>
1168
- </a>
1169
- </div>
1152
+ Prince Harry
1153
+ </h4>
1154
+ </section>
1155
+ </a>
1170
1156
  </div>
1171
1157
  </div>
1172
1158
  </div>
@@ -1316,132 +1302,123 @@ exports[`Article should render tile and sub title 1`] = `
1316
1302
  </div>
1317
1303
  </div>
1318
1304
  <div
1319
- class="css-34i7av"
1320
- data-testid="RelatedArticlesVerticalCard"
1305
+ class="css-14pl72w"
1321
1306
  >
1322
1307
  <div
1323
- class="css-16in0m0"
1324
- data-testid="articleRec-0"
1308
+ class="css-1v4r5rv"
1309
+ data-testid="article-recommendation-large"
1325
1310
  >
1326
1311
  <div
1327
- class="css-1v4r5rv"
1312
+ class="css-b5xivb"
1328
1313
  >
1329
- <div
1330
- class="css-b5xivb"
1314
+ <picture
1315
+ class="css-qg6b0i"
1331
1316
  >
1332
- <picture
1333
- class="css-qg6b0i"
1334
- >
1335
- <div
1336
- class="css-5pczz7"
1337
- />
1338
- <img
1339
- alt="Prince Harry"
1340
- class="css-1qgqq71"
1341
- src="https://plchldr.co/i/70x50"
1342
- />
1343
- </picture>
1344
- </div>
1317
+ <div
1318
+ class="css-5pczz7"
1319
+ />
1320
+ <img
1321
+ alt="Prince Harry"
1322
+ class="css-1qgqq71"
1323
+ src="https://plchldr.co/i/70x50"
1324
+ />
1325
+ </picture>
1326
+ </div>
1327
+ <div
1328
+ class="css-1shocxe"
1329
+ >
1345
1330
  <div
1346
- class="css-1shocxe"
1331
+ class="css-u3mic"
1347
1332
  >
1348
1333
  <div
1349
- class="css-u3mic"
1334
+ class="css-38y4ob"
1350
1335
  >
1351
1336
  <div
1352
- class="css-38y4ob"
1337
+ class="css-1vjcmlt"
1353
1338
  >
1354
- <div
1355
- class="css-1vjcmlt"
1339
+ <a
1340
+ class="nk-card-link css-j3tblu"
1341
+ href="http://localhost"
1356
1342
  >
1357
- <a
1358
- class="nk-card-link css-j3tblu"
1359
- href="http://localhost"
1343
+ <section
1344
+ class="css-jdch7u"
1360
1345
  >
1361
- <section
1362
- class="css-jdch7u"
1346
+ <h6
1347
+ class="nk-headline-heading css-l6hs79"
1363
1348
  >
1364
- <h6
1365
- class="nk-headline-heading css-l6hs79"
1366
- >
1367
- Prince Harry
1368
- </h6>
1369
- </section>
1370
- </a>
1371
- </div>
1372
- <div
1373
- class="css-1vjcmlt"
1349
+ Prince Harry
1350
+ </h6>
1351
+ </section>
1352
+ </a>
1353
+ </div>
1354
+ <div
1355
+ class="css-1vjcmlt"
1356
+ >
1357
+ <p
1358
+ class="css-x4rcwg"
1374
1359
  >
1375
- <p
1376
- class="css-x4rcwg"
1377
- >
1378
- news
1379
- </p>
1380
- </div>
1360
+ news
1361
+ </p>
1381
1362
  </div>
1382
1363
  </div>
1383
1364
  </div>
1384
1365
  </div>
1385
1366
  </div>
1386
1367
  <div
1387
- class="css-16in0m0"
1388
- data-testid="articleRec-1"
1368
+ class="css-1v4r5rv"
1369
+ data-testid="article-recommendation-large"
1389
1370
  >
1390
1371
  <div
1391
- class="css-1v4r5rv"
1372
+ class="css-b5xivb"
1392
1373
  >
1393
- <div
1394
- class="css-b5xivb"
1374
+ <picture
1375
+ class="css-qg6b0i"
1395
1376
  >
1396
- <picture
1397
- class="css-qg6b0i"
1398
- >
1399
- <div
1400
- class="css-5pczz7"
1401
- />
1402
- <img
1403
- alt="Meghan Markle"
1404
- class="css-1qgqq71"
1405
- src="https://plchldr.co/i/70x50"
1406
- />
1407
- </picture>
1408
- </div>
1377
+ <div
1378
+ class="css-5pczz7"
1379
+ />
1380
+ <img
1381
+ alt="Meghan Markle"
1382
+ class="css-1qgqq71"
1383
+ src="https://plchldr.co/i/70x50"
1384
+ />
1385
+ </picture>
1386
+ </div>
1387
+ <div
1388
+ class="css-1shocxe"
1389
+ >
1409
1390
  <div
1410
- class="css-1shocxe"
1391
+ class="css-u3mic"
1411
1392
  >
1412
1393
  <div
1413
- class="css-u3mic"
1394
+ class="css-38y4ob"
1414
1395
  >
1415
1396
  <div
1416
- class="css-38y4ob"
1397
+ class="css-1vjcmlt"
1417
1398
  >
1418
- <div
1419
- class="css-1vjcmlt"
1399
+ <a
1400
+ class="nk-card-link css-j3tblu"
1401
+ href="http://localhost"
1420
1402
  >
1421
- <a
1422
- class="nk-card-link css-j3tblu"
1423
- href="http://localhost"
1403
+ <section
1404
+ class="css-jdch7u"
1424
1405
  >
1425
- <section
1426
- class="css-jdch7u"
1406
+ <h6
1407
+ class="nk-headline-heading css-l6hs79"
1427
1408
  >
1428
- <h6
1429
- class="nk-headline-heading css-l6hs79"
1430
- >
1431
- Meghan Markle
1432
- </h6>
1433
- </section>
1434
- </a>
1435
- </div>
1436
- <div
1437
- class="css-1vjcmlt"
1409
+ Meghan Markle
1410
+ </h6>
1411
+ </section>
1412
+ </a>
1413
+ </div>
1414
+ <div
1415
+ class="css-1vjcmlt"
1416
+ >
1417
+ <p
1418
+ class="css-x4rcwg"
1438
1419
  >
1439
- <p
1440
- class="css-x4rcwg"
1441
- >
1442
- news
1443
- </p>
1444
- </div>
1420
+ news
1421
+ </p>
1445
1422
  </div>
1446
1423
  </div>
1447
1424
  </div>
@@ -162,7 +162,7 @@ describe('Article', () => {
162
162
  'Highlights'
163
163
  )[0]
164
164
  const card = within(getByTestId('Highlights')).getAllByTestId(
165
- 'HighlightsHorizontalCard'
165
+ 'article-recommendation-small'
166
166
  )[0]
167
167
  expect(title).toBeInTheDocument()
168
168
  expect(card).toBeInTheDocument()
@@ -178,7 +178,7 @@ describe('Article', () => {
178
178
  const { getByTestId } = renderWithTheme(Article, articleData)
179
179
  const title = within(getByTestId('RelatedArticles')).getByText('Related')
180
180
  const card = within(getByTestId('RelatedArticles')).getAllByTestId(
181
- 'RelatedArticlesVerticalCard'
181
+ 'article-recommendation-large'
182
182
  )[0]
183
183
 
184
184
  expect(title).toBeInTheDocument()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@newskit-render/core",
3
- "version": "2.1.1",
3
+ "version": "2.2.0",
4
4
  "description": "Newskit Render - Core package",
5
5
  "author": "",
6
6
  "license": "UNLICENSED",
@@ -38,14 +38,14 @@
38
38
  "@emotion-icons/material-outlined": "3.14.0",
39
39
  "@emotion/react": "11.10.4",
40
40
  "@emotion/styled": "11.10.4",
41
- "@newskit-render/api": "^1.0.0",
41
+ "@newskit-render/api": "^1.1.0",
42
42
  "@newskit-render/auth": "^1.0.0",
43
- "@newskit-render/checkout": "^1.0.1",
43
+ "@newskit-render/checkout": "^1.0.3",
44
44
  "@newskit-render/feature-flags": "^1.0.0",
45
- "@newskit-render/feed": "^1.0.0",
46
- "@newskit-render/my-account": "^3.1.0",
47
- "@newskit-render/shared-components": "^1.1.0",
48
- "@newskit-render/standalone-components": "^1.0.1",
45
+ "@newskit-render/feed": "^1.0.1",
46
+ "@newskit-render/my-account": "^3.1.3",
47
+ "@newskit-render/shared-components": "^1.1.1",
48
+ "@newskit-render/standalone-components": "^1.1.0",
49
49
  "@newskit-render/validation": "^1.0.0",
50
50
  "cross-fetch": "3.1.5",
51
51
  "graphql": "15.6.0",