feat(forms): add activeWhen prop to Wizard.Step (#3705)

Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com>
dnbexperience · Jun 14, 2024 · edd6214 · edd6214
1 parent 7849cba
commit edd6214
Show file tree

Hide file tree

Showing 15 changed files with 719 additions and 115 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/Examples.tsx
@@ -1,6 +1,67 @@
 import { Card, P } from '@dnb/eufemia/src'
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Form, Value, Wizard } from '@dnb/eufemia/src/extensions/forms'
+import {
+  Field,
+  Form,
+  Value,
+  Wizard,
+} from '@dnb/eufemia/src/extensions/forms'
+
+export const DynamicSteps = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler defaultData={{ activeSteps: 'group-1' }}>
+        <Wizard.Container id="my-wizard">
+          <Wizard.Step
+            title="Step 1"
+            activeWhen={{ path: '/activeSteps', hasValue: 'group-1' }}
+          >
+            <Form.MainHeading>Step 1</Form.MainHeading>
+            <Wizard.Buttons />
+          </Wizard.Step>
+
+          <Wizard.Step
+            title="Step 2"
+            activeWhen={{ path: '/activeSteps', hasValue: 'group-1' }}
+          >
+            <Form.MainHeading>Step 2</Form.MainHeading>
+            <Wizard.Buttons />
+          </Wizard.Step>
+
+          <Wizard.Step
+            title="Step 3"
+            activeWhen={{
+              path: '/activeSteps',
+              withValue: (value: string) =>
+                ['group-1', 'group-2'].includes(value),
+            }}
+          >
+            <Form.MainHeading>Step 3</Form.MainHeading>
+            <Wizard.Buttons />
+          </Wizard.Step>
+
+          <Wizard.Step
+            title="Step 4"
+            activeWhen={{ path: '/activeSteps', hasValue: 'group-2' }}
+          >
+            <Form.MainHeading>Step 4</Form.MainHeading>
+            <Wizard.Buttons />
+          </Wizard.Step>
+        </Wizard.Container>
+
+        <Field.Selection
+          path="/activeSteps"
+          variant="button"
+          optionsLayout="horizontal"
+          top
+        >
+          <Field.Option value="group-1" title="Group 1" />
+          <Field.Option value="group-2" title="Group 2" />
+        </Field.Selection>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
 
 export const EditButton = () => {
   return (

diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/demos.mdx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/Step/demos.mdx
@@ -2,6 +2,12 @@
 showTabs: true
 ---
 
+import * as Examples from './Examples'
+
 ## Demos
 
-See [WizardContainer demo section](/uilib/extensions/forms/Wizard/Container/demos) for examples.
+See [WizardContainer demo section](/uilib/extensions/forms/Wizard/Container/demos) for more examples.
+
+### Dynamic steps
+
+<Examples.DynamicSteps />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Wizard/info.mdx
@@ -24,6 +24,10 @@ render(
 
 <Examples.IntroExample />
 
+## Dynamic steps support
+
+You can use the `Wizard.Step` component to create dynamic steps. The `active` and `activeWhen` props can be used to enable or disable a step based on the current data. Here is a [demo of a dynamic step](/uilib/extensions/forms/Wizard/Step/).
+
 ## Summary step
 
 A Wizard needs a summary step at the end. You can use the `Wizard.Step` component for that, including the [Value.SummaryList](/uilib/extensions/forms/Value/SummaryList/) component:

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx
@@ -13,6 +13,14 @@ breadcrumb:
 
 Change log for the Eufemia Forms extension.
 
+## v10.36
+
+- Added support for dynamic Wizard steps with the `active` and `activeWhen` prop ([Wizard.Step](/uilib/extensions/forms/Wizard/Step/)).
+
+## v10.35
+
+- Added view and edit containers to [Form.Section](/uilib/extensions/forms/Form/Section/).
+
 ## v10.34
 
 - Added a first block (ChildrenWithAge) to the [list of blocks](/uilib/extensions/forms/blocks/).

diff --git a/...a/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx b/...a/src/extensions/forms/Form/Section/EditContainer/__tests__/EditAndViewContainer.test.tsx
@@ -11,11 +11,11 @@ describe('EditContainer and ViewContainer', () => {
     render(
       <Form.Section>
         <Form.Section.ViewContainer>
-          <Form.Section.EditContainer>
-            Edit Content
-          </Form.Section.EditContainer>
           View Content
         </Form.Section.ViewContainer>
+        <Form.Section.EditContainer>
+          Edit Content
+        </Form.Section.EditContainer>
       </Form.Section>
     )
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/Visibility.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/Visibility.tsx
@@ -12,7 +12,7 @@ import type { UseFieldProps } from '../../types'
 import type { DataAttributes } from '../../hooks/useFieldProps'
 import { FilterData } from '../../DataContext'
 
-type VisibleWhen =
+export type VisibleWhen =
   | {
       path: string
       hasValue: unknown

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/__tests__/Visibility.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/__tests__/Visibility.test.tsx
@@ -257,7 +257,7 @@ describe('Visibility', () => {
       expect(screen.getByText('Child')).toBeInTheDocument()
     })
 
-    it('should not render children when withValue not matches', () => {
+    it('should not render children when withValue does not match', () => {
       render(
         <Provider data={{ myPath: 'foo' }}>
           <Visibility