@newskit-render/core 1.34.0 → 1.42.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 (30) hide show
  1. package/CHANGELOG.md +139 -0
  2. package/__tests__/pages/__snapshots__/home.test.tsx.snap +42 -45
  3. package/app-context/AppContext.test.tsx +0 -12
  4. package/components/{404/404.tsx → ErrorPage/ErrorPage.tsx} +10 -6
  5. package/components/article/__tests__/index.test.tsx +2 -2
  6. package/components/article/index.tsx +5 -3
  7. package/components/header/index.tsx +7 -3
  8. package/components/section/ArticleSlice.tsx +1 -1
  9. package/components/section/__tests__/ArticleSlice.test.tsx +12 -11
  10. package/components/section/__tests__/CollectionBlock.test.tsx +1 -1
  11. package/components/section/__tests__/sectionUtils.test.ts +12 -9
  12. package/components/section/layouts/__tests__/Lead.test.tsx +2 -1
  13. package/components/section/layouts/__tests__/SectionRow.test.tsx +6 -5
  14. package/components/section/layouts/__tests__/__snapshots__/Lead.test.tsx.snap +2 -2
  15. package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap +143 -58
  16. package/components/section/sectionUtils.ts +6 -6
  17. package/cypress/e2e/account/account-subscription.spec.js +222 -0
  18. package/cypress/e2e/account/payment-failer.spec.js +137 -0
  19. package/cypress/support/commands.js +28 -3
  20. package/helpers/global-types.ts +2 -2
  21. package/helpers/mocks/getPageMock.ts +59 -35
  22. package/infrastructure/.circleci/config.yml +3 -2
  23. package/package.json +9 -9
  24. package/pages/[section]/index.tsx +18 -7
  25. package/pages/_error.tsx +18 -2
  26. package/pages/preview/[articleId]/version/[versionId]/index.tsx +17 -15
  27. package/public/MyAccount/pending-activation.svg +16 -0
  28. package/queries/getPage.ts +1 -1
  29. package/temp/header.tsx +7 -3
  30. package/app-context/__snapshots__/AppContext.test.tsx.snap +0 -3
@@ -3,17 +3,18 @@ import { renderWithTheme } from '../../../helpers/test-utils'
3
3
  import ArticleSlice from '../ArticleSlice'
4
4
  import { getPageMock } from '../../../helpers/mocks'
5
5
  import { SectionContext } from '../SectionContext'
6
+ import { ArticleSlice as ArticleSliceType } from '../../../helpers/global-types'
6
7
 
7
8
  describe('ArticleSlice', () => {
8
- test('Handled LEAD_1_AND_2 article-block', () => {
9
+ test('Handled SUPPLEMENT_LEAD_AND_4_STACK article-block', () => {
9
10
  const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
10
11
  ArticleSlice,
11
12
  {
12
- slice: getPageMock.page.body[0].children[0],
13
+ slice: getPageMock.page.body[0].children[0] as ArticleSliceType,
13
14
  collection: getPageMock.page.body[0],
14
15
  }
15
16
  )
16
- expect(getByTestId('LEAD_1_AND_2-Grid')).toBeInTheDocument()
17
+ expect(getByTestId('SUPPLEMENT_LEAD_AND_4_STACK-Grid')).toBeInTheDocument()
17
18
  expect(getByTestId('featureVerticalCell')).toBeInTheDocument()
18
19
  expect(getAllByTestId(/titleVerticalCell-/).length).toEqual(2)
19
20
  expect(getAllByRole('link').length).toEqual(3)
@@ -23,7 +24,7 @@ describe('ArticleSlice', () => {
23
24
  const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
24
25
  ArticleSlice,
25
26
  {
26
- slice: getPageMock.page.body[0].children[1],
27
+ slice: getPageMock.page.body[0].children[1] as ArticleSliceType,
27
28
  collection: getPageMock.page.body[0],
28
29
  }
29
30
  )
@@ -45,7 +46,7 @@ describe('ArticleSlice', () => {
45
46
  },
46
47
  children: (
47
48
  <ArticleSlice
48
- slice={getPageMock.page.body[0].children[1]}
49
+ slice={getPageMock.page.body[0].children[1] as ArticleSliceType}
49
50
  collection={getPageMock.page.body[0]}
50
51
  />
51
52
  ),
@@ -60,7 +61,7 @@ describe('ArticleSlice', () => {
60
61
  const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
61
62
  ArticleSlice,
62
63
  {
63
- slice: getPageMock.page.body[0].children[5],
64
+ slice: getPageMock.page.body[0].children[5] as ArticleSliceType,
64
65
  collection: getPageMock.page.body[0],
65
66
  }
66
67
  )
@@ -82,7 +83,7 @@ describe('ArticleSlice', () => {
82
83
  },
83
84
  children: (
84
85
  <ArticleSlice
85
- slice={getPageMock.page.body[0].children[5]}
86
+ slice={getPageMock.page.body[0].children[5] as ArticleSliceType}
86
87
  collection={getPageMock.page.body[0]}
87
88
  />
88
89
  ),
@@ -96,7 +97,7 @@ describe('ArticleSlice', () => {
96
97
 
97
98
  test('Unhandled article-block', () => {
98
99
  const { getByText } = renderWithTheme(ArticleSlice, {
99
- slice: getPageMock.page.body[0].children[2],
100
+ slice: getPageMock.page.body[0].children[2] as ArticleSliceType,
100
101
  collection: getPageMock.page.body[0],
101
102
  })
102
103
  expect(getByText('Layout: LEAD_1_AND_1')).toBeInTheDocument()
@@ -112,7 +113,7 @@ describe('ArticleSlice', () => {
112
113
 
113
114
  test('Unhandled Layout other blocks', () => {
114
115
  const { getByText } = renderWithTheme(ArticleSlice, {
115
- slice: getPageMock.page.body[0].children[3],
116
+ slice: getPageMock.page.body[0].children[3] as ArticleSliceType,
116
117
  collection: getPageMock.page.body[0],
117
118
  })
118
119
 
@@ -126,12 +127,12 @@ describe('ArticleSlice', () => {
126
127
  const { getByText, getByTestId, getAllByTestId } = renderWithTheme(
127
128
  ArticleSlice,
128
129
  {
129
- slice: getPageMock.page.body[0].children[4],
130
+ slice: getPageMock.page.body[0].children[4] as ArticleSliceType,
130
131
  collection: getPageMock.page.body[0],
131
132
  }
132
133
  )
133
134
 
134
- expect(getByTestId('LEAD_1_AND_2-Grid')).toBeInTheDocument()
135
+ expect(getByTestId('SUPPLEMENT_LEAD_AND_4_STACK-Grid')).toBeInTheDocument()
135
136
  expect(getByTestId('featureVerticalCell')).toBeInTheDocument()
136
137
  expect(getAllByTestId(/titleVerticalCell-/).length).toEqual(2)
137
138
  expect(getByText('TODO - External Reference')).toBeInTheDocument()
@@ -9,7 +9,7 @@ describe('CollectionBlock', () => {
9
9
  test('returns slice', () => {
10
10
  expect(
11
11
  CollectionBlock(getPageMock.page.body[0])[0].props.slice.name
12
- ).toEqual('LEAD_1_AND_2')
12
+ ).toEqual('SUPPLEMENT_LEAD_AND_4_STACK')
13
13
  expect(
14
14
  CollectionBlock(getPageMock.page.body[0])[0].props.collection.id
15
15
  ).toEqual('123a')
@@ -1,3 +1,4 @@
1
+ import { Video } from '../../../helpers/global-types'
1
2
  import { teaserURL, teaserSummary, getMedia } from '../sectionUtils'
2
3
 
3
4
  describe('Section Utils', () => {
@@ -58,17 +59,19 @@ describe('Section Utils', () => {
58
59
  })
59
60
 
60
61
  const image = {
61
- crop: {
62
- url: 'image-src',
63
- alt: 'image-alt',
64
- aspectRatio: '1:1',
65
- },
62
+ crops: [
63
+ {
64
+ url: 'image-src',
65
+ alt: 'image-alt',
66
+ aspectRatio: '1:1',
67
+ },
68
+ ],
66
69
  }
67
70
 
68
71
  expect(getMedia(image)).toEqual({
69
- src: image.crop.url,
70
- alt: image.crop.alt,
71
- loadingAspectRatio: image.crop.aspectRatio,
72
+ src: image.crops[0].url,
73
+ alt: image.crops[0].alt,
74
+ loadingAspectRatio: image.crops[0].aspectRatio,
72
75
  })
73
76
 
74
77
  const video = {
@@ -82,7 +85,7 @@ describe('Section Utils', () => {
82
85
  },
83
86
  }
84
87
 
85
- expect(getMedia(video)).toEqual({
88
+ expect(getMedia(video as Video)).toEqual({
86
89
  src: video.posterImage.crop.url,
87
90
  alt: video.posterImage.crop.alt,
88
91
  loadingAspectRatio: video.posterImage.crop.aspectRatio,
@@ -1,10 +1,11 @@
1
1
  import { renderWithTheme } from '../../../../helpers/test-utils'
2
2
  import { Lead } from '../Lead'
3
3
  import { getPageMock } from '../../../../helpers/mocks'
4
+ import { ArticleSlice } from '../../../../helpers/global-types'
4
5
 
5
6
  test('Lead', () => {
6
7
  const { asFragment } = renderWithTheme(Lead, {
7
- slice: getPageMock.page.body[0].children[0],
8
+ slice: getPageMock.page.body[0].children[0] as ArticleSlice,
8
9
  sectionURL: getPageMock.page.body[0].link.url,
9
10
  })
10
11
  expect(asFragment()).toMatchSnapshot()
@@ -1,11 +1,12 @@
1
1
  import { renderWithTheme } from '../../../../helpers/test-utils'
2
2
  import { SectionRow } from '../SectionRow'
3
3
  import { getPageMock } from '../../../../helpers/mocks'
4
+ import { ArticleSlice } from '../../../../helpers/global-types'
4
5
 
5
6
  describe('SectionRow', () => {
6
7
  test('SectionRow with title', () => {
7
8
  const { asFragment } = renderWithTheme(SectionRow, {
8
- slice: getPageMock.page.body[0].children[1],
9
+ slice: getPageMock.page.body[0].children[1] as ArticleSlice,
9
10
  sectionURL: getPageMock.page.body[0].link.url,
10
11
  collection: getPageMock.page.body[0],
11
12
  })
@@ -14,7 +15,7 @@ describe('SectionRow', () => {
14
15
 
15
16
  test('SectionRow without title', () => {
16
17
  const { asFragment } = renderWithTheme(SectionRow, {
17
- slice: getPageMock.page.body[0].children[1],
18
+ slice: getPageMock.page.body[0].children[1] as ArticleSlice,
18
19
  sectionURL: getPageMock.page.body[0].link.url,
19
20
  collection: getPageMock.page.body[0],
20
21
  showTitle: false,
@@ -24,7 +25,7 @@ describe('SectionRow', () => {
24
25
 
25
26
  test('SectionRow isDarkBackground', () => {
26
27
  const { asFragment } = renderWithTheme(SectionRow, {
27
- slice: getPageMock.page.body[0].children[1],
28
+ slice: getPageMock.page.body[0].children[1] as ArticleSlice,
28
29
  sectionURL: getPageMock.page.body[0].link.url,
29
30
  collection: getPageMock.page.body[0],
30
31
  isDarkBackground: true,
@@ -34,7 +35,7 @@ describe('SectionRow', () => {
34
35
 
35
36
  test('SectionRow without extra space', () => {
36
37
  const { asFragment } = renderWithTheme(SectionRow, {
37
- slice: getPageMock.page.body[0].children[1],
38
+ slice: getPageMock.page.body[0].children[1] as ArticleSlice,
38
39
  sectionURL: getPageMock.page.body[0].link.url,
39
40
  collection: getPageMock.page.body[0],
40
41
  addTopSpace: true,
@@ -44,7 +45,7 @@ describe('SectionRow', () => {
44
45
 
45
46
  test('SectionRow alternative titlebar', () => {
46
47
  const { asFragment } = renderWithTheme(SectionRow, {
47
- slice: getPageMock.page.body[0].children[1],
48
+ slice: getPageMock.page.body[0].children[1] as ArticleSlice,
48
49
  sectionURL: getPageMock.page.body[0].link.url,
49
50
  collection: getPageMock.page.body[0],
50
51
  titleBarStylePreset: 'inkContrast',
@@ -540,7 +540,7 @@ exports[`Lead 1`] = `
540
540
  >
541
541
  <div
542
542
  class="emotion-1"
543
- data-testid="LEAD_1_AND_2-Grid"
543
+ data-testid="SUPPLEMENT_LEAD_AND_4_STACK-Grid"
544
544
  >
545
545
  <div
546
546
  class="emotion-2"
@@ -595,7 +595,7 @@ exports[`Lead 1`] = `
595
595
  >
596
596
  <div
597
597
  class="emotion-14"
598
- data-testid="LEAD_1_AND_2-InnerGrid"
598
+ data-testid="SUPPLEMENT_LEAD_AND_4_STACK-InnerGrid"
599
599
  >
600
600
  <div
601
601
  class="emotion-15"
@@ -625,7 +625,27 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
625
625
  }
626
626
  }
627
627
 
628
- .emotion-69 {
628
+ .emotion-46 {
629
+ position: relative;
630
+ width: 100%;
631
+ display: block;
632
+ padding-top: 0;
633
+ height: auto;
634
+ width: 100%;
635
+ border-radius: 0;
636
+ }
637
+
638
+ .emotion-47 {
639
+ opacity: 1;
640
+ display: block;
641
+ border-radius: inherit;
642
+ height: auto;
643
+ width: 100%;
644
+ -webkit-animation: fadeIn 300ms;
645
+ animation: fadeIn 300ms;
646
+ }
647
+
648
+ .emotion-68 {
629
649
  border-style: solid;
630
650
  border-color: #DEDEDE;
631
651
  border-width: 1px;
@@ -731,7 +751,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
731
751
  <img
732
752
  alt="image alt"
733
753
  class="emotion-22"
734
- src="some-url-to-image"
754
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
735
755
  />
736
756
  </picture>
737
757
  </div>
@@ -787,7 +807,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
787
807
  <img
788
808
  alt="image alt 2"
789
809
  class="emotion-22"
790
- src="some-url-to-image"
810
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
791
811
  />
792
812
  </picture>
793
813
  </div>
@@ -835,15 +855,12 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
835
855
  class="emotion-19"
836
856
  >
837
857
  <picture
838
- class="emotion-20"
858
+ class="emotion-46"
839
859
  >
840
- <div
841
- class="emotion-21"
842
- />
843
860
  <img
844
- alt="image alt 3"
845
- class="emotion-22"
846
- src="some-url-to-image"
861
+ alt=""
862
+ class="emotion-47"
863
+ src=""
847
864
  />
848
865
  </picture>
849
866
  </div>
@@ -899,7 +916,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
899
916
  <img
900
917
  alt="image alt 3"
901
918
  class="emotion-22"
902
- src="some-url-to-image"
919
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
903
920
  />
904
921
  </picture>
905
922
  </div>
@@ -941,7 +958,7 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
941
958
  </div>
942
959
  <hr
943
960
  aria-hidden="true"
944
- class="emotion-69"
961
+ class="emotion-68"
945
962
  data-testid="divider"
946
963
  />
947
964
  </div>
@@ -1573,7 +1590,27 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1573
1590
  }
1574
1591
  }
1575
1592
 
1576
- .emotion-69 {
1593
+ .emotion-46 {
1594
+ position: relative;
1595
+ width: 100%;
1596
+ display: block;
1597
+ padding-top: 0;
1598
+ height: auto;
1599
+ width: 100%;
1600
+ border-radius: 0;
1601
+ }
1602
+
1603
+ .emotion-47 {
1604
+ opacity: 1;
1605
+ display: block;
1606
+ border-radius: inherit;
1607
+ height: auto;
1608
+ width: 100%;
1609
+ -webkit-animation: fadeIn 300ms;
1610
+ animation: fadeIn 300ms;
1611
+ }
1612
+
1613
+ .emotion-68 {
1577
1614
  border-style: solid;
1578
1615
  border-color: #DEDEDE;
1579
1616
  border-width: 1px;
@@ -1679,7 +1716,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1679
1716
  <img
1680
1717
  alt="image alt"
1681
1718
  class="emotion-22"
1682
- src="some-url-to-image"
1719
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1683
1720
  />
1684
1721
  </picture>
1685
1722
  </div>
@@ -1735,7 +1772,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1735
1772
  <img
1736
1773
  alt="image alt 2"
1737
1774
  class="emotion-22"
1738
- src="some-url-to-image"
1775
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1739
1776
  />
1740
1777
  </picture>
1741
1778
  </div>
@@ -1783,15 +1820,12 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1783
1820
  class="emotion-19"
1784
1821
  >
1785
1822
  <picture
1786
- class="emotion-20"
1823
+ class="emotion-46"
1787
1824
  >
1788
- <div
1789
- class="emotion-21"
1790
- />
1791
1825
  <img
1792
- alt="image alt 3"
1793
- class="emotion-22"
1794
- src="some-url-to-image"
1826
+ alt=""
1827
+ class="emotion-47"
1828
+ src=""
1795
1829
  />
1796
1830
  </picture>
1797
1831
  </div>
@@ -1847,7 +1881,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1847
1881
  <img
1848
1882
  alt="image alt 3"
1849
1883
  class="emotion-22"
1850
- src="some-url-to-image"
1884
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
1851
1885
  />
1852
1886
  </picture>
1853
1887
  </div>
@@ -1889,7 +1923,7 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
1889
1923
  </div>
1890
1924
  <hr
1891
1925
  aria-hidden="true"
1892
- class="emotion-69"
1926
+ class="emotion-68"
1893
1927
  data-testid="divider"
1894
1928
  />
1895
1929
  </div>
@@ -2521,7 +2555,27 @@ exports[`SectionRow SectionRow with title 1`] = `
2521
2555
  }
2522
2556
  }
2523
2557
 
2524
- .emotion-69 {
2558
+ .emotion-46 {
2559
+ position: relative;
2560
+ width: 100%;
2561
+ display: block;
2562
+ padding-top: 0;
2563
+ height: auto;
2564
+ width: 100%;
2565
+ border-radius: 0;
2566
+ }
2567
+
2568
+ .emotion-47 {
2569
+ opacity: 1;
2570
+ display: block;
2571
+ border-radius: inherit;
2572
+ height: auto;
2573
+ width: 100%;
2574
+ -webkit-animation: fadeIn 300ms;
2575
+ animation: fadeIn 300ms;
2576
+ }
2577
+
2578
+ .emotion-68 {
2525
2579
  border-style: solid;
2526
2580
  border-color: #DEDEDE;
2527
2581
  border-width: 1px;
@@ -2627,7 +2681,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2627
2681
  <img
2628
2682
  alt="image alt"
2629
2683
  class="emotion-22"
2630
- src="some-url-to-image"
2684
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2631
2685
  />
2632
2686
  </picture>
2633
2687
  </div>
@@ -2683,7 +2737,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2683
2737
  <img
2684
2738
  alt="image alt 2"
2685
2739
  class="emotion-22"
2686
- src="some-url-to-image"
2740
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2687
2741
  />
2688
2742
  </picture>
2689
2743
  </div>
@@ -2731,15 +2785,12 @@ exports[`SectionRow SectionRow with title 1`] = `
2731
2785
  class="emotion-19"
2732
2786
  >
2733
2787
  <picture
2734
- class="emotion-20"
2788
+ class="emotion-46"
2735
2789
  >
2736
- <div
2737
- class="emotion-21"
2738
- />
2739
2790
  <img
2740
- alt="image alt 3"
2741
- class="emotion-22"
2742
- src="some-url-to-image"
2791
+ alt=""
2792
+ class="emotion-47"
2793
+ src=""
2743
2794
  />
2744
2795
  </picture>
2745
2796
  </div>
@@ -2795,7 +2846,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2795
2846
  <img
2796
2847
  alt="image alt 3"
2797
2848
  class="emotion-22"
2798
- src="some-url-to-image"
2849
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
2799
2850
  />
2800
2851
  </picture>
2801
2852
  </div>
@@ -2837,7 +2888,7 @@ exports[`SectionRow SectionRow with title 1`] = `
2837
2888
  </div>
2838
2889
  <hr
2839
2890
  aria-hidden="true"
2840
- class="emotion-69"
2891
+ class="emotion-68"
2841
2892
  data-testid="divider"
2842
2893
  />
2843
2894
  </div>
@@ -3485,6 +3536,26 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3485
3536
  }
3486
3537
  }
3487
3538
 
3539
+ .emotion-48 {
3540
+ position: relative;
3541
+ width: 100%;
3542
+ display: block;
3543
+ padding-top: 0;
3544
+ height: auto;
3545
+ width: 100%;
3546
+ border-radius: 0;
3547
+ }
3548
+
3549
+ .emotion-49 {
3550
+ opacity: 1;
3551
+ display: block;
3552
+ border-radius: inherit;
3553
+ height: auto;
3554
+ width: 100%;
3555
+ -webkit-animation: fadeIn 300ms;
3556
+ animation: fadeIn 300ms;
3557
+ }
3558
+
3488
3559
  <div
3489
3560
  class="emotion-0"
3490
3561
  >
@@ -3589,7 +3660,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3589
3660
  <img
3590
3661
  alt="image alt"
3591
3662
  class="emotion-24"
3592
- src="some-url-to-image"
3663
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
3593
3664
  />
3594
3665
  </picture>
3595
3666
  </div>
@@ -3645,7 +3716,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3645
3716
  <img
3646
3717
  alt="image alt 2"
3647
3718
  class="emotion-24"
3648
- src="some-url-to-image"
3719
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
3649
3720
  />
3650
3721
  </picture>
3651
3722
  </div>
@@ -3693,15 +3764,12 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3693
3764
  class="emotion-21"
3694
3765
  >
3695
3766
  <picture
3696
- class="emotion-22"
3767
+ class="emotion-48"
3697
3768
  >
3698
- <div
3699
- class="emotion-23"
3700
- />
3701
3769
  <img
3702
- alt="image alt 3"
3703
- class="emotion-24"
3704
- src="some-url-to-image"
3770
+ alt=""
3771
+ class="emotion-49"
3772
+ src=""
3705
3773
  />
3706
3774
  </picture>
3707
3775
  </div>
@@ -3757,7 +3825,7 @@ exports[`SectionRow SectionRow without extra space 1`] = `
3757
3825
  <img
3758
3826
  alt="image alt 3"
3759
3827
  class="emotion-24"
3760
- src="some-url-to-image"
3828
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
3761
3829
  />
3762
3830
  </picture>
3763
3831
  </div>
@@ -4195,7 +4263,27 @@ exports[`SectionRow SectionRow without title 1`] = `
4195
4263
  }
4196
4264
  }
4197
4265
 
4198
- .emotion-56 {
4266
+ .emotion-33 {
4267
+ position: relative;
4268
+ width: 100%;
4269
+ display: block;
4270
+ padding-top: 0;
4271
+ height: auto;
4272
+ width: 100%;
4273
+ border-radius: 0;
4274
+ }
4275
+
4276
+ .emotion-34 {
4277
+ opacity: 1;
4278
+ display: block;
4279
+ border-radius: inherit;
4280
+ height: auto;
4281
+ width: 100%;
4282
+ -webkit-animation: fadeIn 300ms;
4283
+ animation: fadeIn 300ms;
4284
+ }
4285
+
4286
+ .emotion-55 {
4199
4287
  border-style: solid;
4200
4288
  border-color: #DEDEDE;
4201
4289
  border-width: 1px;
@@ -4239,7 +4327,7 @@ exports[`SectionRow SectionRow without title 1`] = `
4239
4327
  <img
4240
4328
  alt="image alt"
4241
4329
  class="emotion-9"
4242
- src="some-url-to-image"
4330
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
4243
4331
  />
4244
4332
  </picture>
4245
4333
  </div>
@@ -4295,7 +4383,7 @@ exports[`SectionRow SectionRow without title 1`] = `
4295
4383
  <img
4296
4384
  alt="image alt 2"
4297
4385
  class="emotion-9"
4298
- src="some-url-to-image"
4386
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
4299
4387
  />
4300
4388
  </picture>
4301
4389
  </div>
@@ -4343,15 +4431,12 @@ exports[`SectionRow SectionRow without title 1`] = `
4343
4431
  class="emotion-6"
4344
4432
  >
4345
4433
  <picture
4346
- class="emotion-7"
4434
+ class="emotion-33"
4347
4435
  >
4348
- <div
4349
- class="emotion-8"
4350
- />
4351
4436
  <img
4352
- alt="image alt 3"
4353
- class="emotion-9"
4354
- src="some-url-to-image"
4437
+ alt=""
4438
+ class="emotion-34"
4439
+ src=""
4355
4440
  />
4356
4441
  </picture>
4357
4442
  </div>
@@ -4407,7 +4492,7 @@ exports[`SectionRow SectionRow without title 1`] = `
4407
4492
  <img
4408
4493
  alt="image alt 3"
4409
4494
  class="emotion-9"
4410
- src="some-url-to-image"
4495
+ src="https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1"
4411
4496
  />
4412
4497
  </picture>
4413
4498
  </div>
@@ -4449,7 +4534,7 @@ exports[`SectionRow SectionRow without title 1`] = `
4449
4534
  </div>
4450
4535
  <hr
4451
4536
  aria-hidden="true"
4452
- class="emotion-56"
4537
+ class="emotion-55"
4453
4538
  data-testid="divider"
4454
4539
  />
4455
4540
  </div>
@@ -12,15 +12,15 @@ export const getMedia = (media?: Media) => {
12
12
  loadingAspectRatio: '',
13
13
  }
14
14
  }
15
- return 'crop' in media
15
+ return 'crops' in media
16
16
  ? {
17
- src: media?.crop?.url || '',
18
- alt: media?.crop?.alt || '',
19
- loadingAspectRatio: media?.crop?.aspectRatio || '',
17
+ src: media?.crops[0].url || '',
18
+ alt: media?.crops[0].alt || '',
19
+ loadingAspectRatio: media?.crops[0].aspectRatio || '',
20
20
  }
21
21
  : {
22
- src: media.posterImage?.crop?.url || '',
23
- alt: media.posterImage?.crop?.alt || '',
22
+ src: media?.posterImage?.crop?.url || '',
23
+ alt: media?.posterImage?.crop?.alt || '',
24
24
  loadingAspectRatio: media?.posterImage?.crop?.aspectRatio || '',
25
25
  }
26
26
  }