- {slimifySectionForAbTest && sectionId === 'news' && (
-
-
-
-
-
- )}
+ {showRightContentForSlimHomepageAbTest &&
+ sectionId === 'news' && (
+
+
+
+
+
+ )}
- {slimifySectionForAbTest && sectionId === 'features' && (
-
-
-
-
-
- )}
+ {showRightContentForSlimHomepageAbTest &&
+ sectionId === 'features' && (
+
+
+
+
+
+ )}
{
const isBelowTabletBreakpoint = useMatchMedia(
removeMediaRulePrefix(until.tablet),
);
+ const headlineSizes = {
+ desktop: 'xsmall',
+ tablet: 'xxsmall',
+ mobile: 'xsmall',
+ } as const;
+
return (
(
@@ -100,6 +104,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]],
diff --git a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
index 8946eb185f0..e26547e360c 100644
--- a/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
+++ b/dotcom-rendering/src/components/ScrollableMedium.importable.tsx
@@ -17,6 +17,7 @@ type Props = {
imageLoading: 'lazy' | 'eager';
aspectRatio: AspectRatio;
sectionId: string;
+ isInSlimHomepageAbTestVariant?: boolean;
};
/**
@@ -34,6 +35,7 @@ export const ScrollableMedium = ({
showAge,
aspectRatio,
sectionId,
+ isInSlimHomepageAbTestVariant,
}: Props) => {
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 +59,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),
diff --git a/dotcom-rendering/src/components/StaticMediumFour.stories.tsx b/dotcom-rendering/src/components/StaticMediumFour.stories.tsx
index da2d2636497..78beb99d01b 100644
--- a/dotcom-rendering/src/components/StaticMediumFour.stories.tsx
+++ b/dotcom-rendering/src/components/StaticMediumFour.stories.tsx
@@ -29,6 +29,7 @@ const meta = {
showAge: true,
imageLoading: 'eager',
aspectRatio: '5:4',
+ isInSlimHomepageAbTestVariant: false,
},
render: (args) => (
@@ -53,6 +57,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: {
diff --git a/dotcom-rendering/src/components/StaticMediumFour.tsx b/dotcom-rendering/src/components/StaticMediumFour.tsx
index 470f607208d..600ec3b9696 100644
--- a/dotcom-rendering/src/components/StaticMediumFour.tsx
+++ b/dotcom-rendering/src/components/StaticMediumFour.tsx
@@ -9,6 +9,7 @@ import type {
import { LI } from './Card/components/LI';
import type { MediaPositionType } from './Card/components/MediaWrapper';
import { UL } from './Card/components/UL';
+import { defaultFontSizes } from './CardHeadline';
import type { Loading } from './CardPicture';
import { FrontCard } from './FrontCard';
@@ -32,6 +33,7 @@ type Props = {
showImage?: boolean;
aspectRatio: AspectRatio;
containerLevel?: DCRContainerLevel;
+ isInSlimHomepageAbTestVariant?: boolean;
};
export const StaticMediumFour = ({
@@ -43,6 +45,7 @@ export const StaticMediumFour = ({
showImage = true,
aspectRatio,
containerLevel = 'Primary',
+ isInSlimHomepageAbTestVariant = false,
}: Props) => {
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/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
index 7325e7e5bf1..fb8d851f238 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',
+ 'variant-one',
)) ??
false;
+ const isInSlimHomepageAbTestVariantTwo =
+ (pageQualifiesForSlimHomepageAbTest &&
+ abTests?.isUserInTestGroup(
+ 'fronts-and-curation-slim-homepage',
+ '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
@@ -494,7 +506,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
index,
collection,
front.isNetworkFront,
- isTargetedContainerInSlimHomepageAbTest,
+ isInSlimHomepageAbTestVariantTwo,
)}
leftContent={decideLeftContent(
front,
@@ -534,8 +546,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 +578,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
sectionId={ophanName}
collectionId={index + 1}
containerLevel={collection.containerLevel}
+ isInSlimHomepageAbTestVariant={
+ isInEitherSlimHomepageAbTestVariant
+ }
/>
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
+ );
+};