Add Wizard example

dnbexperience · Dec 5, 2024 · a0972f2 · a0972f2
1 parent ed3afe2
commit a0972f2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Status/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Status/Examples.tsx
@@ -1,6 +1,6 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
 import { createRequest } from '../SubmitIndicator/Examples'
+import { Field, Form, Wizard } from '@dnb/eufemia/src/extensions/forms'
 import { Button } from '@dnb/eufemia/src'
 
 const request = createRequest()
@@ -72,3 +72,49 @@ export const SuccessMessage = () => {
     </ComponentBox>
   )
 }
+
+export const WithAWizard = () => {
+  const request = createRequest()
+  return (
+    <ComponentBox scope={{ request }}>
+      {() => {
+        // myFormId can be anything, as long as it's a unique instance
+        const myFormId = () => null
+
+        return (
+          <Form.Handler
+            id={myFormId}
+            onSubmit={async () => {
+              await request(1000)
+              Form.Status.setStatus(myFormId, 'success')
+            }}
+          >
+            <Form.Status>
+              <Wizard.Container
+                onStepChange={async () => {
+                  await request(1000)
+                }}
+              >
+                <Wizard.Step title="Step 1">
+                  <Form.Card>
+                    <Field.String
+                      path="/someInfo"
+                      label="Some information"
+                    />
+                  </Form.Card>
+                  <Wizard.NextButton />
+                </Wizard.Step>
+                <Wizard.Step title="Step 2">
+                  <Form.Card>
+                    <Field.String path="/more" label="More information" />
+                  </Form.Card>
+                  <Form.SubmitButton variant="send" />
+                </Wizard.Step>
+              </Wizard.Container>
+            </Form.Status>
+          </Form.Handler>
+        )
+      }}
+    </ComponentBox>
+  )
+}
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Status/demos.mdx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Status/demos.mdx
@@ -14,3 +14,7 @@ import * as Examples from './Examples'
 ### Success message
 
 <Examples.SuccessMessage />
+
+### With a Wizard
+
+<Examples.WithAWizard />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Status/stories/Status.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Status/stories/Status.stories.tsx
@@ -40,17 +40,22 @@ export function BothStatuses() {
   )
 }
 
-export function InWizard() {
+export function WithAWizard() {
   return (
     <Form.Handler
       id="test"
-      onSubmit={(data) => {
-        console.log('data', data)
+      onSubmit={async (data) => {
+        await new Promise((r) => setTimeout(r, 1000))
         Form.Status.setStatus('test', 'success')
+        console.log('data', data)
       }}
     >
       <Form.Status>
-        <Wizard.Container>
+        <Wizard.Container
+          onStepChange={async () => {
+            await new Promise((r) => setTimeout(r, 1000))
+          }}
+        >
           <Wizard.Step title="Step 1">
             <Field.String path="/someInfo" label="Some information" />
             <Wizard.NextButton />