feat(Tag)!: Creating new Tag variants and removing old variants

[LinKCoding]

Overview

PR Checklist

• Related to designs: https://www.figma.com/file/ReGfRNillGABAj5SlITalN?type=design&node-id=46539%3A40954&mode=dev
• Related to JIRA ticket: GM-601
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

1. In the preview, navigate to to the tags story
2. Compare the styling of the new variants against the figma
3. Turn on VO and go through the tags:
4. readOnly should read the tag's text
5. selection should announce the aria-label to "Dismiss Tag" and the Tooltip's "Remove" text (except on disabled)
6. navigation should read the tag's text and notify that it's a link (unless on disabled)
7. suggestion should read the tag's text and notify that it's a button
8. ...
9. Profit!

—-
Mono:

1. Go to the tengu preview env
2. Go to Pricing > Individuals > select "Try Pro for free"
3. Create an account
4. At checkout, click on the "Have a promo code?" link
5. Add in test50
6. Check that the tag renders correctly.
7. ...
8. Profit!

—-
Monolith/Codecademy:

1. go to the preview (without portal app), log in as an admin
2. Go to the admin page and create a test user that has a Pro subscription + billed monthly
   ^ the settings is important because we need to upgrade the user (and can't seem to upgrade free or pro-lite users)
3. Impersonate the test user
4. go to "Account + Billing" > "Payment And Plan" tab
5. Click on "Update" next to "Billed Monthly" and opt to upgrade to Pro Annual, click "Update billing"
6. in the address bar append the query string: ?coupon=test50
7. see that the tag is rendered correctly
8. ...
9. Profit

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 59ad749.

---

☁️ Nx Cloud last updated this comment at 2025-02-04 01:37:47 UTC

[dreamwasp]

looking good! just a couple of type + button padding comments but definitely coming along!

[dreamwasp]

this looks great!! my one nit is i wonder if we should decide with Emily/Stacey if Dismiss or Remove is better verbiage for the voiceover since having both is repetitive imo but we can do that as a fast follow if needed.

[codecademydev]

📬Published Alpha Packages:

@codecademy/gamut@58.0.3-alpha.59ad74.0
@codecademy/gamut-kit@0.6.469-alpha.59ad74.0
@codecademy/styleguide@69.0.1-alpha.59ad74.0

[codecademydev]

🚀 Styleguide deploy preview ready!

https://67a16f2ee3278538a2fe1ffa--gamut-preview.netlify.app

Deploy Logs