Remove sign in text from header

[zaraGNM]

What does this change?

This Pr adds a new mobile only A/B test, martech-header-sign-in-header-optimisation, for the sign in and My Account controls in the header. For users in the test variant, the “Sign in” and “My account” text is removed on mobile and replaced with icon only controls.

What does this change?

• Added the martech-header-sign-in-header-optimisation A/B test and the logic to determine which users see the new variant.
• Updated TopBar, TopBarMyAccount and the related components to pass the test variant through and control whether the sign in text is shown on mobile.
• Updated the mobile sign in control to show the profile icon without the “Sign in” text for the test variant.
• Updated the mobile My Account dropdown to use the circular profile icon, switching to a close icon when the dropdown is open.
• Updated the Dropdown component to support a custom renderTrigger, so the mobile account control can change its icon based on the dropdown state.
• Added accessible labels to the icon only controls so they still have a clear accessible name when the visible text is removed.
• Updated the dropdown click handling to ensure the new mobile trigger continues to open and close correctly.
• Added/updated Storybook stories to cover the different signed in, signed out, mobile and desktop states.
• The existing desktop header controls remain unchanged.

Why?

This is the first test for our header space optimisation work. Removing the “Sign in” and “My account” text on mobile gives us more space to optimise the CTA and accompanying text in the header.

We'll use the test to see whether changing these controls to icons affects the sign in rate.

How has this change been tested?

Tested locally using storybook.

need to test in CODE

Screenshots

Existing Header:

Variant Updated Header:

[github-actions]

Deploy build 3498 of dotcom:ab-testing to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:7c1dc016e7777a74cacbd9b16427a89f9cca1939b7857c9d9bf521f7f96d5981

🐛 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:7c1dc016e7777a74cacbd9b16427a89f9cca1939b7857c9d9bf521f7f96d5981"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-zk-sign-in-header-optimisation"

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

# 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${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-publish-image.

[github-actions]

Deploy build 31838 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[Copilot]

Copilot review overview

🟡 Changes recommended

The variant changes desktop spacing, breaks account-trigger analytics, lacks interaction tests, and expires almost immediately.

Review effort: Balanced
Findings: 3 · 1

Open (4)

• Extend experiment expiration to intended end date · New
• Scope variant padding override to mobile breakpoint · New
• Preserve My Account component in tracking name · New
• Add tests for nested trigger state toggling · New

What changed in this PR

Adds a mobile A/B test that replaces account text with icon-only controls.

Changes:

• Adds the header optimisation experiment.
• Introduces responsive account icons and dropdown triggers.
• Adds Storybook scenarios for account states.

File	Description
ab-testing/​config/​abTests.ts	Registers the experiment.
Dropdown.island.tsx	Supports state-aware custom triggers.
TopBar.island.tsx	Applies the experiment assignment.
TopBarMyAccount.tsx	Implements icon-only mobile controls.
TopBar.stories.tsx	Adds account-state stories.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.