feat: Detailed code component for longer code examples

[nhivpham]

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.

1. Go to /?path=/docs/organisms-connectedform-connectedform--docs#example-code
2. View example code preview
3. Click on code drop down
4. Close code drop down
5. Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d488790

---

☁️ Nx Cloud last updated this comment at 2026-02-19 04:29:20 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!

[LinKCoding]

consider defaulting to tsx

[LinKCoding]

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

[LinKCoding]

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]

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]

Codecov Report

❌ Patch coverage is 22.22222% with 28 lines in your changes missing coverage. Please review.
✅ Project coverage is 88.49%. Comparing base (bbc4cf8) to head (d488790).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
packages/gamut/src/DetailedCode/index.tsx	16.66%	20 Missing ⚠️
...amut/src/DetailedCode/DetailedCodeButton/index.tsx	14.28%	6 Missing ⚠️
.../gamut/src/DetailedCode/DetailedCodeBody/index.tsx	33.33%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3236      +/-   ##
==========================================
- Coverage   89.74%   88.49%   -1.25%     
==========================================
  Files         361      240     -121     
  Lines        5137     4362     -775     
  Branches     1642     1462     -180     
==========================================
- Hits         4610     3860     -750     
+ Misses        519      494      -25     
  Partials        8        8              

Flag	Coverage Δ
main	?
pull-request	88.49% <22.22%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecademydev]

📬 Published Alpha Packages:

@codecademy/gamut@68.0.3-alpha.bbcee7.0
@codecademy/gamut-kit@0.6.582-alpha.bbcee7.0
@codecademy/styleguide@79.1.3-alpha.bbcee7.0

[github-actions]

🚀 Styleguide deploy preview ready!

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