diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
index b837ddb33bd..92097d86ef5 100644
--- a/dotcom-rendering/src/components/Card/Card.stories.tsx
+++ b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -1555,8 +1555,7 @@ export const WithSpecialPaletteVariations = () => {
{containerPalettes.map((containerPalette) => (
{
const hasSublinks = supportingContent && supportingContent.length > 0;
const sublinkPosition = decideSublinkPosition(
@@ -696,6 +698,14 @@ export const Card = ({
return
+
+ );
+ }
+
return (
{isStorylines ? (
);
+
+ if (isInSlimHomepageAbTestVariant) {
+ return (
+
+
+ );
+ }
+
+ return
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
-
+
{
return (
{
return (
-
+
(
-
-
-);
-Default.storyName = 'FixedLargeSlowXIV';
diff --git a/dotcom-rendering/src/components/FixedLargeSlowXIV.tsx b/dotcom-rendering/src/components/FixedLargeSlowXIV.tsx
deleted file mode 100644
index 4c5a87245a0..00000000000
--- a/dotcom-rendering/src/components/FixedLargeSlowXIV.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
- Card25Media25,
- Card25Media25SmallHeadline,
- Card75Media50Right,
- CardDefault,
-} from '../lib/cardWrappers';
-import { shouldPadWrappableRows } from '../lib/dynamicSlices';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedLargeSlowXIV = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice75 = trails.slice(0, 1);
- const firstSlice25 = trails.slice(1, 2);
- const secondSlice25 = trails.slice(2, 6);
- const thirdSlice25 = trails.slice(6, 14);
-
- return (
- <>
-
- {firstSlice75.map((card) => {
- return (
-
-
- );
- })}
- {firstSlice25.map((card) => {
- return (
-
-
- );
- })}
-
-
- {secondSlice25.map((card, cardIndex) => {
- return (
- 0}
- key={card.url}
- >
-
- );
- })}
-
-
- {thirdSlice25.map((card, cardIndex, { length }) => {
- const columns = 4;
- return (
-
-
- );
- })}
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedMediumFastXI.stories.tsx b/dotcom-rendering/src/components/FixedMediumFastXI.stories.tsx
deleted file mode 100644
index 348f25b4782..00000000000
--- a/dotcom-rendering/src/components/FixedMediumFastXI.stories.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedMediumFastXI } from './FixedMediumFastXI';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedMediumFastXI,
- title: 'Front Containers/Deprecated Containers/FixedMediumFastXI',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const OneTrail = () => (
-
-
-);
-OneTrail.storyName = 'with one trail';
-
-export const TwoTrails = () => (
-
-
-);
-TwoTrails.storyName = 'with two trails';
-
-export const ThreeTrails = () => (
-
-
-);
-ThreeTrails.storyName = 'with three trails';
-
-export const FourTrails = () => (
-
-
-);
-FourTrails.storyName = 'with four trails';
-
-export const FiveTrails = () => (
-
-
-);
-FiveTrails.storyName = 'with five trails';
-
-export const SixTrails = () => (
-
-
-);
-SixTrails.storyName = 'with six trails';
-
-export const SevenTrails = () => (
-
-
-);
-SevenTrails.storyName = 'with seven trails';
-
-export const EightTrails = () => (
-
-
-);
-EightTrails.storyName = 'with eight trails';
-
-export const NineTrails = () => (
-
-
-);
-NineTrails.storyName = 'with nine trails';
-
-export const TenTrails = () => (
-
-
-);
-TenTrails.storyName = 'with ten trails';
-
-export const ElevenTrails = () => (
-
-
-);
-ElevenTrails.storyName = 'with eleven trails';
diff --git a/dotcom-rendering/src/components/FixedMediumFastXI.tsx b/dotcom-rendering/src/components/FixedMediumFastXI.tsx
deleted file mode 100644
index 70a75ac4ec9..00000000000
--- a/dotcom-rendering/src/components/FixedMediumFastXI.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { CardDefault } from '../lib/cardWrappers';
-import { Card50_Card25_Card25 } from '../lib/dynamicSlices';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-const decideOffset = ({
- length,
- position,
-}: {
- length: number;
- position: number;
-}): boolean => {
- if (length <= 5) return false;
- switch (length) {
- case 6: {
- switch (position) {
- case 2:
- return true;
- default:
- return false;
- }
- }
- case 7:
- return false;
- case 8: {
- if (position <= 4) return true;
- else return false;
- }
- }
- return false;
-};
-
-export const FixedMediumFastXI = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice = trails.slice(0, 3);
- const remaining = trails.slice(3, 11);
- return (
- <>
-
- {remaining.map((trail, trailIndex) => (
-
-
- ))}
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedMediumFastXII.stories.tsx b/dotcom-rendering/src/components/FixedMediumFastXII.stories.tsx
deleted file mode 100644
index edffdc1fffd..00000000000
--- a/dotcom-rendering/src/components/FixedMediumFastXII.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedMediumFastXII } from './FixedMediumFastXII';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedMediumFastXII,
- title: 'Front Containers/Deprecated Containers/FixedMediumFastXII',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedMediumFastXII';
diff --git a/dotcom-rendering/src/components/FixedMediumFastXII.tsx b/dotcom-rendering/src/components/FixedMediumFastXII.tsx
deleted file mode 100644
index f5f06ec66f7..00000000000
--- a/dotcom-rendering/src/components/FixedMediumFastXII.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Card25Media25, CardDefault } from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedMediumFastXII = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice25 = trails.slice(0, 4);
- const remaining = trails.slice(4, 12);
-
- return (
- <>
-
- {firstSlice25.map((trail, index) => {
- return (
- 0}
- >
-
- );
- })}
-
-
- {remaining.map((trail, index) => {
- return (
-
-
- );
- })}
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedMediumSlowVI.stories.tsx b/dotcom-rendering/src/components/FixedMediumSlowVI.stories.tsx
deleted file mode 100644
index fa7244462ce..00000000000
--- a/dotcom-rendering/src/components/FixedMediumSlowVI.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedMediumSlowVI } from './FixedMediumSlowVI';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedMediumSlowVI,
- title: 'Front Containers/Deprecated Containers/FixedMediumSlowVI',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedMediumSlowVI';
diff --git a/dotcom-rendering/src/components/FixedMediumSlowVI.tsx b/dotcom-rendering/src/components/FixedMediumSlowVI.tsx
deleted file mode 100644
index fc956efa2d9..00000000000
--- a/dotcom-rendering/src/components/FixedMediumSlowVI.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
- Card25Media25TallNoTrail,
- Card25Media25TallSmallHeadline,
- Card75Media50Right,
-} from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedMediumSlowVI = ({
- trails,
- containerPalette,
- showAge,
- imageLoading,
- serverTime,
-}: Props) => {
- const firstSlice75 = trails.slice(0, 1);
- const firstSlice25 = trails.slice(1, 2);
- const secondSlice25 = trails.slice(2, 6);
-
- return (
- <>
-
- {firstSlice75.map((trail) => (
-
-
- ))}
- {firstSlice25.map((trail) => (
-
-
- ))}
-
-
- {secondSlice25.map((trail, index) => (
- 0}>
-
- ))}
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedMediumSlowVII.stories.tsx b/dotcom-rendering/src/components/FixedMediumSlowVII.stories.tsx
deleted file mode 100644
index ac23ff1102b..00000000000
--- a/dotcom-rendering/src/components/FixedMediumSlowVII.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedMediumSlowVII } from './FixedMediumSlowVII';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedMediumSlowVII,
- title: 'Front Containers/Deprecated Containers/FixedMediumSlowVII',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedMediumSlowVII';
diff --git a/dotcom-rendering/src/components/FixedMediumSlowVII.tsx b/dotcom-rendering/src/components/FixedMediumSlowVII.tsx
deleted file mode 100644
index 2a55104f77b..00000000000
--- a/dotcom-rendering/src/components/FixedMediumSlowVII.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import {
- Card25Media25Tall,
- Card25Media25TallSmallHeadline,
- Card50Media50,
-} from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedMediumSlowVII = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice50 = trails.slice(0, 1);
- const firstSlice25 = trails.slice(1, 3);
- const secondSlice25 = trails.slice(3, 7);
-
- return (
- <>
-
- {firstSlice50.map((trail) => (
-
-
- ))}
-
- {firstSlice25.map((trail) => (
-
-
- ))}
-
-
- {secondSlice25.map((trail, index) => (
- 0}>
-
- ))}
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedMediumSlowXIIMPU.stories.tsx b/dotcom-rendering/src/components/FixedMediumSlowXIIMPU.stories.tsx
deleted file mode 100644
index cf4c1f7914d..00000000000
--- a/dotcom-rendering/src/components/FixedMediumSlowXIIMPU.stories.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedMediumSlowXIIMPU } from './FixedMediumSlowXIIMPU';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedMediumSlowXIIMPU,
- title: 'Front Containers/Deprecated Containers/FixedMediumSlowXIIMPU',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const OneTrail = () => (
-
-
-);
-OneTrail.storyName = 'with one trail';
-
-export const TwoTrails = () => (
-
-
-);
-TwoTrails.storyName = 'with two trails';
-
-export const ThreeTrails = () => (
-
-
-);
-ThreeTrails.storyName = 'with three trails';
-
-export const FourTrails = () => (
-
-
-);
-FourTrails.storyName = 'with four trails';
-
-export const FiveTrails = () => (
-
-
-);
-FiveTrails.storyName = 'with five trails';
-
-export const SixTrails = () => (
-
-
-);
-SixTrails.storyName = 'with six trails';
-
-export const SevenTrails = () => (
-
-
-);
-SevenTrails.storyName = 'with seven trails';
-
-export const EightTrails = () => (
-
-
-);
-EightTrails.storyName = 'with eight trails';
-
-export const NineTrails = () => (
-
-
-);
-NineTrails.storyName = 'with nine trails';
diff --git a/dotcom-rendering/src/components/FixedMediumSlowXIIMPU.tsx b/dotcom-rendering/src/components/FixedMediumSlowXIIMPU.tsx
deleted file mode 100644
index 03d706ec422..00000000000
--- a/dotcom-rendering/src/components/FixedMediumSlowXIIMPU.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import {
- Card100Media100Tall,
- Card33Media33MobileTopTall,
- Card33Media33Tall,
- CardDefault,
-} from '../lib/cardWrappers';
-import { shouldPadWrappableRows } from '../lib/dynamicSlices';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- containerPalette?: DCRContainerPalette;
- imageLoading: Loading;
- serverTime?: number;
- showAge?: boolean;
-};
-
-/* .___________.___________.___________.
- * |###########|###########|###########|
- * | | | |
- * |___________|___________|___________|
- */
-const Card33_Card33_Card33 = ({
- trails,
- containerPalette,
- showAge,
- padBottom,
- imageLoading,
- serverTime,
-}: {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- serverTime?: number;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- padBottom?: boolean;
-}) => {
- const card33 = trails.slice(0, 1);
- const cards33 = trails.slice(1, 3);
-
- return (
-
- {card33.map((trail) => (
-
-
- ))}
- {cards33.map((trail) => (
-
-
- ))}
-
- );
-};
-
-/* .___________.___________.
- * |###########|###########|
- * | | |
- * |___________|___________|
- */
-const Card50_Card50 = ({
- trails,
- containerPalette,
- showAge,
- padBottom,
- imageLoading,
- serverTime,
-}: {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- serverTime?: number;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- padBottom?: boolean;
-}) => {
- const card50 = trails.slice(0, 1);
- const cards50 = trails.slice(1);
- return (
-
- {card50.map((trail) => (
-
-
- ))}
- {cards50.map((trail) => (
-
-
- ))}
-
- );
-};
-
-/**
- * @deprecated Adverts are no longer shown within containers. We no
- * longer use containers that reserve a space for an MPU advert.
- */
-export const FixedMediumSlowXIIMPU = ({
- trails,
- containerPalette,
- showAge,
- imageLoading,
- serverTime,
-}: Props) => {
- const firstSlice = trails.slice(0, 3);
- const remaining = trails.slice(3, 9);
- return (
- <>
- {trails.length === 1 ? (
-
-
- {trails.map((trail) => (
-
-
- ) : trails.length === 2 ? (
-
- {remaining.map((trail, trailIndex) => (
-
-
- ))}
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedSmallFastVIII.stories.tsx b/dotcom-rendering/src/components/FixedSmallFastVIII.stories.tsx
deleted file mode 100644
index ab825c68e9f..00000000000
--- a/dotcom-rendering/src/components/FixedSmallFastVIII.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedSmallFastVIII } from './FixedSmallFastVIII';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedSmallFastVIII,
- title: 'Front Containers/Deprecated Containers/FixedSmallFastVIII',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedSmallFastVIII';
diff --git a/dotcom-rendering/src/components/FixedSmallFastVIII.tsx b/dotcom-rendering/src/components/FixedSmallFastVIII.tsx
deleted file mode 100644
index e74d16ce15e..00000000000
--- a/dotcom-rendering/src/components/FixedSmallFastVIII.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Card25Media25, CardDefault } from '../lib/cardWrappers';
-import { shouldPadWrappableRows } from '../lib/dynamicSlices';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedSmallFastVIII = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- if (!trails[0]) return null;
- const firstSlice25 = trails.slice(0, 2);
- const remaining = trails.slice(2, 8);
-
- return (
-
- {firstSlice25.map((card, cardIndex) => {
- return (
-
-
- );
- })}
-
-
- {remaining.map((card, cardIndex) => {
- const columns = 2;
- return (
-
-
- );
- })}
-
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedSmallSlowI.stories.tsx b/dotcom-rendering/src/components/FixedSmallSlowI.stories.tsx
deleted file mode 100644
index a309b053d6a..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowI.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedSmallSlowI } from './FixedSmallSlowI';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedSmallSlowI,
- title: 'Front Containers/Deprecated Containers/FixedSmallSlowI',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedSmallSlowI';
diff --git a/dotcom-rendering/src/components/FixedSmallSlowI.tsx b/dotcom-rendering/src/components/FixedSmallSlowI.tsx
deleted file mode 100644
index 69c8d18182e..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowI.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Card100Media75 } from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedSmallSlowI = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice100 = trails.slice(0, 1);
-
- return (
-
- {firstSlice100.map((card) => (
-
-
- ))}
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedSmallSlowIII.stories.tsx b/dotcom-rendering/src/components/FixedSmallSlowIII.stories.tsx
deleted file mode 100644
index df9f8a3da56..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowIII.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedSmallSlowIII } from './FixedSmallSlowIII';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedSmallSlowIII,
- title: 'Front Containers/Deprecated Containers/FixedSmallSlowIII',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedSmallSlowIII';
diff --git a/dotcom-rendering/src/components/FixedSmallSlowIII.tsx b/dotcom-rendering/src/components/FixedSmallSlowIII.tsx
deleted file mode 100644
index 16be9d1b7c9..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowIII.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Card25Media25Tall, Card50Media50 } from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedSmallSlowIII = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice50 = trails.slice(0, 1);
- const firstSlice25 = trails.slice(1, 3);
-
- return (
-
- {firstSlice50.map((trail) => (
-
-
- ))}
- {firstSlice25.map((trail) => (
-
-
- ))}
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedSmallSlowIV.stories.tsx b/dotcom-rendering/src/components/FixedSmallSlowIV.stories.tsx
deleted file mode 100644
index 88599e5b485..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowIV.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedSmallSlowIV } from './FixedSmallSlowIV';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedSmallSlowIV,
- title: 'Front Containers/Deprecated Containers/FixedSmallSlowIV',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedSmallSlowIV';
diff --git a/dotcom-rendering/src/components/FixedSmallSlowIV.tsx b/dotcom-rendering/src/components/FixedSmallSlowIV.tsx
deleted file mode 100644
index 61abae4aac6..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowIV.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Card25Media25 } from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedSmallSlowIV = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice25 = trails.slice(0, 4);
-
- return (
-
- {firstSlice25.map((trail, index) => {
- return (
- 0}>
-
- );
- })}
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedSmallSlowVHalf.stories.tsx b/dotcom-rendering/src/components/FixedSmallSlowVHalf.stories.tsx
deleted file mode 100644
index 35da2505f36..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowVHalf.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedSmallSlowVHalf } from './FixedSmallSlowVHalf';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedSmallSlowVHalf,
- title: 'Front Containers/Deprecated Containers/FixedSmallSlowVHalf',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedSmallSlowVHalf';
diff --git a/dotcom-rendering/src/components/FixedSmallSlowVHalf.tsx b/dotcom-rendering/src/components/FixedSmallSlowVHalf.tsx
deleted file mode 100644
index 049dc5995e2..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowVHalf.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Card50Media50, CardDefaultMediaMobile } from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedSmallSlowVHalf = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice50 = trails.slice(0, 1);
- const remaining = trails.slice(1, 5);
-
- return (
-
- {firstSlice50.map((trail) => {
- return (
-
-
- );
- })}
-
-
- {remaining.map((trail) => {
- return (
-
-
- );
- })}
-
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FixedSmallSlowVMPU.stories.tsx b/dotcom-rendering/src/components/FixedSmallSlowVMPU.stories.tsx
deleted file mode 100644
index 8d5c28ba012..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowVMPU.stories.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedSmallSlowVMPU } from './FixedSmallSlowVMPU';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedSmallSlowVMPU,
- title: 'Front Containers/Deprecated Containers/FixedSmallSlowVMPU',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const FourCards = () => (
-
-
-);
-
-FourCards.storyName = 'With 4 cards';
-
-export const ThreeCards = () => (
-
-
-);
-
-ThreeCards.storyName = 'With 3 cards';
-
-export const TwoCards = () => (
-
-
-);
-
-TwoCards.storyName = 'With 2 cards';
-
-export const OneCard = () => (
-
-
-);
-
-OneCard.storyName = 'With 1 card';
diff --git a/dotcom-rendering/src/components/FixedSmallSlowVMPU.tsx b/dotcom-rendering/src/components/FixedSmallSlowVMPU.tsx
deleted file mode 100644
index 8af6450cdde..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowVMPU.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Card25Media25SmallHeadline } from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-/**
- * @deprecated Adverts are no longer shown within containers. We no
- * longer use containers that reserve a space for an MPU advert.
- */
-export const FixedSmallSlowVMPU = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => (
-
- {trails.slice(0, 4).map((card, cardIndex) => {
- return (
- 0}
- key={card.url}
- >
-
- );
- })}
-
-);
diff --git a/dotcom-rendering/src/components/FixedSmallSlowVThird.stories.tsx b/dotcom-rendering/src/components/FixedSmallSlowVThird.stories.tsx
deleted file mode 100644
index 81e5c656877..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowVThird.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
-import { FixedSmallSlowVThird } from './FixedSmallSlowVThird';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedSmallSlowVThird,
- title: 'Front Containers/Deprecated Containers/FixedSmallSlowVThird',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-);
-Default.storyName = 'FixedSmallSlowVThird';
diff --git a/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx b/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx
deleted file mode 100644
index 61b36ce02ff..00000000000
--- a/dotcom-rendering/src/components/FixedSmallSlowVThird.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Card25Media25 } from '../lib/cardWrappers';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { LI } from './Card/components/LI';
-import { UL } from './Card/components/UL';
-import type { Loading } from './CardPicture';
-import { FrontCard } from './FrontCard';
-
-type Props = {
- trails: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-};
-
-export const FixedSmallSlowVThird = ({
- trails,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: Props) => {
- const firstSlice25 = trails.slice(0, 2);
- const remaining = trails.slice(2, 5);
-
- return (
-
- {firstSlice25.map((trail, index) => {
- return (
- 0}
- percentage="25%"
- >
-
- );
- })}
-
-
- {remaining.map((trail) => {
- return (
-
-
- );
- })}
-
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx b/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
index 603fff642d6..8073f6f5207 100644
--- a/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
+++ b/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
@@ -157,13 +157,16 @@ const meta = {
imageLoading: 'eager',
aspectRatio: '5:4',
collectionId: 1,
+ isInSlimHomepageAbTestVariant: false,
},
render: ({ frontSectionTitle, ...args }) => (
@@ -190,6 +193,14 @@ export const SplashWithStandards: Story = {
},
};
+export const SplashWithStandardsInSlimHomepageAbTest: Story = {
+ name: 'Splash with big and standard cards in the Slim Homepage AB Test',
+ args: {
+ ...SplashWithStandards.args,
+ isInSlimHomepageAbTestVariant: true,
+ },
+};
+
export const SplashWithSublinks: Story = {
name: 'Standard splash with sublinks',
args: {
@@ -206,12 +217,7 @@ export const SplashWithSublinks: Story = {
title: string;
supportingContent?: DCRSupportingContent[];
}) => (
-
+
(
-
+
(
-
+
(
-
+
(
-
+
{containerPalettes.map((containerPalette) => (
(
-
+
(
-
-);
+ isInSlimHomepageAbTestVariant,
+}: ImmersiveCardLayoutProps) => {
+ const headlineSizes = { desktop: 'medium', tablet: 'small' } as const;
+
+ return (
+
+ );
+};
type BoostedSplashProperties = {
headlineSizes: ResponsiveFontSize;
@@ -170,13 +182,18 @@ const decideSplashCardProperties = (
useLargerHeadlineSizeDesktop: boolean,
avatarUrl: boolean,
isStorylines?: boolean,
+ isInSlimHomepageAbTestVariant?: boolean,
): BoostedSplashProperties => {
switch (boostLevel) {
// The default boost level is equal to no boost. It is the same as the default card layout.
case 'default':
return {
headlineSizes: {
- desktop: useLargerHeadlineSizeDesktop ? 'large' : 'medium',
+ desktop:
+ useLargerHeadlineSizeDesktop &&
+ !isInSlimHomepageAbTestVariant
+ ? 'large'
+ : 'medium',
tablet: 'medium',
mobile: 'medium',
},
@@ -190,13 +207,13 @@ const decideSplashCardProperties = (
subtitleSize: 'medium',
};
case 'boost':
- const boostSupportingContentAlignment: Alignment =
- isStorylines || supportingContentLength < 4
- ? 'vertical'
- : 'horizontal';
-
return {
headlineSizes: {
+ wide:
+ !isInSlimHomepageAbTestVariant &&
+ useLargerHeadlineSizeDesktop
+ ? 'xlarge'
+ : 'large',
desktop: useLargerHeadlineSizeDesktop ? 'xlarge' : 'large',
tablet: 'large',
mobile: 'large',
@@ -204,7 +221,10 @@ const decideSplashCardProperties = (
mediaPositionOnDesktop: 'right',
mediaPositionOnMobile: mediaCard ? 'top' : 'bottom',
mediaSize: avatarUrl ? 'large' : 'xlarge',
- supportingContentAlignment: boostSupportingContentAlignment,
+ supportingContentAlignment:
+ isStorylines || supportingContentLength < 4
+ ? 'vertical'
+ : 'horizontal',
liveUpdatesAlignment: 'vertical',
trailTextSize: 'regular',
subtitleSize: 'medium',
@@ -212,6 +232,11 @@ const decideSplashCardProperties = (
case 'megaboost':
return {
headlineSizes: {
+ wide:
+ !isInSlimHomepageAbTestVariant &&
+ useLargerHeadlineSizeDesktop
+ ? 'xxlarge'
+ : 'xlarge',
desktop: useLargerHeadlineSizeDesktop
? 'xxlarge'
: 'xlarge',
@@ -229,6 +254,11 @@ const decideSplashCardProperties = (
case 'gigaboost':
return {
headlineSizes: {
+ wide: isInSlimHomepageAbTestVariant
+ ? 'xlarge'
+ : useLargerHeadlineSizeDesktop
+ ? 'xxxlarge'
+ : 'xxlarge',
desktop: useLargerHeadlineSizeDesktop
? 'xxxlarge'
: 'xxlarge',
@@ -257,6 +287,7 @@ type SplashCardLayoutProps = {
containerLevel: DCRContainerLevel;
collectionId: number;
isStorylines?: boolean;
+ isInSlimHomepageAbTestVariant?: boolean;
};
const SplashCardLayout = ({
@@ -270,6 +301,7 @@ const SplashCardLayout = ({
containerLevel,
collectionId,
isStorylines,
+ isInSlimHomepageAbTestVariant,
}: SplashCardLayoutProps) => {
const card = cards[0];
if (!card) return null;
@@ -283,6 +315,7 @@ const SplashCardLayout = ({
serverTime={serverTime}
imageLoading={imageLoading}
collectionId={collectionId}
+ isInSlimHomepageAbTestVariant={isInSlimHomepageAbTestVariant}
/>
);
}
@@ -309,6 +342,7 @@ const SplashCardLayout = ({
useLargerHeadlineSizeDesktop,
!!card.avatarUrl,
isStorylines,
+ isInSlimHomepageAbTestVariant,
);
return (
@@ -355,7 +389,10 @@ const SplashCardLayout = ({
subtitleSize={subtitleSize}
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
isStorylines={isStorylines}
- starRatingSize={'medium'}
+ starRatingSize="medium"
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
@@ -368,6 +405,7 @@ type BoostedCardProperties = {
liveUpdatesPosition: Position;
supportingContentAlignment: Alignment;
subtitleSize: SubtitleSize;
+ isInSlimHomepageAbTestVariant?: boolean;
};
/**
@@ -378,11 +416,13 @@ const decideCardProperties = (
supportingContentLength: number,
boostLevel: Omit = 'boost',
avatarUrl?: string,
+ isInSlimHomepageAbTestVariant = false,
): BoostedCardProperties => {
switch (boostLevel) {
case 'megaboost':
return {
headlineSizes: {
+ wide: isInSlimHomepageAbTestVariant ? 'small' : 'medium',
desktop: 'medium',
tablet: 'small',
mobile: 'medium',
@@ -422,6 +462,7 @@ type FullWidthCardLayoutProps = {
containerLevel: DCRContainerLevel;
collectionId: number;
isStorylines?: boolean;
+ isInSlimHomepageAbTestVariant?: boolean;
};
const FullWidthCardLayout = ({
@@ -436,6 +477,7 @@ const FullWidthCardLayout = ({
containerLevel,
collectionId,
isStorylines,
+ isInSlimHomepageAbTestVariant,
}: FullWidthCardLayoutProps) => {
const card = cards[0];
if (!card) return null;
@@ -450,6 +492,7 @@ const FullWidthCardLayout = ({
card.supportingContent?.length ?? 0,
card.boostLevel,
card.avatarUrl,
+ isInSlimHomepageAbTestVariant,
);
const shouldShowImmersive = card.isImmersive;
@@ -512,7 +555,10 @@ const FullWidthCardLayout = ({
showKickerImage={card.format.design === ArticleDesign.Audio}
subtitleSize={subtitleSize}
isStorylines={isStorylines}
- starRatingSize={'medium'}
+ starRatingSize="medium"
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
@@ -531,6 +577,7 @@ type HalfWidthCardLayoutProps = {
isLastRow: boolean;
containerLevel: DCRContainerLevel;
isStorylines?: boolean;
+ isInSlimHomepageAbTestVariant?: boolean;
};
const HalfWidthCardLayout = ({
@@ -545,6 +592,7 @@ const HalfWidthCardLayout = ({
isLastRow,
containerLevel,
isStorylines,
+ isInSlimHomepageAbTestVariant,
}: HalfWidthCardLayoutProps) => {
if (cards.length === 0) return null;
@@ -597,9 +645,19 @@ const HalfWidthCardLayout = ({
(containerLevel !== 'Primary' && cardIndex > 0)
}
trailText={undefined}
- headlineSizes={undefined}
+ headlineSizes={
+ isInSlimHomepageAbTestVariant
+ ? {
+ ...defaultFontSizes,
+ wide: defaultFontSizes.tablet,
+ }
+ : defaultFontSizes
+ }
canPlayInline={false}
isStorylines={isStorylines}
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
);
@@ -618,6 +676,7 @@ export const FlexibleGeneral = ({
containerLevel = 'Primary',
collectionId,
isStorylines = false,
+ isInSlimHomepageAbTestVariant = false,
}: Props) => {
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
...snap,
@@ -647,6 +706,9 @@ export const FlexibleGeneral = ({
containerLevel={containerLevel}
collectionId={collectionId}
isStorylines={isStorylines}
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
)}
{groupedCards.map((row, i) => {
@@ -666,6 +728,9 @@ export const FlexibleGeneral = ({
containerLevel={containerLevel}
collectionId={collectionId}
isStorylines={isStorylines}
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
);
@@ -686,6 +751,9 @@ export const FlexibleGeneral = ({
isLastRow={i === groupedCards.length - 1}
containerLevel={containerLevel}
isStorylines={isStorylines}
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
);
}
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx b/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
index 95c9c333222..69831123a5c 100644
--- a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
+++ b/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
@@ -85,13 +85,16 @@ const meta = {
imageLoading: 'eager',
aspectRatio: '5:4',
frontSectionTitle: 'Flexible special',
+ isInSlimHomepageAbTestVariant: false,
},
render: ({ frontSectionTitle, ...args }) => (
@@ -157,6 +160,13 @@ export const Five: Story = {
collectionId: 1,
},
};
+export const FiveSlimHomepageAbTest: Story = {
+ name: 'With one splash card and four standard cards in the Slim Homepage AB Test',
+ args: {
+ ...Five.args,
+ isInSlimHomepageAbTestVariant: true,
+ },
+};
export const OpinionStandardCards: Story = {
name: 'With one splash card and two standard opinion cards',
@@ -359,8 +369,7 @@ export const WithSpecialPaletteVariations = {
<>
{containerPalettes.map((containerPalette) => (
{
const shouldDisplaySublinksHorizontally =
supportingContentLength >= 3 || hasLiveUpdates;
@@ -63,6 +65,11 @@ const determineCardProperties = (
case 'default':
return {
headlineSizes: {
+ wide: isInSlimHomepageAbTestVariant
+ ? 'large'
+ : imageSuppressed
+ ? 'xxlarge'
+ : 'xlarge',
desktop: imageSuppressed ? 'xxlarge' : 'xlarge',
tablet: 'large',
mobile: 'medium',
@@ -80,6 +87,11 @@ const determineCardProperties = (
case 'boost':
return {
headlineSizes: {
+ wide: isInSlimHomepageAbTestVariant
+ ? 'xlarge'
+ : imageSuppressed
+ ? 'xxxlarge'
+ : 'xxlarge',
desktop: imageSuppressed ? 'xxxlarge' : 'xxlarge',
tablet: 'xlarge',
mobile: 'large',
@@ -97,6 +109,11 @@ const determineCardProperties = (
case 'megaboost':
return {
headlineSizes: {
+ wide: isInSlimHomepageAbTestVariant
+ ? 'xlarge'
+ : imageSuppressed
+ ? 'xxxlarge'
+ : 'xxlarge',
desktop: imageSuppressed ? 'xxxlarge' : 'xxlarge',
tablet: 'xlarge',
mobile: 'xlarge',
@@ -112,6 +129,9 @@ const determineCardProperties = (
case 'gigaboost':
return {
headlineSizes: {
+ wide: isInSlimHomepageAbTestVariant
+ ? 'xxlarge'
+ : 'xxxlarge',
desktop: 'xxxlarge',
tablet: 'xxlarge',
mobile: 'xxlarge',
@@ -138,6 +158,7 @@ type OneCardLayoutProps = {
isFirstRow: boolean;
containerLevel: DCRContainerLevel;
isSplashCard?: boolean;
+ isInSlimHomepageAbTestVariant?: boolean;
};
export const OneCardLayout = ({
@@ -151,6 +172,7 @@ export const OneCardLayout = ({
isFirstRow,
containerLevel,
isSplashCard,
+ isInSlimHomepageAbTestVariant = false,
}: OneCardLayoutProps) => {
const card = cards[0];
if (!card) return null;
@@ -170,6 +192,7 @@ export const OneCardLayout = ({
isMediaCard(card.format),
!card.image,
card.showLivePlayable,
+ isInSlimHomepageAbTestVariant,
);
return (
@@ -206,6 +229,9 @@ export const OneCardLayout = ({
headlinePosition={isSplashCard ? 'outer' : 'inner'}
subtitleSize={subtitleSize}
starRatingSize="medium"
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
@@ -233,6 +259,7 @@ type TwoOrFourCardLayoutProps = {
aspectRatio: AspectRatio;
isFirstRow: boolean;
containerLevel: DCRContainerLevel;
+ isInSlimHomepageAbTestVariant?: boolean;
};
const TwoOrFourCardLayout = ({
@@ -245,6 +272,7 @@ const TwoOrFourCardLayout = ({
aspectRatio,
isFirstRow,
containerLevel,
+ isInSlimHomepageAbTestVariant,
}: TwoOrFourCardLayoutProps) => {
if (cards.length === 0) return null;
const hasTwoOrFewerCards = cards.length <= 2;
@@ -273,7 +301,14 @@ const TwoOrFourCardLayout = ({
isMediaCard(card.format) || !!card.isNewsletter,
)}
mediaPositionOnMobile="left"
- headlineSizes={undefined}
+ headlineSizes={
+ isInSlimHomepageAbTestVariant
+ ? {
+ ...defaultFontSizes,
+ wide: defaultFontSizes.tablet,
+ }
+ : defaultFontSizes
+ }
/* we don't want to support sublinks on standard cards here so we hard code to undefined */
supportingContent={undefined}
mediaSize="small"
@@ -287,6 +322,9 @@ const TwoOrFourCardLayout = ({
!isMediaCard(card.format))
}
canPlayInline={false}
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
);
@@ -304,6 +342,7 @@ export const FlexibleSpecial = ({
aspectRatio,
containerLevel = 'Primary',
collectionId,
+ isInSlimHomepageAbTestVariant = false,
}: Props) => {
const snaps = [...groupedTrails.snap].slice(0, 1).map((snap) => ({
...snap,
@@ -332,6 +371,9 @@ export const FlexibleSpecial = ({
isLastRow={splash.length === 0 && cards.length === 0}
containerLevel={containerLevel}
isSplashCard={false}
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
)}
{isNonEmptyArray(splash) && (
@@ -346,6 +388,9 @@ export const FlexibleSpecial = ({
isFirstRow={!isNonEmptyArray(snaps)}
containerLevel={containerLevel}
isSplashCard={true}
+ isInSlimHomepageAbTestVariant={
+ isInSlimHomepageAbTestVariant
+ }
/>
)}
@@ -358,6 +403,7 @@ export const FlexibleSpecial = ({
aspectRatio={aspectRatio}
isFirstRow={!isNonEmptyArray(snaps) && !isNonEmptyArray(splash)}
containerLevel={containerLevel}
+ isInSlimHomepageAbTestVariant={isInSlimHomepageAbTestVariant}
/>
);
diff --git a/dotcom-rendering/src/components/FrontSection.stories.tsx b/dotcom-rendering/src/components/FrontSection.stories.tsx
index 07b28960fc3..3735d8a623c 100644
--- a/dotcom-rendering/src/components/FrontSection.stories.tsx
+++ b/dotcom-rendering/src/components/FrontSection.stories.tsx
@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
import { breakpoints } from '@guardian/source/foundations';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { ReactNode } from 'react';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
import { LI } from './Card/components/LI';
import { FrontSection } from './FrontSection';
@@ -82,7 +81,6 @@ export default {
},
args: {
- discussionApiUrl,
editionId: 'UK',
children:
+
-
-
+
Insert call to action here
-
+
diff --git a/dotcom-rendering/src/components/FrontSection.tsx b/dotcom-rendering/src/components/FrontSection.tsx
index 4581b7aea1c..0fc1347e3d8 100644
--- a/dotcom-rendering/src/components/FrontSection.tsx
+++ b/dotcom-rendering/src/components/FrontSection.tsx
@@ -3,7 +3,6 @@ import { isString } from '@guardian/libs';
import { between, from, space, until } from '@guardian/source/foundations';
import { pageSkinContainer } from '../layouts/lib/pageSkin';
import { type EditionId, isNetworkFront } from '../lib/edition';
-import { hideAge } from '../lib/hideAge';
import { getOphanComponents } from '../lib/labs';
import { palette as schemePalette } from '../palette';
import type { CollectionBranding } from '../types/branding';
@@ -26,7 +25,6 @@ import { Island } from './Island';
import { LabsSectionHeader } from './LabsSectionHeader';
import { MostPopularFrontRight } from './MostPopularFrontRight';
import { ShowHideButton } from './ShowHideButton';
-import { ShowMore } from './ShowMore.importable';
import { Treats } from './Treats';
type Props = {
@@ -38,7 +36,6 @@ type Props = {
url?: string;
/** The html `id` property of the element */
sectionId?: string;
- collectionId?: string;
pageId?: string;
/** Defaults to `true`. If we should render the top border */
showTopBorder?: boolean;
@@ -75,9 +72,6 @@ type Props = {
editionId: EditionId;
/** A list of related links that appear in the bottom of the left column on fronts */
treats?: TreatType[];
- /** Enable the "Show More" button on this container to allow readers to load more cards */
- canShowMore?: boolean;
- ajaxUrl?: string;
/** Puts pagination at the bottom of the container allowing the user to navigate to other pages,
* usually used on the last container on a page */
pagination?: TagPagePagination;
@@ -97,8 +91,8 @@ type Props = {
* The Slim Homepage AB test requires some sections to have reduced width so that
* the Most Popular Front Right component can be placed on the right-hand side.
*/
- slimifySectionForAbTest?: boolean;
- discussionApiUrl: string;
+ slimifySectionForSlimHomepageAbTest?: boolean;
+ showRightContentForSlimHomepageAbTest?: boolean;
collectionBranding?: CollectionBranding;
isTagPage?: boolean;
hasNavigationButtons?: boolean;
@@ -552,8 +546,6 @@ const sponsoredContentLabelWrapper = css`
* in the centre. Extra elements can be passed to `leftContent`, which will
* automatically fall into the left column on larger breakpoints.
*
- * Defaults to an HTML `section`, but the specific tag can be set.
- *
* @example
*
* from `mobile` (320) to `phablet` (660)
@@ -563,9 +555,6 @@ const sponsoredContentLabelWrapper = css`
* ├───────┤
* │▒▒▒▒▒▒▒│
* │▒▒▒▒▒▒▒│
- * ├───────┤
- * │Show │
- * |More │
* └───────┘
*
* from `tablet` (740) to `desktop` (980)
@@ -577,8 +566,6 @@ const sponsoredContentLabelWrapper = css`
* ├───────────────────────┤
* │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
* │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * ├───────────────────────┤
- * │Show More │
* └───────────────────────┘
*
* on `leftCol` (1140) if component is toggleable
@@ -591,8 +578,6 @@ const sponsoredContentLabelWrapper = css`
* │ │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
* │Tre│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
* │ats│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * ├───┼─────────────────────┤
- * │ │Show More │
* └───┴─────────────────────┘
*
* on `leftCol` (1140) if component is not toggleable
@@ -605,8 +590,6 @@ const sponsoredContentLabelWrapper = css`
* │ │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
* │Tre│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
* │ats│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
- * ├───┼──────────────────────┤
- * │ │Show More │
* └───┴──────────────────────┘
*
* on `wide` (1300)
@@ -619,8 +602,6 @@ const sponsoredContentLabelWrapper = css`
* │ │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │
* │ │▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │
* │Treat│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ │
- * ├─────┼─────────────────────────┤
- * │ │Show More │
* └─────┴─────────────────────────┘
*
*/
@@ -637,21 +618,18 @@ export const FrontSection = ({
ophanComponentLink,
ophanComponentName,
sectionId = '',
- collectionId,
pageId,
showDateHeader = false,
showTopBorder = true,
toggleable = false,
treats,
url,
- canShowMore,
- ajaxUrl,
pagination,
isOnPaidContentFront,
targetedTerritory,
hasPageSkin = false,
- slimifySectionForAbTest = false,
- discussionApiUrl,
+ slimifySectionForSlimHomepageAbTest = false,
+ showRightContentForSlimHomepageAbTest = false,
collectionBranding,
isTagPage = false,
hasNavigationButtons = false,
@@ -664,14 +642,6 @@ export const FrontSection = ({
const isToggleable = toggleable && !!sectionId;
const showVerticalRule = !hasPageSkin;
const isBetaContainer = !!containerLevel;
- const showMore =
- canShowMore &&
- !!title &&
- !!sectionId &&
- !!collectionId &&
- !!pageId &&
- !!ajaxUrl &&
- !isBetaContainer;
// These are for beta containers only
const useLargeSpacingMobile = !!isNextCollectionPrimary || isAboveMobileAd;
@@ -687,10 +657,6 @@ export const FrontSection = ({
})
: undefined;
- /**
- * id is being used to set the containerId in @see {ShowMore.importable.tsx}
- * this id pre-existed showMore so is probably also being used for something else.
- */
return (
- {slimifySectionForAbTest && sectionId === 'news' && (
-
-
-
-
- )}
+ {showRightContentForSlimHomepageAbTest &&
+ sectionId === 'news' && (
+
+
+
+
+ )}
- {slimifySectionForAbTest && sectionId === 'features' && (
-
-
-
-
- )}
+ {showRightContentForSlimHomepageAbTest &&
+ sectionId === 'features' && (
+
+
+
+
+ )}
- ) : showMore ? (
-
-
) : null}
{isLabs &&
diff --git a/dotcom-rendering/src/components/NavList.stories.tsx b/dotcom-rendering/src/components/NavList.stories.tsx
index f02b7c440be..b96b88ec682 100644
--- a/dotcom-rendering/src/components/NavList.stories.tsx
+++ b/dotcom-rendering/src/components/NavList.stories.tsx
@@ -1,5 +1,4 @@
import { breakpoints } from '@guardian/source/foundations';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
import { trails } from '../../fixtures/manual/trails-nav';
import { FrontSection } from './FrontSection';
import { NavList } from './NavList';
@@ -19,22 +18,14 @@ export default {
};
export const Default = () => (
-
+
);
Default.storyName = 'NavList';
export const DefaultWithImages = () => (
-
+
);
diff --git a/dotcom-rendering/src/components/Palettes.stories.tsx b/dotcom-rendering/src/components/Palettes.stories.tsx
index 854058d6e1c..7a0f023565a 100644
--- a/dotcom-rendering/src/components/Palettes.stories.tsx
+++ b/dotcom-rendering/src/components/Palettes.stories.tsx
@@ -1,7 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import type { ComponentProps } from 'react';
import { allModes } from '../../.storybook/modes';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
import { trails } from '../../fixtures/manual/trails';
import type { DCRGroupedTrails } from '../types/front';
import { FlexibleGeneral } from './FlexibleGeneral';
@@ -54,7 +53,6 @@ export const EventPalette: Story = {
containerPalette: 'EventPalette',
showDateHeader: true,
editionId: 'UK',
- discussionApiUrl,
},
flexibleGeneral: {
groupedTrails,
diff --git a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx
index de0d2c62baf..02ef737ee19 100644
--- a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx
+++ b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx
@@ -16,6 +16,7 @@ type Props = {
imageLoading: 'lazy' | 'eager';
aspectRatio: AspectRatio;
collectionId: number;
+ isInSlimHomepageAbTestVariant?: boolean;
};
/**
@@ -32,11 +33,18 @@ export const ScrollableFeature = ({
imageLoading,
aspectRatio,
collectionId,
+ isInSlimHomepageAbTestVariant,
}: Props) => {
const isBelowTabletBreakpoint = useMatchMedia(
removeMediaRulePrefix(until.tablet),
);
+ const headlineSizes = {
+ desktop: 'xsmall',
+ tablet: 'xxsmall',
+ mobile: 'xsmall',
+ } as const;
+
return (
(
@@ -100,6 +102,12 @@ type Story = StoryObj;
export const Default = {};
+export const WithSlimHomepageAbTest = {
+ args: {
+ isInSlimHomepageAbTestVariant: true,
+ },
+} satisfies Story;
+
export const Media = {
args: {
trails: [galleryTrails[0], galleryTrails[1], audioTrails[0]],
@@ -121,12 +129,7 @@ export const SelfHostedVideo = {
title: string;
videos: DCRFrontCard[];
}) => (
-
+
);
@@ -193,7 +196,6 @@ export const WithPrimaryContainer = {
render: (args) => (
@@ -225,7 +227,6 @@ export const WithSpecialPaletteVariations = {
{containerPalettes.map((containerPalette) => (
{
const isBelowTabletBreakpoint = useMatchMedia(
removeMediaRulePrefix(until.tablet),
@@ -52,6 +54,11 @@ export const ScrollableMedium = ({
? 'top'
: 'bottom';
+ const headlineSizes = {
+ desktop: 'xsmall',
+ tablet: 'xxsmall',
+ } as const;
+
return (
(
@@ -55,6 +57,13 @@ export const WithFourCards = {
},
} satisfies Story;
+export const WithFourCardsInSlimHomepageAbTest = {
+ args: {
+ ...WithFourCards.args,
+ isInSlimHomepageAbTestVariant: true,
+ },
+} satisfies Story;
+
export const WithThreeCards = {
args: {
trails: trails.slice(0, 3),
@@ -89,7 +98,6 @@ export const WithPrimaryContainer = {
render: (args) => (
@@ -121,7 +129,6 @@ export const WithSpecialPaletteVariations = {
{containerPalettes.map((containerPalette) => (
(
{
- if (isOpen && loading) return <>Loading;
- if (isOpen) {
- return (
- <>
- Less{' '}
-
- {/* The context of what we're hiding is likely more useful for screen-reader users */}
- {title}
-
-
- );
- }
- return <>More {title};
-};
-
-type Props = {
- title: string;
- pageId: string;
- /**
- * `collectionId` is the id of the collection as it figures in the fronts
- * config. It is used to generate the URL for the show-more API endpoint.
- */
- collectionId: string;
- /**
- * The value of the `id` attribute on the container element that this 'show more'
- * button sits beneath. The main container is server-side rendered, so this show more
- * button needs to access its contents on the client side so that we can check whether
- * any of the stories received from the `show-more` endpoint are already being displayed
- * in the main container. (This can happen due to a lag between when the page is SSRd
- * and when the user clicks the 'show more' button.)
- */
- sectionId: string;
- showAge: boolean;
- ajaxUrl: string;
- editionId: EditionId;
- containerPalette?: DCRContainerPalette;
- discussionApiUrl: string;
-};
-
-export const ShowMore = ({
- title,
- pageId,
- sectionId,
- collectionId,
- showAge,
- ajaxUrl,
- editionId,
- containerPalette,
- discussionApiUrl,
-}: Props) => {
- const [existingCardLinks, setExistingCardLinks] = useState([]);
- const [isOpen, setIsOpen] = useState(false);
-
- /**
- * Store the URLs of the cards in the main container for this button, to
- * allow us to filter out duplicated stories when we load them from the
- * 'show-more' endpoint.
- */
- useEffect(() => {
- const container = document.getElementById(`container-${sectionId}`);
- const containerLinks = Array.from(
- container?.querySelectorAll('a') ?? [],
- )
- .map((element) => element.attributes.getNamedItem('href')?.value)
- .filter(isNonNullable);
-
- setExistingCardLinks(containerLinks);
- }, [sectionId]);
-
- /** We only pass an actual URL to SWR when 'showMore' is true.
- * Toggling 'isOpen' will trigger a re-render
- * @see https://swr.vercel.app/docs/conditional-fetching#conditional
- */
- const url = isOpen
- ? `${ajaxUrl}/${pageId}/show-more/${collectionId}.json?dcr=true`
- : undefined;
- const { data, error, loading } = useApi(url);
-
- const cards =
- data &&
- enhanceCards(data, {
- cardInTagPage: false,
- editionId,
- discussionApiUrl,
- }).filter((card) => !existingCardLinks.includes(card.url));
-
- const showMoreContainerId = `show-more-${collectionId}`;
-
- useEffect(() => {
- /**
- * Focus the first of the new cards when they're loaded in.
- * There's no need to check `isOpen` here because if `isOpen` is
- * `false` then `filteredData` will be `undefined`.
- * */
-
- const [card] = cards ?? [];
- if (card) {
- const maybeFirstCard = document.querySelector(
- `#${showMoreContainerId} [data-link-name="${card.dataLinkName}"]`,
- );
- if (maybeFirstCard instanceof HTMLElement) {
- maybeFirstCard.focus();
- }
- }
- }, [cards, showMoreContainerId]);
-
- return (
- <>
-
- {cards && (
-
-
- {cards.map((card, cardIndex) => {
- const columns = 3;
- return (
-
-
- );
- })}
-
-
- )}
-
-
- Loads more stories and moves focus to first new story.
-
- {error && (
-
- Sorry, failed to load more stories. Retrying in a few
- seconds.
-
- )}
-
-
- );
-};
diff --git a/dotcom-rendering/src/components/ShowMore.stories.tsx b/dotcom-rendering/src/components/ShowMore.stories.tsx
deleted file mode 100644
index c82fed71609..00000000000
--- a/dotcom-rendering/src/components/ShowMore.stories.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { userEvent, within } from 'storybook/test';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/show-more-trails';
-import { customMockFetch } from '../lib/mockRESTCalls';
-import { ShowMore } from './ShowMore.importable';
-
-/**
- * Clicks the 'show more' button so that Chromatic can capture it the component
- * in its 'open' state.
- */
-const play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
- const canvas = within(canvasElement);
- await userEvent.click(canvas.getByRole('button'));
-};
-
-const title = 'Opinion';
-const pageId = 'uk/lifestyle';
-const collectionId = '5011-3940-8793-33a9';
-const ajaxUrl = 'https://api.nextgen.guardianapps.co.uk';
-const sectionId = 'container-id';
-const editionId = 'UK';
-
-const defaultProps = {
- title,
- ajaxUrl,
- pageId,
- collectionId,
- sectionId,
- showAge: false,
- discussionApiUrl,
- editionId,
-} satisfies Parameters[0];
-
-export default {
- component: ShowMore,
- title: 'Components/ShowMore',
-};
-
-const mockShowMoreSuccessRequestFetch = customMockFetch([
- {
- mockedMethod: 'GET',
- mockedUrl: `${ajaxUrl}/${pageId}/show-more/${collectionId}.json?dcr=true`,
- mockedStatus: 200,
- mockedBody: trails.slice(0, 6),
- },
-]);
-
-const mockShowMoreErrorRequestFetch = customMockFetch([
- {
- mockedMethod: 'GET',
- mockedUrl: `${ajaxUrl}/${pageId}/show-more/${collectionId}.json?dcr=true`,
- mockedStatus: 400,
- mockedBody: undefined,
- },
-]);
-
-export const ShowMoreSuccess = () => {
- global.fetch = mockShowMoreSuccessRequestFetch;
-
- return ShowMore(defaultProps);
-};
-
-ShowMoreSuccess.play = play;
-ShowMoreSuccess.storyName = 'ShowMore button, success';
-
-export const ShowMoreError = () => {
- global.fetch = mockShowMoreErrorRequestFetch;
-
- return ShowMore(defaultProps);
-};
-
-ShowMoreError.play = play;
-ShowMoreError.storyName = 'ShowMore button, error';
diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.stories.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.stories.tsx
index af1c2e6cf3f..899c4e06139 100644
--- a/dotcom-rendering/src/components/StaticFeatureTwo.stories.tsx
+++ b/dotcom-rendering/src/components/StaticFeatureTwo.stories.tsx
@@ -1,6 +1,5 @@
import { breakpoints } from '@guardian/source/foundations';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
import {
audioTrails,
galleryTrails,
@@ -36,7 +35,6 @@ const meta = {
render: (args) => (
@@ -97,12 +95,7 @@ export const SelfHostedVideo = {
title: string;
videos: DCRFrontCard[];
}) => (
-
+
);
@@ -175,7 +168,6 @@ export const WithSpecialPaletteVariations = {
{containerPalettes.map((containerPalette) => (
(
@@ -53,6 +55,14 @@ export const Four = {
},
};
+export const FourSlimHomepageAbTest = {
+ name: 'With Four Cards in Slim Homepage AB Test',
+ args: {
+ trails: trails.slice(0, 4),
+ isInSlimHomepageAbTestVariant: true,
+ },
+};
+
export const Three: Story = {
name: 'With Three Cards',
args: {
@@ -109,7 +119,6 @@ export const WithSpecialPaletteVariations = {
{containerPalettes.map((containerPalette) => (
{
const cards = trails.slice(0, 4);
@@ -70,7 +73,14 @@ export const StaticMediumFour = ({
!!card.isNewsletter,
)}
mediaPositionOnMobile="left"
- headlineSizes={undefined}
+ headlineSizes={
+ isInSlimHomepageAbTestVariant
+ ? {
+ ...defaultFontSizes,
+ wide: defaultFontSizes.tablet,
+ }
+ : defaultFontSizes
+ }
/* we don't want to support sublinks on standard cards here so we hard code to undefined */
supportingContent={undefined}
mediaSize="medium"
diff --git a/dotcom-rendering/src/components/TopBarSupport.importable.tsx b/dotcom-rendering/src/components/TopBarSupport.importable.tsx
index c5ff084cc00..f1d76407bd2 100644
--- a/dotcom-rendering/src/components/TopBarSupport.importable.tsx
+++ b/dotcom-rendering/src/components/TopBarSupport.importable.tsx
@@ -5,7 +5,6 @@
import { css } from '@emotion/react';
import { getCookie, isUndefined } from '@guardian/libs';
import type { ComponentEvent } from '@guardian/ophan-tracker-js';
-import { getHeader } from '@guardian/support-dotcom-components';
import type {
HeaderPayload,
ModuleData,
@@ -18,9 +17,11 @@ import type {
import { useEffect, useState } from 'react';
import { submitComponentEvent } from '../client/ophan/ophan';
import {
+ getAuthHeaders,
getPurchaseInfo,
shouldHideSupportMessaging,
} from '../lib/contributions';
+import { getHeader } from '../lib/sdcRequests';
import { useBetaAB } from '../lib/useAB';
import { useIsSignedIn } from '../lib/useAuthStatus';
import { useCountryCode } from '../lib/useCountryCode';
@@ -68,6 +69,7 @@ const ReaderRevenueLinksRemote = ({
const hideSupportMessagingForUser =
shouldHideSupportMessaging(isSignedIn);
+
if (hideSupportMessagingForUser === 'Pending') {
// We don't yet know the user's supporter status
return;
@@ -90,7 +92,10 @@ const ReaderRevenueLinksRemote = ({
},
};
- getHeader(contributionsServiceUrl, requestData)
+ getAuthHeaders()
+ .then((headers) =>
+ getHeader(contributionsServiceUrl, requestData, headers),
+ )
.then((response: ModuleDataResponse) => {
if (!response.data) {
return null;
@@ -102,9 +107,9 @@ const ReaderRevenueLinksRemote = ({
return (
module.name === 'SignInPromptHeader'
? /* webpackChunkName: "sign-in-prompt-header" */
- import(`./marketing/header/SignInPromptHeader`)
+ import('./marketing/header/SignInPromptHeader')
: /* webpackChunkName: "header" */
- import(`./marketing/header/Header`)
+ import('./marketing/header/Header')
).then(
(headerModule: {
[key: string]: React.ElementType;
@@ -117,7 +122,6 @@ const ReaderRevenueLinksRemote = ({
})
.catch((error) => {
const msg = `Error importing RR header links: ${String(error)}`;
-
console.log(msg);
window.guardian.modules.sentry.reportError(
new Error(msg),
diff --git a/dotcom-rendering/src/frontend/feFront.ts b/dotcom-rendering/src/frontend/feFront.ts
index a9fcb040380..383611a67d3 100644
--- a/dotcom-rendering/src/frontend/feFront.ts
+++ b/dotcom-rendering/src/frontend/feFront.ts
@@ -40,19 +40,6 @@ interface FEPressedPage {
/* This list of containers supported in DCR must be kept up to date with frontend **manually**.
* @see https://github.com/guardian/frontend/blob/167dce23a8453ed13a97fbd23c7fc45ecb06e3fe/facia/app/services/dotcomrendering/FaciaPicker.scala#L21-L45 */
export type FEContainer =
- | 'fixed/large/slow-XIV'
- | 'fixed/medium/fast-XI'
- | 'fixed/medium/fast-XII'
- | 'fixed/medium/slow-VI'
- | 'fixed/medium/slow-VII'
- | 'fixed/medium/slow-XII-mpu'
- | 'fixed/small/fast-VIII'
- | 'fixed/small/slow-I'
- | 'fixed/small/slow-III'
- | 'fixed/small/slow-IV'
- | 'fixed/small/slow-V-half'
- | 'fixed/small/slow-V-mpu'
- | 'fixed/small/slow-V-third'
| 'fixed/thrasher'
| 'nav/list'
| 'nav/media-list'
@@ -299,7 +286,7 @@ type FECollectionConfig = {
showLatestUpdate: boolean;
excludeFromRss: boolean;
showTimestamps: boolean;
- hideShowMore: boolean;
+ hideShowMore?: boolean; // deprecated. Collections no longer show more content.
platform: string;
aspectRatio?: FEAspectRatio;
};
@@ -322,7 +309,7 @@ export type FECollection = {
showDateHeader: boolean;
showLatestUpdate: boolean;
config: FECollectionConfig;
- hasMore: boolean;
+ hasMore?: boolean; // deprecated. Collections no longer show more content.
targetedTerritory?: Territory;
};
diff --git a/dotcom-rendering/src/frontend/schemas/feFront.json b/dotcom-rendering/src/frontend/schemas/feFront.json
index e55d29ae127..039df052ce4 100644
--- a/dotcom-rendering/src/frontend/schemas/feFront.json
+++ b/dotcom-rendering/src/frontend/schemas/feFront.json
@@ -2926,7 +2926,6 @@
"displayName",
"excludeFromRss",
"hideKickers",
- "hideShowMore",
"platform",
"showDateHeader",
"showLatestUpdate",
@@ -2949,7 +2948,6 @@
"config",
"curated",
"displayName",
- "hasMore",
"hideKickers",
"id",
"showDateHeader",
@@ -3393,19 +3391,6 @@
},
"FEContainer": {
"enum": [
- "fixed/large/slow-XIV",
- "fixed/medium/fast-XI",
- "fixed/medium/fast-XII",
- "fixed/medium/slow-VI",
- "fixed/medium/slow-VII",
- "fixed/medium/slow-XII-mpu",
- "fixed/small/fast-VIII",
- "fixed/small/slow-I",
- "fixed/small/slow-III",
- "fixed/small/slow-IV",
- "fixed/small/slow-V-half",
- "fixed/small/slow-V-mpu",
- "fixed/small/slow-V-third",
"fixed/thrasher",
"flexible/general",
"flexible/special",
diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
index 7325e7e5bf1..e9630739c85 100644
--- a/dotcom-rendering/src/layouts/FrontLayout.tsx
+++ b/dotcom-rendering/src/layouts/FrontLayout.tsx
@@ -40,6 +40,7 @@ import {
} from '../lib/getFrontsAdPositions';
import { hideAge } from '../lib/hideAge';
import { ophanComponentId } from '../lib/ophan-helpers';
+import { doesPageQualifyForSlimHomepageAbTest } from '../lib/SlimHomepageAbTestHelpers';
import { useBetaAB } from '../lib/useAB';
import type { NavType } from '../model/extract-nav';
import { palette as schemePalette } from '../palette';
@@ -82,15 +83,16 @@ const isToggleable = (
* The show/hide button would be covered by the MostPopularFrontRight component
* in the variant of the Slim Homepage AB test.
*/
- isTargetedContainerInSlimHomepageAbTest: boolean,
+ isShowingRightContentForSlimHomepageAbTest: boolean,
) => {
+ if (isShowingRightContentForSlimHomepageAbTest) return;
+
if (isNetworkFront) {
return (
collection.displayName.toLowerCase() !== 'headlines' &&
!isNavList(collection) &&
!isHighlights(collection) &&
- !isLabs(collection) &&
- !isTargetedContainerInSlimHomepageAbTest
+ !isLabs(collection)
);
}
@@ -152,18 +154,33 @@ export const FrontLayout = ({ front, NAV }: Props) => {
/**
* The Slim Homepage AB test only runs on /uk and on screen widths >=1300px.
- * In the variant of this test a Most Popular component is added to the right-hand side of the page.
- * Page skins require slim content and is incompatible with this test. We do not run this test
- * on pages where there is a page skin (a page skin takes precedence).
+ * In variant one and two of this test, the content is slimmed down.
+ * In variant two of this test, a Most Popular component is inserted into the right-hand side of the page.
+ * Page skins require slim content and is incompatible with this test, so we do not run
+ * this test on pages where there is a page skin (a page skin takes precedence).
*/
- const isInSlimHomepageAbTestVariant =
- (pageId === 'uk' &&
- !hasPageSkin &&
+ const pageQualifiesForSlimHomepageAbTest =
+ doesPageQualifyForSlimHomepageAbTest(
+ front.pressedPage.collections,
+ pageId,
+ hasPageSkin,
+ );
+ const isInSlimHomepageAbTestVariantOne =
+ (pageQualifiesForSlimHomepageAbTest &&
+ abTests?.isUserInTestGroup(
+ 'fronts-and-curation-slim-homepage',
+ 'variant-one',
+ )) ??
+ false;
+ const isInSlimHomepageAbTestVariantTwo =
+ (pageQualifiesForSlimHomepageAbTest &&
abTests?.isUserInTestGroup(
'fronts-and-curation-slim-homepage',
- 'variant',
+ 'variant-two',
)) ??
false;
+ const isInEitherSlimHomepageAbTestVariant =
+ isInSlimHomepageAbTestVariantOne || isInSlimHomepageAbTestVariantTwo;
const fallbackAspectRatio = (collectionType: DCRContainerType) => {
switch (collectionType) {
@@ -309,11 +326,6 @@ export const FrontLayout = ({ front, NAV }: Props) => {
* We only shrink the content of certain sections to place the Most Popular
* content on the right-hand side. Other sections remain full-width.
*/
- const isTargetedContainerInSlimHomepageAbTest =
- isInSlimHomepageAbTestVariant &&
- (collection.displayName === 'News' ||
- collection.displayName === 'Features' ||
- collection.displayName === 'More features');
if (collection.collectionType === 'scrollable/highlights') {
// Highlights are rendered in the Masthead component
@@ -436,9 +448,6 @@ export const FrontLayout = ({ front, NAV }: Props) => {
treats={collection.treats}
data-print-layout="hide"
hasPageSkin={hasPageSkin}
- discussionApiUrl={
- front.config.discussionApiUrl
- }
>
{
index,
collection,
front.isNetworkFront,
- isTargetedContainerInSlimHomepageAbTest,
+ isInSlimHomepageAbTestVariantTwo,
)}
leftContent={decideLeftContent(
front,
collection,
)}
sectionId={ophanName}
- collectionId={collection.id}
pageId={front.pressedPage.id}
showDateHeader={
collection.config.showDateHeader
}
editionId={front.editionId}
treats={collection.treats}
- canShowMore={collection.canShowMore}
- ajaxUrl={front.config.ajaxUrl}
isOnPaidContentFront={isPaidContent}
targetedTerritory={collection.targetedTerritory}
hasPageSkin={hasPageSkin}
- discussionApiUrl={front.config.discussionApiUrl}
collectionBranding={
collection.collectionBranding
}
@@ -534,8 +539,11 @@ export const FrontLayout = ({ front, NAV }: Props) => {
index,
)}
isLabs={isLabs(collection)}
- slimifySectionForAbTest={
- isTargetedContainerInSlimHomepageAbTest
+ slimifySectionForSlimHomepageAbTest={
+ isInEitherSlimHomepageAbTestVariant
+ }
+ showRightContentForSlimHomepageAbTest={
+ isInSlimHomepageAbTestVariantTwo
}
mostViewed={front.mostViewed}
deeplyRead={front.deeplyRead}
@@ -563,6 +571,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
sectionId={ophanName}
collectionId={index + 1}
containerLevel={collection.containerLevel}
+ isInSlimHomepageAbTestVariant={
+ isInEitherSlimHomepageAbTestVariant
+ }
/>
diff --git a/dotcom-rendering/src/layouts/TagPageLayout.tsx b/dotcom-rendering/src/layouts/TagPageLayout.tsx
index d04caa4d218..54134266100 100644
--- a/dotcom-rendering/src/layouts/TagPageLayout.tsx
+++ b/dotcom-rendering/src/layouts/TagPageLayout.tsx
@@ -193,19 +193,14 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
toggleable={false}
pageId={tagPage.pageId}
editionId={tagPage.editionId}
- canShowMore={false}
- ajaxUrl={tagPage.config.ajaxUrl}
pagination={tagPagePagination}
- discussionApiUrl={
- tagPage.config.discussionApiUrl
- }
>
{insertStorylinesSection &&
diff --git a/dotcom-rendering/src/lib/SlimHomepageAbTestHelpers.ts b/dotcom-rendering/src/lib/SlimHomepageAbTestHelpers.ts
new file mode 100644
index 00000000000..020f416dd05
--- /dev/null
+++ b/dotcom-rendering/src/lib/SlimHomepageAbTestHelpers.ts
@@ -0,0 +1,37 @@
+import type { DCRCollectionType } from '../types/front';
+
+const requiredCollectionsForTest = ['news', 'features', 'more features'];
+
+const hasRequiredSlimHomepageAbTestCollections = (
+ collections: DCRCollectionType[],
+): boolean => {
+ return requiredCollectionsForTest.every((displayName) =>
+ collections
+ .map((collection) => collection.displayName.toLowerCase())
+ .includes(displayName),
+ );
+};
+
+export const doesPageQualifyForSlimHomepageAbTest = (
+ collections: DCRCollectionType[],
+ pageId: string,
+ hasPageSkin: boolean,
+): boolean => {
+ /**
+ * This is temporarily commmented out so that we can review this in a 0% test.
+ * There is currently a container above News on the UK front, which means the test won't run.
+ * We will only start this test once News is again the top container, but in the meantime, we
+ * would like to be able to review this test.
+ */
+ // const isFirstCollectionNews =
+ // collections[0]?.displayName.toLowerCase() === 'news';
+ const hasRequiredCollections =
+ hasRequiredSlimHomepageAbTestCollections(collections);
+
+ return (
+ pageId === 'uk' &&
+ !hasPageSkin &&
+ // isFirstCollectionNews &&
+ hasRequiredCollections
+ );
+};
diff --git a/dotcom-rendering/src/lib/braze/BrazeBannersSystem.tsx b/dotcom-rendering/src/lib/braze/BrazeBannersSystem.tsx
index 7df0bf1d9dc..109752d4a4a 100644
--- a/dotcom-rendering/src/lib/braze/BrazeBannersSystem.tsx
+++ b/dotcom-rendering/src/lib/braze/BrazeBannersSystem.tsx
@@ -955,7 +955,7 @@ export const BrazeBannersSystemDisplay = ({
position: relative;
display: grid;
margin: 0px auto;
- padding: 12px 4px 0px 12px;
+ padding: 0px 4px 0px 12px;
bottom: 0px;
column-gap: 10px;
align-self: stretch;
@@ -981,7 +981,7 @@ export const BrazeBannersSystemDisplay = ({
'. copy-container close-button close-button'
/ minmax(0px, 0.5fr)
492px max-content minmax(0px, 0.5fr);
- padding: 12px 12px 0px;
+ padding: 0px 12px 0px;
}
${until.phablet} {
max-width: 660px;
@@ -1024,7 +1024,7 @@ export const BrazeBannersSystemDisplay = ({
background-color: ${wrapperModeForegroundColor};
width: 1px;
opacity: 0.2;
- margin: 24px 8px 0px;
+ margin: 18px 8px 0px;
${until.leftCol} {
display: none;
@@ -1042,18 +1042,14 @@ export const BrazeBannersSystemDisplay = ({
grid-area: copy-container;
padding-left: 12px;
padding-right: 12px;
- padding-top: 24px;
- padding-bottom: 12px;
+ padding-top: 18px;
+ padding-bottom: 24px;
${until.leftCol} {
padding-left: 0px;
padding-right: 0px;
}
- ${until.phablet} {
- padding-top: 0px;
- padding-bottom: 0px;
- }
- ${until.phablet} {
- padding-top: 24px;
+ ${until.desktop} {
+ padding-top: 12px;
}
`
: undefined
diff --git a/dotcom-rendering/src/lib/cardWrappers.tsx b/dotcom-rendering/src/lib/cardWrappers.tsx
index 7a70efebecf..6d7d0c893e2 100644
--- a/dotcom-rendering/src/lib/cardWrappers.tsx
+++ b/dotcom-rendering/src/lib/cardWrappers.tsx
@@ -143,381 +143,21 @@ export const Card100Media75 = ({
);
};
-/**
- * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃
- * ┃ ┃
- * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
- * Card designed to take up 100% of the container, with media that takes up 75%
- *
- * Options:
- * - Huge headline (large on mobile)
- * - Jumbo image on the top (top on mobile)
- * - No trail text
- * - Up to 4 supporting content items, always aligned horizontal
- */
-export const Card100Media100 = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
- 2
- ? 'horizontal'
- : 'vertical'
- }
- mediaPositionOnDesktop="right"
- mediaSize="large"
- mediaPositionOnMobile="top"
- imageLoading={imageLoading}
- isTagPage={isTagPage}
- headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
- aspectRatio={aspectRatio}
- />
- );
-};
-
-/**
- * ┌┈┈┈┈┈┈┈┈┈┲━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
- * ┊ 25% ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ┃
- * ┊Remaining┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ┃
- * ┊ ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ┃
- * └┈┈┈┈┈┈┈┈┈┺━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
- * Card designed to take up 75% of the container, with media that takes up 50%
- *
- * Options:
- * - Large headline (large on mobile)
- * - Large image on the left (top on mobile)
- * - Trail text
- * - Up to 3 supporting content items, 1-2 aligned vertical, 3 aligned horizontal
- */
-export const Card75Media50Left = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
- 2
- ? 'horizontal'
- : 'vertical'
- }
- mediaPositionOnDesktop="left"
- mediaPositionOnMobile="top"
- mediaSize="large"
- imageLoading={imageLoading}
- isTagPage={isTagPage}
- headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
- aspectRatio={aspectRatio}
- />
- );
-};
-
-/**
- * ┏━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒┃ 75% ┊
- * ┃▒▒▒▒▒▒▒▒▒┃ Remaining ┊
- * ┃ ┃ ┊
- * ┗━━━━━━━━━┹┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┘
- * Card designed to take up 25% of the container, with media that takes up 25%
- *
- * Options:
- * - Medium headline (medium on mobile)
- * - Small image on the top (left on mobile)
- * - No trail text
- * - Up to 2 supporting content items, always aligned vertical
- */
-export const Card25Media25 = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
- =>
- onConsent()
+const hasCanTargetConsent = (): Promise => {
+ if (getCookie({ name: 'gu-cmp-disabled', shouldMemoize: true })) {
+ return Promise.resolve(true);
+ }
+ return onConsent()
.then(({ canTarget }: ConsentState) => canTarget)
.catch(() => false);
+};
// Returns Auth headers only if user has targeting consent and is signed in
export const getAuthHeaders = async (): Promise => {
diff --git a/dotcom-rendering/src/lib/dynamicSlices.test.ts b/dotcom-rendering/src/lib/dynamicSlices.test.ts
deleted file mode 100644
index 8b6fa51e064..00000000000
--- a/dotcom-rendering/src/lib/dynamicSlices.test.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { shouldPadWrappableRows } from './dynamicSlices';
-
-describe('shouldPadWrappableRows', () => {
- describe('Three columns', () => {
- const columns = 3;
- describe('Five cards', () => {
- const cards = 5;
- // true: 0 1 2
- // false: 3 4
- it.each([
- [0, true],
- [1, true],
- [2, true],
- [3, false],
- [4, false],
- ])('card number %s should return %s', (index, expected) => {
- expect(shouldPadWrappableRows(index, cards, columns)).toBe(
- expected,
- );
- });
- });
-
- describe('Six cards', () => {
- const cards = 6;
- // true: 0 1 2
- // false: 3 4 5
- it.each([
- [0, true],
- [1, true],
- [2, true],
- [3, false],
- [4, false],
- [5, false],
- ])('card number %s should return %s', (index, expected) => {
- expect(shouldPadWrappableRows(index, cards, columns)).toBe(
- expected,
- );
- });
- });
-
- describe('Seven cards', () => {
- const cards = 7;
- // true: 0 1 2
- // true: 3 4 5
- // false: 6
- it.each([
- [0, true],
- [1, true],
- [2, true],
- [3, true],
- [4, true],
- [5, true],
- [6, false],
- ])('card number %s should return %s', (index, expected) => {
- expect(shouldPadWrappableRows(index, cards, columns)).toBe(
- expected,
- );
- });
- });
- });
-
- describe('Two columns', () => {
- const columns = 2;
- describe('Three cards', () => {
- const cards = 3;
- // true: 0 1
- // false: 2
- it.each([
- [0, true],
- [1, true],
- [2, false],
- ])('card number %s should return %s', (index, expected) => {
- expect(shouldPadWrappableRows(index, cards, columns)).toBe(
- expected,
- );
- });
- });
-
- describe('Four cards', () => {
- const cards = 4;
- // true: 0 1
- // false: 2 3
- it.each([
- [0, true],
- [1, true],
- [2, false],
- [3, false],
- ])('card number %s should return %s', (index, expected) => {
- expect(shouldPadWrappableRows(index, cards, columns)).toBe(
- expected,
- );
- });
- });
-
- describe('Five cards', () => {
- const cards = 5;
- // true: 0 1
- // true: 2 3
- // false: 4
- it.each([
- [0, true],
- [1, true],
- [2, true],
- [3, true],
- [4, false],
- ])('card number %s should return %s', (index, expected) => {
- expect(shouldPadWrappableRows(index, cards, columns)).toBe(
- expected,
- );
- });
- });
- });
-});
diff --git a/dotcom-rendering/src/lib/dynamicSlices.tsx b/dotcom-rendering/src/lib/dynamicSlices.tsx
deleted file mode 100644
index c64f1b4ade5..00000000000
--- a/dotcom-rendering/src/lib/dynamicSlices.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { LI } from '../components/Card/components/LI';
-import { UL } from '../components/Card/components/UL';
-import type { Loading } from '../components/CardPicture';
-import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
-import { Card25Media25Tall, Card50Media50 } from './cardWrappers';
-
-/* ._________________.________.________.
- * |#################|########|########|
- * | | | |
- * |_________________|________|________|
- */
-export const Card50_Card25_Card25 = ({
- cards,
- containerPalette,
- showAge,
- serverTime,
- imageLoading,
-}: {
- cards: DCRFrontCard[];
- imageLoading: Loading;
- containerPalette?: DCRContainerPalette;
- showAge?: boolean;
- serverTime?: number;
-}) => {
- const card50 = cards.slice(0, 1);
- const cards25 = cards.slice(1, 3);
-
- return (
-
- {card50.map((trail) => (
-
-
- ))}
-
- {cards25.map((trail) => (
-
-
- ))}
-
- );
-};
-
-/**
- * Abstraction to decide whether to show padding on wrapped rows of cards.
- *
- * For three columns, We have different results with 5 or 9 cards
- *
- * @example - All but last 2
- * ```
- * ┌───┐ ┌───┐ ┌───┐
- * │Pad│ │Pad│ │Pad│
- * └───┘ └───┘ └───┘
- * ┌───┐ ┌───┐
- * │No!│ │No!│
- * └───┘ └───┘
- * ```
- * - All but last 3
- * ```
- * ┌───┐ ┌───┐ ┌───┐
- * │Pad│ │Pad│ │Pad│
- * └───┘ └───┘ └───┘
- * ┌───┐ ┌───┐ ┌───┐
- * │Pad│ │Pad│ │Pad│
- * └───┘ └───┘ └───┘
- * ┌───┐ ┌───┐ ┌───┐
- * │No!│ │No!│ │No!│
- * └───┘ └───┘ └───┘
- * ```
- *
- * @param index - Index of the current card
- * @param totalCards - Total number of cards being shown
- * @param cardsPerRow - No. of cards in each row (if full)
- */
-export const shouldPadWrappableRows = (
- index: number,
- totalCards: number,
- cardsPerRow: number,
-): boolean => index < totalCards - (totalCards % cardsPerRow || cardsPerRow);
diff --git a/dotcom-rendering/src/lib/getFrontsAdPositions.test.ts b/dotcom-rendering/src/lib/getFrontsAdPositions.test.ts
index 0eb6f82b616..fb07bbb378e 100644
--- a/dotcom-rendering/src/lib/getFrontsAdPositions.test.ts
+++ b/dotcom-rendering/src/lib/getFrontsAdPositions.test.ts
@@ -17,7 +17,7 @@ import {
} from './getFrontsAdPositions';
const testCollection: AdCandidate = {
- collectionType: 'fixed/large/slow-XIV',
+ collectionType: 'flexible/general',
displayName: 'Test Collection',
containerLevel: 'Primary',
containerPalette: 'EventPalette',
@@ -73,18 +73,18 @@ describe('Mobile Ads', () => {
// We used https://www.theguardian.com/uk/commentisfree as a blueprint
it('Non-network front, with more than 4 collections, without thrashers', () => {
const testCollections: AdCandidate[] = [
- { ...testCollection, collectionType: 'fixed/large/slow-XIV' }, // Ad position (0)
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ad position (2)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ad position (4)
+ { ...testCollection, collectionType: 'flexible/general' }, // Ad position (0)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (2)
+ { ...testCollection, collectionType: 'static/medium/4' },
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (4)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'flexible/general' }, // Ad position (6)
{ ...testCollection, collectionType: 'flexible/general' },
- { ...testCollection, collectionType: 'fixed/small/slow-I' }, // Ad position (6)
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ad position (8)
- { ...testCollection, collectionType: 'fixed/small/slow-III' },
- { ...testCollection, collectionType: 'fixed/medium/fast-XII' }, // Ignored - is before merch high position
- { ...testCollection, collectionType: 'fixed/small/fast-VIII' }, // Ignored - is merch high position
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (8)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - is before merch high position
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - is merch high position
{ ...testCollection, collectionType: 'news/most-popular' }, // Ignored - is most viewed container
];
@@ -97,28 +97,28 @@ describe('Mobile Ads', () => {
it('UK Network Front, with more than 4 collections, with thrashers at various places', () => {
const testCollections: AdCandidate[] = [
{ ...testCollection, collectionType: 'flexible/general' }, // Ad position (0)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' },
+ { ...testCollection, collectionType: 'static/medium/4' },
{ ...testCollection, collectionType: 'flexible/special' }, // Ad position (2)
{ ...testCollection, collectionType: 'flexible/special' },
- { ...testCollection, collectionType: 'fixed/small/slow-V-mpu' }, // Ad position (4)
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (4)
{ ...testCollection, collectionType: 'flexible/special' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (8)
{ ...testCollection, collectionType: 'flexible/general' },
{ ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (11)
{ ...testCollection, collectionType: 'flexible/general' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (14)
{ ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' },
{ ...testCollection, collectionType: 'scrollable/feature' }, // Ad position (17)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ad position (19)
+ { ...testCollection, collectionType: 'static/medium/4' },
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (19)
{ ...testCollection, collectionType: 'flexible/general' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ignored - is before merch high position
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' }, // Ignored - is merch high position
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ignored - is before merch high position
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - is merch high position
{ ...testCollection, collectionType: 'news/most-popular' }, // Ignored - is most viewed container
];
@@ -131,24 +131,24 @@ describe('Mobile Ads', () => {
it('International Network Front, with more than 4 collections, with thrashers at various places', () => {
const testCollections: AdCandidate[] = [
{ ...testCollection, collectionType: 'flexible/general' }, // Ad position (0)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' },
+ { ...testCollection, collectionType: 'static/medium/4' },
{ ...testCollection, collectionType: 'flexible/special' }, // Ad position (2)
{ ...testCollection, collectionType: 'flexible/general' },
{ ...testCollection, collectionType: 'flexible/special' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (5)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' },
+ { ...testCollection, collectionType: 'static/medium/4' },
{ ...testCollection, collectionType: 'flexible/general' }, // Ad position (7)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' },
{ ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (11)
{ ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' },
{ ...testCollection, collectionType: 'flexible/general' }, // Ad position (14)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ad position (16)
+ { ...testCollection, collectionType: 'static/medium/4' },
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (16)
{ ...testCollection, collectionType: 'scrollable/feature' },
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' }, // Ignored - is merch high position
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - is merch high position
{ ...testCollection, collectionType: 'news/most-popular' }, // Ignored - is most viewed container
];
@@ -161,24 +161,24 @@ describe('Mobile Ads', () => {
it('US Network Front, with more than 4 collections, with thrashers at various places', () => {
const testCollections: AdCandidate[] = [
{ ...testCollection, collectionType: 'flexible/general' }, // Ad position (0)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ad position (2)
+ { ...testCollection, collectionType: 'static/medium/4' },
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (2)
{ ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' },
{ ...testCollection, collectionType: 'flexible/special' }, // Ad position (5)
{ ...testCollection, collectionType: 'flexible/special' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' },
- { ...testCollection, collectionType: 'fixed/small/slow-III' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (9)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' },
+ { ...testCollection, collectionType: 'static/medium/4' },
{ ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (12)
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' },
+ { ...testCollection, collectionType: 'flexible/general' },
{ ...testCollection, collectionType: 'flexible/general' }, // Ad position (14)
{ ...testCollection, collectionType: 'flexible/general' },
- { ...testCollection, collectionType: 'fixed/small/slow-V-mpu' }, // Ad position (16)
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (16)
{ ...testCollection, collectionType: 'scrollable/feature' },
- { ...testCollection, collectionType: 'fixed/small/slow-III' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ignored - is merch high position
{ ...testCollection, collectionType: 'news/most-popular' }, // Ignored - is most viewed container
];
@@ -192,20 +192,20 @@ describe('Mobile Ads', () => {
it('Lifeandstyle front, with more than 4 collections, with thrashers at various places', () => {
const testCollections: AdCandidate[] = [
{ ...testCollection, collectionType: 'flexible/special' }, // Ad position (0)
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' },
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' }, // Ad position (3)
- { ...testCollection, collectionType: 'fixed/small/slow-V-third' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'flexible/general' }, // Ad position (3)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (6)
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' },
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' }, // Ad position (9)
- { ...testCollection, collectionType: 'fixed/medium/slow-XII-mpu' },
- { ...testCollection, collectionType: 'fixed/small/fast-VIII' }, // Ignored - before thrasher
+ { ...testCollection, collectionType: 'flexible/general' }, // Ad position (9)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - before thrasher
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ad position (12)
- { ...testCollection, collectionType: 'fixed/small/slow-III' },
- { ...testCollection, collectionType: 'fixed/small/slow-I' }, // Ignored - is merch high position
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - is merch high position
{ ...testCollection, collectionType: 'news/most-popular' }, // Ignored - is most viewed container
];
@@ -218,18 +218,18 @@ describe('Mobile Ads', () => {
it('Recipes front, with more than 4 collections, with thrasher at the first position', () => {
const testCollections: AdCandidate[] = [
{ ...testCollection, collectionType: 'fixed/thrasher' }, // Ignored - is first container and thrasher
- { ...testCollection, collectionType: 'fixed/medium/slow-VI' }, // Ad position (1)
- { ...testCollection, collectionType: 'fixed/small/slow-V-third' },
- { ...testCollection, collectionType: 'fixed/medium/slow-XII-mpu' }, // Ad position (3)
- { ...testCollection, collectionType: 'fixed/medium/fast-XII' },
- { ...testCollection, collectionType: 'fixed/small/slow-V-third' }, // Ad position (5)
- { ...testCollection, collectionType: 'fixed/small/fast-VIII' },
- { ...testCollection, collectionType: 'fixed/medium/fast-XI' }, // Ad position (7)
- { ...testCollection, collectionType: 'fixed/small/slow-III' },
- { ...testCollection, collectionType: 'fixed/small/slow-IV' }, // Ad position (9)
- { ...testCollection, collectionType: 'fixed/small/slow-V-half' },
- { ...testCollection, collectionType: 'fixed/small/slow-V-third' }, // Ignored - is before merch high position
- { ...testCollection, collectionType: 'fixed/small/fast-VIII' }, // Ignored - is merch high position
+ { ...testCollection, collectionType: 'flexible/general' }, // Ad position (1)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'flexible/general' }, // Ad position (3)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'flexible/general' }, // Ad position (5)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'flexible/general' }, // Ad position (7)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'static/medium/4' }, // Ad position (9)
+ { ...testCollection, collectionType: 'flexible/general' },
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - is before merch high position
+ { ...testCollection, collectionType: 'flexible/general' }, // Ignored - is merch high position
{ ...testCollection, collectionType: 'news/most-popular' }, // Ignored - is most viewed container
];
@@ -350,13 +350,13 @@ describe('Desktop Ads', () => {
it('calculates ad positions correctly for an example of the UK network front', () => {
const adPositions = getDesktopAdPositions(testCollectionsUk, 'uk');
- expect(adPositions).toEqual([3, 6, 8, 11, 14, 17, 20]);
+ expect(adPositions).toEqual([3, 6, 8, 14, 17]);
});
it('calculates ad positions correctly for an example of the US network front', () => {
const adPositions = getDesktopAdPositions(testCollectionsUs, 'us');
- expect(adPositions).toEqual([3, 6, 8, 11, 14, 18, 20, 22]);
+ expect(adPositions).toEqual([3, 6, 10, 12, 19]);
});
it('does NOT insert ads above or below branded content', () => {
diff --git a/dotcom-rendering/src/lib/getFrontsAdPositions.ts b/dotcom-rendering/src/lib/getFrontsAdPositions.ts
index 40c123de1e1..e6fca6bc194 100644
--- a/dotcom-rendering/src/lib/getFrontsAdPositions.ts
+++ b/dotcom-rendering/src/lib/getFrontsAdPositions.ts
@@ -260,8 +260,6 @@ const getCollectionHeight = (collection: AdCandidate): number => {
case 'fixed/thrasher':
return 0.5;
- case 'fixed/small/slow-IV':
- case 'fixed/small/slow-V-mpu':
case 'nav/list':
case 'nav/media-list':
case 'scrollable/small':
@@ -269,25 +267,12 @@ const getCollectionHeight = (collection: AdCandidate): number => {
case 'static/medium/4':
return 1;
- case 'fixed/small/slow-I':
- case 'fixed/small/slow-III':
- case 'fixed/small/slow-V-third':
- case 'fixed/small/slow-V-half':
- case 'fixed/small/fast-VIII':
case 'scrollable/feature':
return 1.5;
- case 'fixed/medium/slow-VI':
- case 'fixed/medium/slow-VII':
- case 'fixed/medium/slow-XII-mpu':
- case 'fixed/medium/fast-XI':
- case 'fixed/medium/fast-XII':
case 'static/feature/2':
return 2;
- case 'fixed/large/slow-XIV':
- return 3;
-
case 'flexible/special':
return getFlexibleSpecialHeight(grouped);
diff --git a/dotcom-rendering/src/lib/mockRESTCalls.ts b/dotcom-rendering/src/lib/mockRESTCalls.ts
index 1fad65c2f9a..70d757754e4 100644
--- a/dotcom-rendering/src/lib/mockRESTCalls.ts
+++ b/dotcom-rendering/src/lib/mockRESTCalls.ts
@@ -202,15 +202,14 @@ export const mockFetch: typeof global.fetch = (
url,
):
return createMockResponse(200, discussion);
- case /.*contributions\.(code\.dev-)?guardianapis\.com\/header/.test(
- url,
- ) && requestInit?.method === 'POST':
- return createMockResponse(200, contributionsHeaderResponse);
- // Get contributions header
- case /.*contributions\.(code\.dev-)?guardianapis\.com\/header/.test(
- url,
- ):
+ // Get contributions header or local Storybook header fetches
+ case /.*\/header/.test(url):
return createMockResponse(200, contributionsHeaderResponse);
+ // Catch local Storybook epic fetches
+ case /.*\/epic/.test(url):
+ return createMockResponse(200, {
+ data: { module: { url: '', name: 'Epic', props: {} } },
+ });
// Get Ophan
case /.*ophan\.theguardian\.com\/img\/.*/.test(url):
return createMockResponse(200);
diff --git a/dotcom-rendering/src/lib/sdcRequests.ts b/dotcom-rendering/src/lib/sdcRequests.ts
index 36656c2b8d2..e2d9ff9d4d6 100644
--- a/dotcom-rendering/src/lib/sdcRequests.ts
+++ b/dotcom-rendering/src/lib/sdcRequests.ts
@@ -112,5 +112,6 @@ export const getGutterLiveblog = (
export const getHeader = (
baseUrl: string,
payload: HeaderPayload,
+ headers?: HeadersInit,
): Promise> =>
- getModuleData('header', baseUrl, payload);
+ getModuleData('header', baseUrl, payload, headers);
diff --git a/dotcom-rendering/src/model/enhanceCollections.ts b/dotcom-rendering/src/model/enhanceCollections.ts
index 7e6c62464ba..53d8c2ac088 100644
--- a/dotcom-rendering/src/model/enhanceCollections.ts
+++ b/dotcom-rendering/src/model/enhanceCollections.ts
@@ -78,7 +78,7 @@ export const enhanceCollections = ({
findCollectionSuitableForFrontBranding(collections);
return collections.filter(isSupported).map((collection, index) => {
- const { id, displayName, collectionType, hasMore, href, description } =
+ const { id, displayName, collectionType, href, description } =
collection;
const allCards = [...collection.curated, ...collection.backfill];
@@ -118,9 +118,6 @@ export const enhanceCollections = ({
const isNextCollectionPrimary =
collections[index + 1]?.config.collectionLevel === 'Primary';
- const isBetaContainer = BETA_CONTAINERS.includes(
- collection.collectionType,
- );
return {
id,
@@ -164,8 +161,6 @@ export const enhanceCollections = ({
config: {
showDateHeader: collection.config.showDateHeader,
},
- canShowMore:
- hasMore && !collection.config.hideShowMore && !isBetaContainer,
targetedTerritory: collection.targetedTerritory,
aspectRatio: collection.config.aspectRatio,
};
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 8cb053ae763..36e9a5873b7 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -7421,22 +7421,6 @@ const paletteColours = {
light: () => sourcePalette.neutral[0],
dark: () => sourcePalette.neutral[100],
},
- '--labs-legacy-article-section-title': {
- light: () => sourcePalette.neutral[100],
- dark: () => sourcePalette.neutral[97],
- },
- '--labs-legacy-section-background': {
- light: () => sourcePalette.neutral[93],
- dark: () => sourcePalette.neutral[20],
- },
- '--labs-legacy-section-background-left': {
- light: () => sourcePalette.labs[400],
- dark: () => sourcePalette.labs[200],
- },
- '--labs-legacy-treat-text': {
- light: () => sourcePalette.neutral[46],
- dark: () => sourcePalette.neutral[38],
- },
'--labs-logo-background': {
light: () => sourcePalette.labs[100],
dark: () => sourcePalette.labs[200],
diff --git a/dotcom-rendering/src/types/front.ts b/dotcom-rendering/src/types/front.ts
index f3d8f87a6fd..a6e404741e5 100644
--- a/dotcom-rendering/src/types/front.ts
+++ b/dotcom-rendering/src/types/front.ts
@@ -135,13 +135,6 @@ export type DCRCollectionType = {
config: {
showDateHeader: boolean;
};
- /**
- * @property {?boolean} canShowMore - Whether the 'show more' button should be shown.
- * nb. the value of this will typically reflect the `FECollectionType.hasMore` value we get from Frontend,
- * except when `FECollectionType.config.hideShowMore` is set to `true`, in which case `DCRCollectionType.canShowMore`
- * will always be `false`.
- **/
- canShowMore?: boolean;
collectionBranding?: CollectionBranding;
targetedTerritory?: Territory;
aspectRatio?: AspectRatio;
diff --git a/dotcom-rendering/webpack/webpack.config.server.js b/dotcom-rendering/webpack/webpack.config.server.js
index f7cb667c4db..e6d6c4fc719 100644
--- a/dotcom-rendering/webpack/webpack.config.server.js
+++ b/dotcom-rendering/webpack/webpack.config.server.js
@@ -2,6 +2,7 @@
const nodeExternals = require('webpack-node-externals');
const swcConfig = require('./.swcrc.json');
const { svgr } = require('./svg.cjs');
+const { transpileExclude } = require('./webpack.config.client.js');
const DEV = process.env.NODE_ENV === 'development';
const nodeVersion = process.versions.node;
@@ -77,6 +78,7 @@ module.exports = {
rules: [
{
test: /(\.tsx|\.js|\.ts)$/,
+ exclude: transpileExclude,
use: swcLoader,
},
svgr,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c97d2239ac..d37cfa89f5f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12502,13 +12502,13 @@ snapshots:
'@guardian/eslint-config-typescript@12.0.0(eslint@8.57.1)(tslib@2.6.2)(typescript@5.5.3)':
dependencies:
- '@guardian/eslint-config': 9.0.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)(tslib@2.6.2)
+ '@guardian/eslint-config': 9.0.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)(tslib@2.6.2)
'@stylistic/eslint-plugin': 2.6.2(eslint@8.57.1)(typescript@5.5.3)
'@typescript-eslint/eslint-plugin': 8.1.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1)(typescript@5.5.3)
'@typescript-eslint/parser': 8.1.0(eslint@8.57.1)(typescript@5.5.3)
eslint: 8.57.1
- eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1)
- eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)
+ eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1)
+ eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
tslib: 2.6.2
typescript: 5.5.3
transitivePeerDependencies:
@@ -12537,12 +12537,12 @@ snapshots:
- supports-color
- typescript
- '@guardian/eslint-config@9.0.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)(tslib@2.6.2)':
+ '@guardian/eslint-config@9.0.0(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)(tslib@2.6.2)':
dependencies:
eslint: 8.57.1
eslint-config-prettier: 9.1.0(eslint@8.57.1)
eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.1)
- eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)
+ eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
tslib: 2.6.2
transitivePeerDependencies:
- '@typescript-eslint/parser'
@@ -16546,13 +16546,13 @@ snapshots:
transitivePeerDependencies:
- supports-color
- eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1):
+ eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1):
dependencies:
debug: 4.4.3(supports-color@8.1.1)
enhanced-resolve: 5.19.0
eslint: 8.57.1
- eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)
- eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)
+ eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
+ eslint-plugin-import: 2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
fast-glob: 3.3.3
get-tsconfig: 4.7.2
is-core-module: 2.16.1
@@ -16580,14 +16580,14 @@ snapshots:
transitivePeerDependencies:
- supports-color
- eslint-module-utils@2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1):
+ eslint-module-utils@2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
dependencies:
debug: 3.2.7
optionalDependencies:
'@typescript-eslint/parser': 8.1.0(eslint@8.57.1)(typescript@5.5.3)
eslint: 8.57.1
eslint-import-resolver-node: 0.3.9
- eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1)
+ eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1)
transitivePeerDependencies:
- supports-color
@@ -16632,7 +16632,7 @@ snapshots:
- supports-color
- typescript
- eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1):
+ eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
dependencies:
array-includes: 3.1.9
array.prototype.findlastindex: 1.2.6
@@ -16642,7 +16642,7 @@ snapshots:
doctrine: 2.1.0
eslint: 8.57.1
eslint-import-resolver-node: 0.3.9
- eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1)
+ eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@8.1.0(eslint@8.57.1)(typescript@5.5.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
hasown: 2.0.2
is-core-module: 2.16.1
is-glob: 4.0.3
