@codecademy/styleguide 79.1.4-alpha.7f2ebb.0 → 79.1.4-alpha.b73667.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/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.1.4-alpha.7f2ebb.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.3...@codecademy/styleguide@79.1.4-alpha.7f2ebb.0) (2026-03-03)
+### [79.1.4-alpha.b73667.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.3...@codecademy/styleguide@79.1.4-alpha.b73667.0) (2026-03-04)
 
 **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.1.4-alpha.7f2ebb.0",
+  "version": "79.1.4-alpha.b73667.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "4b12a3262dccac571df2ca18f42df87ad5903a36"
+  "gitHead": "8a91141443415c39aa3359b61abbb2719b22714b"
 }

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/UX Writing/Component guidelines/Confirmation dialogs.mdx

@@ -1,11 +1,11 @@
 import { Meta } from '@storybook/blocks';
 
-import { AboutHeader, ImageWrapper, LinkTo } from '~styleguide/blocks';
+import { AboutHeader, LinkTo } from '~styleguide/blocks';
 
 export const parameters = {
   title: 'Confirmation dialogs',
   subtitle:
-    'Use the same verb from the triggering button, heading, to action confirmation button; clearly communicate the consequences; and keep the copy decision-focused.',
+    'Simplify the language, prioritize the message, and make sure the implication of what learners are saying "Yes" (or "No") to is crystal clear.',
   status: 'static',
   design: {
     type: 'figma',
@@ -17,57 +17,39 @@ export const parameters = {
 
 <AboutHeader {...parameters} />
 
-Confirmation dialogs use the <LinkTo id="Molecules/Modals/Dialog">Dialog component in Gamut</LinkTo> to create intentional friction to verify that a learner wants to take a high-impact action, such as:
+Confirmation dialog boxes are used to verify that a learner wants to take a specific action. They are generally used for actions that are irreversible, may result in critical consequences or loss of data, have other severe consequences, or happen infrequently.
 
-- Irreversible actions (e.g., submitting payment)
-- Loss of data, time, or work (e.g., deleting a course)
-- Unexpected consequences (e.g., losing learning history on an existing prototype when when generating a new prototype)
-
-Adding friction for these purposes helps improve trust and avoid unintentional actions by making sure learners clearly understand the consequences before continuing. It also lets us offer alternatives or undo options when needed.
+They use the <LinkTo id="Molecules/Modals/Dialog">Dialog component in Gamut</LinkTo> and, for actions with serious or irreversible consequences, the `Danger` variant should be used.
 
 ## Best practices
 
-### Heading
-
-- **Ask or inform about one main action**, mirroring the button that triggered the confirmation dialog.
-- **Frame your headline as a binary question**, when possible, with 2 unambiguous answers.
-- **Avoid generic “Are you sure?” headings and body text.** This phrasing takes up space, increases cognitive load, and may undermine users' confidence or be interpreted as patronizing.
-
-### Body (optional)
-
-- **Add essential information about the contextual consequences.** State what will happen, what will be lost/changed, and any critical conditions.
-- **Avoid redundancy.** If the heading is already self-explanatory, the body is not needed.
-- **Keep to 1–2 lines, unless more is required to get all the information across.**
-
-### Buttons (CTA1 and CTA2)
+### Headline
 
-- **Avoid using “Yes” or “No,”** as they can be misinterpreted in global English and internationalization contexts.
-- **CTA1 matches the verb from the heading** to confirm the action.
-- **CTA2 clarifies the alternative or undo** path.
-  - Whenever possible, be specific about the alternative. However, when space is limited, 'Cancel' can be used.
+- **Ask or inform about one main action**, clearly and simply.
+- **Frame your headline as a binary question**, when possible, with 2 unambiguous answers (i.e. Yes/No, Stay/Leave).
+- **Be specific.** Instead of "Are you sure?" focus on what you want to ensure they're sure about (i.e. "Reset your progress?" or "Delete the file?").
 
-### Examples — putting it all together
+### Explanation
 
-<ImageWrapper
-  src="./ux writing/delete_this_course.png"
-  alt="Delete this course confirmation dialog"
-/>
+- **Share only relevant information** that may help the learner make their decision.
+- **Avoid redundancy.** If you've already set the stage in your headline, there's no need to re-ask the same question in your explanation. If the explanation doesn't add anything new, leave it out (i.e. "Permanently delete this item? Yes/No").
+- **Avoid filler.** Questions like "Are you sure you want to \_\_\_?" take up space, increase cognitive load, and may undermine users' confidence or be interpreted as patronizing.
+- **Keep to 1-2 lines**, unless more is required to get all the information across.
 
-<ImageWrapper
-  src="./ux writing/delete_study_plan.png"
-  alt="Delete study plan confirmation dialog"
-/>
+### Button copy
 
-<ImageWrapper
-  src="./ux writing/clear_chat.png"
-  alt="Clear chat confirmation dialog"
-/>
+- **Options should be clear and distinct.** Each option should be distinctly different and there should be no opportunity for learners to mix them up (i.e. "Delete" and "Cancel" are ambiguous choices whereas "Yes, remove" and "Cancel" clear up the confusion.
+- **Add context to reaffirm the action.** Instead of "Yes," use "Yes, reset progress."
+- **Match the verb in your headline.** If you use "Save" in your headline, use "Save" in your button copy, rather than keep. Consistency helps keep the message clear. All of this should also match whatever the learner clicked on that triggered the confirmation dialog.
 
 ## Checklist
 
-- Is the action irreversible, destructive, or has unexpected consequences? If not, consider using a different pattern.
-- Is the same verb used from the action triggering the confirmation dialog, to the heading, to CTA1?
-- Did you avoid filler language such as “Are you sure you want to...?”
-- Does the body front-load the critical consequence in 1–3 lines?
-- Are the buttons mutually exclusive (and avoid using “Yes/No”)?
-- Is there a safer alternative or undo to mention? (If available, offer the option as CTA2.)
+- Is the language consistent from the wording on the button that opened the confirmation box, to the headline,
+- Does the headline make the action clear?
+- Is the headline framed as a question, if possible?
+- Does the explanation provide relevant details and consequences of the action?
+- Is the explanation 1-2 lines long?
+- Are the words on the buttons clear and distinct?
+- Do the buttons include context to reaffirm the action?
+- Is your copy at a reading level of grade 7 or below? Test with [Hemingway App](https://hemingwayapp.com).
+- Have you asked someone unrelated to the project to read the message and did they understand it?