refactor(Card + FloatingCard)!: changing FloatCard to internal use and refactoring Card

[LinKCoding]

Overview

Making FloatingCard an internal component, for Gamut use only.
The styling that FloatingCard provided is now in the Card component, such as:

• a shadow effect on hover
• an optional pattern SVG behind the Card

Other changes:

• FloatingCard is renamed to InternalFloatingCard and marked as deprecated
• Card now has variants that uses the variant util function
• Card elements are based off framer motion and provide small animations for the hover effect
• Card takes on a medium border radius and a shadow hover when isInteractive prop is true (i.e. in a link, or button, or has a clickable area inside the body of the Card)
• A Card that is not interactive will have a none border radius by default

PR Checklist

• Related to designs: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=29975-39392&m=dev
• Related to JIRA ticket: GM-925
• 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. Go to the Card story
2. Look over the examples see that examples make sense and work, esp the isInteractive section
3. Look over the InternalFloatingCard story - notice the callout and the status of "Old Style".
4. Look over components that use InternalFloatingCard, like Modal, Toast and see that they still work and are ok.
5. ...
6. Profit?!

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal App	Monorepo Link	Portal Env
LE Preview	Monorepo Link	LE Env
Brand	Monorepo Link	Storybook

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 6718ba8.

---

☁️ Nx Cloud last updated this comment at 2025-03-20 19:06:51 UTC

[codecademydev]

📬Published Alpha Packages:

@codecademy/gamut@59.3.1-alpha.6718ba.0
@codecademy/gamut-kit@0.6.488-alpha.6718ba.0
@codecademy/styleguide@70.5.1-alpha.6718ba.0

[codecademydev]

🚀 Styleguide deploy preview ready!

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

Deploy Logs