Add Forms page to dev app and JsonForms vertical layout spacing

changelog.md

@@ -6,6 +6,7 @@
 
 - New _DataCard_ and _DataGroup_ components.
 - Typography docs now cover font weight, line height and letter spacing scales, with improved Storybook examples.
+- `JsonFormsControls.layoutRenderers`: a JsonForms vertical layout with consistent spacing between fields.
 
 ### Changed
 

dev/src/App.tsx

@@ -20,6 +20,7 @@ import {
 } from "@mui/material";
 import {
   Blocks as ComponentsIcon,
+  ClipboardList as FormsIcon,
   Home as HomeIcon,
   Layers as LayersIcon,
   Menu as MenuIcon,
@@ -57,6 +58,8 @@ import { Breadcrumbs } from "../../src/components/navigation/Breadcrumbs";
 import { Bar } from "../../src/components/controls/Bar";
 import { Logo } from "../../src/components/controls/Logo";
 
+import { FormsPage } from "./FormsPage";
+
 /* TABLE */
 
 export const SimpleMuiTableExample = () => {
@@ -259,6 +262,11 @@ const navigation: Navigation = [
         icon: <ComponentsIcon />,
         linkProps: { to: "/components", component: NavLink },
       },
+      {
+        label: "Forms",
+        icon: <FormsIcon />,
+        linkProps: { to: "/forms", component: NavLink },
+      },
       {
         label: "Colours",
         icon: <PaletteIcon />,
@@ -330,6 +338,7 @@ const AppLayout = () => {
               <Routes>
                 <Route path="/" element={<HomePage />} />
                 <Route path="/components" element={<ComponentsPage />} />
+                <Route path="/forms" element={<FormsPage />} />
                 <Route path="/colours" element={<ColoursPage />} />
                 <Route path="/elevation" element={<ElevationPage />} />
                 <Route path="/typography" element={<TypographyPage />} />