feat(forms): add required prop to Wizard.Step

dnbexperience · May 14, 2024 · 291430d · 291430d
1 parent d1ba274
commit 291430d
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx b/...es/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx
@@ -260,7 +260,7 @@ The `required` property is a boolean that indicates whether the field is require
 <Field.PhoneNumber required />
 ```
 
-**NB:** You can also use the `required` property on the [Form.Handler](/uilib/extensions/forms/Form/Handler/) component or nested in the [Form.FieldProps](/uilib/extensions/forms/Form/FieldProps/) component.
+**NB:** You can also use the `required` property on the [Form.Handler](/uilib/extensions/forms/Form/Handler/) component, [Wizard.Step](/uilib/extensions/forms/Wizard/Step/) component or nested in the [Form.FieldProps](/uilib/extensions/forms/Form/FieldProps/) component.
 
 #### pattern
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/HandlerDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/HandlerDocs.ts
@@ -11,6 +11,11 @@ export const HandlerProperties: PropertiesTableProps = {
     type: 'boolean',
     status: 'optional',
   },
+  required: {
+    doc: 'Will make all nested form fields required.',
+    type: 'boolean',
+    status: 'optional',
+  },
   autoComplete: {
     doc: 'Will set `autoComplete="on"` on all nested [Field.String](/uilib/extensions/forms/base-fields/String/)-fields.',
     type: 'boolean',

diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/Step/Step.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/Step/Step.tsx
@@ -5,6 +5,7 @@ import { Props as FlexContainerProps } from '../../../../components/flex/Contain
 import WizardContext from '../Context/WizardContext'
 import Flex from '../../../../components/flex/Flex'
 import { convertJsxToString } from '../../../../shared/component-helper'
+import FieldProps from '../../Form/FieldProps'
 
 // SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
 const useLayoutEffect =
@@ -22,10 +23,16 @@ export type Props = ComponentProps &
      * Used internally by the WizardContainer.
      */
     index?: number
+
+    /**
+     * Will make all the fields inside the step to be required.
+     */
+    required?: boolean
   }
 
 function Step(props: Props) {
-  const { className, title, index, children, ...restProps } = props
+  const { className, title, index, required, children, ...restProps } =
+    props
   const { activeIndex, stepElementRef } = useContext(WizardContext) || {}
 
   const ariaLabel = useMemo(() => {
@@ -49,6 +56,9 @@ function Step(props: Props) {
     return null
   }
 
+  const fieldProps =
+    typeof required === 'boolean' ? { required } : undefined
+
   return (
     <Flex.Stack
       className={classnames('dnb-forms-step', className)}
@@ -58,7 +68,11 @@ function Step(props: Props) {
       tabIndex={-1}
       {...restProps}
     >
-      {children}
+      {fieldProps ? (
+        <FieldProps {...fieldProps}>{children}</FieldProps>
+      ) : (
+        children
+      )}
     </Flex.Stack>
   )
 }

diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/Step/StepDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Wizard/Step/StepDocs.ts
@@ -6,6 +6,11 @@ export const StepProperties: PropertiesTableProps = {
     type: 'React.Node',
     status: 'optional',
   },
+  required: {
+    doc: 'Will make all nested form fields required.',
+    type: 'boolean',
+    status: 'optional',
+  },
   children: {
     doc: 'Contents.',
     type: 'React.Node',

diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/Step/__tests__/Step.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/Step/__tests__/Step.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { render } from '@testing-library/react'
-import { Wizard } from '../../..'
+import { fireEvent, render } from '@testing-library/react'
+import { Field, Form, Wizard } from '../../..'
 import WizardContext from '../../Context'
 
 describe('Step', () => {
@@ -94,4 +94,24 @@ describe('Step', () => {
     const stepElement = document.querySelector('.dnb-forms-step')
     expect(document.activeElement).not.toBe(stepElement)
   })
+
+  it('should make all nested fields required, when the step is set to be required', () => {
+    render(
+      <Form.Handler>
+        <WizardContext.Provider value={{ activeIndex: 0 }}>
+          <Wizard.Step required index={0}>
+            <Field.String />
+          </Wizard.Step>
+        </WizardContext.Provider>
+      </Form.Handler>
+    )
+
+    const form = document.querySelector('form')
+    fireEvent.submit(form)
+
+    expect(document.querySelector('input')).toHaveAttribute(
+      'aria-required',
+      'true'
+    )
+  })
 })