test: migrate Atoms out of styleguide into colocated stories as tests by aresnik11 · Pull Request #37 · Codecademy/skillsoft-gamut

aresnik11 · 2026-10-16T20:57:55Z

Summary

Migrates a batch of components out of the retiring packages/styleguide into co-located .stories.tsx files in packages/gamut/src, as stories-as-tests under @storybook/addon-vitest. Stories are regrouped from the old Atoms/Molecules taxonomy into semantic sidebar categories that match the new docs site, behavioral coverage from the old Jest tests is folded into play functions, and node-only tests are kept co-located for concerns that can't run in the browser.

Components migrated

Category	Components
Actions	Button Examples, CTAButton, FillButton, StrokeButton, TextButton, IconButton, Toggle, Tag
Status	Badge, ProgressBar, RadialProgress, Shimmer, Spinner, FeatureShimmer
Containers	Card, Drawer
Overlays	PopoverContainer
Navigation	SkipToContent
Media & Assets	Rotation, ExpandInCollapseOut, FadeInSlideOut (Animations)
Utilities	FocusTrap, DelayedRenderWrapper

What changed

Each component gained a co-located story with an explicit title, relative imports, and play functions that assert the behavior the old Jest tests covered (roles, interactions, callbacks, disabled states, aria-labels).
Node-side Jest is kept only where the browser can't help: ProgressBar (width / useLogicalProperties matrix), FeatureShimmer (reduced-motion hook mock), Card (useCardElevation token mapping), and PopoverContainer (positioning geometry, pure utils, scrolling-parent detection).
Pure style assertions were dropped; every interaction/behavioral case was ported.
The old styleguide stories and their wrapper .mdx docs were removed. A few dead <LinkTo> references remain in other styleguide docs and resolve as styleguide retires.

Notable per-component details

Buttons — variant argType (radio) on the shared button atoms; the Button Examples grid shows every variant × size across light and dark.
PopoverContainer — node tests moved out of __tests__ into co-located PopoverContainer.test.tsx / hooks.test.tsx / testUtils.ts (helper excluded from the lib build). Catalog stories pass focusOnProps={{ autoFocus: false }} so the docs page, which renders many always-open popovers, no longer hijacks scroll on load or click.
Card — variant / shadow / borderRadius argTypes; borderRadius default is documented as the component's conditional isInteractive ? 'md' : 'none'.

Testing

yarn test:stories — all migrated stories pass, including their a11y checks.
yarn nx test gamut — the retained node Jest suites pass.
yarn storybook and confirm:
- The migrated components appear under Actions, Status, Containers, Overlays, Navigation, Media & Assets, and Utilities — not under Atoms/Molecules.
- Buttons, Card, Toggle, and Tag controls panels drive the live component (variant/size/etc.).
- The PopoverContainer docs page loads without jumping, and clicking props in the table or elsewhere no longer scrolls the page.

PR Checklist

Related to designs:
Related to JIRA ticket: GMT-1777
Changeset added (or empty changeset if no release)
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
Package previews from this PR are passing end-to-end tests in all relevant consuming repositories

Co-locate Rotation, ExpandInCollapseOut, and FadeInSlideOut stories into packages/gamut/src/Animation (behavior + a11y via play), and remove the old styleguide Animations folder. Also drop the now-empty Atoms About/AboutToC. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-locate Button atoms (ButtonExamples, CTAButton, FillButton, IconButton, StrokeButton, TextButton) as stories under Actions/Buttons, folding the old IconButton/TextButton node tests into play assertions. Add a variant argType + full variant/size matrix (with a labeled column) to the examples grid, and a storySort pinning Button Examples first in the folder. Remove the old styleguide Buttons folder and the Button __tests__. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-locate Badge, ProgressBar, RadialProgress, Shimmer, Spinner, and FeatureShimmer as stories under the Status category, with behavior/a11y assertions in play functions. Keep node tests only where a browser play can't reach: ProgressBar's useLogicalProperties width matrix and FeatureShimmer's reduced-motion hook mock (both co-located). Remove the old styleguide folders (Badge, ProgressBar, RadialProgress, FeatureShimmer, Loaders) and the Button-style __tests__ dirs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-locate the story under Navigation and move the href check into a play function. Remove the Jest test and the old styleguide story. Co-Authored-By: Grok 4.7 <noreply@x.ai> Co-authored-by: Cursor <cursoragent@cursor.com>

Co-locate both under Utilities, fold their Jest coverage into play functions, and remove the old styleguide stories and node tests. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-locate both under Containers. Fold the Card render tests and the Drawer expand/collapse tests into play functions, keep only the node-only useCardElevation logic, and add variant/shadow/borderRadius argTypes to Card. Remove the old styleguide stories. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-locate both under Actions and fold their Jest coverage into play functions (roles, callbacks, disabled states, aria-label), then remove the node tests and old styleguide stories. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-locate the story under Overlays and move the node tests out of __tests__ (PopoverContainer.test.tsx, hooks.test.tsx, testUtils.ts), excluding the test helper from the lib build. Disable FocusTrap autofocus in the catalog stories so the docs page no longer hijacks scroll, and remove the old styleguide story. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Move the useCardElevation test to Card/Card.test.tsx to match the co-located convention used by the other migrated components. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

pkg-pr-new · 2026-10-19T19:10:28Z

Open in StackBlitz

@skillsoft/eslint-plugin-gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/eslint-plugin-gamut@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/eslint-plugin-gamut@37.tgz

@skillsoft/gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@37.tgz

@skillsoft/gamut-agent-tools

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-agent-tools@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-agent-tools@37.tgz

@skillsoft/gamut-icons

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-icons@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-icons@37.tgz

@skillsoft/gamut-illustrations

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-illustrations@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-illustrations@37.tgz

@skillsoft/gamut-patterns

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-patterns@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-patterns@37.tgz

@skillsoft/gamut-styles

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-styles@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-styles@37.tgz

@skillsoft/gamut-tests

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-tests@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-tests@37.tgz

@skillsoft/variance

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/variance@37

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/variance@37.tgz

commit: 1c7601e

LinKCoding

looking good!

I think with this split of using stories as tests and still keeping some .test.tsx files, it'd be nice to have some documentation around testing for decision making or just general resources.

Also, is there a planned update for the gamut-testing skill?

LinKCoding · 2026-10-21T17:59:32Z

  },
 };

+const AbsoluteBadge = styled(Badge)(


I think for a user, it'd be better to add an absolutely positioned box that wraps around Badge
that way Badge is used as is while the wrapper's purpose is the positioning

LinKCoding · 2026-10-22T14:18:13Z

+const meta: Meta<typeof Toggle> = {
+  title: 'Actions/Toggle',
+  component: Toggle,
+  args: {


is it possible to restrict some of toggle's inherited props?
e.g. there's padding and margin related props that are showing up

fixing separately!

aresnik11 · 2026-10-22T14:25:40Z

I think with this split of using stories as tests and still keeping some .test.tsx files, it'd be nice to have some documentation around testing for decision making or just general resources.

Also, is there a planned update for the gamut-testing skill?

@LinKCoding yup i have later tickets to update/add READMEs and skills!

aresnik11 and others added 8 commits October 14, 2026 14:24

Migrate SkipToContent into gamut Storybook

fdd0a11

Co-locate the story under Navigation and move the href check into a play function. Remove the Jest test and the old styleguide story. Co-Authored-By: Grok 4.7 <noreply@x.ai> Co-authored-by: Cursor <cursoragent@cursor.com>

Migrate FocusTrap and DelayedRenderWrapper into gamut Storybook

28b6080

Co-locate both under Utilities, fold their Jest coverage into play functions, and remove the old styleguide stories and node tests. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

aresnik11 changed the title ~~Ajr migrate atoms~~ test: migrate Atoms out of styleguide into colocated stories as tests Oct 19, 2026

aresnik11 and others added 3 commits October 19, 2026 15:01

Merge branch 'main' into ajr-migrate-atoms

4424ec0

Co-locate Card test out of __tests__

b715e4f

Move the useCardElevation test to Card/Card.test.tsx to match the co-located convention used by the other migrated components. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

changeset

1d9b22c

aresnik11 marked this pull request as ready for review October 20, 2026 13:34

aresnik11 requested a review from a team as a code owner October 20, 2026 13:34

aresnik11 requested review from LinKCoding and dreamwasp October 20, 2026 13:35

LinKCoding approved these changes Oct 22, 2026

View reviewed changes

PR feedback

1c7601e

aresnik11 added this pull request to stack #48 October 23, 2026 19:39

aresnik11 merged commit cc268a1 into main Oct 23, 2026
15 checks passed

aresnik11 deleted the ajr-migrate-atoms branch October 23, 2026 19:40

Navigation Menu

Repository navigation

test: migrate Atoms out of styleguide into colocated stories as tests - #37

test: migrate Atoms out of styleguide into colocated stories as tests#37
aresnik11 merged 12 commits into
mainfrom
ajr-migrate-atoms

aresnik11 commented Oct 16, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 19, 2026 •

edited

Loading

Uh oh!

LinKCoding left a comment

Uh oh!

LinKCoding Oct 21, 2026

Uh oh!

LinKCoding Oct 22, 2026

Uh oh!

aresnik11 Oct 23, 2026

Uh oh!

aresnik11 commented Oct 22, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

aresnik11 commented Oct 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Components migrated

What changed

Notable per-component details

Testing

PR Checklist

Uh oh!

pkg-pr-new Bot commented Oct 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

LinKCoding Oct 21, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

aresnik11 Oct 23, 2026

Choose a reason for hiding this comment

Uh oh!

aresnik11 commented Oct 22, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aresnik11 commented Oct 16, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 19, 2026 •

edited

Loading