chore(forms): add missing import statements in docs

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx

@@ -5,3 +5,13 @@ showTabs: true
 ## Description
 
 `Field.ArraySelection` is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <Field.ArraySelection label="Label text">
+    <Field.Option value="foo" title="Fooo!" />
+    <Field.Option value="bar" title="Baar!" />
+  </Field.ArraySelection>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/info.mdx

@@ -7,3 +7,8 @@ showTabs: true
 `Field.Boolean` is the base component for receiving user input where the target data is of type `boolean`.
 
 There is a corresponding [Value.Boolean](/uilib/extensions/forms/extended-features/Value/Boolean) component.
+
+```tsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(<Field.Boolean path="/myState" />)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/info.mdx

@@ -8,6 +8,11 @@ showTabs: true
 
 There is a corresponding [Value.Number](/uilib/extensions/forms/extended-features/Value/Number) component.
 
+```tsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(<Field.Number path="/myNumber" />)
+```
+
 ## When to use and not to use
 
 `Field.Number` only allows the user to enter numbers (negative and positive) and decimal numbers.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Option/info.mdx

@@ -5,3 +5,13 @@ showTabs: true
 ## Description
 
 `Field.Option` is a part for building selection inputs with Field.Select.
+
+```tsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <Field.Selection>
+    <Field.Option value="foo" title="Foo!" />
+    <Field.Option value="bar" title="Baar!" />
+  </Field.Selection>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/Examples.tsx

@@ -21,7 +21,7 @@ export const DropdownEmpty = () => (
 export const DropdownPlaceholder = () => (
   <ComponentBox>
     <Field.Selection
-      placeholder="Select something...."
+      placeholder="Select something..."
       onChange={(value) => console.log('onChange', value)}
     >
       <Field.Option value="foo" title="Foo!" />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx

@@ -7,3 +7,13 @@ showTabs: true
 `Field.Selection` is a component for selecting between options using a dropdown or similar user experiences.
 
 [Field.Option](/uilib/extensions/forms/base-fields/Option/) is a related component.
+
+```tsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <Field.Selection placeholder="Select something...">
+    <Field.Option value="foo" title="Foo!" />
+    <Field.Option value="bar" title="Baar!" />
+  </Field.Selection>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/info.mdx

@@ -8,6 +8,11 @@ showTabs: true
 
 There is a corresponding [Value.String](/uilib/extensions/forms/extended-features/Value/String) component.
 
+```tsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(<Field.String path="/myState" />)
+```
+
 ## Browser autofill
 
 The string component does support HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/info.mdx

@@ -5,3 +5,8 @@ showTabs: true
 ## Description
 
 `Field.Toggle` is a base component for allowing the user to toggle between two different values in the target data point.
+
+```tsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(<Field.Toggle path="/myState" />)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/DataContext/At/info.mdx

@@ -5,3 +5,23 @@ showTabs: true
 ## Description
 
 `DataContext.At` makes it possible to dig into a data set to set a pointer as the root for sub components, as well as iterate array-data.
+
+```tsx
+import { DataContext, Form, Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <Form.Handler
+    data={{
+      foo: {
+        one: 1,
+        two: 2,
+      },
+      bar: 'Bar',
+    }}
+  >
+  <DataContext.At path="/foo">
+    <Field.Number path="/one" label="One" />
+    <Field.Number path="/two" label="Two" />
+  </DataContext.At>
+</Form.Handler><DataContext.At data={existingData}>...</DataContext.At>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/DataContext/Provider/info.mdx

@@ -7,3 +7,10 @@ showTabs: true
 `DataContext.Provider` is the context provider that has to wrap the features if components of Field and Value is to be used with a common source instead of distributing values and events individually.
 
 For a more complete feature set tailored to building forms, please use [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler). It uses DataContext internally.
+
+```tsx
+import { DataContext } from '@dnb/eufemia/extensions/forms'
+render(
+  <DataContext.Provider data={existingData}>...</DataContext.Provider>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/ButtonRow/info.mdx

@@ -5,3 +5,15 @@ showTabs: true
 ## Description
 
 `Form.ButtonRow` is a wrapper for horizontally separated buttons.
+
+```jsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+render(
+  <Form.Handler onSubmit={submitHandler}>
+    ...
+    <Form.ButtonRow>
+      <Form.SubmitButton />
+    </Form.ButtonRow>
+  </Form.Handler>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/info.mdx

@@ -7,3 +7,19 @@ showTabs: true
 `Form.MainHeading` is a standardized main heading for sections, ensuring default layout, spacing etc.
 
 The used font-size is set to `large`.
+
+```jsx
+import { Flex, Card } from '@dnb/eufemia'
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <Form.Handler onSubmit={submitHandler}>
+    <Flex.Stack>
+      <Form.MainHeading>Header</Form.MainHeading>
+      <Card>
+        <Form.SubHeading>Header</Form.SubHeading>
+        <Field.Email path="/dataPath" />
+      </Card>
+    </Flex.Stack>
+  </Form.Handler>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/info.mdx

@@ -7,3 +7,19 @@ showTabs: true
 `Form.SubHeading` is a standardized sub heading for sections, ensuring default layout, spacing etc.
 
 The used font-size is set to `large`.
+
+```jsx
+import { Flex, Card } from '@dnb/eufemia'
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <Form.Handler onSubmit={submitHandler}>
+    <Flex.Stack>
+      <Form.MainHeading>Header</Form.MainHeading>
+      <Card>
+        <Form.SubHeading>Header</Form.SubHeading>
+        <Field.Email path="/dataPath" />
+      </Card>
+    </Flex.Stack>
+  </Form.Handler>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubmitButton/info.mdx

@@ -6,4 +6,14 @@ showTabs: true
 
 `Form.SubmitButton` connects to the [DataContext.Provider](/uilib/extensions/forms/extended-features/DataContext/Provider/) to submit the active state of the internal DataContext, triggering `onSubmit`.
 
-The default button type is `type="submit"`, ready to be used with the [Form.Element](/uilib/extensions/forms/extended-features/Form/Element)
+The default button type is `type="submit"`, ready to be used with the [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler)
+
+```jsx
+render(
+  <Form.Handler>
+    <Form.ButtonRow>
+      <Form.SubmitButton />
+    </Form.ButtonRow>
+  </Form.Handler>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Visibility/info.mdx

@@ -11,9 +11,12 @@ The `Visibility` component makes it possible to show or hide components on the s
 ```tsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 render(
-  <Form.Visibility pathTruthy="/dataPath">
-    show me when the data path value is truthy
-  </Form.Visibility>,
+  <>
+    <Field.Boolean path="/myState" />
+    <Form.Visibility pathTrue="/myState">
+      show me when the state value is true
+    </Form.Visibility>
+  </>,
 )
 ```
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx

@@ -7,16 +7,13 @@ showTabs: true
 `Form` provides the main forms-helpers including data provider and event handling.
 
 ```jsx
-import { Card } from '@dnb/eufemia'
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
   <Form.Handler data={existingData} onSubmit={submitHandler}>
-    <Card>
-      <Field.Email path="/dataPath" />
-      <Form.ButtonRow>
-        <Form.SubmitButton />
-      </Form.ButtonRow>
-    </Card>
+    <Field.Email path="/email" />
+    <Form.ButtonRow>
+      <Form.SubmitButton />
+    </Form.ButtonRow>
   </Form.Handler>,
 )
 ```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/info.mdx

@@ -6,6 +6,18 @@ showTabs: true
 
 `Iterate.Array` works in many ways similar to field-components. It has a `value`-prop that can receive an array or you can give it a `path` if you want it to retrieve an array from a surrounding `DataContext`. All children components of `Iterate.Array` are rendered once per element the array-value consists of.
 
+```tsx
+import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <Iterate.Array
+    label="Array label"
+    value={['Iron Man', 'Captain America', 'The Hulk']}
+  >
+    <Field.String itemPath="/" />
+  </Iterate.Array>,
+)
+```
+
 ### Individual values and dynamic paths
 
 Since `Iterate.Array` renders its children once per element, the field components inside must receive values based on the different elements in the array. This can be done in two ways:

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayPushButton/info.mdx

@@ -5,3 +5,20 @@ showTabs: true
 ## Description
 
 `Iterate.ArrayPushButton` connects to the array of a surrounding `Iterate.Array` or an array from the source pointed at through `path` and adds a new element to the array when clicked.
+
+```tsx
+import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <>
+    <Iterate.Array path="/">
+      <Field.String itemPath="/name" />
+    </Iterate.Array>
+
+    <Iterate.ArrayPushButton
+      text="Add another element"
+      path="/"
+      pushValue={{}}
+    />
+  </>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/info.mdx

@@ -5,3 +5,20 @@ showTabs: true
 ## Description
 
 `Iterate.ArrayRemoveElementButton` connects to the array of a surrounding `Iterate.Array` and removes the element when clicked.
+
+```tsx
+import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <>
+    <Iterate.Array path="/">
+      <Field.String itemPath="/name" />
+    </Iterate.Array>
+
+    <Iterate.ArrayRemoveElementButton
+      text="Remove element"
+      path="/"
+      pushValue={{}}
+    />
+  </>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/info.mdx

@@ -5,3 +5,15 @@ showTabs: true
 ## Description
 
 Iterate is components and functionality for traversing values and parts of data sets such as arrays, which contain a varying number of elements where the number of components on the screen depends on how many elements the data consists of.
+
+```tsx
+import { Iterate, Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <Iterate.Array
+    label="Array label"
+    value={['Iron Man', 'Captain America', 'The Hulk']}
+  >
+    <Field.String itemPath="/" />
+  </Iterate.Array>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Buttons/info.mdx

@@ -5,3 +5,12 @@ showTabs: true
 ## Description
 
 `StepsLayout.Buttons` Is a composition for a row containing both PreviousButton and NextButton.
+
+```jsx
+import { StepsContext, StepsLayout } from '@dnb/eufemia/extensions/forms'
+render(
+  <StepsContext.Provider>
+    <StepsLayout.Buttons />
+  </StepsContext.Provider>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/NextButton/info.mdx

@@ -5,3 +5,12 @@ showTabs: true
 ## Description
 
 `StepsLayout.NextButton` connects to the `StepsContext` to move the user to the next step when clicked.
+
+```jsx
+import { StepsContext, StepsLayout } from '@dnb/eufemia/extensions/forms'
+render(
+  <StepsContext.Provider>
+    <StepsLayout.NextButton />
+  </StepsContext.Provider>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/PreviousButton/info.mdx

@@ -5,3 +5,12 @@ showTabs: true
 ## Description
 
 `StepsLayout.PreviousButton` connects to the `StepsContext` to move the user to the previous step when clicked.
+
+```jsx
+import { StepsContext, StepsLayout } from '@dnb/eufemia/extensions/forms'
+render(
+  <StepsContext.Provider>
+    <StepsLayout.PreviousButton />
+  </StepsContext.Provider>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/info.mdx

@@ -5,3 +5,22 @@ showTabs: true
 ## Description
 
 `StepsLayout.Step` show child components when the surrounding StepsLayout has been navigated to this step. StepsLayout keeps track of what is the active step, and navigating between steps is done through callbacks on the StepsContext, i.e. using navigation buttons.
+
+```jsx
+import {
+  StepsContext,
+  StepsLayout,
+  Form,
+} from '@dnb/eufemia/extensions/forms'
+render(
+  <StepsContext.Provider>
+    <StepsLayout.Step title="Step 1">
+      <Form.MainHeading>Heading</Form.MainHeading>
+      <Card>
+        <P>Contents</P>
+      </Card>
+      <StepsLayout.NextButton />
+    </StepsLayout.Step>
+  </StepsContext.Provider>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/info.mdx

@@ -5,3 +5,22 @@ showTabs: true
 ## Description
 
 `StepsLayout` is a wrapper component for showing forms with a StepIndicator for navigation between several steps.
+
+```jsx
+import {
+  StepsLayout,
+  StepsContext,
+  Form,
+} from '@dnb/eufemia/extensions/forms'
+render(
+  <StepsContext.Provider>
+    <StepsLayout.Step>
+      <Form.MainHeading>Heading</Form.MainHeading>
+      <Card>
+        <P>Contents</P>
+      </Card>
+      <StepsLayout.NextButton />
+    </StepsLayout.Step>
+  </StepsContext.Provider>,
+)
+```