@codecademy/styleguide 79.2.1-alpha.cb2cfc.0 → 79.2.1-alpha.f4b2b2.0

package/.storybook/components/Elements/ImageGallery.tsx

@@ -3,7 +3,7 @@ import { GamutIconProps } from '@codecademy/gamut-icons';
 import { IllustrationProps } from '@codecademy/gamut-illustrations';
 import { PatternProps } from '@codecademy/gamut-patterns';
 import { css, timingValues } from '@codecademy/gamut-styles';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from 'motion/react';
 import * as React from 'react';
 import { useState } from 'react';
 import styled from '@emotion/styled';

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,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.2.1-alpha.cb2cfc.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1-alpha.cb2cfc.0) (2026-03-16)
+### [79.2.1-alpha.f4b2b2.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1-alpha.f4b2b2.0) (2026-03-16)
 
 **Note:** Version bump only for package @codecademy/styleguide
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.1-alpha.cb2cfc.0",
+  "version": "79.2.1-alpha.f4b2b2.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "8f7b19e053cc39e26d9be621c1b408d692e012f5"
+  "gitHead": "05dffa01ea7348becd1074075040204794f0fdaf"
 }

package/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.stories.tsx

@@ -5,7 +5,7 @@ import {
   FlexBox,
 } from '@codecademy/gamut';
 import type { Meta } from '@storybook/react';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { PropsWithChildren, useState } from 'react';
 
 const meta: Meta<typeof ExpandInCollapseOut> = {

package/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx

@@ -1,6 +1,6 @@
 import { Box, FadeInSlideOut, FillButton, FlexBox } from '@codecademy/gamut';
 import type { Meta } from '@storybook/react';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { useState } from 'react';
 
 const meta: Meta<typeof FadeInSlideOut> = {

package/src/lib/Meta/ESLint rules.mdx

@@ -79,7 +79,7 @@ const ExpandableContainer = styled.Box(
 
 #### Disabling the rule
 
-For third-party components or edge cases where inline styles are necessary (e.g., framer-motion animations), you can disable the rule:
+For third-party components or edge cases where inline styles are necessary (e.g., motion animations), you can disable the rule:
 
 ```tsx
 // eslint-disable-next-line gamut/no-inline-style

package/src/lib/Meta/Installation.mdx

@@ -39,21 +39,44 @@ yarn add @codecademy/gamut-kit @emotion/react @emotion/styled
 
 3. Wrap your application root with `GamutProvider` and give it the theme you would like to use for your app.
 
+**React 19:**
+
 ```tsx
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { GamutProvider, theme } from '@codecademy/gamut-styles';
 
 import { App } from './App';
 
 const rootElement = document.getElementById('root');
+if (rootElement) {
+  const root = createRoot(rootElement);
+  root.render(
+    <GamutProvider>
+      <App />
+    </GamutProvider>
+  );
+}
+```
 
-render(
-  <GamutProvider>
-    <App />
-  </GamutProvider>,
-  rootElement
-);
+**React 18:**
+
+```tsx
+import React from 'react';
+import { render } from 'react-dom';
+import { GamutProvider, theme } from '@codecademy/gamut-styles';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  render(
+    <GamutProvider>
+      <App />
+    </GamutProvider>,
+    rootElement
+  );
+}
 ```
 
 GamutProvider handles a few critical tasks that need to happen in order for components to work.

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

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

@@ -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,48 +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';
-
-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

@@ -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;
-  onToggle: () => void;
-  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>
-  );
-};`;