Merge branch 'main' into kl-gmt-1525-icons-naming

LinKCoding · LinKCoding · commit a08d73310d75 · 2025-12-09T13:53:02.000-05:00
diff --git a/packages/gamut-kit/CHANGELOG.md b/packages/gamut-kit/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.572](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.571...@codecademy/gamut-kit@0.6.572) (2025-12-08)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.571](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.570...@codecademy/gamut-kit@0.6.571) (2025-12-05)
 
 **Note:** Version bump only for package @codecademy/gamut-kit
diff --git a/packages/gamut-kit/package.json b/packages/gamut-kit/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.571",
+  "version": "0.6.572",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut": "67.5.3",
+    "@codecademy/gamut": "67.5.4",
     "@codecademy/gamut-icons": "9.53.0",
     "@codecademy/gamut-illustrations": "0.57.0",
     "@codecademy/gamut-patterns": "0.10.19",
diff --git a/packages/gamut/CHANGELOG.md b/packages/gamut/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [67.5.4](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@67.5.3...@codecademy/gamut@67.5.4) (2025-12-08)
+
+**Note:** Version bump only for package @codecademy/gamut
+
 ### [67.5.3](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@67.5.2...@codecademy/gamut@67.5.3) (2025-12-05)
 
 **Note:** Version bump only for package @codecademy/gamut
diff --git a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap
@@ -38,6 +38,7 @@ exports[`Gamut Exported Keys 1`] = `
   "Drawer",
   "ExpandControl",
   "ExpandInCollapseOut",
+  "FadeInSlideOut",
   "FeatureShimmer",
   "FillButton",
   "FlexBox",
diff --git a/packages/gamut/package.json b/packages/gamut/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "67.5.3",
+  "version": "67.5.4",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.53.0",
diff --git a/packages/gamut/src/Animation/FadeInSlideOut.tsx b/packages/gamut/src/Animation/FadeInSlideOut.tsx
diff --git a/packages/gamut/src/Animation/index.ts b/packages/gamut/src/Animation/index.ts
@@ -1,2 +1,3 @@
 export * from './Rotation';
 export * from './ExpandInCollapseOut';
+export * from './FadeInSlideOut';
diff --git a/packages/gamut/src/Toaster/index.tsx b/packages/gamut/src/Toaster/index.tsx
@@ -4,9 +4,9 @@ import { ReactNode } from 'react';
 import * as React from 'react';
 
 import { ToastProps } from '..';
+import { FadeInSlideOut } from '../Animation/FadeInSlideOut';
 import { BodyPortal } from '../BodyPortal';
 import { Box } from '../Box';
-import { FadeInSlideOut } from '../Motion/FadeInSlideOut';
 import { Toast } from '../Toast/Toast';
 
 interface ToasterItem extends Omit<ToastProps, 'onClose'> {
diff --git a/packages/styleguide/CHANGELOG.md b/packages/styleguide/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [78.5.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.1...@codecademy/styleguide@78.5.2) (2025-12-08)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ### [78.5.1](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.0...@codecademy/styleguide@78.5.1) (2025-12-04)
 
 ### Bug Fixes
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "78.5.1",
+  "version": "78.5.2",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx
@@ -0,0 +1,31 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import { ComponentHeader } from '~styleguide/blocks';
+
+import * as FadeInSlideOut from './FadeInSlideOut.stories';
+
+export const parameters = {
+  subtitle: `An animation component that fades in when appearing and slides out when disappearing.`,
+  status: 'current',
+  source: {
+    repo: 'gamut',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation/FadeInSlideOut.tsx',
+  },
+};
+
+<Meta of={FadeInSlideOut} />
+
+<ComponentHeader {...parameters} />
+
+## Usage
+
+This animation uses [Framer Motion](https://motion.dev/) to animate the appearance and disappearance of a component. The animation has three states, `initial`, `visible`, and `exit`.
+
+Wrap the `FadeInSlideOut` component with an `AnimatePresence` and pass in children components to be animated. The component should be conditionally rendered (using `&&` or a ternary operator). The animation is triggered when the component is added to or removed from the DOM, not by changing styles or props.
+
+## Playground
+
+<Canvas sourceState="shown" of={FadeInSlideOut.Default} />
+
+<Controls />
diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx
@@ -0,0 +1,37 @@
+import { Box, FadeInSlideOut, FillButton, FlexBox } from '@codecademy/gamut';
+import type { Meta } from '@storybook/react';
+import { AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+
+const meta: Meta<typeof FadeInSlideOut> = {
+  component: FadeInSlideOut,
+  args: {},
+};
+
+export default meta;
+
+export const Default: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <FlexBox column>
+      <Box>
+        <FillButton onClick={() => setIsVisible(!isVisible)}>
+          {isVisible ? 'Thanks!' : 'Click me.'}
+        </FillButton>
+      </Box>
+      <Box height="50px" mt={8}>
+        <AnimatePresence>
+          {isVisible && (
+            <FadeInSlideOut>
+              <Box border={1} p={8}>
+                Even in a stupid, stupid universe where we have hot dogs for
+                fingers, we get very good with our feet.
+              </Box>
+            </FadeInSlideOut>
+          )}
+        </AnimatePresence>
+      </Box>
+    </FlexBox>
+  );
+};

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@codecademy/gamut",`
`3`	`3`	`"description": "Styleguide & Component library for Codecademy",`
`4`		`- "version": "67.5.3",`
	`4`	`+ "version": "67.5.4",`
`5`	`5`	`"author": "Codecademy Engineering <dev@codecademy.com>",`
`6`	`6`	`"dependencies": {`
`7`	`7`	`"@codecademy/gamut-icons": "9.53.0",`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export * from './Rotation';`
`2`	`2`	`export * from './ExpandInCollapseOut';`
	`3`	`+export * from './FadeInSlideOut';`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@codecademy/styleguide",`
`3`	`3`	`"description": "Styleguide & Component library for codecademy.com",`
`4`		`- "version": "78.5.1",`
	`4`	`+ "version": "78.5.2",`
`5`	`5`	`"author": "Codecademy Engineering",`
`6`	`6`	`"license": "MIT",`
`7`	`7`	`"publishConfig": {`