[LG-5566] tests(Wizard) Implement TestUtils & LGIDs for Wizard

.changeset/form-footer-interfaces.md

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

.changeset/form-footer-lgids.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/form-footer': patch
+---
+
+Passes `data-lgid` to the root `footer` element

.changeset/wizard.md

@@ -2,4 +2,6 @@
 '@leafygreen-ui/wizard': minor
 ---
 
-Initial Wizard package release
+Initial Wizard package release.
+
+See [README.md](./README.md) for usage guidelines

packages/form-footer/src/FormFooter.tsx

@@ -47,6 +47,7 @@ export default function FormFooter({
     <LeafyGreenProvider darkMode={darkMode}>
       <footer
         data-testid={lgIds.root}
+        data-lgid={lgIds.root}
         className={getFormFooterStyles({ theme, className })}
         {...rest}
       >

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,88 @@ 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.
+
+```tsx
+<Wizard
+  activeStep={0}
+  onStepChange={() => {
+    /* do something */
+  }}
+/>
+```
+
+Note: When the `activeStep` is externally controlled, ensure that the provided `activeStep` index is valid relative to the count of steps available. If the zero-indexed `activeStep` value exceeds the count of steps provided (or is negative), nothing will render inside the Wizard. (i.e. passing `activeStep={2}` to a Wizard with only 2 steps, nothing will render)
+
+### 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 be acknowledged for the Footer's primary button to be enabled. By default (or when explicitly set to `false`) the primary button will always be enabled.
+
+To set a step to be acknowledged, call `setIsAcknowledged` provided from the `useWizardStepContext` hook.
+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": {