Skip to content

Support strike through in product buttons - #16705

Merged
andrewHEguardian merged 5 commits into
mainfrom
ahe/product-button-strike-through
Sep 14, 2026
Merged

Support strike through in product buttons#16705
andrewHEguardian merged 5 commits into
mainfrom
ahe/product-button-strike-through

Conversation

@andrewHEguardian

Copy link
Copy Markdown
Contributor

What does this change?

Adds support for strike through in prices on product buttons, denoted by tildes ~ ~

Why?

To enable editorial of The Filter to mark sale prices that have been reduced, either manually or later once we have live pricing providing information on discounts.

How has this change been tested?

Storybook examples added + unit tests

Screenshots

Product element product CTA
image

Product button element
image

@andrewHEguardian andrewHEguardian added the feature Departmental tracking: work on a new feature label Sep 9, 2026
@andrewHEguardian
andrewHEguardian requested a review from a team September 9, 2026 10:22
@@ -0,0 +1,37 @@
import { render } from '@testing-library/react';

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disclosure: copilot mostly wrote these tests

@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown

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.

@andrewHEguardian andrewHEguardian added the run_chromatic Runs chromatic when label is applied label Sep 9, 2026
@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown

🚀 Image pushed to AWS ECR

Image digest: sha256:3e414a88dba9696aa4acf5d4ac8d9b1f7bf799731468d29169e2c31c1a32b6b6

🐛 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:3e414a88dba9696aa4acf5d4ac8d9b1f7bf799731468d29169e2c31c1a32b6b6"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-ahe-product-button-strike-through"

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

# Refer to image via the GitHub commit SHA tag
# IMAGE_IDENTIFIER=":sha-4729bfb7932b733a57539f6d6bb4eb5d706444b0"

# 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

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown

@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown

@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Sep 9, 2026

@SolomonTheGuardian SolomonTheGuardian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, 1 comment

Comment on lines +32 to +36
it('describes the old and new prices accessibly', () => {
expect(createAccessibleProductLabel('~£10~ £5 at Shop')).toBe(
'Was £10, now £5 at Shop',
);
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is "now £5" meant to have the double space?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good spot, addressed in 306c1df.
This is what happens when you trust copilot

@andrewHEguardian andrewHEguardian added the run_chromatic Runs chromatic when label is applied label Sep 14, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Sep 14, 2026
@andrewHEguardian
andrewHEguardian added this pull request to the merge queue Sep 14, 2026
Merged via the queue into main with commit 3013b01 Sep 14, 2026
37 checks passed
@andrewHEguardian
andrewHEguardian deleted the ahe/product-button-strike-through branch September 14, 2026 15:12
@gu-prout

gu-prout Bot commented Sep 14, 2026

Copy link
Copy Markdown

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants