Create Opinion No Avatar experiment

Author: domlander

dotcom-rendering/src/components/DecideContainer.tsx

@@ -48,7 +48,7 @@ type Props = {
 	frontId?: string;
 	collectionId: number;
 	containerLevel?: DCRContainerLevel;
-	isInNoBoostsAbTestVariant?: boolean;
+	isInOpinionNoAvatarVariant?: boolean;
 };
 
 export const DecideContainer = ({
@@ -64,7 +64,7 @@ export const DecideContainer = ({
 	frontId,
 	collectionId,
 	containerLevel,
-	isInNoBoostsAbTestVariant,
+	isInOpinionNoAvatarVariant,
 }: Props) => {
 	switch (containerType) {
 		case 'dynamic/fast':
@@ -270,7 +270,7 @@ export const DecideContainer = ({
 					aspectRatio={aspectRatio}
 					containerLevel={containerLevel}
 					collectionId={collectionId}
-					isInNoBoostsAbTestVariant={isInNoBoostsAbTestVariant}
+					isInOpinionNoAvatarVariant={isInOpinionNoAvatarVariant}
 				/>
 			);
 		case 'scrollable/small':

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -21,7 +21,6 @@ import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FeatureCard } from './FeatureCard';
 import { FrontCard } from './FrontCard';
-import { Hide } from './Hide';
 import type { Alignment } from './SupportingContent';
 
 type Props = {
@@ -33,7 +32,7 @@ type Props = {
 	aspectRatio: AspectRatio;
 	containerLevel?: DCRContainerLevel;
 	collectionId: number;
-	isInNoBoostsAbTestVariant?: boolean;
+	isInOpinionNoAvatarVariant?: boolean;
 };
 
 type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -582,7 +581,7 @@ export const FlexibleGeneral = ({
 	aspectRatio,
 	containerLevel = 'Primary',
 	collectionId,
-	isInNoBoostsAbTestVariant,
+	isInOpinionNoAvatarVariant,
 }: Props) => {
 	const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
 		...snap,
@@ -594,6 +593,9 @@ export const FlexibleGeneral = ({
 		.map((standard, i) => ({
 			...standard,
 			uniqueId: `collection-${collectionId}-standard-${i}`,
+			avatarUrl: isInOpinionNoAvatarVariant
+				? undefined
+				: standard.avatarUrl,
 		}));
 
 	const groupedCards = decideCardPositions(cards);
@@ -616,48 +618,7 @@ export const FlexibleGeneral = ({
 			{groupedCards.map((row, i) => {
 				switch (row.layout) {
 					case 'oneCardFullWidth':
-						return isInNoBoostsAbTestVariant ? (
-							<>
-								<Hide when="above" breakpoint="tablet">
-									<HalfWidthCardLayout
-										key={row.cards[0]?.uniqueId}
-										cards={row.cards}
-										containerPalette={containerPalette}
-										showAge={showAge}
-										absoluteServerTimes={
-											absoluteServerTimes
-										}
-										imageLoading={imageLoading}
-										isFirstRow={!splash.length && i === 0}
-										isFirstStandardRow={i === 0}
-										aspectRatio={aspectRatio}
-										isLastRow={
-											i === groupedCards.length - 1
-										}
-										containerLevel={containerLevel}
-									/>
-								</Hide>
-								<Hide when="below" breakpoint="tablet">
-									<FullWidthCardLayout
-										key={row.cards[0]?.uniqueId}
-										cards={row.cards}
-										containerPalette={containerPalette}
-										showAge={showAge}
-										absoluteServerTimes={
-											absoluteServerTimes
-										}
-										imageLoading={imageLoading}
-										aspectRatio={aspectRatio}
-										isFirstRow={!splash.length && i === 0}
-										isLastRow={
-											i === groupedCards.length - 1
-										}
-										containerLevel={containerLevel}
-										collectionId={collectionId}
-									/>
-								</Hide>
-							</>
-						) : (
+						return (
 							<FullWidthCardLayout
 								key={row.cards[0]?.uniqueId}
 								cards={row.cards}

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -136,7 +136,8 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const { absoluteServerTimes = false } = front.config.switches;
 
-	const isInNoBoostsVariant = abTests.noBoostsVariant === 'variant';
+	const isInOpinionNoAvatarVariant =
+		abTests.opinionNoAvatarVariant === 'variant' && front.isNetworkFront;
 
 	const fallbackAspectRatio = (collectionType: DCRContainerType) => {
 		switch (collectionType) {
@@ -636,8 +637,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 									sectionId={ophanName}
 									collectionId={index + 1}
 									containerLevel={collection.containerLevel}
-									isInNoBoostsAbTestVariant={
-										pageId === 'uk' && isInNoBoostsVariant
+									isInOpinionNoAvatarVariant={
+										collection.displayName === 'Opinion' &&
+										isInOpinionNoAvatarVariant
 									}
 								/>
 							</FrontSection>