Slim Homepage AB test: implement logic

[domlander]

What does this change?

Implements the logic to render the Most Popular Front Right component in the following circumstances:

• Page is /uk
• Screen width is equal to or greater than 1300px (the wide breakpoint)
• Most Viewed is rendered beside News
• Deeply Read is rendered beside Features and encroaches into More features

The AB test is set to ON but remains at 0%.

The show/hide container button is not displayed for the News, Features or More features container for users in the variant of this test.

Why?

As a part of the Slim Homepage AB test

Note that the slimmed down front sections now "fit" 40px columns in the grid rather than the 60px column grid that the page uses. If this AB test is successful and this feature implemented, we would ensure that the content is aligned to the 60px column grid, which will require a redesign. The AB test is an exploration of how users might interact with this content higher up on the page.

Screenshots

	Before	After
News
Features

[github-actions]

Deploy build 896 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 896 of dotcom:ab-testing to CODE
• Deploy parts of build 896 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 25219 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 25219 of dotcom:rendering-all to CODE
• Deploy parts of build 25219 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[abeddow91]

Nit / personal preference: I think this would be slightly easier to read if the slim homepage styles were separated from the base sectionContent styles

Keeping the default layout styles distinct from the AB-specific override makes it clearer what the “normal” behaviour is.

Something like:

Suggested change

	const sectionContent = (isInSlimHomepageTestVariant: boolean) => css`
	margin: 0;
	grid-column: content;
	.hidden > & {
	display: none;
	}
	grid-column: content;
	${from.wide} {
	grid-column: ${isInSlimHomepageTestVariant ? '5 / 14' : 'content'};
	}
	const sectionContent = css`
	margin: 0;
	grid-column: content;
	.hidden > & {
	display: none;
	}
	}`
	const slimSectionContent = css`
	${from.wide} {
	grid-column: '5 / 14';
	}`

Then apply conditionally:

sectionContent,
slimifySectionForAbTest && slimSectionContent

Happy either way though, so i'll leave this up to you.