@codecademy/styleguide 79.1.3-alpha.4c2055.0 → 79.1.3-alpha.5aed17.0

package/.storybook/components/index.tsx

@@ -2,7 +2,6 @@ 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,9 +3,11 @@
 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.4c2055.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.4c2055.0) (2026-02-20)
+### [79.1.3-alpha.5aed17.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.5aed17.0) (2026-02-23)
 
-**Note:** Version bump only for package @codecademy/styleguide
+### Bug Fixes
+
+- **CSP:** add better nonce support ([afdff6e](https://github.com/Codecademy/gamut/commit/afdff6e78aa8bed6ce8e051742b3e52822b9ba82))
 
 ### [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.4c2055.0",
+  "version": "79.1.3-alpha.5aed17.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "66a47d95c5cda3c06ca46315f16a377c238014d4"
+  "gitHead": "2fc086084082b22b37677da7054e586293aa2e78"
 }

package/src/lib/Meta/Installation.mdx

@@ -63,6 +63,25 @@ 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,9 +1,8 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { ComponentHeader, DetailedCode, LinkTo } from '~styleguide/blocks';
+import { ComponentHeader, LinkTo } from '~styleguide/blocks';
 
 import * as ConnectedFormStories from './ConnectedForm.stories';
-import { example } from './example';
 
 export const parameters = {
   title: 'ConnectedForm',
@@ -41,7 +40,75 @@ This hook also returns the `FormRequiredText` component - include this before yo
 
 ### Example code
 
-<DetailedCode code={example} language="tsx" preview />
+```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>
+  );
+};
+```
 
 ## Variants
 

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

@@ -1,20 +0,0 @@
-import { Source } from '@storybook/blocks';
-import * as React from 'react';
-
-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

@@ -1,46 +0,0 @@
-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,
-  setIsExpanded,
-  language,
-}) => {
-  const handleClick = () => {
-    if (setIsExpanded) {
-      setIsExpanded((prev) => !prev);
-    }
-  };
-
-  return (
-    <Anchor
-      aria-expanded={isExpanded}
-      height="100%"
-      px={16}
-      py={12}
-      variant="interface"
-      width="100%"
-      onClick={handleClick}
-    >
-      <FlexBox
-        columnGap={16}
-        flexDirection="row"
-        justifyContent="space-between"
-        width="100%"
-      >
-        <Text>{language}</Text>
-        <FlexBox columnGap={8} flexDirection="row" alignItems="center">
-          <Text fontWeight={400}>
-            {isExpanded ? 'Show Less Code' : 'Show More Code'}
-          </Text>
-          <Rotation height={16} rotated={isExpanded} width={16}>
-            <MiniChevronDownIcon aria-hidden size={16} />
-          </Rotation>
-        </FlexBox>
-      </FlexBox>
-    </Anchor>
-  );
-};

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

@@ -1,46 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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';
-
-const getPreviewCode = (code: string, previewLines: number) => {
-  const lines = code.split('\n');
-
-  if (lines.length <= previewLines) {
-    return code;
-  }
-
-  return lines.slice(0, previewLines).join('\n');
-};
-
-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 previewCode = previewEnabled
-    ? getPreviewCode(code, normalizedPreviewLines)
-    : code;
-
-  const hasMoreCode =
-    previewEnabled && code.split('\n').length > normalizedPreviewLines;
-
-  const displayedCode = isExpanded ? code : previewCode;
-
-  return (
-    <DetailedCodeWrapper>
-      <DetailedCodeBody
-        code={displayedCode}
-        language={language}
-        showFloatingBadge={hasMoreCode && !isExpanded}
-      />
-      {hasMoreCode && (
-        <DetailedCodeButton
-          isExpanded={isExpanded}
-          setIsExpanded={setIsExpanded}
-          language={language}
-        />
-      )}
-    </DetailedCodeWrapper>
-  );
-};

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

@@ -1,24 +0,0 @@
-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;
-  setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
-  language: SourceLanguage;
-}
-
-export interface DetailedCodeBodyProps {
-  code: string;
-  language: SourceLanguage;
-  showFloatingBadge?: boolean;
-}

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

@@ -1,67 +0,0 @@
-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>
-  );
-};`;