refactor(Collapse): move fade atom to own file

- put in a new atoms folder that is shared amongst motion components
- rename from opacityAtom to fadeAtom

packages/react-components/react-motion-components-preview/library/src/atoms/fade-atom.ts

@@ -0,0 +1,13 @@
+import { PresenceDirection, motionTokens } from '@fluentui/react-motion';
+
+export const fadeAtom = (direction: PresenceDirection, duration: number, easing: string = motionTokens.curveLinear) => {
+  const keyframes = [{ opacity: 0 }, { opacity: 1 }];
+  if (direction === 'exit') {
+    keyframes.reverse();
+  }
+  return {
+    keyframes,
+    duration,
+    easing,
+  };
+};

packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts

@@ -1,7 +1,8 @@
 import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';
 import type { PresenceMotionFnCreator } from '../../types';
 import type { CollapseDelayedVariantParams, CollapseRuntimeParams, CollapseVariantParams } from './collapse-types';
-import { sizeEnterAtom, opacityAtom, whitespaceAtom, sizeExitAtom } from './collapse-atoms';
+import { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';
+import { fadeAtom } from '../../atoms/fade-atom';
 
 /** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */
 export const createCollapseDelayedPresence: PresenceMotionFnCreator<
@@ -30,15 +31,15 @@ export const createCollapseDelayedPresence: PresenceMotionFnCreator<
     ];
     // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
     if (animateOpacity) {
-      enterAtoms.push({ ...opacityAtom('enter', enterOpacityDuration, enterEasing), delay: enterDelay, fill: 'both' });
+      enterAtoms.push({ ...fadeAtom('enter', enterOpacityDuration, enterEasing), delay: enterDelay, fill: 'both' });
     }
 
     // ----- EXIT -----
     // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
     const exitAtoms: AtomMotion[] = [];
     // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
     if (animateOpacity) {
-      exitAtoms.push(opacityAtom('exit', exitOpacityDuration, exitEasing));
+      exitAtoms.push(fadeAtom('exit', exitOpacityDuration, exitEasing));
     }
     exitAtoms.push(sizeExitAtom(orientation, exitSizeDuration, exitEasing, element, exitDelay));
     exitAtoms.push(whitespaceAtom('exit', orientation, exitSizeDuration, exitEasing, exitDelay));

packages/react-components/react-motion-components-preview/library/src/components/Collapse/collapse-atoms.ts

@@ -100,21 +100,3 @@ export const whitespaceAtom = (
   }
   return atom;
 };
-
-// ----- OPACITY -----
-
-export const opacityAtom = (
-  direction: PresenceDirection,
-  duration: number,
-  easing: string = motionTokens.curveLinear,
-) => {
-  const keyframes = [{ opacity: 0 }, { opacity: 1 }];
-  if (direction === 'exit') {
-    keyframes.reverse();
-  }
-  return {
-    keyframes,
-    duration,
-    easing,
-  };
-};