fix(docs): Motion components storybook updates

change/@fluentui-react-motion-components-preview-27662e3f-3d93-496c-8b66-b5de8fac23de.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix(docs): Collapse storybook updates",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md

@@ -18,6 +18,12 @@ export const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
 // @public (undocumented)
 export const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
 
+// @public (undocumented)
+export type CollapseRuntimeParams = {
+    animateOpacity?: boolean;
+    orientation?: CollapseOrientation;
+};
+
 // @public (undocumented)
 export const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
 

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

@@ -1 +1,2 @@
 export * from './Collapse';
+export type { CollapseRuntimeParams } from './collapse-types';

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

@@ -6,5 +6,6 @@ export {
   createCollapsePresence,
   createCollapseDelayedPresence,
 } from './components/Collapse';
+export type { CollapseRuntimeParams } from './components/Collapse';
 export { Fade, FadeSnappy, FadeExaggerated, createFadePresence } from './components/Fade';
 export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';

packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PresenceComponentProps } from '@fluentui/react-components';
+import { Collapse, CollapseRuntimeParams } from '@fluentui/react-motion-components-preview';
+
+const LoremIpsum = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
+  <div ref={ref} {...props}>
+    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '.repeat(
+      10,
+    )}
+  </div>
+));
+
+export const DefaultCollapse = (props: PresenceComponentProps & CollapseRuntimeParams) => {
+  return (
+    <Collapse {...props}>
+      <LoremIpsum />
+    </Collapse>
+  );
+};

packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.stories.tsx

@@ -1,4 +1,4 @@
-import { Field, makeStyles, tokens, Switch } from '@fluentui/react-components';
+import { Field, makeStyles, tokens, Switch, PresenceComponentProps } from '@fluentui/react-components';
 import { Collapse } from '@fluentui/react-motion-components-preview';
 import * as React from 'react';
 
@@ -35,7 +35,7 @@ const LoremIpsum = () => (
   </>
 );
 
-export const Default = () => {
+export const Default = (props: PresenceComponentProps) => {
   const classes = useClasses();
   const [visible, setVisible] = React.useState<boolean>(false);
 

packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDescription.md

@@ -1,4 +1,4 @@
-The `Collapse` component manages content presence, using a height or width expand/collapse motion.
+The `Collapse` component manages content [presence](?path=/docs/motion-apis-createpresencecomponent--docs), using a height or width expand/collapse motion.
 
 > **⚠️ Preview components are considered unstable**
 

packages/react-components/react-motion-components-preview/stories/src/Collapse/index.stories.ts

@@ -1,4 +1,4 @@
-import { Collapse } from '@fluentui/react-motion-components-preview';
+import { DefaultCollapse as Collapse } from './Collapse.stories';
 import CollapseDescription from './CollapseDescription.md';
 
 export { Default } from './CollapseDefault.stories';

packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PresenceComponentProps } from '@fluentui/react-components';
+import { Fade } from '@fluentui/react-motion-components-preview';
+
+const LoremIpsum = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
+  <div ref={ref} {...props}>
+    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '.repeat(
+      10,
+    )}
+  </div>
+));
+
+export const DefaultFade = (props: PresenceComponentProps) => {
+  return (
+    <Fade {...props}>
+      <LoremIpsum />
+    </Fade>
+  );
+};

packages/react-components/react-motion-components-preview/stories/src/Fade/index.stories.ts

@@ -1,4 +1,4 @@
-import { Fade } from '@fluentui/react-motion-components-preview';
+import { DefaultFade as Fade } from './Fade.stories';
 import FadeDescription from './FadeDescription.md';
 
 export { Default } from './FadeDefault.stories';

packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PresenceComponentProps } from '@fluentui/react-components';
+import { Scale } from '@fluentui/react-motion-components-preview';
+
+const LoremIpsum = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
+  <div ref={ref} {...props}>
+    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '.repeat(
+      10,
+    )}
+  </div>
+));
+
+export const DefaultScale = (props: PresenceComponentProps) => {
+  return (
+    <Scale {...props}>
+      <LoremIpsum />
+    </Scale>
+  );
+};

packages/react-components/react-motion-components-preview/stories/src/Scale/index.stories.ts

@@ -1,4 +1,4 @@
-import { Scale } from '@fluentui/react-motion-components-preview';
+import { DefaultScale as Scale } from './Scale.stories';
 import ScaleDescription from './ScaleDescription.md';
 
 export { Default } from './ScaleDefault.stories';