From d90dd9a8889953df5d9d03b16198a03c848009f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Fri, 19 Jan 2024 10:19:07 +0100
Subject: [PATCH] chore(forms): add missing import statements in docs (#3246)

---
 .../forms/base-fields/ArraySelection/info.mdx | 10 ++++++++++
 .../forms/base-fields/Boolean/info.mdx        |  5 +++++
 .../forms/base-fields/Number/info.mdx         |  5 +++++
 .../forms/base-fields/Option/info.mdx         | 10 ++++++++++
 .../forms/base-fields/Selection/Examples.tsx  |  2 +-
 .../forms/base-fields/Selection/info.mdx      | 10 ++++++++++
 .../forms/base-fields/String/info.mdx         |  5 +++++
 .../forms/base-fields/Toggle/info.mdx         |  5 +++++
 .../extended-features/DataContext/At/info.mdx | 20 +++++++++++++++++++
 .../DataContext/Provider/info.mdx             |  7 +++++++
 .../extended-features/Form/ButtonRow/info.mdx | 12 +++++++++++
 .../Form/MainHeading/info.mdx                 | 16 +++++++++++++++
 .../Form/SubHeading/info.mdx                  | 16 +++++++++++++++
 .../Form/SubmitButton/info.mdx                | 12 ++++++++++-
 .../Form/Visibility/info.mdx                  |  9 ++++++---
 .../forms/extended-features/Form/info.mdx     | 11 ++++------
 .../extended-features/Iterate/Array/info.mdx  | 12 +++++++++++
 .../Iterate/ArrayPushButton/info.mdx          | 17 ++++++++++++++++
 .../Iterate/ArrayRemoveElementButton/info.mdx | 17 ++++++++++++++++
 .../forms/extended-features/Iterate/info.mdx  | 12 +++++++++++
 .../StepsLayout/Buttons/info.mdx              |  9 +++++++++
 .../StepsLayout/NextButton/info.mdx           |  9 +++++++++
 .../StepsLayout/PreviousButton/info.mdx       |  9 +++++++++
 .../StepsLayout/Step/info.mdx                 | 19 ++++++++++++++++++
 .../StepsLayout/StepsLayout/info.mdx          | 19 ++++++++++++++++++
 25 files changed, 266 insertions(+), 12 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx
index 986327ac756..8af7da514df 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/info.mdx
index 6c5aee21211..b587b6189c0 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Boolean/info.mdx
+++ b/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" />)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/info.mdx
index 349a6806326..dae79333b9c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/info.mdx
+++ b/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.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Option/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Option/info.mdx
index f1c5ec82dcd..c0f5c0b6dd6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Option/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/Examples.tsx
index 917f8902dcf..c710fd70a90 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/Examples.tsx
+++ b/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!" />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx
index fd3db4724ed..6a2eda84a20 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/info.mdx
index 577997e0913..6a364bf7015 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/info.mdx
+++ b/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).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/info.mdx
index cddccdb9a05..eecbc772d39 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/info.mdx
+++ b/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" />)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/DataContext/At/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/DataContext/At/info.mdx
index c465c74038b..96583d2e33d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/DataContext/At/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/DataContext/Provider/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/DataContext/Provider/info.mdx
index 8c79cd94db1..2f36b9b52a5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/DataContext/Provider/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/ButtonRow/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/ButtonRow/info.mdx
index 83282b20513..9f0d701a95a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/ButtonRow/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/info.mdx
index 1de38d2462f..0c868f80db5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/info.mdx
index 2f8a92ed621..36344e1df6e 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubmitButton/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubmitButton/info.mdx
index bee8c24894f..6e2f9dd04bf 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubmitButton/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Visibility/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Visibility/info.mdx
index ce7b73899f9..b9d870c9975 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Visibility/info.mdx
+++ b/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>
+  </>,
 )
 ```
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx
index 6b560084c81..ff06f7272f5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx
+++ b/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>,
 )
 ```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/info.mdx
index 461bbd3a11d..c524c2c48f8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/Array/info.mdx
+++ b/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:
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayPushButton/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayPushButton/info.mdx
index 5eb7d46ed10..ba5a264608d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayPushButton/info.mdx
+++ b/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={{}}
+    />
+  </>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/info.mdx
index c7cdcfe2b25..479927c1dcf 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/ArrayRemoveElementButton/info.mdx
+++ b/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={{}}
+    />
+  </>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/info.mdx
index c9bc72da703..89130788080 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Iterate/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Buttons/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Buttons/info.mdx
index 2d9d8b9451d..68e18817143 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Buttons/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/NextButton/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/NextButton/info.mdx
index b027cc68b4d..71b557e817f 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/NextButton/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/PreviousButton/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/PreviousButton/info.mdx
index 4b206079400..1ff32a9ecc1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/PreviousButton/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/info.mdx
index f1e5b9f3165..51fb75c422c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/Step/info.mdx
+++ b/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>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/info.mdx
index f07beb878eb..4f9cfb67f8c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/info.mdx
+++ b/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>,
+)
+```