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
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 da8b65f

☁️ Nx Cloud last updated this comment at 2026-03-18 00:11:48 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

LinKCoding · 2026-01-21T19:18:59Z

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

+export const DetailedCodeButton: React.FC<DetailedCodeButtonProps> = ({
+  heading,
+  isExpanded,
+  language,


consider defaulting to tsx

packages/gamut/src/DetailedCode/elements.tsx

LinKCoding · 2026-01-21T19:21:04Z

packages/gamut/src/DetailedCode/elements.tsx

+    '& > div': {
+      borderRadius: 'none',
+      padding: 0,
+    },


It seems like this could be omitted and the .docblock-source could get a borderRadius: 'none'

packages/gamut/src/DetailedCode/index.tsx

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

LinKCoding · 2026-01-21T19:25:12Z

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

+            <Rotation height={16} rotated={isExpanded} width={16}>
+              <MiniChevronDownIcon aria-hidden size={16} />
+            </Rotation>


It feels like we should have something more overt to indicate that this button will "show more code"

Or that there is more code to display.

My first thought is to have something shown right under the code snippet that is a TextButton that has ... show more code" that also has the same handleClick`

but would want to hear your thoughts

LinKCoding · 2026-01-21T19:26:45Z

packages/gamut/src/DetailedCode/elements.tsx

+      borderRadius: 'none',
+      padding: 0,
+    },
+    '& .docblock-source': {


I also did some styling testing and it seems like targeting the .docblock-source is the most consistent want to apply the styling :\ so that seems to be just the way to do it.

but I think it warrants adding a note for why it has to be done this way.

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

codecademydev · 2026-03-18T00:12:11Z

📬 Published Alpha Packages:

@codecademy/[email protected]

github-actions · 2026-03-18T00:14:27Z

🚀 Styleguide deploy preview ready!

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

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,

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

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

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!

LinKCoding Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LinKCoding Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

LinKCoding Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Jan 21, 2026

Choose a reason for hiding this comment

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!

codecademydev commented Mar 18, 2026

Uh oh!

github-actions bot commented Mar 18, 2026

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nhivpham commented Jan 20, 2026 •

edited

Loading

nx-cloud bot commented Jan 20, 2026 •

edited

Loading

codecov bot commented Feb 3, 2026 •

edited

Loading