feat: Detailed code component for longer code examples by nhivpham · Pull Request #3236 · Codecademy/gamut

nhivpham · 2026-01-20T18:34:14Z

Overview

Adds an internal detailed code component for code examples that run longer.

PR Checklist

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

Don't make me tap the sign.

Go to /?path=/docs/organisms-connectedform-connectedform--docs#example-code
View example code preview
Click on code drop down
Close code drop down
Preview example without code preview
Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2026-01-20T18:35:49Z

View your CI Pipeline Execution ↗ for commit 5d10a0a

☁️ Nx Cloud last updated this comment at 2026-04-07 17:57:51 UTC

LinKCoding

I really like what you've done!

I've added some notes to polish up the PR, but would love to hear your thoughts :)
Thanks for taking this on!

packages/gamut/src/DetailedCode/DetailedCodeBody/index.tsx

packages/gamut/src/DetailedCode/DetailedCodeButton/index.tsx

packages/gamut/src/DetailedCode/elements.tsx

packages/gamut/src/DetailedCode/index.tsx

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/codeExample.ts

packages/gamut/src/DetailedCode/DetailedCodeButton/index.tsx

packages/gamut/src/DetailedCode/elements.tsx

codecov · 2026-02-03T09:17:08Z

⚠️ JUnit XML file not found

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

LinKCoding

I really like the changes! Adding some notes for us to disc :)

packages/styleguide/.storybook/components/Elements/DetailedCode/elements.tsx

packages/styleguide/.storybook/components/Elements/DetailedCode/DetailedCodeBody/index.tsx

Copilot

Pull request overview

Adds a new internal DetailedCode Storybook/docs component to better display long code examples with a collapsed “preview” and an expand/collapse control, and migrates the ConnectedForm docs’ large example into this component.

Changes:

Introduces DetailedCode (wrapper + body + toggle button) under packages/styleguide/.storybook/components/Elements/DetailedCode.
Exposes DetailedCode via the styleguide Storybook components barrel export.
Updates ConnectedForm.mdx to use DetailedCode and moves the long example into a separate example.ts string export.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts	Adds extracted long-form example code as a string for reuse in docs.
packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx	Replaces inline fenced code block with the new `<DetailedCode />` component.
packages/styleguide/.storybook/components/index.tsx	Re-exports `DetailedCode` for use in MDX docs (`~styleguide/blocks`).
packages/styleguide/.storybook/components/Elements/DetailedCode/types.ts	Defines prop types for `DetailedCode` and its subcomponents.
packages/styleguide/.storybook/components/Elements/DetailedCode/index.tsx	Implements preview/expand logic and composes body + toggle.
packages/styleguide/.storybook/components/Elements/DetailedCode/elements.tsx	Adds styled wrappers and the floating “more lines” indicator styling.
packages/styleguide/.storybook/components/Elements/DetailedCode/DetailedCodeButton/index.tsx	Adds the expand/collapse control UI.
packages/styleguide/.storybook/components/Elements/DetailedCode/DetailedCodeBody/index.tsx	Renders Storybook `Source` and the truncated-code indicator.

Copilot · 2026-03-23T17:02:25Z

packages/styleguide/.storybook/components/Elements/DetailedCode/elements.tsx

+    /* Color to match the text color in the Source component */
+    textColor: '#C9CDCF',


FloatingIndicator uses a hardcoded hex value for textColor (#C9CDCF). Please switch this to an existing Gamut token/semantic color so it stays theme-consistent and avoids hardcoded colors.

Suggested change

/* Color to match the text color in the Source component */

textColor: '#C9CDCF',

/* Use semantic text color to match the Source component */

textColor: 'text-secondary',

Copilot · 2026-03-23T17:02:26Z

packages/styleguide/.storybook/components/Elements/DetailedCode/DetailedCodeBody/index.tsx

+      <Source code={code} dark language={language} />
+      {showEllipses && (
+        <FloatingIndicator aria-label="More code below">
+          ...{codeLines} more lines


The floating indicator text uses codeLines (total lines) in ...{codeLines} more lines, but when previewing a snippet the value should represent remaining hidden lines (e.g., total - previewLines). As-is, the UI will over-report how many lines are hidden.

Suggested change

...{codeLines} more lines

...{codeLines} lines total

Copilot · 2026-03-23T17:02:26Z

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts

+export const example = `import {
+  ConnectedCheckbox,
+  ConnectedInput,
+  ConnectedSelect,


This code example references <SubmitButton> later, but the import block in the snippet doesn't include it. Since this is intended to be copy/pastable example code, please add SubmitButton to the @codecademy/gamut import list (or remove the usage).

Suggested change

ConnectedSelect,

ConnectedSelect,

SubmitButton,

This seems valid fwiw, @nhivpham

codecademydev · 2026-04-07T17:59:05Z

📬 Published Alpha Packages:

Package	Version	npm	Diff
`@codecademy/gamut`	`68.2.3-alpha.5ad85b.0`	npm	diff
`@codecademy/gamut-icons`	`9.57.3-alpha.5ad85b.0`	npm	diff
`@codecademy/gamut-illustrations`	`0.58.10-alpha.5ad85b.0`	npm	diff
`@codecademy/gamut-kit`	`0.6.593-alpha.5ad85b.0`	npm	diff
`@codecademy/gamut-patterns`	`0.10.29-alpha.5ad85b.0`	npm	diff
`@codecademy/gamut-styles`	`17.13.2-alpha.5ad85b.0`	npm	diff
`@codecademy/gamut-tests`	`5.3.4-alpha.5ad85b.0`	npm	diff
`@codecademy/variance`	`0.26.2-alpha.5ad85b.0`	npm	diff
`eslint-plugin-gamut`	`2.4.4-alpha.5ad85b.0`	npm	diff

github-actions · 2026-04-07T18:01:14Z

🚀 Styleguide deploy preview ready!

Preview URL: https://69d546641e23fb07d93368ec--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/69d546641e23fb07d93368ec

LinKCoding

Making good progress!!

LinKCoding · 2026-04-07T20:46:18Z

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx

+### Example Code Preview False
+
+<DetailedCode code={example} language="tsx" />


Nice, I would add some kind of comment to say that this is for testing purposes to show the comparison -- as to denote that you're going to clean this up after review

LinKCoding · 2026-04-07T20:48:46Z

packages/styleguide/.storybook/components/Elements/DetailedCode/types.ts

+  code: string;
+  language?: SourceLanguage;
+  initiallyExpanded?: boolean;
+  preview?: boolean;
+  previewLines?: number;


For these types, and the other types as well, I'd recommend adding comments to explain what the prop is for/doing

see: packages/gamut/src/Disclosure/types.ts as an example
Fwiw, this is def something you can prompt the robot to do

LinKCoding · 2026-04-07T20:55:26Z

packages/styleguide/.storybook/components/Elements/DetailedCode/elements.tsx

+    },
+    /* Reserves space under the text for the overlay */
+    '& .docblock-source pre': {
+      pb: hasShowCodeButton ? 48 : 20,


changing the 20 => 24 would make the TS error go away
see: https://gamut.codecademy.com/?path=/docs/foundations-layout--docs#spacing

LinKCoding · 2026-04-07T20:57:32Z

packages/styleguide/.storybook/components/Elements/DetailedCode/elements.tsx

+export const FloatingIndicator = styled(Box)(
+  css({
+    position: 'absolute',
+    bottom: 16,
+    left: 16,
+    px: 12,
+    fontSize: 14,
+    fontFamily: 'monospace',
+    textColor: '#C9CDCF',


On the second thought, let's follow some best practices and follow the design system

I want you to use text-secondary here (or text if you prefer)

You will need to make more changes, lemme know if you'd want a hint but think of it as a challenge :)

LinKCoding · 2026-04-07T21:02:48Z

packages/styleguide/.storybook/components/Elements/DetailedCode/DetailedCodeBody/index.tsx

+    <DetailedCodeBodyWrapper hasShowCodeButton={showEllipses}>
+      <Source code={code} dark language={language} />
+      {showEllipses && (
+        <FloatingIndicator aria-label="More code below">


Right now the flow on VoiceOver is:

Reads over the code as plain text

Reads the copy button

Reads this text, "more code below"

Is it possible to make it so that "more code below" is read before the "copy" button?

nhivpham added 4 commits December 4, 2025 16:26

Added first implementation, dropdown

0f23814

Try preview

a95a191

Merge branch 'main' into np-gmt-257

b688abc

move button to bottom and remove weird styling visual issue

ac512c6

nhivpham requested a review from a team as a code owner January 20, 2026 18:34

nhivpham requested review from LinKCoding and jakemhiller January 20, 2026 18:34

nhivpham marked this pull request as draft January 20, 2026 18:35

nhivpham added 3 commits January 20, 2026 11:34

update for linter

51d159d

update test snapshot

d0a7dad

add helper in inconsistent styling

2711ba7

LinKCoding reviewed Jan 21, 2026

View reviewed changes

nhivpham and others added 2 commits February 3, 2026 01:12

Incorporate feedback

ccc004e

Merge branch 'main' into np-gmt-257

6f8e4b9

nhivpham and others added 6 commits February 18, 2026 20:26

Merge branch 'main' into np-gmt-257

d488790

move component into folder, add floating button, small type safety tweak

ade841a

update badge to ellipses, update some typings, add anchor back

b7cff3f

remove prop drill, duplicate line count, and extra styles

0394239

Merge branch 'main' into np-gmt-257

bb75a84

prettier again for the 100th time

9a52768

nhivpham marked this pull request as ready for review March 16, 2026 16:09

nhivpham requested a review from LinKCoding March 17, 2026 17:16

LinKCoding reviewed Mar 17, 2026

View reviewed changes

feedback + code lines?

da8b65f

LinKCoding requested a review from Copilot March 23, 2026 16:59

Copilot started reviewing on behalf of LinKCoding March 23, 2026 16:59 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

Merge branch 'main' into np-gmt-257

ada707c

update to sb10, fix moved overlay, address line count

25c9f86

nhivpham force-pushed the np-gmt-257 branch from 9c560e6 to 25c9f86 Compare April 7, 2026 07:38

nhivpham added 2 commits April 7, 2026 01:54

clean up stylings

2d61914

updated slightly confusing variable names and add an extra example

5d10a0a

nhivpham requested a review from LinKCoding April 7, 2026 18:03

LinKCoding reviewed Apr 7, 2026

View reviewed changes

		/* Color to match the text color in the Source component */
		textColor: '#C9CDCF',

		### Example Code Preview False

		<DetailedCode code={example} language="tsx" />

Conversation

nhivpham commented Jan 20, 2026 • 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 Jan 20, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Feb 3, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

nhivpham commented Jan 20, 2026 •

edited

Loading

nx-cloud bot commented Jan 20, 2026 •

edited

Loading

codecov bot commented Feb 3, 2026 •

edited

Loading