test: migrate Organisms into gamut Storybook as colocated stories as tests by aresnik11 · Pull Request #68 · Codecademy/skillsoft-gamut

aresnik11 · 2026-11-06T17:18:52Z

Overview

This PR moves the Organisms components, plus Video, out of the styleguide package and into colocated Storybook stories in packages/gamut. Their Jest component tests become story play functions, which run in a real browser through addon-vitest. It follows the same approach as the atoms, molecules and forms migration PRs.

The motivation is the same as the earlier rounds. jsdom can't check real layout, scrolling, container queries, focus, media playback or axe results, and several of the old tests passed without asserting anything that could fail. Plays run against rendered stories, so every documented example is now also a test.

Components migrated

Component	New location	Old tests replaced
DatePicker	`Inputs & forms/DatePicker`	`DatePicker`, `DatePickerInput`, `DatePickerInputSegment`, `DatePickerCalendar`, `CalendarHeader/Nav/Footer` and most of `CalendarBody`
ConnectedForm, ConnectedFormGroup, ConnectedFormInputs, ConnectedNestedCheckboxes, SubmitButton	`Inputs & forms/ConnectedForm/*`	`ConnectedForm`, `SubmitButton`, `useField`, `useDebouncedField`, `ConnectedNestedCheckboxes`
GridForm (Usage, Layout, Fields, Buttons, States, Validation, NestedCheckboxes)	`Inputs & forms/GridForm/*`	`GridForm`, `GridFormInputGroup`, `GridFormInputs`, `GridFormSection(Title)`, `GridFormContent`, `GridFormNestedCheckboxInput`
BarChart	`Data display/BarChart`	`BarChart`
Markdown	`Data display/Markdown`	`Markdown`, `Details`, `MarkdownAnchor`
List, ListRow, ListCol, TableHeader	`Data display/List/*`	`List`
DataList, DataTable	`Data display/DataList`, `Data display/DataTable`	`DataGrid`
Video	`Media & Assets/Video`	`Video`

How it works

Each story file sits next to its component and imports with relative paths. I mapped every it() in a deleted test file to the story whose play covers it. Pure style assertions (colors, spacing, class names) are the only things dropped.
I also added stories and plays for user flows the old tests didn't cover:
- DatePicker: outside click, range edge cases, single-month layout.
- ConnectedForm: error wiring, hideLabel, wasSubmitSuccessful, validating state.
- BarChart: layout, value clamping, sorting, keyboard flows.
- Markdown: sanitization, skipped overrides, video, the override APIs.
- List: empty and loading states, scroll shadow, scrollToTopOnUpdate, rowBreakpoint, sortable and sticky headers, expandable table rows, clickable rows in ordered lists, horizontal scrolling inside a container.
- DataList/DataTable:
  - Select, select-all, clear and Space selection, plus expand and collapse with their callback payloads.
  - The aria-sort cycle, local sorting and filtering, and reset filters.
  - Row action menus and dialogs, sticky header and column, hideSelectAll, multiple expanded rows, the card variant, and loading without rows.
- Video:
  - onReady and onPlay, play and pause, seeking back 10 seconds, and the k/m keyboard shortcuts.
  - Control tooltips, the captions settings menu, and the hidden download, AirPlay and Google Cast buttons.
  - Text tracks and thumbnails, the YouTube placeholder overlay, a YouTube URL list, and the provider iframe title for YouTube and Vimeo.
The old Video Jest tests mocked react-player and vidstack. The plays run the real players against real media, so the mp4 and vidstack stories use a Codecademy-hosted mp4 and vidstack's sample captions. Play stories set muted: true, because a synthetic click doesn't count as a user gesture for unmuted playback.
The Markdown video stories used example.com media URLs, which the browser blocks (ORB/CORS). They now use the same real media, and they wait for vidstack's data-can-play before asserting.
Imperative contracts and pure utilities stay in Jest, colocated next to their source instead of in __tests__/. These include the BarChart, DatePicker and Segment utils, part of CalendarBody, DatePickerContext and MarkdownVideo.
The deleted styleguide .mdx pages are replaced by autodocs with story descriptions. This removes the whole packages/styleguide/src/lib/Organisms/ and packages/styleguide/src/lib/Apps/ folders. Video's docs description keeps the import path and the peer-dependency install note.
The DataList/DataTable demo data and helpers moved from the styleguide's examples.tsx to DataList/testUtils.tsx. tsconfig.lib.json already excludes that file from the build. The move also fixes an invalid size: 'xs' column, a stray sparse array entry and a "Disipline" typo in the demo menu.

Supporting changes

DocsPage: a meta can set parameters.docs.propsTable: false to leave out the props table. Several story files document one component (ConnectedForm, GridForm, List), and only one of them should show the props table.
ConnectedForm Default now takes args, so its props table has controls. It shows static source because the dynamic snippet crashes. GridForm validation gets a radio control.
DataList and DataTable enable deep controls, with radio controls for spacing (and variant on DataList). GridForm, DatePicker, BarChart and Markdown need the same treatment, which I'll do in a follow-up.
ListRow PlainStyled now passes its args through, so its controls work.
tsconfig.storybook.json adds vite/client typings so the Markdown story's ?raw import of example.md type-checks.
List/Header/ListHeaderCol.tsx is removed (separate commit). Nothing imports it, List doesn't export it, and it duplicated an older ListCol.

Known component bugs

This PR doesn't fix any component behavior; only stories and tests change. Where a play found a real bug, I removed the failing assertion and left a // TODO: at the top of the play. Where the bug is an axe violation, the story disables only that rule through parameters.a11y.config.rules. Each one has a ticket in the epic:

List
- TableHeader passed as a List child renders its thead inside the tbody. The header prop works correctly.
- Clickable rows activate with Enter but not Space.
- The scroll wrapper isn't keyboard-focusable when rows have no focusable content. scrollable-region-focusable is disabled on the affected stories.
- scrollToTopOnUpdate scrolls the wrong element (List, DataTable and DataList).
- The scroll shadow never shows for ul/ol lists.
- rowBreakpoint sm/md also respond to viewport width, not just container width.
- Body cells with type="header" are exposed as column headers instead of row headers (List, DataTable and DataList).
DataList / DataTable
- useLocalQuery: clearing a sort leaves rows in ascending order instead of the original order.
- useLocalQuery: only one sort and one filter apply at a time, so filtering a second column clears the first.
- wrapperWidth doesn't constrain DataTable.
- Sort and filter buttons are named from the column key, not the header text.
- DataList expanded rows render unnamed region landmarks. landmark-unique is disabled on MultipleExpanded.
Markdown
- A code override resets code's allowed attributes, so CodeBlock loses language.
- With the checkbox override skipped, task-list checkboxes render as enabled inputs with no label.
- The sanitizer config has no details entry, so open is stripped.
- MarkdownVideo turns a non-numeric width/height such as 100% into NaN.
Video
- Vimeo's provider iframe has no accessible name when its shadow root attaches late. frame-title is disabled on Video VimeoWithoutTitle and Markdown VimeoOverride.
- Unmounting a vidstack YouTube player before it loads throws unhandled provider destroyed and AbortError rejections. Part of the cause is Gamut's YouTube workaround in VidstackPlayer, and part is vidstack's own teardown. Vitest fails the whole run on unhandled rejections, so these stories are tagged !test. They still render in Storybook and Docs, and their plays pass when run on their own:
  - Video YoutubeWithCaptions, YoutubeWithoutPlayerEmbed
  - Markdown WithoutPlayerEmbed, YoutubeVideoWithCaptions
- The @vidstack/react/types/vidstack type imports don't resolve under bundler resolution, so tsc -p packages/gamut/tsconfig.storybook.json reports TS2307 in three Video files. The error predates this PR and has no runtime effect.
Vidstack
- The open settings menu is a scrollable region with no keyboard access. scrollable-region-focusable is disabled on CaptionsMenu.
GridForm
- The input's accessible description isn't the error message, and a radio group's error doesn't clear after a pick (see the TODOs in Validation.stories.tsx).

Known limitations

Story ids changed from organisms-* to data-display-* / inputs-forms-*, and from apps-video-* to media-assets-video-*. The gamut-docs embeds still point at the old ids. I kept the existing story names so the old ids map one-to-one when the docs site is updated.
The Video stories load real media from YouTube, Vimeo, static-assets.codecademy.com and files.vidstack.io, so they need network access. Under Vitest, HLS never becomes ready and the Vimeo embed never fires onReady, so no play depends on either.
The DataTable filter popover fails axe's aria-hidden-focus while it's open. Focus stays trapped in the menu, so it's a false positive, and the stories close the popover with Escape before the axe pass runs.
The sticky header column check in WithFloatingMenu allows a 1px tolerance, because the column shifts by 1px after scrolling in Chromium.

Notes for reviewers

The diff is large but almost all of it is story files. The non-story source changes are DocsPage.tsx, tsconfig.storybook.json and the deletion of ListHeaderCol.tsx.
Review commit by commit: each component is its own commit, and the ListHeaderCol removal is separate. Video's migration and the Markdown video fixes are the last two commits.
I mutation-checked many of the new plays by temporarily breaking the component and confirming the play fails. That's how the old sort tests turned out to be unable to fail.
DataList and DataTable stories use instantiation-expression type aliases, for example type CrewDataTable = typeof DataTable<CrewRow, 'name', ColumnConfig<CrewRow>[]>. Without them, Meta/StoryObj infer Row as unknown.
The Video menu and tooltip plays retry their clicks inside waitFor, because vidstack animates the menus in and tooltips only become accessible after hover.

PR Checklist

Related to designs:
Related to JIRA ticket: GMT-1779
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

Testing Instructions

Run yarn test:stories from the repo root and confirm every story passes, including the axe checks, with no unhandled errors reported.
Run yarn test and confirm the remaining colocated Jest tests pass (BarChart, DatePicker and Markdown utils, CalendarBody, DatePickerContext, MarkdownVideo).
In Storybook, open the Interactions panel on these stories and step through their plays:
- Data display/DataTable → WithFloatingMenu, LocalSorting, LocalFiltering
- Data display/DataList → FullDataList
- Inputs & forms/DatePicker, Inputs & forms/GridForm/Validation, Data display/BarChart
- Media & Assets/Video → PlayAndPause, KeyboardShortcuts, CaptionsMenu, YoutubeWithPlaceholder
Open the !test stories (Media & Assets/Video → YoutubeWithCaptions, YoutubeWithoutPlayerEmbed, and Data display/Markdown → WithoutPlayerEmbed, YoutubeVideoWithCaptions). Confirm each one renders and its play passes in the Interactions panel.
Check that the sidebar has no Organisms or Apps section, and that each migrated component appears under Data display, Inputs & forms or Media & Assets.
Open the docs pages for Inputs & forms/ConnectedForm/ConnectedForm, Data display/List/List and Media & Assets/Video. Confirm the props table appears once with working controls, and check each in dark mode.
On Data display/DataList and Data display/DataTable, confirm spacing (and variant on DataList) is a radio control.
On Data display/List/ListRow → ExpandableButton and Data display/DataList → FullDataList, use only the keyboard to expand, collapse and select rows, then repeat with VoiceOver.
On Media & Assets/Video → Default, use only the keyboard to play, pause, seek and open the settings menu, then repeat with VoiceOver.

🤖 Generated with Claude Code

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>

Co-locate all Form stories under Inputs & forms (inputs un-nested, form elements in a Form subfolder). Fold the input node tests (Input, Select, Checkbox, Radio, RadioGroup, FormGroup) into play functions and relocate the SelectDropdown suites, utils, and hook out of __tests__ as node Jest. Add a core open-and-select play for SelectDropdown. Remove the old styleguide FormElements and FormInputs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

- Move Checkbox, Radio, and SelectDropdown into their own folders under Form/inputs, each with an index and co-located styles - Replace the Form/styles barrel with Form/styles.ts - Migrate SelectDropdown jest tests (default, empty, grouped) to story play functions and remove the now-unused Form/__fixtures__ - Leave stories failing with TODOs where plays expose real component bugs: Remove all button aria-hidden-focus, empty menu listbox aria-required-children, and duplicate ids breaking inputProps.combobox Co-authored-by: Cursor <cursoragent@cursor.com>

Tighten Form story assertions, rename Error stories to ErrorState, and add coverage for SelectDropdown inputProps and validation message precedence. Convert multi-line TODO comments to block comments. Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

Drop inherited aria-hidden from RemoveAllButton, disable aria-required-children on empty-menu stories, and use distinct id/name in Custom Input Props. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Separate ValueWithoutOptions into empty and undefined options stories, and keep the component JSDoc off the Storybook docs page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-locate all three under Feedback and fold their Jest coverage into play functions (close/CTA callbacks, truncation, close button props, icon layout, toast stacking). Keep the Alert close button ref test as co-located Jest and remove the old styleguide stories. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-locate both under Navigation and fold their Jest coverage into play functions (links vs text crumbs, payload clicks, page/arrow/jump buttons, ellipsis hover, controlled page number). Remove the node tests and old styleguide stories. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add className to the docgen propFilter and drop the per-story argTypes overrides in PopoverContainer and SkipToContent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-locate the story under Containers and fold the Jest coverage into play functions (expand/collapse, initiallyExpanded, CTA callback). Coerce initiallyExpanded to a boolean so the button always sets aria-expanded, and remove the node test and old styleguide story. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add Column as a LayoutGrid subcomponent and drop the stale SB 8 cast on Toaster's Toast subcomponent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-locate Menu and MenuItem as sibling pages under Actions/Menu and fold the Jest coverage into play functions. Keep the MenuItem ref tests as co-located Jest. Disable the a11y rules the nested menu stories break, with TODOs, and remove the old styleguide story. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Move each component out of its own folder to a sibling file named after it, and update the relative imports. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-locate Coachmark under Feedback and Flyout under Overlays, folding their Jest coverage into play functions (show/hide, delay, close button, Escape, inside and outside clicks). Share one render per meta and remove the node tests and old styleguide stories. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-locate all three under Overlays and fold their Jest coverage into play functions, including Popover positioning, viewport, and RTL checks against real layout. Keep Modal ref tests and Popover pure-function tests as co-located Jest, and remove the old styleguide stories. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Put play helpers, example components, and shared data after the meta in the migrated stories, keeping above it only what the meta uses. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-locate InfoTip, PreviewTip, and ToolTip under Feedback/Tips and fold their Jest coverage into play functions, adding plays for focus, hover, closeOnClick, loading, and RTL. Rename src/Tip to src/Tips, keep the pure shared util tests as co-located Jest, and remove the old stories. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-locate Tabs under Navigation and fold the Jest coverage into play functions, adding keyboard, focus, and disabled-click checks. Remove the node tests and the now-empty styleguide Molecules folder. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/Tip was renamed to src/Tips, so manifest.test.ts couldn't resolve the historical Tip/shared/types import. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Moved to ajr-props-table-fix. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Ports DatePicker component tests to play functions under Inputs & forms/DatePicker, adds coverage for outside click, range edge cases and single-month layout, and colocates the remaining unit tests. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Ports ConnectedForm, SubmitButton, useField, useDebouncedField and nested checkbox tests to play functions under Inputs & forms/ConnectedForm, and adds coverage for error wiring, hideLabel, wasSubmitSuccessful and validating state. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Set parameters.docs.propsTable: false to leave out the props table when several story files document one component. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Ports GridForm tests to play functions under Inputs & forms/GridForm, keeping the topic groups and adding Validation and NestedCheckboxes groups. Known bugs are left as TODOs in the plays. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ConnectedForm Default now takes args so its props table has controls, and shows its static source since the dynamic snippet crashes. GridForm validation gets a radio control. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Stories now live under Data display/BarChart, with plays covering the old tests plus layout, clamping, sort and keyboard flows. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Stories now live under Data display/Markdown, with plays covering the old tests plus sanitization, skipped overrides, video and override APIs. Adds vite/client typings so ?raw imports type-check. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

pkg-pr-new · 2026-11-09T16:00:51Z

Open in StackBlitz

@skillsoft/eslint-plugin-gamut

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

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

@skillsoft/gamut

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

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

@skillsoft/gamut-agent-tools

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

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

@skillsoft/gamut-codemods

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

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

@skillsoft/gamut-icons

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

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

@skillsoft/gamut-illustrations

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

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

@skillsoft/gamut-patterns

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

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

@skillsoft/gamut-styles

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

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

@skillsoft/gamut-tests

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

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

@skillsoft/variance

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

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

commit: 0fcf5bd

codecov · 2026-11-09T16:02:27Z

⚠️ JUnit XML file not found

The CLI was unable to find any JUnit XML files to upload.
For more help, visit our troubleshooting guide.

List, ListRow, ListCol and TableHeader stories now live under Data display/List, with plays covering the old tests plus scrolling, responsive layout, sortable headers and expandable rows. Known bugs are marked with TODOs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Nothing imports it and List doesn't export it; it duplicated an older ListCol. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

DataList and DataTable stories now live under Data display, with plays covering the old DataGrid tests plus sorting, filtering, selection, expansion, row actions and scrolling. Known bugs are marked with TODOs. Removes the now-empty Organisms styleguide folder. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The render ignored args, so its controls showed "Setup controls". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Shows query.sort.* as separate controls, as before #57 made deep controls opt-in. Radio controls for spacing and variant. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…killsoft-gamut into ajr-migrate-organisms

Moves Video into Media & Assets with plays covering the old Jest tests and new user flows. Vidstack YouTube stories that throw on unmount are tagged !test. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Uses real media URLs, waits for players to load, and tags vidstack YouTube stories that throw on unmount as !test. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

LinKCoding

Everything else was working and passing, but I'm seeing some failures (Step 3d) for the Video story in Default, Play and Pause, and Captions Menu.

aresnik11 and others added 30 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>

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

Merge branch 'main' into ajr-migrate-forms

4adea1e

Fix SelectDropdown story a11y failures

ee59ac8

Drop inherited aria-hidden from RemoveAllButton, disable aria-required-children on empty-menu stories, and use distinct id/name in Custom Input Props. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add changeset for Form migration

ac6605c

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Split empty-options story and hide SelectDropdown JSDoc

3a22d42

Separate ValueWithoutOptions into empty and undefined options stories, and keep the component JSDoc off the Storybook docs page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Hide className from all Storybook props tables

cd97a66

Add className to the docgen propFilter and drop the per-story argTypes overrides in PopoverContainer and SkipToContent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Tidy subcomponents in LayoutGrid and Toaster stories

c08d3dc

Add Column as a LayoutGrid subcomponent and drop the stale SB 8 cast on Toaster's Toast subcomponent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Flatten DisclosureButton and DisclosureBody into Disclosure

e8db262

Move each component out of its own folder to a sibling file named after it, and update the relative imports. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Move story helpers below meta

bf1c5c3

Put play helpers, example components, and shared data after the meta in the migrated stories, keeping above it only what the meta uses. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

aresnik11 and others added 10 commits November 4, 2026 14:15

Track moved Tip types source in manifest

217fd9b

src/Tip was renamed to src/Tips, so manifest.test.ts couldn't resolve the historical Tip/shared/types import. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Revert className propFilter change

c73e6bd

Moved to ajr-props-table-fix. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add changeset for Disclosure aria-expanded fix

c757c9e

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

feat(storybook): let a meta hide the DocsPage props table

ed213c1

Set parameters.docs.propsTable: false to leave out the props table when several story files document one component. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

fix(stories): wire ConnectedForm and GridForm controls

d5c617d

ConnectedForm Default now takes args so its props table has controls, and shows its static source since the dynamic snippet crashes. GridForm validation gets a radio control. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

test(BarChart): move tests into colocated stories

c0d75fb

Stories now live under Data display/BarChart, with plays covering the old tests plus layout, clamping, sort and keyboard flows. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Base automatically changed from ajr-migrate-molecules to main November 9, 2026 14:58

Merge branch 'main' into ajr-migrate-organisms

5017032

aresnik11 and others added 4 commits November 9, 2026 12:55

chore(List): remove unused Header/ListHeaderCol

8c42f3f

Nothing imports it and List doesn't export it; it duplicated an older ListCol. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Merge branch 'main' into ajr-migrate-organisms

46565de

aresnik11 changed the title ~~Ajr migrate organisms~~ test: migrate Organisms into gamut Storybook as colocated stories as tests Nov 10, 2026

aresnik11 and others added 6 commits November 10, 2026 12:55

fix(ListRow): pass args to PlainStyled story

a6640e7

The render ignored args, so its controls showed "Setup controls". Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs(DataList): enable deep controls on DataList and DataTable

775dc81

Shows query.sort.* as separate controls, as before #57 made deep controls opt-in. Radio controls for spacing and variant. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Merge branch 'ajr-migrate-organisms' of ssh://github.com/Codecademy/s…

6337f6c

…killsoft-gamut into ajr-migrate-organisms

Migrate Video stories into gamut

ba9ff7e

Moves Video into Media & Assets with plays covering the old Jest tests and new user flows. Vidstack YouTube stories that throw on unmount are tagged !test. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Fix Markdown video stories

3481820

Uses real media URLs, waits for players to load, and tags vidstack YouTube stories that throw on unmount as !test. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add empty changeset for Organisms migration

0fcf5bd

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

aresnik11 marked this pull request as ready for review November 10, 2026 21:24

aresnik11 requested a review from a team as a code owner November 10, 2026 21:24

aresnik11 requested review from LinKCoding and dreamwasp November 10, 2026 21:25

LinKCoding reviewed Nov 11, 2026

View reviewed changes

Navigation Menu

Repository navigation

test: migrate Organisms into gamut Storybook as colocated stories as tests - #68

test: migrate Organisms into gamut Storybook as colocated stories as tests#68
aresnik11 wants to merge 63 commits into
mainfrom
ajr-migrate-organisms

aresnik11 commented Nov 6, 2026 •

edited by atlassian Bot

Loading

Uh oh!

pkg-pr-new Bot commented Nov 9, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Nov 9, 2026 •

edited

Loading

Uh oh!

LinKCoding left a comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

aresnik11 commented Nov 6, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

Uh oh!

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

Uh oh!

Uh oh!

codecov Bot commented Nov 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ JUnit XML file not found

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aresnik11 commented Nov 6, 2026 •

edited by atlassian Bot

Loading

pkg-pr-new Bot commented Nov 9, 2026 •

edited

Loading

codecov Bot commented Nov 9, 2026 •

edited

Loading