feat(redmine 1246924): changed padding of FoldableColumnLayout, added…

… Button example to TestPage (#25) * feat(redmine 1246924): changed padding of FoldableColumnLayout, added Button example to TestPage
Smile-SA · Sep 28, 2023 · 093e77a · 093e77a
1 parent bb18455
commit 093e77a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -2,7 +2,9 @@
   "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
   "changelog": [
     "@changesets/changelog-github",
-    { "repo": "Smile-SA/react-front-kit" }
+    {
+      "repo": "Smile-SA/react-front-kit"
+    }
   ],
   "commit": false,
   "fixed": [["*"]],

diff --git a/.changeset/three-shoes-double.md b/.changeset/three-shoes-double.md
@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': patch
+---
+
+Modified padding of `FoldableColumnLayout`, Added `Button` that adds new `SidebarMenu` folders as example to `TestPage`
diff --git a/packages/react-front-kit/src/3-custom/Layouts/FoldableColumnLayout/FoldableColumnLayout.tsx b/packages/react-front-kit/src/3-custom/Layouts/FoldableColumnLayout/FoldableColumnLayout.tsx
@@ -52,7 +52,7 @@ export function FoldableColumnLayout(
             />
           </Grid.Col>
         </Grid>
-        <Grid grow gutter="xl">
+        <Grid grow gutter="xl" pt={12}>
           {Boolean(isColumnVisible) && (
             <Grid.Col span={3}>{sidebarContent}</Grid.Col>
           )}

diff --git a/...rc/3-custom/Layouts/FoldableColumnLayout/__snapshots__/FoldableColumnLayout.test.tsx.snap b/...rc/3-custom/Layouts/FoldableColumnLayout/__snapshots__/FoldableColumnLayout.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`FoldableColumnLayout matches snapshot 1`] = `
             </div>
           </div>
           <div
-            class="mantine-Grid-root mantine-1go31lo"
+            class="mantine-Grid-root mantine-zodkxp"
           >
             <div
               class="mantine-Grid-col mantine-1slhqex"

diff --git a/packages/react-front-kit/src/3-custom/Pages/TestPage/TestPage.tsx b/packages/react-front-kit/src/3-custom/Pages/TestPage/TestPage.tsx
@@ -2,10 +2,12 @@
 
 import type { FormEvent, ReactElement } from 'react';
 
-import { Avatar, Menu } from '@mantine/core';
+import { Avatar, Button, Flex, Menu } from '@mantine/core';
+import { FolderPlus } from '@phosphor-icons/react';
 import { useState } from 'react';
 
 import { primaryTheme } from '../../../theme';
+import { flattenNestedObjects } from '../../../utils/nested-object';
 import { DropdownButton } from '../../Components/DropdownButton/DropdownButton';
 import { Header } from '../../Components/Header/Header';
 import { SidebarMenu } from '../../Components/SidebarMenu/SidebarMenu';
@@ -17,11 +19,24 @@ import { FoldableColumnLayout } from '../../Layouts/FoldableColumnLayout/Foldabl
  */
 export function TestPage(): ReactElement {
   const [search, setSearch] = useState('');
+  const [sidebarMenu, setSidebarMenu] = useState(menu);
 
   function handleSearchSubmit(event: FormEvent): void {
     event.preventDefault();
   }
 
+  function handleAddFolder(): void {
+    setSidebarMenu(
+      sidebarMenu.concat([
+        {
+          id: flattenNestedObjects(sidebarMenu).length + 1,
+          label: 'Nouveau Dossier',
+          leftIcon: <FolderPlus />,
+        },
+      ]),
+    );
+  }
+
   return (
     <FoldableColumnLayout
       appShellProps={{
@@ -60,9 +75,17 @@ export function TestPage(): ReactElement {
         ),
         padding: 0,
       }}
-      sidebarContent={<SidebarMenu menu={menu} />}
+      sidebarContent={
+        <Flex direction="column" gap={24}>
+          <Button onClick={handleAddFolder} size="md">
+            Nouveau dossier
+          </Button>
+          <SidebarMenu menu={sidebarMenu} />
+        </Flex>
+      }
       sidebarToggleLabel="Voir l'arborescence"
     >
+      <span>Lorem Ipsum dolor sit amet</span>
       <p>
         Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipiscing elit.
         Sed varius bibendum dui non imperdiet. Donec vehicula fringilla lorem