refactor(MessageBarGroup): change atom functions to named arguments

packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.motions.tsx

@@ -9,11 +9,15 @@ import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion }
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
  */
-const fadeAtom = (
-  direction: PresenceDirection,
-  duration: number,
-  easing: string = motionTokens.curveLinear,
-): AtomMotion => {
+const fadeAtom = ({
+  direction,
+  duration,
+  easing = motionTokens.curveLinear,
+}: {
+  direction: PresenceDirection;
+  duration: number;
+  easing?: string;
+}): AtomMotion => {
   const keyframes = [{ opacity: 0 }, { opacity: 1 }];
   if (direction === 'exit') {
     keyframes.reverse();
@@ -33,14 +37,20 @@ const fadeAtom = (
  * @param duration - The duration of the motion in milliseconds.
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.
  */
-const slideAtom = (
-  direction: PresenceDirection,
-  axis: 'X' | 'Y',
-  distance: string,
-  duration: number,
-  easing: string = motionTokens.curveDecelerateMid,
-): AtomMotion => {
-  const keyframes = [{ transform: `translate${axis}(${distance})` }, { transform: 'translate${axis}(0)' }];
+const slideAtom = ({
+  direction,
+  axis,
+  distance,
+  duration,
+  easing = motionTokens.curveDecelerateMid,
+}: {
+  direction: PresenceDirection;
+  axis: 'X' | 'Y';
+  distance: string;
+  duration: number;
+  easing?: string;
+}): AtomMotion => {
+  const keyframes = [{ transform: `translate${axis}(${distance})` }, { transform: `translate${axis}(0)` }];
   if (direction === 'exit') {
     keyframes.reverse();
   }
@@ -55,16 +65,19 @@ export const SlideInFadeOut = createPresenceComponent(() => {
   const duration = motionTokens.durationGentle;
 
   return {
-    enter: [fadeAtom('enter', duration), slideAtom('enter', 'Y', '-100%', duration)],
+    enter: [
+      fadeAtom({ direction: 'enter', duration }),
+      slideAtom({ direction: 'enter', axis: 'Y', distance: '-100%', duration }),
+    ],
 
-    exit: fadeAtom('exit', duration),
+    exit: fadeAtom({ direction: 'exit', duration }),
   };
 });
 
 export const FadeOut = createPresenceComponent(() => {
   return {
     enter: [],
 
-    exit: fadeAtom('exit', motionTokens.durationGentle),
+    exit: fadeAtom({ direction: 'exit', duration: motionTokens.durationGentle }),
   };
 });