@neo4j-ndl/react 4.16.7 → 4.16.9

package/skills/ndl-react/components/wizard.md

@@ -0,0 +1,152 @@
+# Wizard
+
+Import: `import { Wizard } from '@neo4j-ndl/react'`
+
+## Props
+
+### Wizard
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `activeStepIndex` | `number` | ✅ |  | Zero-based index of the active step |
+| `alignment` | `'middle' \| 'top'` |  | `middle` | Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined |
+| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
+| `orientation` | `'horizontal' \| 'vertical'` |  | `horizontal` | Layout orientation of the wizard |
+| `ref` | `any` |  |  | A ref to apply to the root element. |
+| `size` | `'large' \| 'small'` |  | `large` | Visual size of the wizard |
+| `steps` | `Step[]` | ✅ |  | Steps to display in the wizard |
+
+Where type `Step` is defined as: `{ content: string | React.JSX.Element; status?: 'default' | 'error' }`. To highlight a step as error, set the `status` to `error`.
+
+## Examples
+
+### Error State
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Wizard } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Wizard
+      orientation="horizontal"
+      activeStepIndex={1}
+      steps={[
+        { content: 'Step 1' },
+        { content: 'Step 2', status: 'error' },
+        { content: 'Step 3' },
+        { content: 'Step 4' },
+      ]}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Horizontal
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Wizard } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Wizard
+      orientation="horizontal"
+      alignment="middle"
+      activeStepIndex={1}
+      steps={[
+        { content: 'Step 1' },
+        { content: 'Step 2' },
+        { content: 'Step 3' },
+        { content: 'Step 4' },
+      ]}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Horizontal Small
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Wizard } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Wizard
+      orientation="horizontal"
+      size="small"
+      alignment="middle"
+      activeStepIndex={1}
+      steps={[
+        { content: 'Step 1' },
+        { content: 'Step 2' },
+        { content: 'Step 3' },
+        { content: 'Step 4' },
+      ]}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Vertical
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Wizard } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Wizard
+      orientation="vertical"
+      alignment="middle"
+      activeStepIndex={1}
+      steps={[
+        { content: 'Step 1' },
+        { content: 'Step 2' },
+        { content: 'Step 3' },
+        { content: 'Step 4' },
+      ]}
+    />
+  );
+};
+
+export default Component;
+```
+
+### Vertical Small
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { Wizard } from '@neo4j-ndl/react';
+
+const Component = () => {
+  return (
+    <Wizard
+      orientation="vertical"
+      size="small"
+      alignment="middle"
+      activeStepIndex={1}
+      steps={[
+        { content: 'Step 1' },
+        { content: 'Step 2' },
+        { content: 'Step 3' },
+        { content: 'Step 4' },
+      ]}
+    />
+  );
+};
+
+export default Component;
+```