[LG-5562] feat(Wizard) Updates Wizard API

.changeset/form-footer-interfaces.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-footer': minor
+---
+
+Exports button prop interfaces

.changeset/wizard.md

@@ -2,4 +2,75 @@
 '@leafygreen-ui/wizard': minor
 ---
 
-Initial Wizard package release
+Initial Wizard package release.
+
+```tsx
+<Wizard>
+  <Wizard.Step>
+    <div>Step 1 contents<div>
+    <Wizard.Footer
+      primaryButtonProps={{
+        children: 'Continue',
+        variant: 'primary'
+      }}
+    />
+  </Wizard.Step>
+
+  <Wizard.Step requiresAcknowledgement>
+    <div>Step 2 contents<div>
+    <Wizard.Footer
+      primaryButtonProps={{
+        children: 'Delete',
+        variant: 'danger'
+      }}
+    />
+  </Wizard.Step>
+</Wizard>
+```
+
+### Wizard
+The `Wizard` component establishes a context with an internal state, and will render only the `activeStep`. 
+
+You can also control the Wizard externally using the `activeStep` and `onStepChange` callback. 
+Note: if you externally control the state, you opt out of the automatic range validation, and you must ensure that the provided `activeStep` index is valid relative to the `Wizard.Step`s provided.
+
+### Wizard.Step
+Defines a discrete step in the wizard. Only the step matching the internal (or provided) `activeStep` index will be displayed.
+
+Both `Wizard` and `Wizard.Step` are only wrapped in a `Fragment` to allow for more versatile styling.
+
+#### `requiresAcknowledgement` 
+
+If `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.
+
+e.g.
+```tsx
+// App.tsx
+<Wizard.Step requiresAcknowledgement>
+  <MyWizardStepContents />
+  <Wizard.Footer
+    primaryButtonProps={{
+      children: 'Delete', // This button will be disabled until the step has been acknowledged
+    }}
+  />
+</Wizard.Step>
+
+// MyWizardStepContents.tsx
+const MyWizardStepContents = () => {
+  const { isAcknowledged, setAcknowledged } = useWizardStepContext();
+
+  return (
+    <>
+      <Checkbox
+        label="Acknowledge"
+        checked={isAcknowledged}
+        onChange={(e)=> setAcknowledged(e.target.checked)}
+      />
+    </>
+  )
+}
+```
+
+### Wizard.Footer
+The `Wizard.Footer` is a convenience wrapper around the `FormFooter` component. Each step should render its own Footer component
+

packages/form-footer/src/FormFooter.types.ts

@@ -20,26 +20,30 @@ type OmittedSplitButtonProps = Omit<
   'children' | 'variant'
 >;
 
-type BackStandardButtonProps = ButtonPropsOmittingVariant & {
+export type BackStandardButtonProps = ButtonPropsOmittingVariant & {
   variant?: Extract<ButtonVariant, 'default' | 'dangerOutline'>;
 };
-type BackSplitButtonProps = OmittedSplitButtonProps & {
+export type BackSplitButtonProps = OmittedSplitButtonProps & {
   variant?: Extract<SplitButtonVariant, 'default' | 'danger'>;
 };
-type BackButtonProps = BackStandardButtonProps | BackSplitButtonProps;
+export type BackButtonProps = BackStandardButtonProps | BackSplitButtonProps;
 
-type CancelStandardButtonProps = ButtonPropsOmittingVariant;
-type CancelSplitButtonProps = OmittedSplitButtonProps;
-type CancelButtonProps = CancelStandardButtonProps | CancelSplitButtonProps;
+export type CancelStandardButtonProps = ButtonPropsOmittingVariant;
+export type CancelSplitButtonProps = OmittedSplitButtonProps;
+export type CancelButtonProps =
+  | CancelStandardButtonProps
+  | CancelSplitButtonProps;
 
-type PrimaryStandardButtonProps = ButtonPropsOmittingVariant &
+export type PrimaryStandardButtonProps = ButtonPropsOmittingVariant &
   ButtonPropsWithRequiredChildren & {
     variant?: Extract<ButtonVariant, 'primary' | 'danger'>;
   };
-type PrimarySplitButtonProps = OmittedSplitButtonProps & {
+export type PrimarySplitButtonProps = OmittedSplitButtonProps & {
   variant?: Extract<SplitButtonVariant, 'primary' | 'danger'>;
 };
-type PrimaryButtonProps = PrimaryStandardButtonProps | PrimarySplitButtonProps;
+export type PrimaryButtonProps =
+  | PrimaryStandardButtonProps
+  | PrimarySplitButtonProps;
 
 export interface FormFooterProps
   extends React.ComponentProps<'footer'>,

packages/form-footer/src/index.ts

@@ -5,5 +5,16 @@ export {
   default,
   default as FormFooter,
 } from './FormFooter';
-export { type FormFooterProps } from './FormFooter.types';
+export {
+  type BackButtonProps,
+  type BackSplitButtonProps,
+  type BackStandardButtonProps,
+  type CancelButtonProps,
+  type CancelSplitButtonProps,
+  type CancelStandardButtonProps,
+  type FormFooterProps,
+  type PrimaryButtonProps,
+  type PrimarySplitButtonProps,
+  type PrimaryStandardButtonProps,
+} from './FormFooter.types';
 export { getLgIds } from './utils';

packages/wizard/README.md

@@ -23,3 +23,77 @@ yarn add @leafygreen-ui/wizard
 ```shell
 npm install @leafygreen-ui/wizard
 ```
+
+```tsx
+<Wizard>
+  <Wizard.Step>
+    <div>Step 1 contents<div>
+    <Wizard.Footer
+      primaryButtonProps={{
+        children: 'Continue',
+        variant: 'primary'
+      }}
+    />
+  </Wizard.Step>
+
+  <Wizard.Step requiresAcknowledgement>
+    <div>Step 2 contents<div>
+    <Wizard.Footer
+      primaryButtonProps={{
+        children: 'Delete',
+        variant: 'danger'
+      }}
+    />
+  </Wizard.Step>
+</Wizard>
+```
+
+### Wizard
+
+The `Wizard` component establishes a context with an internal state, and will render only the `activeStep`.
+
+You can also control the Wizard externally using the `activeStep` and `onStepChange` callback.
+Note: if you externally control the state, you opt out of the automatic range validation, and you must ensure that the provided `activeStep` index is valid relative to the `Wizard.Step`s provided.
+
+### Wizard.Step
+
+Defines a discrete step in the wizard. Only the step matching the internal (or provided) `activeStep` index will be displayed.
+
+Both `Wizard` and `Wizard.Step` are only wrapped in a `Fragment` to allow for more versatile styling.
+
+#### `requiresAcknowledgement`
+
+If `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.
+
+e.g.
+
+```tsx
+// App.tsx
+<Wizard.Step requiresAcknowledgement>
+  <MyWizardStepContents />
+  <Wizard.Footer
+    primaryButtonProps={{
+      children: 'Delete', // This button will be disabled until the step has been acknowledged
+    }}
+  />
+</Wizard.Step>;
+
+// MyWizardStepContents.tsx
+const MyWizardStepContents = () => {
+  const { isAcknowledged, setAcknowledged } = useWizardStepContext();
+
+  return (
+    <>
+      <Checkbox
+        label="Acknowledge"
+        checked={isAcknowledged}
+        onChange={e => setAcknowledged(e.target.checked)}
+      />
+    </>
+  );
+};
+```
+
+### Wizard.Footer
+
+The `Wizard.Footer` is a convenience wrapper around the `FormFooter` component. Each step should render its own Footer component

packages/wizard/package.json

@@ -1,7 +1,6 @@
-
 {
   "name": "@leafygreen-ui/wizard",
-  "version": "0.0.1",
+  "version": "0.1.0-local.1",
   "description": "LeafyGreen UI Kit Wizard",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -28,21 +27,28 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/button": "workspace:^",
     "@leafygreen-ui/compound-component": "workspace:^",
-    "@leafygreen-ui/descendants": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
     "@leafygreen-ui/form-footer": "workspace:^",
     "@leafygreen-ui/hooks": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/polymorphic": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
-    "@leafygreen-ui/typography": "workspace:^",
     "@lg-tools/test-harnesses": "workspace:^"
   },
-  "devDependencies" : {
+  "devDependencies": {
+    "@faker-js/faker": "^8.0.0",
+    "@leafygreen-ui/button": "workspace:^",
+    "@leafygreen-ui/badge": "workspace:^",
+    "@leafygreen-ui/banner": "workspace:^",
+    "@leafygreen-ui/card": "workspace:^",
+    "@leafygreen-ui/checkbox": "workspace:^",
+    "@leafygreen-ui/expandable-card": "workspace:^",
     "@leafygreen-ui/icon": "workspace:^",
-    "@faker-js/faker": "^8.0.0"
+    "@leafygreen-ui/loading-indicator": "workspace:^",
+    "@leafygreen-ui/segmented-control": "workspace:^",
+    "@leafygreen-ui/skeleton-loader": "workspace:^",
+    "@leafygreen-ui/typography": "workspace:^"
   },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/wizard",
   "repository": {