refactor(Card + FloatingCard)!: changing FloatCard to internal use and refactoring Card by LinKCoding · Pull Request #3042 · Codecademy/gamut

LinKCoding · 2025-02-21T20:19:42Z

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

Go to the Card story
Look over the examples see that examples make sense and work, esp the isInteractive section
Look over the InternalFloatingCard story - notice the callout and the status of "Old Style".
Look over components that use InternalFloatingCard, like Modal, Toast and see that they still work and are ok.
...
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 · 2025-02-21T20:20:24Z

View your CI Pipeline Execution ↗ for commit 6e79a7f.

☁️ Nx Cloud last updated this comment at 2025-03-31 14:06:02 UTC

dreamwasp

this is looking awesome - a couple of nits but nothing blocking or necessary. i still need to test mono + monolith but i think this is shipshape already!

packages/gamut/src/Card/index.tsx

dreamwasp · 2025-03-25T17:56:39Z

packages/styleguide/src/lib/Atoms/Card/Card.stories.tsx

+export const ShadowPatternLeft: Story = {
+  render: () => (
+    <FlexBox column>
+      <FlexBox p={24} border={1}>
+        <Box flexGrow={1}>
+          <Card shadow="patternLeft">Default with patternLeft</Card>
+        </Box>
+      </FlexBox>
+      <FlexBox row gap={16} p={24} border={1}>
+        <Box flexGrow={1}>
+          <Card variant="white" shadow="patternLeft">
+            White with patternLeft
+          </Card>
+        </Box>
+        <Box flexGrow={1}>
+          <Card variant="yellow" shadow="patternLeft">
+            Yellow with patternLeft
+          </Card>
+        </Box>
+        <Box flexGrow={1}>
+          <Card variant="beige" shadow="patternLeft">
+            Beige with patternLeft
+          </Card>
+        </Box>
+      </FlexBox>
+      <Background bg="navy">
+        <FlexBox row gap={16} p={24} border={1}>
+          <Box flexGrow={1}>
+            <Card variant="navy" shadow="patternLeft">
+              Navy with patternLeft
+            </Card>
+          </Box>
+          <Box flexGrow={1}>
+            <Card variant="hyper" shadow="patternLeft">
+              Hyper with patternLeft
+            </Card>
+          </Box>
+        </FlexBox>
+      </Background>
+    </FlexBox>
+  ),
 };


I wonder if these could be DRYed up with a utility React.FC (pass the config and it will generate based on config)

My thought process here was that if I do that, then the "Show Code" button will only show the util comp, e.g.:
<BadgeWithPatternExamples />

And then it wouldn't be as helpful :\

Would you prefer I change it tho?
I do agree it's not as DRY as it could be.

packages/styleguide/src/lib/Atoms/InternalFloatingCard/InternalFloatingCard.stories.tsx

dreamwasp · 2025-03-25T17:59:39Z

last thing - should we have focus styles beside the outline?

packages/gamut/src/Card/styles.tsx

dreamwasp

lgtm minus the small visual bugs with dark mode!

dreamwasp · 2025-03-28T13:28:11Z

packages/gamut/src/Card/elements.tsx

+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+import { Box } from '../Box';
+import { cardVariants, shadowVariants } from './styles';
+import { CardWrapperProps } from './types';
+
+export const MotionBox = motion.create(Box);
+
+export const CardWrapper = styled(MotionBox)<CardWrapperProps>(
+  cardVariants,
+  shadowVariants
+);


why remove the Background card wrapper? everything looks good i'm just curious

Thanks Cass... I remember why I kept Background now...
The outline variant in particular got messed up 🫠

the outline color should match the color of the card, but now it's all white.

and I bet the yellow pattern is a result of the pattern getting confused by the background color.

—
To answer your question tho, I removed it because I forgot all of this and I wanted to get rid of the bg prop that was extra confusing

I updated the bg prop to

bg={variant !== 'default' ? (variant as Colors) : '' as Colors}

I couldn't cast undefined as Colors :\

is there a better way?

dreamwasp · 2025-03-28T13:29:01Z

packages/styleguide/src/lib/Atoms/Card/Card.stories.tsx

+export const ShadowPatternLeft: Story = {
+  render: () => (
+    <FlexBox column>
+      <FlexBox p={24} border={1}>
+        <Box flexGrow={1}>
+          <Card shadow="patternLeft">Default with patternLeft</Card>
+        </Box>
+      </FlexBox>
+      <FlexBox row gap={16} p={24} border={1}>
+        <Box flexGrow={1}>
+          <Card variant="white" shadow="patternLeft">
+            White with patternLeft
+          </Card>
+        </Box>
+        <Box flexGrow={1}>
+          <Card variant="yellow" shadow="patternLeft">
+            Yellow with patternLeft
+          </Card>
+        </Box>
+        <Box flexGrow={1}>
+          <Card variant="beige" shadow="patternLeft">
+            Beige with patternLeft
+          </Card>
+        </Box>
+      </FlexBox>
+      <Background bg="navy">
+        <FlexBox row gap={16} p={24} border={1}>
+          <Box flexGrow={1}>
+            <Card variant="navy" shadow="patternLeft">
+              Navy with patternLeft
+            </Card>
+          </Box>
+          <Box flexGrow={1}>
+            <Card variant="hyper" shadow="patternLeft">
+              Hyper with patternLeft
+            </Card>
+          </Box>
+        </FlexBox>
+      </Background>
+    </FlexBox>
+  ),
 };


dreamwasp · 2025-03-28T13:31:39Z

packages/styleguide/src/lib/Atoms/Card/Card.stories.tsx

+export const IsInteractive: Story = {
+  render: () => (
+    <FlexBox column>
+      <FlexBox p={24} border={1}>
+        <Box flexGrow={1}>
+          <Anchor dimensions={1} href="" variant="interface">
+            <Card shadow="patternRight" isInteractive>
+              Default, patternRight, and isInteractive
+            </Card>
+          </Anchor>
+        </Box>
+      </FlexBox>
+      <FlexBox row gap={16} p={24} border={1}>
+        <Box flexGrow={1}>
+          <Anchor dimensions={1} href="" variant="interface">
+            <Card variant="white" shadow="none" isInteractive>
+              White, no shadow, and isInteractive
+            </Card>
+          </Anchor>
+        </Box>
+        <Box flexGrow={1}>
+          <Anchor dimensions={1} href="" variant="interface">
+            <Card variant="yellow" shadow="patternLeft" isInteractive>
+              Yellow, patternLeft, and isInteractive
+            </Card>
+          </Anchor>
+        </Box>
+        <Box flexGrow={1}>
+          <Anchor dimensions={1} href="" variant="interface">
+            <Card variant="beige" shadow="outline" isInteractive>
+              Beige, outline, and isInteractive
+            </Card>
+          </Anchor>
+        </Box>
+      </FlexBox>
+      <Background bg="navy">
+        <FlexBox row gap={16} p={24} border={1}>
+          <Box flexGrow={1}>
+            <Anchor dimensions={1} href="" variant="interface">
+              <Card variant="navy" shadow="patternLeft" isInteractive>
+                Navy, patternLeft, and isInteractive
+              </Card>
+            </Anchor>
+          </Box>
+          <Box flexGrow={1}>
+            <Anchor dimensions={1} href="" variant="interface">
+              <Card variant="hyper" shadow="patternRight" isInteractive>
+                Hyper, patternRight, and isInteractive
+              </Card>
+            </Anchor>
+          </Box>
+        </FlexBox>
+      </Background>
+    </FlexBox>


the colors on dark mode here are a little wonky - maybe we still want a dark border on white and yellow even in dark mode? the pattern on dark mode also turns yellow before disappearing, is that intended?

Screen.Recording.2025-03-28.at.9.26.25.AM.mov

Forgot to post a follow-up
onHover, the Card was taking its color from Anchor, which was yellow/hyper
So for the light mode Cards, it probably just wasn't as visible.

setting color="text" on the MotionBox wrapping the Pattern seemed to do the trick :)

aresnik11

Looks so good!! Just a couple small notes

packages/styleguide/src/lib/Atoms/Card/Card.stories.tsx

aresnik11 · 2025-03-28T20:20:23Z

packages/gamut/src/Card/styles.tsx

+  animate: {
+    opacity: 0,
+    transition: {
+      duration: timingValues.slow / 1000,


personally i think this transition is a little slow and prefer it at timingValues.medium but ill defer to stacey

yaaa, I wanted to keep it slower so that not everything just happened at the same time lol
and Stacey was cool with it: https://skillsoftartisan.slack.com/archives/C07BTPZR85A/p1741107708596829?thread_ts=1741096822.725829&cid=C07BTPZR85A

but ya, feels like a good thing to just check with the team on for these kinda updates, esp if we're gonna do more animations in the future

dmed with stacey on friday, should've asked in gamut-int whoopsy

not a sticking point tho just a personal pref

gotcha, I'll change then :) thanks

aresnik11 · 2025-03-28T20:22:50Z

packages/gamut/src/Card/styles.tsx

+    transition: {
+      duration: timingValues.fast / 1000,
+      ease: 'easeOut',
+    },
+  },
+  animate: {
+    transform: 'translate(4px, -4px)',
+    boxShadow: `-8px 8px 0 ${theme.colors['shadow-primary']}`,
+    transition: {
+      duration: timingValues.fast / 1000,
+      ease: 'easeIn',


these transitions on the non pattern outlines are a little trippy but it also matches what we currently have (checked prod storybook) so i guess its fine, just noting

codecademydev · 2025-03-31T14:05:38Z

📬Published Alpha Packages:

@codecademy/gamut@59.3.2-alpha.6e79a7.0
@codecademy/gamut-kit@0.6.489-alpha.6e79a7.0
@codecademy/styleguide@70.6.1-alpha.6e79a7.0

codecademydev · 2025-03-31T14:06:26Z

🚀 Styleguide deploy preview ready!

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

Deploy Logs

aresnik11

LGTM!

LinKCoding added 10 commits February 18, 2025 14:43

fixed coachmark story

d38869a

starting basis of card refactoring

14b0727

starting refactor

b46a696

shadow styles and outline variant concepts set

d07ab46

merged main and slight updates

2e95edb

basic styling looking ok

f36a326

cleaned and re-org'd some code

75a985e

stuck on pattern and zindex

9487596

fixed patterns and maybe hover states

c12c6b3

re-fixed pattern

b563cbe

LinKCoding added 19 commits February 21, 2025 15:22

formatted

5daa666

fixed up stories

0cf4ce2

Merge branch 'main' into kl-gm-925

47614e5

add a card test

69d100b

formatted

791af24

slight touchups

8ed7907

deleted wayward comment

77d1748

removed export of floatingcard

5b041bb

small refactor

f7b2279

undo removal of floating card export

078505d

added callout to floatingcard story

cbc22bd

fixed up story and added rest param

6b116d6

add styledoptions

73b59ee

removed styledoptions

845b9eb

some code clean up

3e916f0

formatted

2ef51b3

added box props

a532ae5

changing alpha for testing

07c7f4b

tweaks to Card

02f9552

formatted

9466d6d

LinKCoding changed the title ~~refactor(FloatingCard): changing FloatCard to internal use and refactoring Card~~ refactor(Card + FloatingCard)!: changing FloatCard to internal use and refactoring Card Mar 19, 2025

LinKCoding added 2 commits March 20, 2025 10:03

Merge branch 'main' into kl-gm-925

7e0d929

small typo

6718ba8

LinKCoding marked this pull request as ready for review March 20, 2025 19:02

LinKCoding requested a review from a team as a code owner March 20, 2025 19:02

LinKCoding requested review from aresnik11, dreamwasp and jakemhiller March 20, 2025 19:02

dreamwasp reviewed Mar 25, 2025

View reviewed changes

packages/gamut/src/Card/styles.tsx Show resolved Hide resolved

LinKCoding added 4 commits March 26, 2025 16:11

refactored cardwrapper to only use box

fd8cc2c

updated types

36f3b73

formatted

5802406

Merge branch 'main' into kl-gm-925

36199f8

dreamwasp reviewed Mar 28, 2025

View reviewed changes

LinKCoding added 2 commits March 28, 2025 11:00

revert to use background and fix yellow hover color

7cab423

enforce light mode on static light mode colors

7f630b6

aresnik11 reviewed Mar 28, 2025

View reviewed changes

LinKCoding added 3 commits March 31, 2025 09:30

formatted

f652994

more formatted

f236904

updated speed for patternfade

6e79a7f

aresnik11 approved these changes Mar 31, 2025

View reviewed changes

LinKCoding added the Ship It Automerge this PR when possible label Mar 31, 2025

codecademydev merged commit 0bb9872 into main Mar 31, 2025
21 of 22 checks passed

codecademydev removed the Ship It Automerge this PR when possible label Mar 31, 2025

codecademydev deleted the kl-gm-925 branch March 31, 2025 15:32

Conversation

LinKCoding commented Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud bot commented Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dreamwasp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LinKCoding Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dreamwasp commented Mar 25, 2025

Uh oh!

Uh oh!

dreamwasp left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Mar 31, 2025

📬Published Alpha Packages:

Uh oh!

codecademydev commented Mar 31, 2025

Uh oh!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

LinKCoding commented Feb 21, 2025 •

edited

Loading

nx-cloud bot commented Feb 21, 2025 •

edited

Loading

LinKCoding Mar 25, 2025 •

edited

Loading

dreamwasp left a comment •

edited

Loading