Add autofill demo to Form.Handler

dnbexperience · Oct 31, 2023 · c6a331b · c6a331b
1 parent 42589b3
commit c6a331b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 6 deletions.
diff --git a/...system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/Examples.tsx b/...system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/Examples.tsx
@@ -1,6 +1,6 @@
 import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
-import { Form, Field } from '@dnb/eufemia/src/extensions/forms'
-import { Card } from '@dnb/eufemia/src'
+import { Form, Field, FieldBlock } from '@dnb/eufemia/src/extensions/forms'
+import { Card, Flex, P } from '@dnb/eufemia/src'
 
 export const Default = () => {
   return (
@@ -38,3 +38,56 @@ export const SessionStorage = () => {
     </ComponentBox>
   )
 }
+
+export const Autofill = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler
+        onSubmit={(event) => console.log('onSubmit', event)}
+        autoComplete
+      >
+        <Form.MainHeading>Delivery address</Form.MainHeading>
+
+        <Card stack>
+          <Form.SubHeading>Your name</Form.SubHeading>
+
+          <Field.String label="First name" path="/firstName" required />
+          <Field.String label="Last name" path="/lastName" required />
+        </Card>
+
+        <Card stack>
+          <Form.SubHeading>Your address</Form.SubHeading>
+
+          <FieldBlock label="Address">
+            <Flex.Horizontal>
+              <Field.String
+                label="Street"
+                width="medium"
+                path="/streetName"
+                required
+              />
+              <Field.Number
+                label="Nr."
+                width="small"
+                path="/streetNr"
+                required
+              />
+            </Flex.Horizontal>
+          </FieldBlock>
+
+          <Field.PostalCodeAndCity
+            postalCode={{ required: true, path: '/postalCode' }}
+            city={{ required: true, path: '/city' }}
+          />
+        </Card>
+
+        <Card spacing="medium">
+          <P>More information about this form.</P>
+          <Form.ButtonRow>
+            <Form.SubmitButton />
+          </Form.ButtonRow>
+        </Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
diff --git a/...portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/demos.mdx b/...portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/demos.mdx
@@ -12,9 +12,11 @@ import * as Examples from './Examples'
 
 ### With session storage
 
-<em>
-  Changes you make to the fields are saved to session storage and loaded
-  when the browser reload (as long as it is the same session)
-</em>
+Changes you make to the fields are temporarily saved and loaded
+when the browser reloads. The data is stored until the session storage is invalidated.
 
 <Examples.SessionStorage />
+
+### Autocomplete (autofill) user data
+
+<Examples.Autofill />