Ads for Tag Fronts & respect speed (#8056)

* feat: Add support for tuples Co-Authored-By: Max Duval <[email protected]> * feat: Add support for fast & slow containers on tag fronts * feat: Inject MPU states into containers on Tag fronts Revert "feat: Inject MPU states into containers on Tag fronts" This reverts commit 4d8140dd3ae5e31ebbaa340b332862e1cf5c68ab. Revert "Revert "feat: Inject MPU states into containers on Tag fronts"" This reverts commit 7bca0a66bd23c90d7a4b1c129c72959245d16e51. * WIP: Add support for MPU injection & ads in tag fronts * feat: Add support for desktop & mobile ads on tag fronts * Update slow MPU containers to match frontend for tag fronts * use containerId for key on tag fronts map * Add stories for mpu containers on tag fronts & fix any bugs * Add stories for DecideContainerByTrails & fix layout bugs * refactor: tidier definitions for tuples Co-Authored-By: Max Duval <[email protected]> * refactor: Use exhaustive checks for tag front MPU components Co-Authored-By: Max Duval <[email protected]> * fix: remove unused import * feat: Introduce 'TupleOrLess`and `takeFirst` Co-Authored-By: Max Duval <[email protected]> * refactor: Use exhaustive checking for DecideContainerByTrails Co-Authored-By: Max Duval <[email protected]> * fix: dont render empty ULs if theres only 8 cards * Add tests for tuples takeFirst * chore: Update comment for takeFirst * fix: use correct %'s on DecideContainerByTrails * fix: remove exports from tag front mpu containers as they're not used * Update dotcom-rendering/src/lib/getAdPositions.ts Co-authored-by: Max Duval <[email protected]> * Update dotcom-rendering/src/lib/getAdPositions.ts Co-authored-by: Max Duval <[email protected]> * Merge branch 'olly/tag-fronts-containers-and-ads' of github.com:guardian/dotcom-rendering into olly/tag-fronts-containers-and-ads * chore: remove isTupleOrGreater as this is no longer used * refactor: use takeFirst in injectMpuIntoGroupedTrails * Final tidy-up --------- Co-authored-by: Max Duval <[email protected]> Co-authored-by: Max Duval <[email protected]>
guardian · Jul 5, 2023 · c274b8a · c274b8a
1 parent 1439334
commit c274b8a
Show file tree

Hide file tree

Showing 15 changed files with 1,385 additions and 128 deletions.
diff --git a/dotcom-rendering/src/components/DecideContainerByTrails.stories.tsx b/dotcom-rendering/src/components/DecideContainerByTrails.stories.tsx
@@ -0,0 +1,188 @@
+import { breakpoints } from '@guardian/source-foundations';
+import { trails } from '../../fixtures/manual/trails';
+import { DecideContainerByTrails } from './DecideContainerByTrails';
+import { FrontSection } from './FrontSection';
+
+export default {
+	component: DecideContainerByTrails,
+	title: 'Components/DecideContainerByTrails',
+	parameters: {
+		chromatic: {
+			viewports: [
+				breakpoints.mobile,
+				breakpoints.tablet,
+				breakpoints.wide,
+			],
+		},
+	},
+};
+
+export const OneCardFast = () => {
+	return (
+		<FrontSection title="Fast - One card">
+			<DecideContainerByTrails trails={trails.slice(0, 1)} speed="fast" />
+		</FrontSection>
+	);
+};
+OneCardFast.storyName = 'Fast - One card';
+
+export const TwoCardFast = () => {
+	return (
+		<FrontSection title="Fast - Two cards">
+			<DecideContainerByTrails trails={trails.slice(0, 2)} speed="fast" />
+		</FrontSection>
+	);
+};
+TwoCardFast.storyName = 'Fast - Two cards';
+
+export const ThreeCardFast = () => {
+	return (
+		<FrontSection title="Fast - Three cards">
+			<DecideContainerByTrails trails={trails.slice(0, 3)} speed="fast" />
+		</FrontSection>
+	);
+};
+ThreeCardFast.storyName = 'Fast - Three cards';
+
+export const FourCardFast = () => {
+	return (
+		<FrontSection title="Fast - Four cards">
+			<DecideContainerByTrails trails={trails.slice(0, 4)} speed="fast" />
+		</FrontSection>
+	);
+};
+FourCardFast.storyName = 'Fast - Four cards';
+
+export const FiveCardFast = () => {
+	return (
+		<FrontSection title="Fast - Five cards">
+			<DecideContainerByTrails trails={trails.slice(0, 5)} speed="fast" />
+		</FrontSection>
+	);
+};
+FiveCardFast.storyName = 'Fast - Five cards';
+
+export const SixCardFast = () => {
+	return (
+		<FrontSection title="Fast - Six cards">
+			<DecideContainerByTrails trails={trails.slice(0, 6)} speed="fast" />
+		</FrontSection>
+	);
+};
+SixCardFast.storyName = 'Fast - Six cards';
+
+export const SevenCardFast = () => {
+	return (
+		<FrontSection title="Fast - Seven cards">
+			<DecideContainerByTrails trails={trails.slice(0, 7)} speed="fast" />
+		</FrontSection>
+	);
+};
+SevenCardFast.storyName = 'Fast - Seven cards';
+
+export const EightCardFast = () => {
+	return (
+		<FrontSection title="Fast - Eight cards">
+			<DecideContainerByTrails trails={trails.slice(0, 8)} speed="fast" />
+		</FrontSection>
+	);
+};
+
+EightCardFast.storyName = 'Fast - Eight cards';
+
+export const TwelveCardFast = () => {
+	return (
+		<FrontSection title="Fast - Twelve cards">
+			<DecideContainerByTrails
+				trails={trails.slice(0, 12)}
+				speed="fast"
+			/>
+		</FrontSection>
+	);
+};
+TwelveCardFast.storyName = 'Fast - Twelve cards';
+
+export const OneCardSlow = () => {
+	return (
+		<FrontSection title="Slow - One card">
+			<DecideContainerByTrails trails={trails.slice(0, 1)} speed="slow" />
+		</FrontSection>
+	);
+};
+OneCardSlow.storyName = 'Slow - One card';
+
+export const TwoCardSlow = () => {
+	return (
+		<FrontSection title="Slow - Two cards">
+			<DecideContainerByTrails trails={trails.slice(0, 2)} speed="slow" />
+		</FrontSection>
+	);
+};
+TwoCardSlow.storyName = 'Slow - Two cards';
+
+export const ThreeCardSlow = () => {
+	return (
+		<FrontSection title="Slow - Three cards">
+			<DecideContainerByTrails trails={trails.slice(0, 3)} speed="slow" />
+		</FrontSection>
+	);
+};
+ThreeCardSlow.storyName = 'Slow - Three cards';
+
+export const FourCardSlow = () => {
+	return (
+		<FrontSection title="Slow - Four cards">
+			<DecideContainerByTrails trails={trails.slice(0, 4)} speed="slow" />
+		</FrontSection>
+	);
+};
+FourCardSlow.storyName = 'Slow - Four cards';
+
+export const FiveCardSlow = () => {
+	return (
+		<FrontSection title="Slow - Five cards">
+			<DecideContainerByTrails trails={trails.slice(0, 5)} speed="slow" />
+		</FrontSection>
+	);
+};
+FiveCardSlow.storyName = 'Slow - Five cards';
+
+export const SixCardSlow = () => {
+	return (
+		<FrontSection title="Slow - Six cards">
+			<DecideContainerByTrails trails={trails.slice(0, 6)} speed="slow" />
+		</FrontSection>
+	);
+};
+SixCardSlow.storyName = 'Slow - Six cards';
+
+export const SevenCardSlow = () => {
+	return (
+		<FrontSection title="Slow - Seven cards">
+			<DecideContainerByTrails trails={trails.slice(0, 7)} speed="slow" />
+		</FrontSection>
+	);
+};
+SevenCardSlow.storyName = 'Slow - Seven cards';
+
+export const EightCardSlow = () => {
+	return (
+		<FrontSection title="Slow - Eight cards">
+			<DecideContainerByTrails trails={trails.slice(0, 8)} speed="slow" />
+		</FrontSection>
+	);
+};
+
+EightCardSlow.storyName = 'Slow - Eight cards';
+
+export const TwelveCardSlow = () => {
+	return (
+		<FrontSection title="Slow - Twelve cards">
+			<DecideContainerByTrails
+				trails={trails.slice(0, 12)}
+				speed="slow"
+			/>
+		</FrontSection>
+	);
+};
+TwelveCardSlow.storyName = 'Slow - Twelve cards';