{
+ return (
+
+
+
+ );
+};
diff --git a/dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.stories.tsx b/dotcom-rendering/src/web/components/MostViewedFooter.stories.tsx
similarity index 85%
rename from dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.stories.tsx
rename to dotcom-rendering/src/web/components/MostViewedFooter.stories.tsx
index 66006e3590f..69f790d7912 100644
--- a/dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.stories.tsx
+++ b/dotcom-rendering/src/web/components/MostViewedFooter.stories.tsx
@@ -3,14 +3,14 @@ import fetchMock from 'fetch-mock';
import { ArticleDisplay, ArticleDesign, ArticlePillar } from '@guardian/libs';
import { ABProvider } from '@guardian/ab-react';
-import { ElementContainer } from '../../ElementContainer';
+import { ElementContainer } from './ElementContainer';
import {
responseWithTwoTabs,
responseWithOneTab,
responseWithMissingImage,
-} from '../MostViewed.mocks';
+} from './MostViewed.mocks';
-import { MostViewedFooter } from './MostViewedFooter';
+import { MostViewedFooter } from './MostViewedFooter.importable';
export default {
component: MostViewedFooter,
@@ -51,6 +51,9 @@ export const withTwoTabs = () => {
}}
sectionName="politics"
ajaxUrl="https://api.nextgen.guardianapps.co.uk"
+ switches={{}}
+ pageIsSensitive={false}
+ isDev={false}
/>
@@ -74,6 +77,9 @@ export const withOneTabs = () => {
theme: ArticlePillar.News,
}}
ajaxUrl="https://api.nextgen.guardianapps.co.uk"
+ switches={{}}
+ pageIsSensitive={false}
+ isDev={false}
/>
@@ -97,6 +103,9 @@ export const withNoMostSharedImage = () => {
theme: ArticlePillar.News,
}}
ajaxUrl="https://api.nextgen.guardianapps.co.uk"
+ switches={{}}
+ pageIsSensitive={false}
+ isDev={false}
/>
diff --git a/dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.test.tsx b/dotcom-rendering/src/web/components/MostViewedFooter.test.tsx
similarity index 96%
rename from dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.test.tsx
rename to dotcom-rendering/src/web/components/MostViewedFooter.test.tsx
index 4b5e638ca64..1bdc348e04c 100644
--- a/dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.test.tsx
+++ b/dotcom-rendering/src/web/components/MostViewedFooter.test.tsx
@@ -2,16 +2,16 @@ import { render, fireEvent } from '@testing-library/react';
import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
-import { useApi as useApi_ } from '../../../lib/useApi';
-import { decidePalette } from '../../../lib/decidePalette';
+import { useApi as useApi_ } from '../lib/useApi';
+import { decidePalette } from '../lib/decidePalette';
-import { responseWithTwoTabs, responseWithOneTab } from '../MostViewed.mocks';
+import { responseWithTwoTabs, responseWithOneTab } from './MostViewed.mocks';
import { MostViewedFooterData } from './MostViewedFooterData';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const useApi: { [key: string]: any } = useApi_;
-jest.mock('../../../lib/useApi', () => ({
+jest.mock('../lib/useApi', () => ({
useApi: jest.fn(),
}));
diff --git a/dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooterData.tsx b/dotcom-rendering/src/web/components/MostViewedFooterData.tsx
similarity index 88%
rename from dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooterData.tsx
rename to dotcom-rendering/src/web/components/MostViewedFooterData.tsx
index 5d3e1234439..72eb1117d66 100644
--- a/dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooterData.tsx
+++ b/dotcom-rendering/src/web/components/MostViewedFooterData.tsx
@@ -2,12 +2,12 @@ import { css } from '@emotion/react';
import { border, from, Breakpoint } from '@guardian/source-foundations';
-import { useApi } from '../../../lib/useApi';
-import { joinUrl } from '../../../../lib/joinUrl';
-import { decideTrail } from '../../../lib/decideTrail';
+import { useApi } from '../lib/useApi';
+import { joinUrl } from '../../lib/joinUrl';
+import { decideTrail } from '../lib/decideTrail';
import { MostViewedFooterGrid } from './MostViewedFooterGrid';
-import { SecondTierItem } from './SecondTierItem';
+import { MostViewedFooterSecondTierItem } from './MostViewedFooterSecondTierItem';
type Props = {
sectionName?: string;
@@ -81,7 +81,7 @@ export const MostViewedFooterData = ({
/>
{'mostCommented' in data && (
-
)}
{'mostShared' in data && (
- css`
position: relative;
diff --git a/dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.tsx b/dotcom-rendering/src/web/components/MostViewedFooterLayout.tsx
similarity index 74%
rename from dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.tsx
rename to dotcom-rendering/src/web/components/MostViewedFooterLayout.tsx
index 5dde85292b9..d370471441c 100755
--- a/dotcom-rendering/src/web/components/MostViewed/MostViewedFooter/MostViewedFooter.tsx
+++ b/dotcom-rendering/src/web/components/MostViewedFooterLayout.tsx
@@ -1,29 +1,13 @@
-import React, { Suspense } from 'react';
import { css } from '@emotion/react';
-
import { text, headline, from, Breakpoint } from '@guardian/source-foundations';
-
import { useAB } from '@guardian/ab-react';
import { ArticleDesign } from '@guardian/libs';
-import { initPerf } from '../../../browser/initPerf';
-import { AdSlot, labelStyles } from '../../AdSlot';
-import { Lazy } from '../../Lazy';
-
-import { abTestTest } from '../../../experiments/tests/ab-test-test';
-import { decidePalette } from '../../../lib/decidePalette';
-import { Hide } from '../../Hide';
-import { LeftColumn } from '../../LeftColumn';
-
-const MostViewedFooterData = React.lazy(() => {
- const { start, end } = initPerf('MostViewedFooterData');
- start();
- return import(
- /* webpackChunkName: "MostViewedFooterData" */ './MostViewedFooterData'
- ).then((module) => {
- end();
- return { default: module.MostViewedFooterData };
- });
-});
+import { Hide } from './Hide';
+import { LeftColumn } from './LeftColumn';
+import { MostViewedFooterData } from './MostViewedFooterData';
+import { AdSlot, labelStyles } from './AdSlot';
+import { abTestTest } from '../experiments/tests/ab-test-test';
+import { decidePalette } from '../lib/decidePalette';
const stackBelow = (breakpoint: Breakpoint) => css`
display: flex;
@@ -82,7 +66,11 @@ interface Props {
ajaxUrl: string;
}
-export const MostViewedFooter = ({ sectionName, format, ajaxUrl }: Props) => {
+export const MostViewedFooterLayout = ({
+ sectionName,
+ format,
+ ajaxUrl,
+}: Props) => {
// Example usage of AB Tests
// Used in the Cypress tests as smoke test of the AB tests framework integration
const ABTestAPI = useAB();
@@ -130,15 +118,11 @@ export const MostViewedFooter = ({ sectionName, format, ajaxUrl }: Props) => {
Most popular
-
- }>
-
-
-
+
css`
position: relative;
@@ -83,7 +83,7 @@ type Props = {
dataLinkName: string;
};
-export const SecondTierItem = ({
+export const MostViewedFooterSecondTierItem = ({
trail,
title,
showRightBorder,
diff --git a/dotcom-rendering/src/web/components/MostViewedRight.stories.tsx b/dotcom-rendering/src/web/components/MostViewedRight.stories.tsx
index d8f041fc0f5..28fa20ef30c 100644
--- a/dotcom-rendering/src/web/components/MostViewedRight.stories.tsx
+++ b/dotcom-rendering/src/web/components/MostViewedRight.stories.tsx
@@ -7,7 +7,7 @@ import { LeftColumn } from './LeftColumn';
import { ArticleContainer } from './ArticleContainer';
import { ElementContainer } from './ElementContainer';
-import { mockTab1 } from './MostViewed/MostViewed.mocks';
+import { mockTab1 } from './MostViewed.mocks';
import { MostViewedRight } from './MostViewedRight';
export default {
diff --git a/dotcom-rendering/src/web/components/MostViewedRight.test.tsx b/dotcom-rendering/src/web/components/MostViewedRight.test.tsx
index 5ed808ad73b..4238ef1531b 100644
--- a/dotcom-rendering/src/web/components/MostViewedRight.test.tsx
+++ b/dotcom-rendering/src/web/components/MostViewedRight.test.tsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
import { useApi as useApi_ } from '../lib/useApi';
-import { mockTab1 } from './MostViewed/MostViewed.mocks';
+import { mockTab1 } from './MostViewed.mocks';
import { MostViewedRight } from './MostViewedRight';
const response = { data: mockTab1 };
diff --git a/dotcom-rendering/src/web/layouts/CommentLayout.tsx b/dotcom-rendering/src/web/layouts/CommentLayout.tsx
index 9082a45e0fa..223c847cf4b 100644
--- a/dotcom-rendering/src/web/layouts/CommentLayout.tsx
+++ b/dotcom-rendering/src/web/layouts/CommentLayout.tsx
@@ -44,6 +44,7 @@ import { Island } from '../components/Island';
import { MostViewedRightWrapper } from '../components/MostViewedRightWrapper.importable';
import { OnwardsUpper } from '../components/OnwardsUpper.importable';
import { OnwardsLower } from '../components/OnwardsLower.importable';
+import { MostViewedFooter } from '../components/MostViewedFooter.importable';
const StandardGrid = ({
children,
@@ -686,10 +687,18 @@ export const CommentLayout = ({
)}
{!isPaidContent && (
-
+
+
+
+
+
)}
(
+
+
+
+
+
)}
(
{
)}
{!isPaidContent && (
-
+
+
+
+
+
)}
(
{
)}
{!isPaidContent && (
-
+
+
+
+
+
)}
(
+
+
+
+
+
)}
{
)}
{!isPaidContent && (
-
+
+
+
+
+
)}