feat(Modal): add secondary action button support

- Add secondary action button option to Modal component
- Update Modal story to demonstrate multiple button configurations
- Support loading and disabled states for all action buttons

Author: Mibou

Storybook/.ondevice/storybook.requires.js

@@ -57,8 +57,8 @@ const getStories = () => {
     "./components/Colors/Colors.stories.tsx": require("../components/Colors/Colors.stories.tsx"),
     "./components/DateSelector/DateField.stories.tsx": require("../components/DateSelector/DateField.stories.tsx"),
     "./components/DateSelector/DateSelector.stories.tsx": require("../components/DateSelector/DateSelector.stories.tsx"),
-    "./components/Dialog/Dialog.stories.tsx": require("../components/Dialog/Dialog.stories.tsx"),
     "./components/Divider/Divider.stories.tsx": require("../components/Divider/Divider.stories.tsx"),
+    "./components/Modals/Modals.stories.tsx": require("../components/Modals/Modals.stories.tsx"),
     "./components/NumberField/NumberField.stories.tsx": require("../components/NumberField/NumberField.stories.tsx"),
     "./components/Tag/Tag.stories.tsx": require("../components/Tag/Tag.stories.tsx"),
     "./components/TextField/TextField.stories.tsx": require("../components/TextField/TextField.stories.tsx"),

Storybook/components/Modals/Modals.stories.tsx

@@ -24,8 +24,9 @@ export default {
             control: { type: 'radio' },
             options: ['left', 'center'],
         },
-        haveSecondButton: {
-            control: { type: 'boolean' },
+        haveMoreButtons: {
+            control: { type: 'radio' },
+            options: ['0', '1', '2'],
         },
         name: { control: { type: 'select' }, options: IconsName },
         disabled: { control: { type: 'boolean' } },
@@ -53,7 +54,7 @@ export default {
     Controle des Bouton :
     \`\`\`
     {{
-      confirm: {
+      cta: {
         label: 'Valider',
         onPress: () => {},
       },
@@ -95,20 +96,29 @@ export const Default: Story = {
                 {...args}
                 visible={true}
                 actions={{
-                    confirm: {
-                        label: 'Valider',
+                    cta: {
+                        label: 'Confirm',
                         disabled: args.disabled,
                         loading: args.loading,
                         // eslint-disable-next-line @typescript-eslint/no-empty-function
                         onPress: () => {},
                     },
-                    cancel: args?.haveSecondButton
-                        ? {
-                              label: 'Annuler',
-                              // eslint-disable-next-line @typescript-eslint/no-empty-function
-                              onPress: () => {},
-                          }
-                        : undefined,
+                    cancel:
+                        args?.haveMoreButtons >= '1'
+                            ? {
+                                  label: 'Cancel',
+                                  // eslint-disable-next-line @typescript-eslint/no-empty-function
+                                  onPress: () => {},
+                              }
+                            : undefined,
+                    secondary:
+                        args?.haveMoreButtons >= '2'
+                            ? {
+                                  label: 'Verify',
+                                  // eslint-disable-next-line @typescript-eslint/no-empty-function
+                                  onPress: () => {},
+                              }
+                            : undefined,
                 }}
             >
                 <InsideDialog variantBody={args?.variant ?? 'left'} />

src/components/modals/Modal.tsx

@@ -15,8 +15,9 @@ interface Action {
 }
 
 interface ModalActions {
-    confirm: Action;
+    cta: Action;
     cancel?: Action;
+    secondary?: Action;
 }
 
 export interface ModalProps extends PropsWithChildren {
@@ -80,16 +81,29 @@ export const Modal = (props: ModalProps) => {
                             {props.actions.cancel.label}
                         </Button>
                     )}
+                    {props.actions.secondary && (
+                        <Button
+                            variant="outlined"
+                            status={'default'}
+                            onPress={props.actions.secondary.onPress}
+                            testID={'PopupSecondaryButton'}
+                            style={styles.leftOption}
+                            loading={props.actions.secondary.loading ?? false}
+                            disabled={props.actions.secondary.disabled ?? false}
+                        >
+                            {props.actions.secondary.label}
+                        </Button>
+                    )}
                     <Button
                         variant="filled"
                         status={'primary'}
-                        onPress={props.actions.confirm.onPress}
+                        onPress={props.actions.cta.onPress}
                         testID={'PopupConfirmButton'}
                         style={styles.rightOption}
-                        loading={props.actions.confirm.loading ?? false}
-                        disabled={props.actions.confirm.disabled ?? false}
+                        loading={props.actions.cta.loading ?? false}
+                        disabled={props.actions.cta.disabled ?? false}
                     >
-                        {props.actions.confirm.label}
+                        {props.actions.cta.label}
                     </Button>
                 </View>
             </BaseDialog>