Feat(examples): Add Collapse component to test problem with window in…

… resize observer

refs #DS-1465

examples/next-with-app-router/src/app/page.tsx

@@ -1,6 +1,44 @@
-import { Heading } from '@lmc-eu/spirit-web-react';
+'use client';
+
+import { Button, Collapse, Heading, useCollapse } from '@lmc-eu/spirit-web-react';
 import { NextPage } from 'next';
 
-const Home: NextPage = () => <Heading size="large">Spirit App Router</Heading>;
+interface CollapseTriggerProps {
+  isOpen: boolean;
+}
+
+const CollapseTrigger = ({ isOpen, ...rest }: CollapseTriggerProps) => {
+  return <Button {...rest}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>;
+};
+
+const Home: NextPage = () => {
+  const { isOpen, toggleHandler } = useCollapse(false);
+
+  return (
+    <div>
+      <Heading size="large">Spirit App Router</Heading>
+      <CollapseTrigger isOpen={isOpen} onClick={toggleHandler} />
+      <Collapse id="collapse-id" isOpen={isOpen}>
+        <p>
+          Condimentum odio, pulvinar et sollicitudin accumsan ac hendrerit vestibulum commodo, molestie laoreet dui sit
+          amet. Molestie consectetur, sed ac felis scelerisque lectus accumsan purus id dolor sed vitae, praesent
+          aliquam dolor quis ornare. Nulla sit amet, rhoncus at quis odio et iaculis lacinia suscipit vivamus sodales,
+          nunc id condimentum felis. Consectetur nec commodo, praesent et elit magna purus molestie cursus molestie,
+          libero ut venenatis erat id et nisi. Quam posuere, aliquam quam leo vitae tellus semper eget nunc, ultricies
+          adipiscing sit amet accumsan. Lorem rutrum, porttitor ante mauris suspendisse ultricies consequat purus,
+          congue a commodo magna et.
+        </p>
+        <p>
+          Nunc potenti, mauris sollicitudin purus augue justo et condimentum, vivamus a ornare consequat. Aliquet ut,
+          metus libero vitae volutpat felis a iaculis sapien dolor quis, augue fermentum donec urna. Sem facilisis,
+          finibus non mauris suspendisse varius et nisi egestas potenti, praesent interdum nulla sem. Sodales dui, quam
+          sagittis sapien elit lorem fringilla hendrerit nunc, porttitor quis dolor ut sit amet. Scelerisque aliquet,
+          maximus integer cursus fusce vitae proin lacinia sed vitae, bibendum suspendisse nunc ut enim et at. Sem
+          turpis, iaculis a eget non mauris nulla vitae augue, molestie porttitor luctus bibendum.
+        </p>
+      </Collapse>
+    </div>
+  );
+};
 
 export default Home;

examples/next-with-pages-router/src/pages/index.tsx

@@ -1,5 +1,41 @@
-import { Heading } from '@lmc-eu/spirit-web-react';
+import { Button, Collapse, Heading, useCollapse } from '@lmc-eu/spirit-web-react';
 
-const Home = () => <Heading size="large">Spirit Pages App</Heading>;
+interface CollapseTriggerProps {
+  isOpen: boolean;
+}
+
+const CollapseTrigger = ({ isOpen, ...rest }: CollapseTriggerProps) => {
+  return <Button {...rest}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>;
+};
+
+const Home = () => {
+  const { isOpen, toggleHandler } = useCollapse(false);
+
+  return (
+    <div>
+      <Heading size="large">Spirit Pages App</Heading>
+      <CollapseTrigger isOpen={isOpen} onClick={toggleHandler} />
+      <Collapse id="collapse-id" isOpen={isOpen}>
+        <p>
+          Condimentum odio, pulvinar et sollicitudin accumsan ac hendrerit vestibulum commodo, molestie laoreet dui sit
+          amet. Molestie consectetur, sed ac felis scelerisque lectus accumsan purus id dolor sed vitae, praesent
+          aliquam dolor quis ornare. Nulla sit amet, rhoncus at quis odio et iaculis lacinia suscipit vivamus sodales,
+          nunc id condimentum felis. Consectetur nec commodo, praesent et elit magna purus molestie cursus molestie,
+          libero ut venenatis erat id et nisi. Quam posuere, aliquam quam leo vitae tellus semper eget nunc, ultricies
+          adipiscing sit amet accumsan. Lorem rutrum, porttitor ante mauris suspendisse ultricies consequat purus,
+          congue a commodo magna et.
+        </p>
+        <p>
+          Nunc potenti, mauris sollicitudin purus augue justo et condimentum, vivamus a ornare consequat. Aliquet ut,
+          metus libero vitae volutpat felis a iaculis sapien dolor quis, augue fermentum donec urna. Sem facilisis,
+          finibus non mauris suspendisse varius et nisi egestas potenti, praesent interdum nulla sem. Sodales dui, quam
+          sagittis sapien elit lorem fringilla hendrerit nunc, porttitor quis dolor ut sit amet. Scelerisque aliquet,
+          maximus integer cursus fusce vitae proin lacinia sed vitae, bibendum suspendisse nunc ut enim et at. Sem
+          turpis, iaculis a eget non mauris nulla vitae augue, molestie porttitor luctus bibendum.
+        </p>
+      </Collapse>
+    </div>
+  );
+};
 
 export default Home;

packages/web-react/src/components/Collapse/__tests__/useResizeHeight.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import React, { useRef } from 'react';
 import { useResizeHeight } from '../useResizeHeight';
 
-jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb: FrameRequestCallback) => {
+jest.spyOn(window, 'requestAnimationFrame').mockImplementation(() => {
   return 0;
 });