feat(Modal)!: add multiview options for back and danger variant

packages/gamut/src/Modals/ImageContainer.tsx

@@ -2,9 +2,9 @@ import { ComponentProps } from 'react';
 
 import { Box } from '../Box';
 import { ModalContainer } from './elements';
-import { ModalView } from './Modal';
+import { ModalBaseProps } from './types';
 
-interface ImageProps extends Pick<ModalView, 'image'> {
+interface ImageProps extends Pick<ModalBaseProps, 'image'> {
   size: Exclude<
     ComponentProps<typeof ModalContainer>['size'],
     false | undefined

packages/gamut/src/Modals/Modal.tsx

@@ -16,13 +16,38 @@ interface DialogButtonProps {
   onClick?: ButtonProps['onClick'];
   disabled?: boolean;
 }
-export interface ModalView
+
+type SecondaryDialogButtonProps = DialogButtonProps & {
+  actionType: 'back' | 'cancel';
+};
+
+type ModalNextProps = {
+  primaryCta: DialogButtonProps & {
+    actionType: 'next';
+  };
+  secondaryCta: SecondaryDialogButtonProps;
+};
+
+type ModalConfirmProps = {
+  primaryCta: DialogButtonProps & {
+    actionType: 'confirm';
+    variant?: Extract<
+      ComponentProps<typeof FillButton>['variant'],
+      'primary' | 'danger'
+    >;
+  };
+  secondaryCta?: SecondaryDialogButtonProps;
+};
+
+type ModalButtonProps = ModalNextProps | ModalConfirmProps;
+
+interface ModalView
   extends Omit<ModalBaseProps, 'headingLevel' | 'onRequestClose'> {
   children: React.ReactNode;
-  nextCta?: DialogButtonProps;
-  confirmCta?: DialogButtonProps;
-  cancelCta?: DialogButtonProps;
 }
+
+export type ModalViewProps = ModalView & ModalButtonProps;
+
 export interface SingleViewModalProps extends ModalBaseProps {
   size?: ComponentProps<typeof ModalContainer>['size'];
   /**
@@ -56,7 +81,7 @@ export interface MultiViewModalProps
   /**
    * Optional array of multiple screens
    */
-  views: ModalView[];
+  views: ModalViewProps[];
   /**
    * Whether to disable X button at top right of modal
    */
@@ -81,7 +106,8 @@ export const Modal: React.FC<ModalProps> = ({
   ...rest
 }) => {
   const [currentView, setCurrentView] = useState(0);
-  const image = (views?.[currentView].image || rest?.image) ?? null;
+  const view = views?.[currentView];
+  const image = (view?.image || rest?.image) ?? null;
 
   return (
     <Overlay
@@ -102,15 +128,15 @@ export const Modal: React.FC<ModalProps> = ({
         aria-label={ariaLabel}
         aria-hidden="false"
       >
-        {(title || views?.[currentView].title) && (
+        {(title || view?.title) && (
           <Text
             as={headingLevel}
             fontSize={20}
             lineHeight="base"
             gridArea="title"
             aria-live="assertive"
           >
-            {title || views?.[currentView].title}
+            {title || view?.title}
           </Text>
         )}
         {!hideCloseButton && (
@@ -130,37 +156,48 @@ export const Modal: React.FC<ModalProps> = ({
           data-testid="modal-content"
         >
           {image && size && <ImageContainer image={image} size={size} />}
-          {views?.[currentView].children || children}
+          {view?.children || children}
         </Box>
-        {views?.[currentView].cancelCta && (
+        {view?.secondaryCta && (
           <TextButton
-            {...views?.[currentView].cancelCta}
+            {...view?.secondaryCta}
             variant="secondary"
+            disabled={
+              view?.secondaryCta.disabled ||
+              (view?.secondaryCta?.actionType === 'back' && currentView === 0)
+            }
             onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-              views?.[currentView].cancelCta?.onClick?.(e);
-              onRequestClose();
+              if (view?.secondaryCta?.actionType === 'back') {
+                setCurrentView(currentView - 1);
+              }
+              if (view?.secondaryCta?.actionType === 'cancel') {
+                onRequestClose();
+              }
+              view?.secondaryCta?.onClick?.(e);
             }}
             justifySelf="end"
             gridArea="cancel"
           />
         )}
-        {views?.[currentView].nextCta && (
-          <FillButton
-            {...views?.[currentView].nextCta}
-            variant="primary"
-            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-              setCurrentView(currentView + 1);
-              views?.[currentView].nextCta?.onClick?.(e);
-            }}
-            gridArea="confirm"
-          />
-        )}
-        {views?.[currentView].confirmCta && (
+        {view?.primaryCta && (
           <FillButton
-            {...views?.[currentView].confirmCta}
-            variant="primary"
+            {...view?.primaryCta}
+            variant={
+              'variant' in view.primaryCta
+                ? view?.primaryCta?.variant
+                : 'primary'
+            }
+            disabled={
+              view?.primaryCta.disabled ||
+              (view?.primaryCta?.actionType === 'next' &&
+                views &&
+                currentView === views.length - 1)
+            }
             onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-              views?.[currentView].confirmCta?.onClick?.(e);
+              if (view?.primaryCta?.actionType === 'next') {
+                setCurrentView(currentView + 1);
+              }
+              view?.primaryCta?.onClick?.(e);
             }}
             gridArea="confirm"
           />