@codecademy/styleguide 79.1.3-alpha.1abfb2.0 → 79.1.3-alpha.2442e8.0

package/.storybook/components/Elements/DetailedCode/DetailedCodeBody/index.tsx

@@ -0,0 +1,19 @@
+import { Source } from '@storybook/blocks';
+
+import { DetailedCodeBodyWrapper, FloatingIndicator } from '../elements';
+import { DetailedCodeBodyProps } from '../types';
+
+export const DetailedCodeBody: React.FC<DetailedCodeBodyProps> = ({
+  code,
+  language,
+  showFloatingBadge = false,
+}) => {
+  return (
+    <DetailedCodeBodyWrapper hasFloatingBadge={showFloatingBadge}>
+      <Source code={code} dark language={language} />
+      {showFloatingBadge && (
+        <FloatingIndicator aria-label="More code below">...</FloatingIndicator>
+      )}
+    </DetailedCodeBodyWrapper>
+  );
+};

package/.storybook/components/Elements/DetailedCode/DetailedCodeButton/index.tsx

@@ -0,0 +1,37 @@
+import { MiniChevronDownIcon } from '@codecademy/gamut-icons';
+import * as React from 'react';
+import { Anchor, Rotation, FlexBox, Text } from '@codecademy/gamut';
+
+import { DetailedCodeButtonProps } from '../types';
+
+export const DetailedCodeButton: React.FC<DetailedCodeButtonProps> = ({
+  isExpanded,
+  onToggle,
+  language,
+}) => {
+  return (
+    <Anchor
+      aria-expanded={isExpanded}
+      px={16}
+      py={12}
+      variant="interface"
+      width="100%"
+      onClick={onToggle}
+    >
+      <FlexBox
+        columnGap={16}
+        justifyContent="space-between"
+      >
+        <Text>{language}</Text>
+        <FlexBox columnGap={8} flexDirection="row" alignItems="center">
+          <Text>
+            {isExpanded ? 'Show Less Code' : 'Show More Code'}
+          </Text>
+          <Rotation rotated={isExpanded}>
+            <MiniChevronDownIcon aria-hidden size={16} />
+          </Rotation>
+        </FlexBox>
+      </FlexBox>
+    </Anchor>
+  );
+};

package/.storybook/components/Elements/DetailedCode/elements.tsx

@@ -0,0 +1,46 @@
+import { css } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import { FlexBox } from '@codecademy/gamut';
+
+export const DetailedCodeWrapper = styled(FlexBox)(
+  css({
+    width: '100%',
+    flexDirection: 'column',
+    borderRadius: 'md',
+    border: 1,
+    bg: 'background',
+  })
+);
+
+export const DetailedCodeBodyWrapper = styled(FlexBox)<{
+  hasFloatingBadge?: boolean;
+}>(({ hasFloatingBadge }) =>
+  css({
+    position: 'relative',
+    flexDirection: 'column',
+    /* Override Storybook's Source component default styles to remove unwanted spacing and borders in the container */
+    '& .docblock-source': {
+      borderRadius: 'none',
+      margin: 0,
+      pb: hasFloatingBadge ? 48 : 0,
+    },
+  })
+);
+
+export const FloatingIndicator = styled(FlexBox)(
+  css({
+    position: 'absolute',
+    bottom: 16,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: 1,
+    bg: 'inherit',
+    px: 12,
+    py: 4,
+    borderRadius: 'lg',
+    fontSize: 26,
+    fontWeight: 700,
+    color: 'white',
+    letterSpacing: '0.1em',
+  })
+);

package/.storybook/components/Elements/DetailedCode/index.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+
+import { DetailedCodeBody } from './DetailedCodeBody';
+import { DetailedCodeButton } from './DetailedCodeButton';
+import { DetailedCodeWrapper } from './elements';
+import { DetailedCodeProps } from './types';
+
+const DEFAULT_PREVIEW_LINES = 20;
+const DEFAULT_LANGUAGE = 'tsx';
+
+export const DetailedCode: React.FC<DetailedCodeProps> = ({
+  code,
+  initiallyExpanded = false,
+  language = DEFAULT_LANGUAGE,
+  preview = false,
+  previewLines = DEFAULT_PREVIEW_LINES,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
+  const normalizedPreviewLines = Math.max(0, previewLines);
+  const previewEnabled = preview && normalizedPreviewLines > 0;
+  
+  const codeLines = code.split('\n');
+  const hasMoreCode = previewEnabled && codeLines.length > normalizedPreviewLines;
+  
+  const previewCode = previewEnabled
+    ? codeLines.slice(0, normalizedPreviewLines).join('\n')
+    : code;
+
+  const displayedCode = isExpanded ? code : previewCode;
+
+  return (
+    <DetailedCodeWrapper>
+      <DetailedCodeBody
+        code={displayedCode}
+        language={language}
+        showFloatingBadge={hasMoreCode && !isExpanded}
+      />
+      {hasMoreCode && (
+        <DetailedCodeButton
+          isExpanded={isExpanded}
+          onToggle={() => setIsExpanded((prev) => !prev)}
+          language={language}
+        />
+      )}
+    </DetailedCodeWrapper>
+  );
+};

package/.storybook/components/Elements/DetailedCode/types.ts

@@ -0,0 +1,24 @@
+import { Source } from '@storybook/blocks';
+import { ComponentProps } from 'react';
+
+type SourceLanguage = ComponentProps<typeof Source>['language'];
+
+export interface DetailedCodeProps {
+  code: string;
+  language?: SourceLanguage;
+  initiallyExpanded?: boolean;
+  preview?: boolean;
+  previewLines?: number;
+}
+
+export interface DetailedCodeButtonProps {
+  isExpanded: boolean;
+  onToggle: () => void;
+  language: SourceLanguage;
+}
+
+export interface DetailedCodeBodyProps {
+  code: string;
+  language: SourceLanguage;
+  showFloatingBadge?: boolean;
+}

package/.storybook/components/index.tsx

@@ -2,6 +2,7 @@ export * from './ImageWrapper';
 export * from './TokenTable';
 export * from './Headers';
 export * from './Elements/Callout';
+export * from './Elements/DetailedCode';
 export * from './Elements/KeyboardKey';
 export * from './Elements/Markdown';
 export * from './Elements/ImageGallery';

package/CHANGELOG.md

@@ -3,11 +3,9 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.1.3-alpha.1abfb2.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.1abfb2.0) (2026-02-23)
+### [79.1.3-alpha.2442e8.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.2442e8.0) (2026-03-16)
 
-### Bug Fixes
-
-- **CSP:** add better nonce support ([afdff6e](https://github.com/Codecademy/gamut/commit/afdff6e78aa8bed6ce8e051742b3e52822b9ba82))
+**Note:** Version bump only for package @codecademy/styleguide
 
 ### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.1.3-alpha.1abfb2.0",
+  "version": "79.1.3-alpha.2442e8.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "734662ca153eefff96d91dd279195d2232172191"
+  "gitHead": "647f911168a2b11b7f2974eaa7dee0fbff97ea5c"
 }

package/src/lib/Meta/Installation.mdx

@@ -63,22 +63,6 @@ GamutProvider handles a few critical tasks that need to happen in order for comp
 3. Adds Global styles and CSS Variables
 4. Sets the current Color Mode context and variables.
 
-### Content Security Policy (CSP)
-
-If your app uses a strict Content-Security-Policy (e.g. `style-src` without `'unsafe-inline'`), pass a nonce to `GamutProvider` so Emotion and other Gamut-managed style tags are allowed:
-
-```tsx
-<GamutProvider nonce={yourCspNonce}>
-  <App />
-</GamutProvider>
-```
-
-Your nonce should be the same value you use in your CSP header (e.g. `style-src 'self' 'nonce-{value}'`). Gamut uses the [get-nonce](https://www.npmjs.com/package/get-nonce) singleton so that style tags injected by react-style-singleton (e.g. from FocusTrap) also receive this nonce.
-
-**Motion components:** When you pass a nonce to GamutProvider, it also wraps children in framer-motion's MotionConfig so that motion components (Drawer, Alert, List, Toaster, etc.) get the nonce on their injected style tags. No extra wrapper is needed.
-
-**Video (Vidstack):** The Video component uses `@vidstack/react`, which applies styles via inline styles (element.style / CSSOM). CSP nonces apply only to `<style>` and `<script>` elements, not to inline style attributes, so **nonce cannot fix** Vidstack's CSP violations. If you use strict CSP and the Video component, relax CSP for that context (e.g. allow the Video route or sandbox) or avoid using Video where strict CSP is required.
-
 **Note:** For react frameworks like Next and Gatsby this will be slightly different (see the SSR section for further steps for each framework). Your entry points for each framework will be:
 
 - **Next** `_app.tsx`

package/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx

@@ -1,8 +1,9 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader, LinkTo } from '~styleguide/blocks';
+import { ComponentHeader, DetailedCode, LinkTo } from '~styleguide/blocks';
 
 import * as ConnectedFormStories from './ConnectedForm.stories';
+import { example } from './example';
 
 export const parameters = {
   title: 'ConnectedForm',
@@ -40,75 +41,7 @@ This hook also returns the `FormRequiredText` component - include this before yo
 
 ### Example code
 
-```tsx
-import {
-  ConnectedCheckbox,
-  ConnectedInput,
-  ConnectedSelect,
-  useConnectedForm,
-} from '@codecademy/gamut';
-
-import { TerminalIcon } from '@codecademy/gamut-icons';
-
-export const GoodForm = () => {
-  const {
-    ConnectedFormGroup,
-    ConnectedForm,
-    connectedFormProps,
-    FormRequiredText,
-  } = useConnectedForm({
-    defaultValues: {
-      thisField: true,
-      thatField: 'zero',
-      anotherField: 'state your name.',
-    },
-    validationRules: {
-      thisField: { required: 'you need to check this.' },
-      thatField: {
-        pattern: {
-          value: /^(?:(?!zero).)*$/,
-          message: 'literally anything but zero',
-        },
-      },
-    },
-  });
-
-  return (
-    <ConnectedForm
-      onSubmit={({ thisField }) => console.log(thisField)}
-      resetOnSubmit
-      {...connectedFormProps}
-    >
-      <SubmitButton>submit this form.</SubmitButton>
-      <ConnectedFormGroup
-        name="thisField"
-        label="cool checkbox bruh"
-        field={{
-          component: ConnectedCheckbox,
-          label: 'check it ouuut',
-        }}
-      />
-      <ConnectedFormGroup
-        name="thatField"
-        label="cool select dude"
-        field={{
-          component: ConnectedSelect,
-          options: ['one', 'two', 'zero'],
-        }}
-      />
-      <ConnectedFormGroup
-        name="anotherField"
-        label="cool input"
-        field={{
-          component: ConnectedInput,
-          icon: TerminalIcon,
-        }}
-      />
-      <FormRequiredText />
-    </ConnectedForm>
-  );
-};
-```
+<DetailedCode code={example} language="tsx" preview />
 
 ## Variants
 

package/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts

@@ -0,0 +1,67 @@
+export const example = `import {
+  ConnectedCheckbox,
+  ConnectedInput,
+  ConnectedSelect,
+  useConnectedForm,
+} from '@codecademy/gamut';
+
+import { TerminalIcon } from '@codecademy/gamut-icons';
+
+export const GoodForm = () => {
+  const {
+    ConnectedFormGroup,
+    ConnectedForm,
+    connectedFormProps,
+    FormRequiredText,
+  } = useConnectedForm({
+    defaultValues: {
+      thisField: true,
+      thatField: 'zero',
+      anotherField: 'state your name.',
+    },
+    validationRules: {
+      thisField: { required: 'you need to check this.' },
+      thatField: {
+        pattern: {
+          value: /^(?:(?!zero).)*$/,
+          message: 'literally anything but zero',
+        },
+      },
+    },
+  });
+
+  return (
+    <ConnectedForm
+      onSubmit={({ thisField }) => console.log(thisField)}
+      resetOnSubmit
+      {...connectedFormProps}
+    >
+      <SubmitButton>submit this form.</SubmitButton>
+      <ConnectedFormGroup
+        name="thisField"
+        label="cool checkbox bruh"
+        field={{
+          component: ConnectedCheckbox,
+          label: 'check it ouuut',
+        }}
+      />
+      <ConnectedFormGroup
+        name="thatField"
+        label="cool select dude"
+        field={{
+          component: ConnectedSelect,
+          options: ['one', 'two', 'zero'],
+        }}
+      />
+      <ConnectedFormGroup
+        name="anotherField"
+        label="cool input"
+        field={{
+          component: ConnectedInput,
+          icon: TerminalIcon,
+        }}
+      />
+      <FormRequiredText />
+    </ConnectedForm>
+  );
+};`;