[UXE-33] feat(Template) Creates DeleteWizard template package

.changeset/delete-wizard.md

@@ -0,0 +1,64 @@
+---
+'@lg-templates/delete-wizard': minor
+---
+
+Initial release of `DeleteWizard`.
+
+```tsx
+<DeleteWizard
+  onStepChange={...}
+  onCancel={...}
+  onDelete={...}
+>
+  <DeleteWizard.Header
+    pageTitle="Demo Delete Wizard"
+  />
+  <DeleteWizard.Step requiresAcknowledgement>
+    <DeleteWizard.StepContent>
+      <div>Step 1 contents<div>
+    </DeleteWizard.StepContent>
+    <DeleteWizard.Footer
+      backButtonText="Go back"
+      cancelButtonText="Cancel flow"
+      primaryButtonText='Continue to next step'
+    />
+  </DeleteWizard.Step>
+
+  <DeleteWizard.Step requiresAcknowledgement>
+    <DeleteWizard.StepContent>
+      <div>Step 2 contents<div>
+    </DeleteWizard.StepContent>
+    <DeleteWizard.Footer
+      backButtonText="Go back"
+      cancelButtonText="Cancel flow"
+      primaryButtonText='Delete my thing'
+    />
+  </DeleteWizard.Step>
+</DeleteWizard>
+```
+
+### DeleteWizard
+Establishes a context, and only renders the `activeStep` (managed internally, or provided with the `activeStep` prop). Accepts a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children. 
+
+`DeleteWizard` and all sub-components include template styling. 
+
+### DeleteWizard.Header
+A convenience wrapper around `CanvasHeader`
+
+### DeleteWizard.Step
+A convenience wrapper around `Wizard.Step` to ensure the correct context. 
+Like the basic `Wizard.Step`,  of `requiresAcknowledgement` is true, the step must have `isAcknowledged` set in context, (or passed in as a controlled prop) for the Footer's primary button to be enabled. (see the Wizard and DeleteWizard demos in Storybook)
+
+
+### DeleteWizard.StepContent
+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 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.

.changeset/wizard.md

@@ -4,4 +4,4 @@
 
 Initial Wizard package release.
 
-See [README.md](./README.md) for usage guidelines
+See [README.md](./README.md) for usage guidelines

package.json

@@ -32,7 +32,7 @@
     "link": "lg link",
     "lint": "lg lint",
     "prepublishOnly": "pnpm run build && pnpm build:ts-downlevel && pnpm build:docs",
-    "publish": "pnpm changeset publish --public",
+    "publish": "pnpm publish -r",
     "reset:react17": "npx node ./scripts/react17/reset.mjs; pnpm run init",
     "slackbot": "lg slackbot",
     "start": "npx storybook dev -p 9001 --no-version-updates --no-open",
@@ -99,7 +99,8 @@
       "@lg-charts": "charts",
       "@lg-chat": "chat",
       "@lg-tools": "tools",
-      "@lg-mcp-ui": "mcp-ui"
+      "@lg-mcp-ui": "mcp-ui",
+      "@lg-templates": "templates"
     }
   },
   "keywords": [

packages/wizard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/wizard",
-  "version": "0.1.0-local.1",
+  "version": "0.0.1",
   "description": "LeafyGreen UI Kit Wizard",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",

packages/wizard/src/WizardContext/WizardContext.tsx

@@ -1,7 +1,9 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
 
+import { Optional } from '@leafygreen-ui/lib';
+
+import type { GetLgIdsReturnType } from '../utils/getLgIds';
 import { getLgIds } from '../utils/getLgIds';
-import { GetLgIdsReturnType } from '../utils/getLgIds';
 
 export interface WizardContextData {
   /**
@@ -43,7 +45,9 @@ export const WizardContext = createContext<WizardContextData>({
 });
 
 interface WizardProviderProps
-  extends PropsWithChildren<Omit<WizardContextData, 'isWizardContext'>> {}
+  extends PropsWithChildren<
+    Omit<Optional<WizardContextData, 'lgIds'>, 'isWizardContext'>
+  > {}
 
 export const WizardProvider = ({
   children,

packages/wizard/src/WizardFooter/WizardFooter.spec.tsx

@@ -256,4 +256,216 @@
       expect(getByTestId('step-1')).toBeInTheDocument();
     });
   });
+
+  describe('primary button behavior', () => {
+    test('primary button is enabled by default', () => {
+      const { getByRole } = render(
+        <Wizard>
+          <Wizard.Step>
+            <Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
+          </Wizard.Step>
+        </Wizard>,
+      );
+
+      const primaryButton = getByRole('button', { name: 'Continue' });
+      expect(primaryButton).toBeEnabled();
+    });
+
+    test('primary button advances to next step when clicked', async () => {
+      const onStepChange = jest.fn();
+
+      const { getByRole, getByTestId } = render(
+        <Wizard onStepChange={onStepChange}>
+          <Wizard.Step>
+            <div data-testid="step-1">Step 1</div>
+            <Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
+          </Wizard.Step>
+          <Wizard.Step>
+            <div data-testid="step-2">Step 2</div>
+            <Wizard.Footer primaryButtonProps={{ children: 'Finish' }} />
+          </Wizard.Step>
+        </Wizard>,
+      );
+
+      expect(getByTestId('step-1')).toBeInTheDocument();
+
+      const nextButton = getByRole('button', { name: 'Next' });
+      await userEvent.click(nextButton);
+
+      expect(onStepChange).toHaveBeenCalledWith(1);
+      expect(getByTestId('step-2')).toBeInTheDocument();
+    });
+
+    describe('requiresAcknowledgement', () => {
+      test('primary button is disabled when step requires acknowledgement and is not acknowledged', () => {
+        const { getByRole } = render(
+          <Wizard>
+            <Wizard.Step requiresAcknowledgement>
+              <div>Step content</div>
+              <Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
+            </Wizard.Step>
+          </Wizard>,
+        );
+
+        const primaryButton = getByRole('button', { name: 'Continue' });
+        expect(primaryButton).toHaveAttribute('aria-disabled', 'true');
+      });
+
+      test('primary button is enabled when step requires acknowledgement and is acknowledged', async () => {
+        const TestComponent = () => {
+          const { setAcknowledged } = useWizardStepContext();
+          return (
+            <>
+              <div>Step content</div>
+              <button onClick={() => setAcknowledged(true)}>Acknowledge</button>
+              <Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
+            </>
+          );
+        };
+
+        const { getByRole } = render(
+          <Wizard>
+            <Wizard.Step requiresAcknowledgement>
+              <TestComponent />
+            </Wizard.Step>
+          </Wizard>,
+        );
+
+        const primaryButton = getByRole('button', { name: 'Continue' });
+        expect(primaryButton).toHaveAttribute('aria-disabled', 'true');
+
+        await userEvent.click(getByRole('button', { name: 'Acknowledge' }));
+
+        expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
+      });
+
+      test('primary button is enabled when step does not require acknowledgement', () => {
+        const { getByRole } = render(
+          <Wizard>
+            <Wizard.Step>
+              <div>Step content</div>
+              <Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
+            </Wizard.Step>
+          </Wizard>,
+        );
+
+        const primaryButton = getByRole('button', { name: 'Continue' });
+        expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
+      });
+
+      test('primary button can advance step after acknowledgement', async () => {
+        const TestComponent = () => {
+          const { setAcknowledged } = useWizardStepContext();
+          return (
+            <>
+              <div>Step content</div>
+              <button onClick={() => setAcknowledged(true)}>Acknowledge</button>
+              <Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
+            </>
+          );
+        };
+
+        const { getByRole, getByTestId } = render(
+          <Wizard>
+            <Wizard.Step requiresAcknowledgement>
+              <div data-testid="step-1">Step 1</div>
+              <TestComponent />
+            </Wizard.Step>
+            <Wizard.Step>
+              <div data-testid="step-2">Step 2</div>
+            </Wizard.Step>
+          </Wizard>,
+        );
+
+        expect(getByTestId('step-1')).toBeInTheDocument();
+
+        const primaryButton = getByRole('button', { name: 'Continue' });
+        expect(primaryButton).toHaveAttribute('aria-disabled', 'true');
+
+        // Acknowledge the step
+        await userEvent.click(getByRole('button', { name: 'Acknowledge' }));
+        expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
+
+        // Advance to next step
+        await userEvent.click(primaryButton);
+        expect(getByTestId('step-2')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('back button', () => {
+    test('back button is not rendered on first step', () => {
+      const { queryByRole } = render(
+        <Wizard>
+          <Wizard.Step>
+            <Wizard.Footer
+              primaryButtonProps={{ children: 'Next' }}
+              backButtonProps={{ children: 'Back' }}
+            />
+          </Wizard.Step>
+        </Wizard>,
+      );
+
+      expect(queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
+    });
+
+    test('back button is rendered on subsequent steps', async () => {
+      const { getByRole } = render(
+        <Wizard>
+          <Wizard.Step>
+            <div data-testid="step-1">Step 1</div>
+            <Wizard.Footer
+              primaryButtonProps={{ children: 'Next' }}
+              backButtonProps={{ children: 'Back' }}
+            />
+          </Wizard.Step>
+          <Wizard.Step>
+            <div data-testid="step-2">Step 2</div>
+            <Wizard.Footer
+              primaryButtonProps={{ children: 'Finish' }}
+              backButtonProps={{ children: 'Back' }}
+            />
+          </Wizard.Step>
+        </Wizard>,
+      );
+
+      // Move to step 2
+      await userEvent.click(getByRole('button', { name: 'Next' }));
+
+      // Back button should now be visible
+      expect(getByRole('button', { name: 'Back' })).toBeInTheDocument();
+    });
+
+    test('back button navigates to previous step', async () => {
+      const onStepChange = jest.fn();
+
+      const { getByRole, getByTestId } = render(
+        <Wizard onStepChange={onStepChange}>
+          <Wizard.Step>
+            <div data-testid="step-1">Step 1</div>
+            <Wizard.Footer
+              primaryButtonProps={{ children: 'Next' }}
+              backButtonProps={{ children: 'Back' }}
+            />
+          </Wizard.Step>
+          <Wizard.Step>
+            <div data-testid="step-2">Step 2</div>
+            <Wizard.Footer
+              primaryButtonProps={{ children: 'Finish' }}
+              backButtonProps={{ children: 'Back' }}
+            />
+          </Wizard.Step>
+        </Wizard>,
+      );
+
+      // Move to step 2
+      await userEvent.click(getByRole('button', { name: 'Next' }));
+      expect(getByTestId('step-2')).toBeInTheDocument();
+
+      // Go back to step 1
+      await userEvent.click(getByRole('button', { name: 'Back' }));
+      expect(onStepChange).toHaveBeenCalledWith(0);
+      expect(getByTestId('step-1')).toBeInTheDocument();
+    });
+  });
 });

packages/wizard/src/index.ts

@@ -1,3 +1,5 @@
+export { WizardSubComponentProperties } from './constants';
+export { getLgIds } from './utils/getLgIds';
 export { Wizard, type WizardProps } from './Wizard';
 export {
   useWizardContext,

packages/wizard/src/testing/getTestUtils.tsx

@@ -1,4 +1,5 @@
 import { findByLgId, getByLgId, queryByLgId } from '@lg-tools/test-harnesses';
+import { screen } from '@testing-library/react';
 
 import { getTestUtils as getButtonUtils } from '@leafygreen-ui/button/testing';
 import { LgIdString } from '@leafygreen-ui/lib';

pnpm-workspace.yaml

@@ -6,3 +6,4 @@ packages:
   - 'mcp-ui/*'
   - 'packages/*'
   - 'tools/*'
+  - 'templates/*'