[DanielCliftonGuardian]

What does this change?

Adds container level sponsorship to the puzzles hub. A sponsored container (e.g. Crosswords) shows "Supported by" and the sponsor's logo next to its title see figma.

PuzzlesDirectory takes an optional containerBranding prop (sponsor per container ID), but nothing passes it in production yet, so the hub looks the same as it does now. Feeding it from page data will come in a follow-up PR, as with the hub header.

Why?

Puzzles sponsorship needs to work at front, container and game level (see the Puzzles sponsorship RFC). The hub header was merged in a previous pr, this is the container level.

Screenshots

Wide	Mobile

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1219705702108982

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:9207e282b02827ec2fcb43de584fc2ba07a00d92d8068a6ee0fd6df3f23e560e

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:9207e282b02827ec2fcb43de584fc2ba07a00d92d8068a6ee0fd6df3f23e560e"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-puzzles-container-sponsorship"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-32757"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

---

From guardian/actions-ecr.

[github-actions]

Deploy build 32757 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[Copilot]

🟡 Changes recommended

The container sponsorship label needs theme-aware colouring to remain readable in dark mode.

1 open issue

• Use themed text color for dark-mode Supported by label · New

What changed in this PR

Adds container-level sponsorship to the puzzles hub, extending the existing sponsored header. Production data wiring remains deferred.

Changes:

• Adds optional per-container branding beside section titles.
• Shares sponsor-link rendering between header and container branding.
• Adds a sponsorship test and Storybook example.

File	Description
dotcom-rendering/​src/​components/​PuzzlesDirectory.tsx	Accepts and displays per-container branding.
dotcom-rendering/​src/​components/​PuzzlesDirectory.test.tsx	Tests sponsorship placement and link details.
dotcom-rendering/​src/​components/​PuzzlesDirectory.stories.tsx	Adds a sponsored-container example.
dotcom-rendering/​src/​components/​PuzzlesBranding.tsx	Adds container branding and shares sponsor-link rendering.

_{Review effort: Balanced}

[andresilva-guardian]

LGTM, nice work! 🚀

The SponsorLogoLink extraction is clean and leaves the existing PuzzlesBranding markup and Ophan attributes unchanged. Unsponsored containers keep their current heading styles and id, so the aria-labelledby wiring still works. The responsive layout (side by side on mobile, stacked from leftCol) looks sensible, and the new Jest test and SponsoredContainer story cover the behaviour well. Since nothing passes containerBranding in production yet, the risk is low.

Minor, non-blocking nits:

• Missing blank line between the new it(...) and the next one in PuzzlesDirectory.test.tsx.
• containerLockupStyles hardcodes palette.neutral[7] while the rest of the component uses CSS variables like --puzzles-text-colour. Worth checking this is fine if the container can appear under a different theme.

[gu-prout]

Seen on PROD (merged by @DanielCliftonGuardian 8 minutes and 9 seconds ago) Please check your changes!