From b399e1085845eb2733db1b5de9b990967e2ecd48 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Mon, 12 May 2025 00:48:30 -0700 Subject: [PATCH 01/12] move component into folder & add base for story --- .../{Motion => Animation}/FadeInSlideOut.tsx | 0 packages/gamut/src/Toaster/index.tsx | 2 +- .../FadeInSlideOut/FadeInSlideOut.mdx | 28 ++++++++++++++ .../FadeInSlideOut/FadeInSlideOut.stories.tsx | 37 +++++++++++++++++++ 4 files changed, 66 insertions(+), 1 deletion(-) rename packages/gamut/src/{Motion => Animation}/FadeInSlideOut.tsx (100%) create mode 100644 packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx diff --git a/packages/gamut/src/Motion/FadeInSlideOut.tsx b/packages/gamut/src/Animation/FadeInSlideOut.tsx similarity index 100% rename from packages/gamut/src/Motion/FadeInSlideOut.tsx rename to packages/gamut/src/Animation/FadeInSlideOut.tsx diff --git a/packages/gamut/src/Toaster/index.tsx b/packages/gamut/src/Toaster/index.tsx index 8c1a7a42d99..e047bed5580 100644 --- a/packages/gamut/src/Toaster/index.tsx +++ b/packages/gamut/src/Toaster/index.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; import { ToastProps } from '..'; import { BodyPortal } from '../BodyPortal'; import { Box } from '../Box'; -import { FadeInSlideOut } from '../Motion/FadeInSlideOut'; +import { FadeInSlideOut } from '../Animation/FadeInSlideOut'; import { Toast } from '../Toast/Toast'; interface ToasterItem extends Omit { diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx new file mode 100644 index 00000000000..c107a8d257d --- /dev/null +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx @@ -0,0 +1,28 @@ +import { Canvas, Controls, Meta } from '@storybook/blocks'; + +import { ComponentHeader } from '~styleguide/blocks'; + +import * as FadeInSlideOut from './FadeInSlideOut.stories'; + +export const parameters = { + subtitle: `A container that applies an expand and collapse animation to its children.`, + status: 'current', + source: { + repo: 'gamut', + githubLink: + 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation/FadeInSlideOut.tsx', + }, +} + + + + + +## Usage + + +## Playground + + + + \ No newline at end of file diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx new file mode 100644 index 00000000000..faece1f6c6c --- /dev/null +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx @@ -0,0 +1,37 @@ +import { FadeInSlideOut } from '@codecademy/gamut/src/Animation/FadeInSlideOut'; +import { AnimatePresence } from 'framer-motion'; +import type { Meta } from '@storybook/react'; +import { useState } from 'react'; +import { Box, FillButton, FlexBox } from '@codecademy/gamut'; + +const meta: Meta = { + component: FadeInSlideOut, + args: {}, +} + +export default meta; + +export const Default: React.FC = () => { + const [isVisible, setIsVisible] = useState(false); + + return ( + + + setIsVisible(!isVisible)}> + {isVisible ? 'Thanks!' : 'Click me.'} + + + + + {isVisible && ( + + + Even in a stupid, stupid universe where we have hot dogs for fingers, we get very good with our feet. + + + )} + + + + ); +}; \ No newline at end of file From 3874cbdd17178c13b8a71bfcfd2c712962e15fe0 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Mon, 12 May 2025 12:11:32 -0700 Subject: [PATCH 02/12] add FadeInSlideOut to gamut package export --- packages/gamut/src/Animation/index.ts | 1 + .../Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gamut/src/Animation/index.ts b/packages/gamut/src/Animation/index.ts index bdeb7394249..5a9b384ef87 100644 --- 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'; \ No newline at end of file diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx index faece1f6c6c..6848edd9903 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx @@ -1,8 +1,7 @@ -import { FadeInSlideOut } from '@codecademy/gamut/src/Animation/FadeInSlideOut'; import { AnimatePresence } from 'framer-motion'; import type { Meta } from '@storybook/react'; import { useState } from 'react'; -import { Box, FillButton, FlexBox } from '@codecademy/gamut'; +import { Box, FillButton, FlexBox, FadeInSlideOut } from '@codecademy/gamut'; const meta: Meta = { component: FadeInSlideOut, From 77b5241488a215c4cb9b2a6a13851cc88460efde Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Mon, 12 May 2025 12:58:00 -0700 Subject: [PATCH 03/12] update usage for FadeInSlideOut --- .../lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx index c107a8d257d..9f0a3a56d34 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx @@ -5,7 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks'; import * as FadeInSlideOut from './FadeInSlideOut.stories'; export const parameters = { - subtitle: `A container that applies an expand and collapse animation to its children.`, + subtitle: `An animation component that fades in when appearing and slides out when disappearing.`, status: 'current', source: { repo: 'gamut', @@ -20,6 +20,9 @@ export const 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 From 52787e59df5b2e4d7e88fcf5b22c53b685a000f5 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Mon, 12 May 2025 12:58:26 -0700 Subject: [PATCH 04/12] add to about page for animation --- packages/styleguide/src/lib/Atoms/Animations/About.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/styleguide/src/lib/Atoms/Animations/About.mdx b/packages/styleguide/src/lib/Atoms/Animations/About.mdx index 7f84fbd823b..2ad0afc8351 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/About.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/About.mdx @@ -29,5 +29,11 @@ Animations should not be the click target of actions, but rather the container f title: 'ExpandInCollapseOut', status: 'current', }, + { + id: '/Atoms/Animations/FadeInSlideOut', + subtitle: 'A container that applies a fade and slide animation to its children.', + title: 'FadeInSlideOut', + status: 'current', + } ]} /> From 4f590360fa9584a4da8177a6519b7fe1f94f3bc6 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Mon, 12 May 2025 13:27:46 -0700 Subject: [PATCH 05/12] undo export value --- packages/gamut/src/Animation/index.ts | 3 +-- .../Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut/src/Animation/index.ts b/packages/gamut/src/Animation/index.ts index 5a9b384ef87..23455d79ced 100644 --- a/packages/gamut/src/Animation/index.ts +++ b/packages/gamut/src/Animation/index.ts @@ -1,3 +1,2 @@ export * from './Rotation'; -export * from './ExpandInCollapseOut'; -export * from './FadeInSlideOut'; \ No newline at end of file +export * from './ExpandInCollapseOut'; \ No newline at end of file diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx index 6848edd9903..6830eb86da3 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx @@ -1,7 +1,8 @@ import { AnimatePresence } from 'framer-motion'; import type { Meta } from '@storybook/react'; import { useState } from 'react'; -import { Box, FillButton, FlexBox, FadeInSlideOut } from '@codecademy/gamut'; +import { Box, FillButton, FlexBox} from '@codecademy/gamut'; +import { FadeInSlideOut } from '@codecademy/gamut/src/Animation/FadeInSlideOut'; const meta: Meta = { component: FadeInSlideOut, From 41697615655eda2e2f79d5d6f67232f053c724d3 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Tue, 13 May 2025 12:21:32 -0700 Subject: [PATCH 06/12] update snapshot and exports --- packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap | 1 + packages/gamut/src/Animation/index.ts | 3 ++- .../Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx | 5 ++--- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap b/packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap index 125e007ab1f..411498d6304 100644 --- 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/src/Animation/index.ts b/packages/gamut/src/Animation/index.ts index 23455d79ced..5a9b384ef87 100644 --- a/packages/gamut/src/Animation/index.ts +++ b/packages/gamut/src/Animation/index.ts @@ -1,2 +1,3 @@ export * from './Rotation'; -export * from './ExpandInCollapseOut'; \ No newline at end of file +export * from './ExpandInCollapseOut'; +export * from './FadeInSlideOut'; \ No newline at end of file diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx index 6830eb86da3..dc176642c70 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx @@ -1,8 +1,7 @@ -import { AnimatePresence } from 'framer-motion'; +import { Box, FadeInSlideOut, FillButton, FlexBox } from '@codecademy/gamut'; import type { Meta } from '@storybook/react'; +import { AnimatePresence } from 'framer-motion'; import { useState } from 'react'; -import { Box, FillButton, FlexBox} from '@codecademy/gamut'; -import { FadeInSlideOut } from '@codecademy/gamut/src/Animation/FadeInSlideOut'; const meta: Meta = { component: FadeInSlideOut, From 9d15db55e3838a0d6931a4a6ed52a3c395c4c1d8 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Tue, 13 May 2025 13:05:24 -0700 Subject: [PATCH 07/12] linter import fix? --- packages/gamut/src/Toaster/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut/src/Toaster/index.tsx b/packages/gamut/src/Toaster/index.tsx index e047bed5580..611997c89af 100644 --- 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 '../Animation/FadeInSlideOut'; import { Toast } from '../Toast/Toast'; interface ToasterItem extends Omit { From f06d75b3378b9f1c75d5940e28895070b521e9e9 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Tue, 27 May 2025 14:57:41 -0700 Subject: [PATCH 08/12] fix prettier formatting --- packages/gamut/src/Animation/index.ts | 2 +- packages/styleguide/src/lib/Atoms/Animations/About.mdx | 7 ++++--- .../lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx | 6 +++--- .../Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx | 7 ++++--- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/gamut/src/Animation/index.ts b/packages/gamut/src/Animation/index.ts index 5a9b384ef87..4019e77801b 100644 --- a/packages/gamut/src/Animation/index.ts +++ b/packages/gamut/src/Animation/index.ts @@ -1,3 +1,3 @@ export * from './Rotation'; export * from './ExpandInCollapseOut'; -export * from './FadeInSlideOut'; \ No newline at end of file +export * from './FadeInSlideOut'; diff --git a/packages/styleguide/src/lib/Atoms/Animations/About.mdx b/packages/styleguide/src/lib/Atoms/Animations/About.mdx index 2ad0afc8351..2ec62f81b52 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/About.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/About.mdx @@ -30,10 +30,11 @@ Animations should not be the click target of actions, but rather the container f status: 'current', }, { - id: '/Atoms/Animations/FadeInSlideOut', - subtitle: 'A container that applies a fade and slide animation to its children.', + id: '/Atoms/Animations/FadeInSlideOut', + subtitle: + 'A container that applies a fade and slide animation to its children.', title: 'FadeInSlideOut', status: 'current', - } + }, ]} /> diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx index 9f0a3a56d34..1bfbe5a6a9e 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx @@ -12,7 +12,7 @@ export const parameters = { githubLink: 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation/FadeInSlideOut.tsx', }, -} +}; @@ -20,7 +20,7 @@ export const 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`. +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. @@ -28,4 +28,4 @@ Wrap the `FadeInSlideOut` component with an `AnimatePresence` and pass in childr - \ No newline at end of file + diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx index dc176642c70..629b4959afa 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx @@ -6,7 +6,7 @@ import { useState } from 'react'; const meta: Meta = { component: FadeInSlideOut, args: {}, -} +}; export default meta; @@ -25,7 +25,8 @@ export const Default: React.FC = () => { {isVisible && ( - Even in a stupid, stupid universe where we have hot dogs for fingers, we get very good with our feet. + Even in a stupid, stupid universe where we have hot dogs for + fingers, we get very good with our feet. )} @@ -33,4 +34,4 @@ export const Default: React.FC = () => { ); -}; \ No newline at end of file +}; From 1d3f54412fc1475489a6ba720efbb92df639017c Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Tue, 27 May 2025 15:33:03 -0700 Subject: [PATCH 09/12] Revert "fix prettier formatting" This reverts commit f06d75b3378b9f1c75d5940e28895070b521e9e9. --- packages/gamut/src/Animation/index.ts | 2 +- packages/styleguide/src/lib/Atoms/Animations/About.mdx | 7 +++---- .../lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx | 6 +++--- .../Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx | 7 +++---- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/gamut/src/Animation/index.ts b/packages/gamut/src/Animation/index.ts index 4019e77801b..5a9b384ef87 100644 --- a/packages/gamut/src/Animation/index.ts +++ b/packages/gamut/src/Animation/index.ts @@ -1,3 +1,3 @@ export * from './Rotation'; export * from './ExpandInCollapseOut'; -export * from './FadeInSlideOut'; +export * from './FadeInSlideOut'; \ No newline at end of file diff --git a/packages/styleguide/src/lib/Atoms/Animations/About.mdx b/packages/styleguide/src/lib/Atoms/Animations/About.mdx index 2ec62f81b52..2ad0afc8351 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/About.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/About.mdx @@ -30,11 +30,10 @@ Animations should not be the click target of actions, but rather the container f status: 'current', }, { - id: '/Atoms/Animations/FadeInSlideOut', - subtitle: - 'A container that applies a fade and slide animation to its children.', + id: '/Atoms/Animations/FadeInSlideOut', + subtitle: 'A container that applies a fade and slide animation to its children.', title: 'FadeInSlideOut', status: 'current', - }, + } ]} /> diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx index 1bfbe5a6a9e..9f0a3a56d34 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx @@ -12,7 +12,7 @@ export const parameters = { githubLink: 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation/FadeInSlideOut.tsx', }, -}; +} @@ -20,7 +20,7 @@ export const 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`. +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. @@ -28,4 +28,4 @@ Wrap the `FadeInSlideOut` component with an `AnimatePresence` and pass in childr - + \ No newline at end of file diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx index 629b4959afa..dc176642c70 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx @@ -6,7 +6,7 @@ import { useState } from 'react'; const meta: Meta = { component: FadeInSlideOut, args: {}, -}; +} export default meta; @@ -25,8 +25,7 @@ export const Default: React.FC = () => { {isVisible && ( - Even in a stupid, stupid universe where we have hot dogs for - fingers, we get very good with our feet. + Even in a stupid, stupid universe where we have hot dogs for fingers, we get very good with our feet. )} @@ -34,4 +33,4 @@ export const Default: React.FC = () => { ); -}; +}; \ No newline at end of file From d56a0a6c6578cf9c06be16580b81ae6930619d0f Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Tue, 27 May 2025 16:06:50 -0700 Subject: [PATCH 10/12] redo prettier manually --- packages/gamut/src/Animation/index.ts | 2 +- packages/styleguide/src/lib/Atoms/Animations/About.mdx | 7 ++++--- .../lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx | 4 ++-- .../Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx | 7 ++++--- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/gamut/src/Animation/index.ts b/packages/gamut/src/Animation/index.ts index 5a9b384ef87..4019e77801b 100644 --- a/packages/gamut/src/Animation/index.ts +++ b/packages/gamut/src/Animation/index.ts @@ -1,3 +1,3 @@ export * from './Rotation'; export * from './ExpandInCollapseOut'; -export * from './FadeInSlideOut'; \ No newline at end of file +export * from './FadeInSlideOut'; diff --git a/packages/styleguide/src/lib/Atoms/Animations/About.mdx b/packages/styleguide/src/lib/Atoms/Animations/About.mdx index 2ad0afc8351..2ec62f81b52 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/About.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/About.mdx @@ -30,10 +30,11 @@ Animations should not be the click target of actions, but rather the container f status: 'current', }, { - id: '/Atoms/Animations/FadeInSlideOut', - subtitle: 'A container that applies a fade and slide animation to its children.', + id: '/Atoms/Animations/FadeInSlideOut', + subtitle: + 'A container that applies a fade and slide animation to its children.', title: 'FadeInSlideOut', status: 'current', - } + }, ]} /> diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx index 9f0a3a56d34..74fc2d41547 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx @@ -12,7 +12,7 @@ export const parameters = { githubLink: 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Animation/FadeInSlideOut.tsx', }, -} +}; @@ -20,7 +20,7 @@ export const 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`. +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. diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx index dc176642c70..629b4959afa 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx @@ -6,7 +6,7 @@ import { useState } from 'react'; const meta: Meta = { component: FadeInSlideOut, args: {}, -} +}; export default meta; @@ -25,7 +25,8 @@ export const Default: React.FC = () => { {isVisible && ( - Even in a stupid, stupid universe where we have hot dogs for fingers, we get very good with our feet. + Even in a stupid, stupid universe where we have hot dogs for + fingers, we get very good with our feet. )} @@ -33,4 +34,4 @@ export const Default: React.FC = () => { ); -}; \ No newline at end of file +}; From c99656c7661aa616fab625bdbdcb809ef1b77212 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Tue, 27 May 2025 16:58:21 -0700 Subject: [PATCH 11/12] fix last file --- .../src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx index 74fc2d41547..1bfbe5a6a9e 100644 --- a/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx +++ b/packages/styleguide/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.mdx @@ -28,4 +28,4 @@ Wrap the `FadeInSlideOut` component with an `AnimatePresence` and pass in childr - \ No newline at end of file + From 1f195e5d2777700eafedd20d2c28bdf0125f3de5 Mon Sep 17 00:00:00 2001 From: Nhi Pham Date: Mon, 2 Jun 2025 23:18:42 -0700 Subject: [PATCH 12/12] Trigger CI rerun for SelectDropdown test