From 9d15df40dda2fd6fd2a1713afe9e19890cd938e8 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Sat, 14 Sep 2024 15:37:54 +0200
Subject: [PATCH] Feat(examples): Add Collapse component to test problem with
 window in resize observer

refs #DS-1465
---
 .../next-with-app-router/src/app/page.tsx     | 38 ++++++++++++++++++-
 .../src/pages/index.tsx                       | 36 +++++++++++++++++-
 2 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/examples/next-with-app-router/src/app/page.tsx b/examples/next-with-app-router/src/app/page.tsx
index 367b25b8ad..47a5cec72e 100644
--- a/examples/next-with-app-router/src/app/page.tsx
+++ b/examples/next-with-app-router/src/app/page.tsx
@@ -1,6 +1,40 @@
-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>;
+const CollapseTrigger = ({ isOpen, ...rest }: any) => {
+  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;
diff --git a/examples/next-with-pages-router/src/pages/index.tsx b/examples/next-with-pages-router/src/pages/index.tsx
index 7d4bb4584a..1321e34589 100644
--- a/examples/next-with-pages-router/src/pages/index.tsx
+++ b/examples/next-with-pages-router/src/pages/index.tsx
@@ -1,5 +1,37 @@
-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>;
+const CollapseTrigger = ({ isOpen, ...rest }: any) => {
+  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;