diff --git a/dotcom-rendering/fixtures/manual/frontCollections.ts b/dotcom-rendering/fixtures/manual/frontCollections.ts
index 43c2e4d5b5b..3a3dabb0078 100644
--- a/dotcom-rendering/fixtures/manual/frontCollections.ts
+++ b/dotcom-rendering/fixtures/manual/frontCollections.ts
@@ -9,7 +9,7 @@ const defaultGrouped = {
const defaultValues = {
backfill: [],
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
config: {
showDateHeader: false,
},
@@ -35,13 +35,13 @@ export const testCollectionsUk = [
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
containerPalette: 'LongRunningAltPalette',
displayName: 'Ukraine invasion',
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-V-mpu',
+ collectionType: 'static/medium/4',
displayName: 'News extra',
},
{
@@ -71,12 +71,12 @@ export const testCollectionsUk = [
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VI',
+ collectionType: 'flexible/general',
displayName: 'Lifestyle',
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VII',
+ collectionType: 'flexible/general',
displayName: 'Culture',
},
{
@@ -91,7 +91,7 @@ export const testCollectionsUk = [
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
displayName: 'The rural network',
},
{
@@ -111,23 +111,23 @@ export const testCollectionsUk = [
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VI',
+ collectionType: 'flexible/general',
displayName: 'Multimedia',
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
containerPalette: 'Branded',
displayName: 'Guardian Labs',
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-XII-mpu',
+ collectionType: 'flexible/general',
displayName: 'Explore',
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-I',
+ collectionType: 'flexible/general',
displayName: 'The big picture',
},
{
@@ -162,7 +162,7 @@ export const testCollectionsUs = [
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
displayName: 'In depth',
},
{
@@ -172,13 +172,13 @@ export const testCollectionsUs = [
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
containerPalette: 'LongRunningAltPalette',
displayName: 'Ukraine invasion',
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VI',
+ collectionType: 'flexible/general',
displayName: 'Opinion',
},
{
@@ -193,7 +193,7 @@ export const testCollectionsUs = [
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
displayName: 'Climate crisis',
},
{
@@ -218,7 +218,7 @@ export const testCollectionsUs = [
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VII',
+ collectionType: 'flexible/general',
displayName: 'Podcasts',
},
{
@@ -228,28 +228,28 @@ export const testCollectionsUs = [
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VI',
+ collectionType: 'flexible/general',
displayName: 'Culture',
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
containerPalette: 'Branded',
displayName: 'Business briefs',
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VI',
+ collectionType: 'flexible/general',
displayName: 'Lifestyle',
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
displayName: 'Take part',
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VI',
+ collectionType: 'flexible/general',
displayName: 'Explore',
},
{
@@ -259,7 +259,7 @@ export const testCollectionsUs = [
},
{
...defaultValues,
- collectionType: 'fixed/medium/slow-VI',
+ collectionType: 'flexible/general',
displayName: 'In pictures',
},
{
@@ -282,7 +282,7 @@ export const brandedTestCollections = [
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
containerPalette: 'Branded',
displayName: 'Guardian Labs',
},
@@ -293,7 +293,7 @@ export const brandedTestCollections = [
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
containerPalette: 'Branded',
displayName: 'Guardian Labs',
},
@@ -304,7 +304,7 @@ export const brandedTestCollections = [
},
{
...defaultValues,
- collectionType: 'fixed/small/slow-IV',
+ collectionType: 'static/medium/4',
containerPalette: 'Branded',
displayName: 'Guardian Labs',
},
diff --git a/dotcom-rendering/src/components/DecideContainer.tsx b/dotcom-rendering/src/components/DecideContainer.tsx
index fc514f1c2d3..98395248bf5 100644
--- a/dotcom-rendering/src/components/DecideContainer.tsx
+++ b/dotcom-rendering/src/components/DecideContainer.tsx
@@ -7,19 +7,6 @@ import type {
DCRFrontCard,
DCRGroupedTrails,
} from '../types/front';
-import { FixedLargeSlowXIV } from './FixedLargeSlowXIV';
-import { FixedMediumFastXI } from './FixedMediumFastXI';
-import { FixedMediumFastXII } from './FixedMediumFastXII';
-import { FixedMediumSlowVI } from './FixedMediumSlowVI';
-import { FixedMediumSlowVII } from './FixedMediumSlowVII';
-import { FixedMediumSlowXIIMPU } from './FixedMediumSlowXIIMPU';
-import { FixedSmallFastVIII } from './FixedSmallFastVIII';
-import { FixedSmallSlowI } from './FixedSmallSlowI';
-import { FixedSmallSlowIII } from './FixedSmallSlowIII';
-import { FixedSmallSlowIV } from './FixedSmallSlowIV';
-import { FixedSmallSlowVHalf } from './FixedSmallSlowVHalf';
-import { FixedSmallSlowVMPU } from './FixedSmallSlowVMPU';
-import { FixedSmallSlowVThird } from './FixedSmallSlowVThird';
import { FlexibleGeneral } from './FlexibleGeneral';
import { FlexibleSpecial } from './FlexibleSpecial';
import { Island } from './Island';
@@ -61,136 +48,6 @@ export const DecideContainer = ({
containerLevel,
}: Props) => {
switch (containerType) {
- case 'fixed/large/slow-XIV':
- return (
-
- );
- case 'fixed/small/slow-IV':
- return (
-
- );
- case 'fixed/small/slow-V-mpu':
- return (
-
- );
- case 'fixed/small/slow-III':
- return (
-
- );
- case 'fixed/small/slow-I':
- return (
-
- );
- case 'fixed/small/slow-V-third':
- return (
-
- );
- case 'fixed/small/slow-V-half':
- return (
-
- );
- case 'fixed/medium/slow-VI':
- return (
-
- );
- case 'fixed/medium/slow-VII':
- return (
-
- );
- case 'fixed/medium/slow-XII-mpu':
- return (
-
- );
- case 'fixed/medium/fast-XII':
- return (
-
- );
- case 'fixed/medium/fast-XI':
- return (
-
- );
- case 'fixed/small/fast-VIII':
- return (
-
- );
case 'nav/list':
return ;
case 'nav/media-list':
diff --git a/dotcom-rendering/src/components/FixedLargeSlowXIV.stories.tsx b/dotcom-rendering/src/components/FixedLargeSlowXIV.stories.tsx
deleted file mode 100644
index 58220573981..00000000000
--- a/dotcom-rendering/src/components/FixedLargeSlowXIV.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 { FixedLargeSlowXIV } from './FixedLargeSlowXIV';
-import { FrontSection } from './FrontSection';
-
-export default {
- component: FixedLargeSlowXIV,
- title: 'Front Containers/Deprecated Containers/FixedLargeSlowXIV',
- parameters: {
- chromatic: {
- viewports: [
- breakpoints.mobile,
- breakpoints.tablet,
- breakpoints.wide,
- ],
- },
- },
-};
-
-export const Default = () => (
-
-
-
-);
-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 (
- <>
-
- {/*
- * This pattern of using wrapCards on the UL + percentage=25 and stretch=true
- * on the LI creates a dynanic list of cards over two rows where the second row
- * only appears when there are more than 4 cards
- *
- * E.g:
- * ._____._____._____._____.
- * |_____|_____|_____|_____|
- * |___________|___________|
- */}
-
- {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/frontend/feFront.ts b/dotcom-rendering/src/frontend/feFront.ts
index a9fcb040380..070e19ccf06 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'
diff --git a/dotcom-rendering/src/frontend/schemas/feFront.json b/dotcom-rendering/src/frontend/schemas/feFront.json
index e55d29ae127..a268d690f82 100644
--- a/dotcom-rendering/src/frontend/schemas/feFront.json
+++ b/dotcom-rendering/src/frontend/schemas/feFront.json
@@ -3393,19 +3393,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/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 (
-
- );
-};
-
-/**
- * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃
- * ┃ ┃
- * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
- * Card designed to take up 100% of the container, with media that takes up 75%
- *
- * Options:
- * - Medium headline (large on mobile)
- * - Jumbo image on the top (top on mobile)
- * - Trail text
- * - Up to 2 supporting content items, always aligned vertically
- */
-
-export const Card100Media100Tall = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
-
-/**
- * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┐
- * ┃ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃ 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 right (top on mobile)
- * - Trail text
- * - Up to 3 supporting content items, 1-2 aligned vertical, 3 aligned horizontal
- */
-export const Card75Media50Right = ({
- 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 (
-
- );
-};
-
-/**
- * ┏━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒┃ 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 Card25Media25SmallHeadline = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
-
-/**
- * ┏━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒┃ ┊
- * ┃▒▒▒▒▒▒▒▒▒┃ 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)
- * - Trail text when there is no supporting content
- * - Up to 2 supporting content items, always aligned vertical
- */
-export const Card25Media25Tall = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
-
-/**
- * ┏━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒┃ ┊
- * ┃▒▒▒▒▒▒▒▒▒┃ 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)
- * - Up to 2 supporting content items, always aligned vertical
- */
-export const Card25Media25TallNoTrail = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
-
/**
* ┏━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒┃ ┊
* ┃▒▒▒▒▒▒▒▒▒┃ 75% ┊
- * ┃ ┃ Remaining ┊
+ * ┃▒▒▒▒▒▒▒▒▒┃ Remaining ┊
* ┃ ┃ ┊
* ┗━━━━━━━━━┹┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┘
* Card designed to take up 25% of the container, with media that takes up 25%
*
* Options:
- * - Small headline (medium on mobile)
+ * - 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 Card25Media25TallSmallHeadline = ({
+export const Card25Media25 = ({
trail,
showAge,
containerPalette,
@@ -529,6 +169,8 @@ export const Card25Media25TallSmallHeadline = ({
return (
@@ -587,91 +228,6 @@ export const Card50Media50 = ({
);
};
-/**
- * ┏━━━━━━━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃ ┊
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃ 50% ┊
- * ┃ ┃ Remaining ┊
- * ┃ ┃ ┊
- * ┗━━━━━━━━━━━━━━━━━━┹┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┘
- * Card designed to take up 50% of the container, with media that takes up 50%
- *
- * Options:
- * - Large headline (large on mobile)
- * - Medium image on the top (top on mobile)
- * - Trail text
- * - Up to 3 supporting content items, always aligned horizontal
- */
-export const Card50Media50Tall = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
-
-/**
- * ┏━━━━━━━━━━━━━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃ 33% ┊
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒┃ Remaining ┊
- * ┃ ┃ ┊
- * ┗━━━━━━━━━━━━━━━━━━━━━━━━┹┈┈┈┈┈┈┈┈┈┈┈┈┘
- * Card designed to take up 66% of the container, with media that takes up 66%
- *
- * Options:
- * - Medium headline (medium on mobile)
- * - Large image on the top (top on mobile)
- * - Trail text
- * - No supporting content
- */
-export const Card66Media66 = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
-
/**
* ┏━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
* ┃▒▒▒▒▒▒▒▒▒▒▒▒┃ 66% ┊
@@ -712,90 +268,6 @@ export const Card33Media33 = ({
/>
);
};
-/**
- * ┏━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒┃ 66% ┊
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒┃ Remaining ┊
- * ┃ ┃ ┊
- * ┗━━━━━━━━━━━━┹┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┘
- * Card designed to take up 33% of the container, with media that takes up 33%
- *
- * Options:
- * - Medium headline (medium on mobile)
- * - Medium image on the top (left on mobile)
- * - No trail text
- * - Up to 2 supporting content items, always aligned vertical
- */
-export const Card33Media33Tall = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
-
-/**
- * ┏━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒┃ 66% ┊
- * ┃▒▒▒▒▒▒▒▒▒▒▒▒┃ Remaining ┊
- * ┃ ┃ ┊
- * ┗━━━━━━━━━━━━┹┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┘
- * Card designed to take up 33% of the container, with media that takes up 33%
- *
- * Options:
- * - Medium headline (large on mobile)
- * - Medium image at the top, including on mobile
- * - Trail text
- * - Up to 2 supporting content items, always aligned vertical
- */
-export const Card33Media33MobileTopTall = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
/**
* ┏━━━━━━━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
@@ -833,81 +305,3 @@ export const CardDefault = ({
/>
);
};
-
-/**
- * ┏━━━━━━━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃ ▒▒▒▒ ┃ Any% Remaining ┊
- * ┗━━━━━━━━━━━━━━━━━━┹┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┘
- * Card designed to take up any width of container, with small left media
- *
- * Options:
- * - Small headline (small on mobile)
- * - Small image on the left (none on mobile)
- * - No trail text
- * - No supporting content
- */
-export const CardDefaultMedia = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
-
-/**
- * ┏━━━━━━━━━━━━━━━━━━┱┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┐
- * ┃ ▒▒▒▒ ┃ Any% Remaining ┊
- * ┗━━━━━━━━━━━━━━━━━━┹┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┘
- * Card designed to take up any width of container, with small left media
- *
- * Options:
- * - Small headline (small on mobile)
- * - Small image on the left (left on mobile)
- * - No trail text
- * - No supporting content
- */
-export const CardDefaultMediaMobile = ({
- trail,
- showAge,
- containerPalette,
- imageLoading,
- isTagPage,
- serverTime,
- aspectRatio,
-}: TrailProps) => {
- return (
-
- );
-};
diff --git a/dotcom-rendering/src/lib/dynamicSlices.tsx b/dotcom-rendering/src/lib/dynamicSlices.tsx
index c64f1b4ade5..a7dbea201b9 100644
--- a/dotcom-rendering/src/lib/dynamicSlices.tsx
+++ b/dotcom-rendering/src/lib/dynamicSlices.tsx
@@ -1,64 +1,3 @@
-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.
*
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);