feat: finished DynamicZone buttons and style

Smile-SA · Aug 27, 2024 · c314a74 · c314a74
1 parent 617f8e0
commit c314a74
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 30 deletions.
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.module.css b/packages/haring-react/src/Form/DynamicZone/DynamicZone.module.css
@@ -1,12 +1,12 @@
-.container {
-  /* WIP */
+.buttonsContainer {
+  border-radius: 0.5rem;
   border: 1px dashed black;
 }
 
-.blocksContainer {
-}
+.buttonsLabel {
+  &:empty {
+    display: none;
+  }
 
-.buttonsContainer {
-  /* WIP */
-  border: 1px dashed red;
+  margin-bottom: 10px;
 }
diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.stories.tsx
@@ -18,6 +18,7 @@ export const DynamicZone: IStory = {
   args: {
     blockOptions: dynamicZoneButtons,
     blocks: dynamicZoneBlocks,
+    buttonsGroupLabel: 'Ajouter un block',
     internalBlockCardProps: {
       headerCardSectionProps: {
         bg: 'cadetblue',

diff --git a/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx b/packages/haring-react/src/Form/DynamicZone/DynamicZone.tsx
@@ -8,7 +8,7 @@ import type {
 } from '@mantine/core';
 import type { ReactElement } from 'react';
 
-import { Button, Container, Group, Stack } from '@mantine/core';
+import { Button, Container, Group, Stack, Text } from '@mantine/core';
 
 import classes from './DynamicZone.module.css';
 import { DynamicZoneBlock } from './DynamicZoneBlock/DynamicZoneBlock';
@@ -19,6 +19,7 @@ export interface IDynamicZoneProps<Block extends IBaseBlock> {
   blocks: Block[];
   blocksStackProps?: StackProps;
   bottomContainerProps?: ContainerProps;
+  buttonsGroupLabel?: string;
   buttonsGroupProps?: GroupProps;
   internalBlockCardProps?: IDynamicZoneBlockInternalComponentProps;
   onAppendBlock: (blockType: string) => void;
@@ -36,6 +37,7 @@ export function DynamicZone<Block extends IBaseBlock>(
     blocks,
     blocksStackProps,
     bottomContainerProps,
+    buttonsGroupLabel,
     buttonsGroupProps,
     internalBlockCardProps,
     onAppendBlock,
@@ -49,13 +51,8 @@ export function DynamicZone<Block extends IBaseBlock>(
   }
 
   return (
-    <Container
-      className={classes.container}
-      fluid
-      p={0}
-      {...rootContainerProps}
-    >
-      <Stack className={classes.blocksContainer} gap="sm" {...blocksStackProps}>
+    <Container fluid p={0} {...rootContainerProps}>
+      <Stack gap="sm" {...blocksStackProps}>
         {blocks.map((block, index) => (
           <DynamicZoneBlock
             {...blockCardProps}
@@ -76,23 +73,29 @@ export function DynamicZone<Block extends IBaseBlock>(
         className={classes.buttonsContainer}
         fluid
         mt="lg"
+        p="sm"
         {...bottomContainerProps}
       >
-        <Group {...buttonsGroupProps}>
-          {blockOptions.map((button) => (
-            <Button
-              radius="md"
-              size="md"
-              type="button"
-              variant="default"
-              {...button}
-              key={`button-${button.id}`}
-              onClick={() => onAddBlock(button.id)}
-            >
-              {button.label}
-            </Button>
-          ))}
-        </Group>
+        <Container fluid p={0}>
+          <Text className={classes.buttonsLabel} fw="bold">
+            {buttonsGroupLabel}
+          </Text>
+          <Group {...buttonsGroupProps}>
+            {blockOptions.map((button) => (
+              <Button
+                radius="md"
+                size="md"
+                type="button"
+                variant="default"
+                {...button}
+                key={`button-${button.id}`}
+                onClick={() => onAddBlock(button.id)}
+              >
+                {button.label}
+              </Button>
+            ))}
+          </Group>
+        </Container>
       </Container>
     </Container>
   );