feat(badge): adding leading-icon to badge

[LinKCoding]

Overview

Adding an icon prop to the badge component.
Also adding a tertiary-fill variant for badges.

PR Checklist

• Related to designs: https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?type=design&node-id=29959-39721&mode=design&t=nBBLirSlYHPh47rh-0
• Related to JIRA ticket: GM-591
• Related to JIRA ticket: GM-642
• I have run this code to verify it works
• 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

For Mono:

1. For the tertiaryFill and icon, you can go to the homepage
2. Then check that badges aren't broken, go to the pricing page, there's a "New" badge above "AI learning assistance" -- check that it renders just fine

For the monolith:

1. Log in with an admin account
2. Go to the admin page
3. check that both badges ("For Kicks" + "and giggles") render

PR Links and Envs

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

[dreamwasp]

code looks great! one small tweak on some centering then it's good to go 🔥

[dreamwasp]

all of the SB examples look great but noticed the portal example is very slightly wonky -

i think wrapping children in 100% width centered Flexbox should fix that! if it persists you may need to tweak lineHeight too 🤔

[LinKCoding]

Ahhhh that's on me... probably a bad example to just tweak, there was some margin stuff in there that I didn't consider. Sorry about that :(

oddly enough, I don't see the text being shifted - admittedly, I removed the margin and put it back just as a sanity check and it looks fine to me

the badge seems to have a flex display and align-items: center.

I temporarily changed it in storybook and it looks good (just in case it was an issue with the icon itself)

maybe we can look at this together on Monday.
Thanks Cass :)

[dreamwasp]

yeah that looks great now!

[LinKCoding]

but now I'm paranoid about why you saw what you saw lol

[dreamwasp]

love ittt

[LinKCoding]

In the end, I opted to give 2px margins for both sized badge variants.
It looks good to me, but I'm happy to make changes if need be.

I also added a bunch more examples in SB -- more so just for reviewing.
Once I get the ok, I'll remove the ones appended with "FOR TESTING" at the end.

[dreamwasp]

check it out in light mode and dark mode and both looks great! 🚢

[codecademydev]

📬Published Alpha Packages:

@codecademy/gamut@55.19.2-alpha.6e976e.0
@codecademy/gamut-kit@0.6.408-alpha.6e976e.0
@codecademy/styleguide@66.19.4-alpha.6e976e.0

[codecademydev]

🚀 Styleguide deploy preview ready!

https://6644b6f137a043033edb52e8--gamut-preview.netlify.app

Deploy Logs