[LG-5563] feat(Wizard) Adds Wizard

.changeset/descendants-exports.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/descendants': minor
+---
+
+Exports `Position` enum. Removes type annotation from `Direction` export

.changeset/lib-find-children.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': minor
+---
+
+Adds `findChildren` utility to `lib`. Also adds `unwrapRootFragment` and `isChildWithProperty` helpers

packages/descendants/src/Highlight/index.ts

@@ -1,10 +1,11 @@
-export type {
+export {
   Direction,
-  HighlightChangeHandler,
-  HighlightContextProps,
-  HighlightHookReturnType,
-  Index,
-  UseHighlightOptions,
+  type HighlightChangeHandler,
+  type HighlightContextProps,
+  type HighlightHookReturnType,
+  type Index,
+  Position,
+  type UseHighlightOptions,
 } from './highlight.types';
 export {
   createHighlightContext,

packages/descendants/src/index.ts

@@ -15,13 +15,14 @@ export {
 // Highlight
 export {
   createHighlightContext,
-  type Direction,
+  Direction,
   type HighlightChangeHandler,
   type HighlightContextProps,
   type HighlightContextType,
   type HighlightHookReturnType,
   HighlightProvider,
   type Index,
+  Position,
   useHighlight,
   useHighlightContext,
   type UseHighlightOptions,

packages/wizard/README.md

@@ -1,7 +1,7 @@
-
 # Wizard
 
 ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/wizard.svg)
+
 #### [View on MongoDB.design](https://www.mongodb.design/component/wizard/live-example/)
 
 ## Installation
@@ -23,4 +23,3 @@ yarn add @leafygreen-ui/wizard
 ```shell
 npm install @leafygreen-ui/wizard
 ```
-

packages/wizard/package.json

@@ -28,10 +28,17 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/button": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/form-footer": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/typography": "workspace:^",
     "@lg-tools/test-harnesses": "workspace:^"
   },
+  "devDependencies" : {
+    "@leafygreen-ui/icon": "workspace:^",
+    "@faker-js/faker": "^8.0.0"
+  },
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/wizard",
   "repository": {
     "type": "git",

packages/wizard/src/Wizard.stories.tsx

@@ -1,17 +1,111 @@
-
+/* eslint-disable no-console */
 import React from 'react';
-import { StoryFn } from '@storybook/react';
+import { faker } from '@faker-js/faker';
+import { StoryMetaType } from '@lg-tools/storybook-utils';
+import { StoryObj } from '@storybook/react';
+
+import Card from '@leafygreen-ui/card';
 
 import { Wizard } from '.';
 
+faker.seed(0);
+
 export default {
-  title: 'Components/Wizard',
+  title: 'Composition/Data Display/Wizard',
   component: Wizard,
-}
-
-const Template: StoryFn<typeof Wizard> = (props) => (
-  <Wizard {...props} />
-);
+  parameters: {
+    default: 'LiveExample',
+  },
+  decorators: [
+    Fn => (
+      <div style={{ margin: -100, height: '100vh', width: '100vw' }}>
+        <Fn />
+      </div>
+    ),
+  ],
+} satisfies StoryMetaType<typeof Wizard>;
 
-export const Basic = Template.bind({});
+export const LiveExample: StoryObj<typeof Wizard> = {
+  parameters: {
+    controls: {
+      exclude: ['children', 'activeStep', 'onStepChange'],
+    },
+  },
+  render: props => (
+    <Wizard {...props}>
+      {['Apple', 'Banana', 'Carrot'].map((title, i) => (
+        <Wizard.Step
+          key={i}
+          title={`Step ${i + 1}: ${title}`}
+          description={faker.lorem.paragraph()}
+        >
+          <Card>{faker.lorem.paragraph(10)}</Card>
+        </Wizard.Step>
+      ))}
+      <Wizard.Footer
+        backButtonProps={{
+          onClick: () => console.log('[Storybook] Clicked Back'),
+        }}
+        cancelButtonProps={{
+          children: 'Cancel',
+          onClick: () => console.log('[Storybook] Clicked Cancel'),
+        }}
+        primaryButtonProps={{
+          children: 'Primary',
+          onClick: () => console.log('[Storybook] Clicked Primary'),
+        }}
+      />
+    </Wizard>
+  ),
+};
 
+export const Controlled: StoryObj<typeof Wizard> = {
+  parameters: {
+    controls: {
+      exclude: ['children', 'onStepChange'],
+    },
+  },
+  args: {
+    activeStep: 0,
+  },
+  render: ({ activeStep, ...props }) => {
+    return (
+      <Wizard
+        activeStep={activeStep}
+        onStepChange={x =>
+          console.log(`[Storybook] activeStep should change to ${x}`)
+        }
+        {...props}
+      >
+        {['Apple', 'Banana', 'Carrot'].map((title, i) => (
+          <Wizard.Step
+            key={i}
+            title={`Step ${i + 1}: ${title}`}
+            description={faker.lorem.paragraph()}
+          >
+            <Card>
+              <p>
+                This Wizard is controlled. Clicking the buttons will not do
+                anything. Use the Storybook controls to see the next step
+              </p>
+              {faker.lorem.paragraph(10)}
+            </Card>
+          </Wizard.Step>
+        ))}
+        <Wizard.Footer
+          backButtonProps={{
+            onClick: () => console.log('[Storybook] Clicked Back'),
+          }}
+          cancelButtonProps={{
+            children: 'Cancel',
+            onClick: () => console.log('[Storybook] Clicked Cancel'),
+          }}
+          primaryButtonProps={{
+            children: 'Primary',
+            onClick: () => console.log('[Storybook] Clicked Primary'),
+          }}
+        />
+      </Wizard>
+    );
+  },
+};