From 3a8752942ec51a7c10cebc857e631e2d038d1547 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 6 Jan 2025 11:52:06 +0000 Subject: [PATCH] Remove big six onwards content AB test --- .../src/components/BigSixOnwardsContent.tsx | 222 ------------------ .../components/OnwardsUpper.importable.tsx | 22 +- dotcom-rendering/src/experiments/ab-tests.ts | 2 - .../tests/onwards-content-article.ts | 30 --- 4 files changed, 1 insertion(+), 275 deletions(-) delete mode 100644 dotcom-rendering/src/components/BigSixOnwardsContent.tsx delete mode 100644 dotcom-rendering/src/experiments/tests/onwards-content-article.ts diff --git a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx b/dotcom-rendering/src/components/BigSixOnwardsContent.tsx deleted file mode 100644 index 6f7217805e6..00000000000 --- a/dotcom-rendering/src/components/BigSixOnwardsContent.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import { css } from '@emotion/react'; -import { from, headlineBold24, space } from '@guardian/source/foundations'; -import { decideFormat } from '../lib/articleFormat'; -import { getSourceImageUrl } from '../lib/getSourceImageUrl_temp_fix'; -import { useApi } from '../lib/useApi'; -import { palette } from '../palette'; -import type { DCRFrontCard } from '../types/front'; -import type { FETrailType } from '../types/trails'; -import { Card } from './Card/Card'; -import { LI } from './Card/components/LI'; -import { UL } from './Card/components/UL'; -import { LeftColumn } from './LeftColumn'; -import { Placeholder } from './Placeholder'; - -type OnwardsResponse = { - trails: FETrailType[]; - heading: string; - displayname: string; - description: string; -}; - -const containerStyles = css` - display: flex; - flex-direction: column; - padding-bottom: ${space[6]}px; - - ${from.leftCol} { - flex-direction: row; - } - ${from.wide} { - padding-right: 80px; - } -`; - -const cardsContainer = css` - padding-top: ${space[2]}px; -`; - -const headerStyles = css` - ${headlineBold24}; - color: ${palette('--carousel-text')}; - padding-bottom: ${space[2]}px; - padding-top: ${space[1]}px; - margin-left: 0; -`; -const mobileHeaderStyles = css` - ${headerStyles}; - ${from.tablet} { - padding-left: 10px; - } - ${from.leftCol} { - display: none; - } -`; - -const convertFETrailToDcrTrail = ( - trails: FETrailType[], - discussionApiUrl: string, -): DCRFrontCard[] => - trails.map((trail) => ({ - dataLinkName: 'onwards-content-card', - discussionId: trail.discussion?.discussionId, - discussionApiUrl, - format: decideFormat(trail.format), - headline: trail.headline, - image: { - src: trail.masterImage - ? trail.masterImage - : trail.image - ? getSourceImageUrl(trail.image) - : '', - altText: trail.linkText ?? '', - }, - isExternalLink: false, - onwardsSource: 'related-content', - showLivePlayable: false, - showQuotedHeadline: false, - url: trail.url, - webPublicationDate: trail.webPublicationDate, - })); - -type Props = { url: string; discussionApiUrl: string }; - -/** - * Big Six refers to the style of the onwards content container. It displays six article - * cards in a gallery-style container, as opposed to a carousel. - */ -export const BigSixOnwardsContent = ({ url, discussionApiUrl }: Props) => { - const { data, error } = useApi(url); - - if (error) { - // Send the error to Sentry and then prevent the element from rendering - window.guardian.modules.sentry.reportError(error, 'onwards-lower'); - return null; - } - - if (!data?.trails) { - return ( - - ); - } - - const trails: DCRFrontCard[] = convertFETrailToDcrTrail( - data.trails, - discussionApiUrl, - ); - - const firstSlice75 = trails.slice(0, 1); - const firstSlice25 = trails.slice(1, 2); - const secondSlice25 = trails.slice(2, 6); - - const heading = data.heading || data.displayname; - - return ( -
- -

- {heading} -

- -

- {heading} -

-
-
    - {firstSlice75.map((trail) => ( -
  • - -
    • - ))} - {firstSlice25.map((trail) => ( -
  • - -
    • - ))} -
-
    - {secondSlice25.map((trail, index) => { - const dataLinkName = `onwards-content-gallery-style ${ - trail.dataLinkName - }-position-${index + 2}`; - - return ( -
  • 0} - > - -
    • - ); - })} -
-
-
- ); -}; diff --git a/dotcom-rendering/src/components/OnwardsUpper.importable.tsx b/dotcom-rendering/src/components/OnwardsUpper.importable.tsx index 888f0156ff7..bec9540d28c 100644 --- a/dotcom-rendering/src/components/OnwardsUpper.importable.tsx +++ b/dotcom-rendering/src/components/OnwardsUpper.importable.tsx @@ -6,12 +6,10 @@ import { Pillar, } from '../lib/articleFormat'; import type { EditionId } from '../lib/edition'; -import { useAB } from '../lib/useAB'; import { useIsAndroid } from '../lib/useIsAndroid'; import { palette } from '../palette'; import type { OnwardsSource } from '../types/onwards'; import type { TagType } from '../types/tag'; -import { BigSixOnwardsContent } from './BigSixOnwardsContent'; import { FetchOnwardsData } from './FetchOnwardsData.importable'; import { Section } from './Section'; @@ -216,14 +214,7 @@ export const OnwardsUpper = ({ discussionApiUrl, absoluteServerTimes, }: Props) => { - const abTestAPI = useAB()?.api; - const isInOnwardsAbTestVariant = abTestAPI?.isUserInVariant( - 'OnwardsContentArticle', - 'variant', - ); - const isAndroid = useIsAndroid(); - if (isAndroid) return null; // Related content can be a collection of articles based on @@ -306,18 +297,7 @@ export const OnwardsUpper = ({ return (
- {!!url && isInOnwardsAbTestVariant && ( -
- -
- )} - {!!url && !isInOnwardsAbTestVariant && ( + {!!url && (
true, - variants: [ - { - id: 'control', - test: (): void => { - /* no-op */ - }, - }, - { - id: 'variant', - test: (): void => { - /* no-op */ - }, - }, - ], -};