feat(Forms): add Form.Handler component (#2644)

- [x] Add `Form.Handler` that combines `Form.Element` and `DataContext.Provider`. - [x] Add `Form.Handler` for a vanilla HTML form element. - [x] Align docs to use `Form.Handler` over `DataContext.Provider`. - [x] Move `advanced-blocks` to `extended-features`. --------- Co-authored-by: Anders <[email protected]>
dnbexperience · Sep 13, 2023 · 82873c7 · 82873c7
1 parent 56a1867
commit 82873c7
Show file tree

Hide file tree

Showing 109 changed files with 1,139 additions and 340 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx
@@ -38,8 +38,8 @@ The goal of the Forms extension is to make it easy to build forms and other data
 ### Additional features
 
 - [Feature fields](/uilib/extensions/forms/feature-fields) such as Email and PhoneNumber.
+- [Extended features](/uilib/extensions/forms/extended-features) such as the main [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler) and [StepsLayout](/uilib/extensions/forms/extended-features/StepsLayout) for creating stepped forms.
 - [Layout](/uilib/extensions/forms/Layout) to apply default styles for application forms.
-- [StepsLayout](/uilib/extensions/forms/advanced-blocks/StepsLayout) to create stepped forms.
 
 ### Value components
 
@@ -75,9 +75,9 @@ Or save time and code when handling your forms:
 
 ```jsx
 import '@dnb/eufemia/extensions/forms/style'
-import { DataContext, Field } from '@dnb/eufemia/extensions/forms'
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
-  <DataContext.Provider
+  <Form.Handler
     data={existingData}
     onChange={...}
     onSubmit={...}
@@ -100,21 +100,21 @@ render(
         <Field.Option value="other" title="Annet" />
       </Field.Selection>
     </Layout.Card>
-  </DataContext.Provider>,
+  </Form.Handler>,
 )
 ```
 
 But the real strong parts about Eufemia Forms is the composability when you create your own components:
 
 ```jsx
 import '@dnb/eufemia/extensions/forms/style'
-import { DataContext, Field } from '@dnb/eufemia/extensions/forms'
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
-  <DataContext.Provider data={existingData} onSubmit={...}>
+  <Form.Handler data={existingData} onSubmit={...}>
     <Layout.Card spacing="medium">
       <MyCustomComponent path="/companyName" required />
     </Layout.Card>
-  </DataContext.Provider>,
+  </Form.Handler>,
 )
 ```
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx
@@ -3,21 +3,22 @@ import { useCallback } from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import { Input, Slider } from '@dnb/eufemia/src'
 import {
-  DataContext,
+  Form,
   Layout,
   StepsLayout,
   Field,
   Value,
   Visibility,
   FieldBlock,
   useDataValue,
+  DataContext,
 } from '@dnb/eufemia/src/extensions/forms'
 
 export const CreateBasicFieldComponent = () => {
   return (
     <ComponentBox
       scope={{
-        DataContext,
+        Form,
         Layout,
         Field,
         FieldBlock,
@@ -158,7 +159,7 @@ export const BaseFieldComponents = () => {
   return (
     <ComponentBox
       scope={{
-        DataContext,
+        Form,
         Layout,
         StepsLayout,
         Field,
@@ -191,7 +192,7 @@ export const FeatureFields = () => {
   return (
     <ComponentBox
       scope={{
-        DataContext,
+        Form,
         Layout,
         StepsLayout,
         Field,
@@ -214,7 +215,7 @@ export const LayoutComponents = () => {
   return (
     <ComponentBox
       scope={{
-        DataContext,
+        Form,
         Layout,
         StepsLayout,
         Field,
@@ -248,15 +249,15 @@ export const VisibilityBasedOnData = () => {
   return (
     <ComponentBox
       scope={{
-        DataContext,
+        Form,
         Layout,
         StepsLayout,
         Field,
         Value,
         Visibility,
       }}
     >
-      <DataContext.Provider
+      <Form.Handler
         data={{
           firstName: undefined,
           lastName: 'Smith',
@@ -297,24 +298,24 @@ export const VisibilityBasedOnData = () => {
             </Layout.Card>
           </Layout.Section>
         </Visibility>
-      </DataContext.Provider>
+      </Form.Handler>
     </ComponentBox>
   )
 }
 
-export const UsingDataContextProvider = () => {
+export const UsingFormHandler = () => {
   return (
     <ComponentBox
       scope={{
-        DataContext,
+        Form,
         Layout,
         StepsLayout,
         Field,
         Value,
         Visibility,
       }}
     >
-      <DataContext.Provider
+      <Form.Handler
         data={{
           firstName: 'John',
           lastName: 'Smith',
@@ -338,10 +339,10 @@ export const UsingDataContextProvider = () => {
           <Field.PhoneNumber path="/phone" />
 
           <Layout.ButtonRow>
-            <DataContext.SubmitButton />
+            <Form.SubmitButton />
           </Layout.ButtonRow>
         </Layout.Card>
-      </DataContext.Provider>
+      </Form.Handler>
     </ComponentBox>
   )
 }
@@ -350,15 +351,15 @@ export const Validation = () => {
   return (
     <ComponentBox
       scope={{
-        DataContext,
+        Form,
         Layout,
         StepsLayout,
         Field,
         Value,
         Visibility,
       }}
     >
-      <DataContext.Provider
+      <Form.Handler
         data={{
           firstName: undefined,
           lastName: 'Smith',
@@ -381,7 +382,7 @@ export const Validation = () => {
           <Field.Email path="/email" validateInitially />
           <Field.PhoneNumber path="/phone" validateInitially />
         </Layout.Card>
-      </DataContext.Provider>
+      </Form.Handler>
     </ComponentBox>
   )
 }
@@ -390,15 +391,15 @@ export const WithSteps = () => {
   return (
     <ComponentBox
       scope={{
-        DataContext,
+        Form,
         Layout,
         StepsLayout,
         Field,
         Value,
         Visibility,
       }}
     >
-      <DataContext.Provider
+      <Form.Handler
         data={{
           firstName: undefined,
           lastName: 'Smith',
@@ -462,11 +463,11 @@ export const WithSteps = () => {
 
             <Layout.ButtonRow>
               <StepsLayout.PreviousButton />
-              <DataContext.SubmitButton />
+              <Form.SubmitButton />
             </Layout.ButtonRow>
           </StepsLayout.Step>
         </StepsLayout>
-      </DataContext.Provider>
+      </Form.Handler>
     </ComponentBox>
   )
 }
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/extensions/forms/advanced-blocks.mdx b/...es/dnb-design-system-portal/src/docs/uilib/extensions/forms/advanced-blocks.mdx
diff --git a/...tal/src/docs/uilib/extensions/forms/advanced-blocks/Iterate/ArrayPushButton.mdx b/...tal/src/docs/uilib/extensions/forms/advanced-blocks/Iterate/ArrayPushButton.mdx
diff --git a/...ocs/uilib/extensions/forms/advanced-blocks/Iterate/ArrayRemoveElementButton.mdx b/...ocs/uilib/extensions/forms/advanced-blocks/Iterate/ArrayRemoveElementButton.mdx
diff --git a/...cs/uilib/extensions/forms/advanced-blocks/StepsLayout/NextButton/properties.mdx b/...cs/uilib/extensions/forms/advanced-blocks/StepsLayout/NextButton/properties.mdx
diff --git a/...ilib/extensions/forms/advanced-blocks/StepsLayout/PreviousButton/properties.mdx b/...ilib/extensions/forms/advanced-blocks/StepsLayout/PreviousButton/properties.mdx
diff --git a/...rtal/src/docs/uilib/extensions/forms/advanced-blocks/StepsLayout/Step/demos.mdx b/...rtal/src/docs/uilib/extensions/forms/advanced-blocks/StepsLayout/Step/demos.mdx
diff --git a/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component.mdx b/...s/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'Create your own component'
-order: 3
+order: 4
 breadcrumb:
   - text: Forms
     href: /uilib/extensions/forms/

diff --git a/...-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext.mdx b/...-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext.mdx
@@ -27,6 +27,8 @@ Example of using the `DataContext.Provider`:
 </DataContext.Provider>
 ```
 
+Please use [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler) for application forms.
+
 ## Components
 
 <ListDataContextComponents />