fixed that wrappers page was not scrollable

Author: marcus-wishes

package-lock.json

@@ -154,7 +154,7 @@
 		"process": "^0.11.10",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"rollup": "^4.21.3",
+		"rollup": "4.21",
 		"rollup-plugin-polyfill-node": "^0.13.0",
 		"stylelint": "^16.9.0",
 		"stylelint-config-standard": "^36.0.1",

package.json

@@ -8,7 +8,7 @@ import ShowcaseWrapperItem, {
 function AccordionExample() {
 	return (
 		<div className="bg-surface">
-			<Accordion.Container type="single" defaultValue="item-1">
+			<Accordion.Container type="single" defaultValue="item-1" data-id="test-data-id">
 				<Accordion.Item value="item-1">
 					<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
 					<Accordion.Content>
@@ -1396,7 +1396,7 @@ function ButtonShowcase(props: ShowcaseProps) {
 
 	//#region button
 	const lpExample = (
-		<ButtonGroup>
+		<ButtonGroup data-id="test-data-id">
 			<Button
 				appearance="default"
 				onClick={() => console.log("Button pressed")}
@@ -2209,6 +2209,7 @@ export default function CollapsibleShowcase(props: ShowcaseProps) {
 		<Collapsible
 			header={<h4>Collapsible Title</h4>}
 			openButtonPosition="left"
+			data-id="test-data-id"
 		>
 			<div className="p-4">collapsible content</div>
 		</Collapsible>

showcase/public/showcase-sources.txt

@@ -1,11 +1,11 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import ShowcaseTopNavigation from "./components/showcase/ShowcaseTopNavigation"
 import ShowcaseLeftSidebar from "./components/showcase/ShowcaseLeftSidebar"
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
 import IntroPage from "./page/IntroPage"
 import NotFoundPage from "./page/NotFoundPage"
 
-import { AppLayout, LocaleProvider } from "@linked-planet/ui-kit-ts"
+import { AppLayout, LocaleProvider, PageLayout } from "@linked-planet/ui-kit-ts"
 import SinglePage from "./page/SinglePage"
 import WrappersPage from "./page/WrappersPage"
 
@@ -21,29 +21,46 @@ export default function ShowcaseApp() {
 		<BrowserRouter basename="ui-kit-ts">
 			<LocaleProvider>
 				<AppLayout.Container>
-					<ShowcaseTopNavigation
-						sidebarPosition={sidebarPosition}
-						setSidebarPosition={setSidebarPosition}
-					/>
+					<AppLayout.TopNavigation>
+						<ShowcaseTopNavigation
+							sidebarPosition={sidebarPosition}
+							setSidebarPosition={setSidebarPosition}
+						/>
+					</AppLayout.TopNavigation>
+
 					<AppLayout.Content>
-						<ShowcaseLeftSidebar position={sidebarPosition} />
-						<AppLayout.Main className="overflow-hidden p-4">
-							<Routes>
-								<Route
-									path="/"
-									element={<Navigate to="/intro" />}
-								/>
-								<Route path="/intro" element={<IntroPage />} />
-								<Route
-									path="/wrappers"
-									element={<WrappersPage />}
-								/>
-								<Route
-									path="/single"
-									element={<SinglePage />}
-								/>
-								<Route path="*" element={<NotFoundPage />} />
-							</Routes>
+						<ShowcaseLeftSidebar position="left" />
+						<AppLayout.Main className="overflow-hidden">
+							<PageLayout.Page>
+								<PageLayout.PageBody>
+									<PageLayout.PageBodyContent>
+										<Routes>
+											<Route
+												path="/"
+												element={
+													<Navigate to="/intro" />
+												}
+											/>
+											<Route
+												path="/intro"
+												element={<IntroPage />}
+											/>
+											<Route
+												path="/wrappers"
+												element={<WrappersPage />}
+											/>
+											<Route
+												path="/single"
+												element={<SinglePage />}
+											/>
+											<Route
+												path="*"
+												element={<NotFoundPage />}
+											/>
+										</Routes>
+									</PageLayout.PageBodyContent>
+								</PageLayout.PageBody>
+							</PageLayout.Page>
 						</AppLayout.Main>
 					</AppLayout.Content>
 				</AppLayout.Container>

showcase/src/ShowcaseApp.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react"
+import { useCallback } from "react"
 import useShowcases from "../../useShowcases"
 import { useLocation, useNavigate } from "react-router-dom"
 import {

showcase/src/components/showcase/ShowcaseLeftSidebar.tsx

@@ -17,12 +17,11 @@ function WrappersPage() {
 	}, [])
 
 	return (
-		<div>
-			<h1>Wrappers</h1>
+		<>
 			{Object.entries(scs).map(([id, component]) =>
 				React.cloneElement(component, { id }),
 			)}
-		</div>
+		</>
 	)
 }