Adds onCancel/onDelete handlers

Author: TheSonOfThomp

.changeset/delete-wizard.md

@@ -5,7 +5,11 @@
 Initial release of `DeleteWizard`.
 
 ```tsx
-<DeleteWizard>
+<DeleteWizard
+  onStepChange={...}
+  onCancel={...}
+  onDelete={...}
+>
   <DeleteWizard.Header
     pageTitle="Demo Delete Wizard"
   />
@@ -14,9 +18,9 @@ Initial release of `DeleteWizard`.
       <div>Step 1 contents<div>
     </DeleteWizard.StepContent>
     <DeleteWizard.Footer
-      primaryButtonProps={{
-        children: 'Continue to next step',
-      }}
+      backButtonText="Go back"
+      cancelButtonText="Cancel flow"
+      primaryButtonText='Continue to next step'
     />
   </DeleteWizard.Step>
 
@@ -25,12 +29,9 @@ Initial release of `DeleteWizard`.
       <div>Step 2 contents<div>
     </DeleteWizard.StepContent>
     <DeleteWizard.Footer
-      primaryButtonProps={{
-        leftGlyph: <TrashIcon />,
-        variant: 'danger',
-        children: 'Delete my thing',
-        onClick: handleDelete,
-      }}
+      backButtonText="Go back"
+      cancelButtonText="Cancel flow"
+      primaryButtonText='Delete my thing'
     />
   </DeleteWizard.Step>
 </DeleteWizard>
@@ -41,7 +42,6 @@ Establishes a context, and only renders the `activeStep` (managed internally, or
 
 `DeleteWizard` and all sub-components include template styling. 
 
-
 ### DeleteWizard.Header
 A convenience wrapper around `CanvasHeader`
 
@@ -54,4 +54,11 @@ Like the basic `Wizard.Step`,  of `requiresAcknowledgement` is true, the step mu
 A styled `div` for use inside a `DeleteWizard.Step` to ensure proper page scrolling and footer positioning
 
 ### DeleteWizard.Footer
-A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template
+A wrapper around `Wizard.Footer` with embedded styles and convenience props for the DeleteWizard template. 
+`DeleteWizard.Footer` accepts optional `backButtonText`, `cancelButtonText` and `primaryButtonText` props for simpler wizard creation. 
+The primary button variant is defined based on the `activeStep`— `"danger"` for the final steps, and `"primary"` for all preceding steps.
+Also defines the `leftGlyph` to <TrashIcon /> for the final step.
+
+You can override this behavior by providing the button props object (see FormFooter).
+
+Use the top level `onDelete`, `onCancel` and `onStepChange` callbacks to handle footer button clicks.

templates/delete-wizard/src/DeleteWizard.stories.tsx

@@ -5,7 +5,6 @@ import { StoryObj } from '@storybook/react';
 
 import { css } from '@leafygreen-ui/emotion';
 import BeakerIcon from '@leafygreen-ui/icon/Beaker';
-import TrashIcon from '@leafygreen-ui/icon/Trash';
 import { BackLink, Body } from '@leafygreen-ui/typography';
 
 import { ExampleStepContent } from './testUtils/ExampleStepContent';
@@ -50,6 +49,10 @@ export const LiveExample: StoryObj<typeof DeleteWizard> = {
       window.location.reload();
     };
 
+    const handleStepChange = step => {
+      console.log('[STORYBOOK] step changed to ', step);
+    };
+
     return (
       <div
         className={css`
@@ -58,6 +61,9 @@ export const LiveExample: StoryObj<typeof DeleteWizard> = {
       >
         <DeleteWizard
           activeStep={args.activeStep}
+          onStepChange={handleStepChange}
+          onCancel={handleCancel}
+          onDelete={handleDelete}
           className={css`
             height: 100vh;
             width: 100vw;
@@ -83,13 +89,8 @@ export const LiveExample: StoryObj<typeof DeleteWizard> = {
               />
             </DeleteWizard.StepContent>
             <DeleteWizard.Footer
-              cancelButtonProps={{
-                children: 'Cancel wizard',
-                onClick: handleCancel,
-              }}
-              primaryButtonProps={{
-                children: 'Continue to next step',
-              }}
+              cancelButtonText="Cancel wizard"
+              primaryButtonText="Continue to next step"
             />
           </DeleteWizard.Step>
 
@@ -104,16 +105,9 @@ export const LiveExample: StoryObj<typeof DeleteWizard> = {
               />
             </DeleteWizard.StepContent>
             <DeleteWizard.Footer
-              cancelButtonProps={{
-                children: 'Cancel wizard',
-                onClick: handleCancel,
-              }}
-              primaryButtonProps={{
-                leftGlyph: <TrashIcon />,
-                variant: 'danger',
-                children: 'Delete my thing',
-                onClick: handleDelete,
-              }}
+              backButtonText="Go back"
+              cancelButtonText="Cancel wizard"
+              primaryButtonText="Delete the prop"
             />
           </DeleteWizard.Step>
         </DeleteWizard>

templates/delete-wizard/src/DeleteWizard/DeleteWizard.tsx

@@ -5,35 +5,40 @@ import {
   findChild,
 } from '@leafygreen-ui/compound-component';
 import { cx } from '@leafygreen-ui/emotion';
-import { useWizardContext, Wizard } from '@leafygreen-ui/wizard';
+import { Wizard } from '@leafygreen-ui/wizard';
 
 import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
 import { wizardWrapperStyles } from './DeleteWizard.styles';
 import { DeleteWizardProps } from './DeleteWizard.types';
+import { DeleteWizardContextProvider } from './DeleteWizardContext';
 import { DeleteWizardFooter } from './DeleteWizardFooter';
 import { DeleteWizardHeader } from './DeleteWizardHeader';
 import { DeleteWizardStep } from './DeleteWizardStep';
 import { DeleteWizardStepContent } from './DeleteWizardStepContents';
 
-/**
- * A re-export of `useWizardContext` specifically for this DeleteWizard
- */
-export const useDeleteWizardContext = useWizardContext;
-
 /**
  * The parent DeleteWizard component.
  * Pass a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children
  */
 export const DeleteWizard = CompoundComponent(
-  ({ activeStep, onStepChange, children, className }: DeleteWizardProps) => {
+  ({
+    activeStep,
+    children,
+    className,
+    onCancel,
+    onDelete,
+    onStepChange,
+  }: DeleteWizardProps) => {
     const header = findChild(children, DeleteWizardSubComponentKeys.Header);
 
     return (
       <div className={cx(wizardWrapperStyles, className)}>
         {header}
-        <Wizard activeStep={activeStep} onStepChange={onStepChange}>
-          {children}
-        </Wizard>
+        <DeleteWizardContextProvider onCancel={onCancel} onDelete={onDelete}>
+          <Wizard activeStep={activeStep} onStepChange={onStepChange}>
+            {children}
+          </Wizard>
+        </DeleteWizardContextProvider>
       </div>
     );
   },

templates/delete-wizard/src/DeleteWizard/DeleteWizard.types.ts

@@ -1,7 +1,10 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, MouseEventHandler } from 'react';
 
 import { WizardProps } from '@leafygreen-ui/wizard';
 
 export interface DeleteWizardProps
   extends WizardProps,
-    Omit<ComponentProps<'div'>, 'children'> {}
+    Omit<ComponentProps<'div'>, 'children'> {
+  onCancel?: MouseEventHandler<HTMLButtonElement>;
+  onDelete?: MouseEventHandler<HTMLButtonElement>;
+}

templates/delete-wizard/src/DeleteWizard/DeleteWizardContext.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react';
+
+import { useWizardContext, WizardContextData } from '@leafygreen-ui/wizard';
+
+import { DeleteWizardProps } from './DeleteWizard.types';
+
+export interface DeleteWizardContextData {
+  onCancel?: DeleteWizardProps['onCancel'];
+  onDelete?: DeleteWizardProps['onDelete'];
+}
+
+export const DeleteWizardContext = createContext<DeleteWizardContextData>({});
+
+export const DeleteWizardContextProvider = ({
+  children,
+  onCancel,
+  onDelete,
+}: PropsWithChildren<DeleteWizardContextData>) => {
+  return (
+    <DeleteWizardContext.Provider
+      value={{
+        onCancel,
+        onDelete,
+      }}
+    >
+      {children}
+    </DeleteWizardContext.Provider>
+  );
+};
+
+/**
+ * A re-export of `useWizardContext` specifically for this DeleteWizard
+ */
+export const useDeleteWizardContext = (): DeleteWizardContextData &
+  WizardContextData => {
+  const wizardContext = useWizardContext();
+  const deleteWizardContext = useContext(DeleteWizardContext);
+
+  return {
+    ...wizardContext,
+    ...deleteWizardContext,
+  };
+};

templates/delete-wizard/src/DeleteWizard/DeleteWizardFooter.tsx

@@ -1,8 +1,18 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 
+import { Variant } from '@leafygreen-ui/button';
+import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
 import { css, cx } from '@leafygreen-ui/emotion';
+import TrashIcon from '@leafygreen-ui/icon/Trash';
+import { Either } from '@leafygreen-ui/lib';
 import { breakpoints } from '@leafygreen-ui/tokens';
-import { Wizard, WizardFooterProps } from '@leafygreen-ui/wizard';
+import {
+  Wizard,
+  WizardFooterProps,
+  WizardSubComponentProperties,
+} from '@leafygreen-ui/wizard';
+
+import { useDeleteWizardContext } from './DeleteWizardContext';
 
 const footerStyles = css`
   position: sticky;
@@ -14,19 +24,97 @@ const footerContentStyles = css`
   max-width: ${breakpoints.XLDesktop}px;
 `;
 
+type DeleteWizardFooterProps = Either<
+  WizardFooterProps & {
+    /**
+     * Sets the Back button text (for steps > 1)
+     */
+    backButtonText?: string;
+    /**
+     * Sets the Cancel button text.
+     * The Cancel button will not render if no text is provided
+     */
+    cancelButtonText?: string;
+
+    /**
+     * Sets the Primary button text.
+     *
+     * The Primary button icon and variant are set automatically based on the activeStep index.
+     * Provide a `primaryButtonProps` to override this behavior
+     */
+    primaryButtonText?: string;
+  },
+  'primaryButtonProps' | 'primaryButtonText'
+>;
+
 /**
  * A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template
  */
-export const DeleteWizardFooter = ({
-  className,
-  contentClassName,
-  ...props
-}: WizardFooterProps) => {
-  return (
-    <Wizard.Footer
-      className={cx(footerStyles, className)}
-      contentClassName={cx(footerContentStyles, contentClassName)}
-      {...props}
-    />
-  );
-};
+export const DeleteWizardFooter = CompoundSubComponent(
+  ({
+    className,
+    contentClassName,
+    primaryButtonText,
+    cancelButtonText,
+    backButtonText,
+    primaryButtonProps,
+    cancelButtonProps,
+    backButtonProps,
+    ...props
+  }: DeleteWizardFooterProps) => {
+    const { activeStep, totalSteps, onCancel, onDelete } =
+      useDeleteWizardContext();
+    const isLastStep = activeStep === totalSteps - 1;
+
+    const handlePrimaryButtonClick: MouseEventHandler<
+      HTMLButtonElement
+    > = e => {
+      primaryButtonProps?.onClick?.(e);
+
+      if (isLastStep) {
+        onDelete?.(e);
+      }
+    };
+
+    const handleCancelButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
+      cancelButtonProps?.onClick?.(e);
+      onCancel?.(e);
+    };
+
+    const _primaryButtonProps = {
+      children: primaryButtonText ?? '',
+      variant: isLastStep ? Variant.Danger : Variant.Primary,
+      leftGlyph: isLastStep ? <TrashIcon /> : undefined,
+      ...primaryButtonProps,
+      // we define `onClick` after spreading props so this handler will always take precedence
+      onClick: handlePrimaryButtonClick,
+    };
+
+    const _backButtonProps = {
+      children: backButtonText,
+      ...backButtonProps,
+    };
+
+    const _cancelButtonProps = {
+      children: cancelButtonText,
+      ...cancelButtonProps,
+      // we define `onClick` after spreading props so this handler will always take precedence
+      onClick: handleCancelButtonClick,
+    };
+
+    return (
+      <Wizard.Footer
+        className={cx(footerStyles, className)}
+        contentClassName={cx(footerContentStyles, contentClassName)}
+        primaryButtonProps={_primaryButtonProps}
+        cancelButtonProps={_cancelButtonProps}
+        backButtonProps={_backButtonProps}
+        {...props}
+      />
+    );
+  },
+  {
+    displayName: 'DeleteWizardFooter',
+    key: WizardSubComponentProperties.Footer,
+  },
+);

templates/delete-wizard/src/DeleteWizard/index.ts

@@ -1,3 +1,9 @@
-export { DeleteWizard, useDeleteWizardContext } from './DeleteWizard';
+export { DeleteWizard } from './DeleteWizard';
 export { type DeleteWizardProps } from './DeleteWizard.types';
+export {
+  DeleteWizardContext,
+  type DeleteWizardContextData,
+  DeleteWizardContextProvider,
+  useDeleteWizardContext,
+} from './DeleteWizardContext';
 export { useDeleteWizardStepContext } from './DeleteWizardStep';