feat(Forms): add feature fields Field.Address.Street & Field.Address.…

…Postal (#4562)

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Address.mdx

@@ -0,0 +1,26 @@
+---
+title: 'Address'
+description: '`Value.Address` is a wrapper component for displaying string values, with user experience tailored for postal and street addresses.'
+componentType: 'feature-value'
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/
+  - text: Value
+    href: /uilib/extensions/forms/Value/
+  - text: Address
+    href: /uilib/extensions/forms/Value/Address/
+---
+
+import Info from 'Docs/uilib/extensions/forms/Value/Address/info'
+import Demos from 'Docs/uilib/extensions/forms/Value/Address/demos'
+
+<Info />
+<Demos />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Address/Examples.tsx

@@ -0,0 +1,47 @@
+import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import { P } from '@dnb/eufemia/src'
+import { Form, Value } from '@dnb/eufemia/src/extensions/forms'
+
+export const PostalAddress = () => {
+  return (
+    <ComponentBox>
+      <Value.Address.Postal value="Postboks 55 Falkum 3705 Skien" />
+    </ComponentBox>
+  )
+}
+
+export const StreetAddress = () => {
+  return (
+    <ComponentBox>
+      <Value.Address.Street value="Dronning Eufemias gate 30" />
+    </ComponentBox>
+  )
+}
+
+export const Placeholder = () => {
+  return (
+    <ComponentBox>
+      <Value.Address.Street placeholder="Custom placeholder" />
+    </ComponentBox>
+  )
+}
+
+export const Inline = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler
+        defaultData={{
+          streetAddress: 'Dronning Eufemias gate 30',
+          postalAddress: 'Postboks 55 Falkum 3705 Skien',
+        }}
+      >
+        <P>
+          This is before the component{' '}
+          <Value.Address.Street path="/streetAddress" inline />{' '}
+          <Value.Address.Postal path="/postalAddress" inline /> This is
+          after the component
+        </P>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Address/demos.mdx

@@ -0,0 +1,23 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Postal address
+
+<Examples.PostalAddress />
+
+### Street address
+
+<Examples.StreetAddress />
+
+### Placeholder
+
+<Examples.Placeholder />
+
+### Inline
+
+<Examples.Inline />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Address/info.mdx

@@ -0,0 +1,19 @@
+---
+showTabs: true
+---
+
+## Description
+
+`Value.Address` is a wrapper component for displaying string values, with user experience tailored for postal and street addresses.
+
+There is a corresponding [Field.Address](/uilib/extensions/forms/feature-fields/Address) component.
+
+```jsx
+import { Value } from '@dnb/eufemia/extensions/forms'
+render(
+  <>
+    <Value.Address.Postal />
+    <Value.Address.Street />
+  </>,
+)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Address/properties.mdx

@@ -0,0 +1,15 @@
+---
+showTabs: true
+---
+
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { ValueProperties } from '@dnb/eufemia/src/extensions/forms/Value/ValueDocs'
+
+## Properties
+
+<PropertiesTable props={ValueProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['Address.label']} />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Address.mdx

@@ -0,0 +1,28 @@
+---
+title: 'Address'
+description: '`Field.Address` is a wrapper component for the input of strings, with user experience tailored for postal and street addresses.'
+showTabs: true
+theme: 'sbanken'
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+  - title: Events
+    key: '/events'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/
+  - text: Feature fields
+    href: /uilib/extensions/forms/feature-fields/
+  - text: Address
+    href: /uilib/extensions/forms/feature-fields/Address/
+---
+
+import Info from 'Docs/uilib/extensions/forms/feature-fields/Address/info'
+import Demos from 'Docs/uilib/extensions/forms/feature-fields/Address/demos'
+
+<Info />
+<Demos />

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

@@ -0,0 +1,112 @@
+import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import { Field } from '@dnb/eufemia/src/extensions/forms'
+
+export const EmptyPostal = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Postal
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const EmptyStreet = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Street
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const Placeholder = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Postal
+        placeholder="Enter address..."
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const Label = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Postal
+        label="Label text"
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const LabelAndValue = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Postal
+        label="Label text"
+        value="Dronning Eufemias gate 30"
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const WithHelp = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Postal
+        label="Label text"
+        value="Dronning Eufemias gate 30"
+        help={{
+          title: 'Help is available',
+          content:
+            'Use your gifts to teach and help others. Acknowledge them as gifts (even if only in your mind). Take some time to list your strengths as well as the ways in which you could share them with the world around you and how that truly is a gift to others.',
+        }}
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const Disabled = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Postal
+        value="Dronning Eufemias gate 30"
+        label="Label text"
+        onChange={(value) => console.log('onChange', value)}
+        disabled
+      />
+    </ComponentBox>
+  )
+}
+
+export const WithError = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Postal
+        value="Dronning Eufemias gate X"
+        label="Label text"
+        onChange={(value) => console.log('onChange', value)}
+        error={new Error('This is what is wrong...')}
+      />
+    </ComponentBox>
+  )
+}
+
+export const ValidationRequired = () => {
+  return (
+    <ComponentBox>
+      <Field.Address.Postal
+        value="Dronning Eufemias gate 30"
+        label="Label text"
+        onChange={(value) => console.log('onChange', value)}
+        required
+      />
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Address/demos.mdx

@@ -0,0 +1,43 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Postal address
+
+<Examples.EmptyPostal />
+
+### Street address
+
+<Examples.EmptyStreet />
+
+### Placeholder
+
+<Examples.Placeholder />
+
+### Label
+
+<Examples.Label />
+
+### Label and value
+
+<Examples.LabelAndValue />
+
+### With help
+
+<Examples.WithHelp />
+
+### Disabled
+
+<Examples.Disabled />
+
+### Error message
+
+<Examples.WithError />
+
+### Validation - Required
+
+<Examples.ValidationRequired />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Address/events.mdx

@@ -0,0 +1,10 @@
+---
+showTabs: true
+---
+
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { FieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs'
+
+## Events
+
+<PropertiesTable props={FieldEvents} />

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

@@ -0,0 +1,43 @@
+---
+showTabs: true
+---
+
+## Description
+
+`Field.Address` is a wrapper component for the [input of strings](/uilib/extensions/forms/base-fields/String), with user experience tailored for postal and street addresses.
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(
+  <>
+    <Field.Address.Postal />
+    <Field.Address.Street />
+  </>,
+)
+```
+
+There is a corresponding [Value.Address](/uilib/extensions/forms/Value/Address) component.
+
+## Characteristics
+
+- If the user enters an address with a space, the space is removed.
+- `autocomplete` is by default set to `street-address`, but can be customized to using a grouping identifier like so `billing street-address`, see [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#grouping_identifier).
+- `inputmode` is by default set to `text`.
+
+## Postal address
+
+Is for locations for recieving mail, for people or businesses. This can also be used as a postbox address.
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(<Field.Address.Postal />)
+```
+
+## Street address
+
+Is for physical locations of people or businesses.
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(<Field.Address.Street />)
+```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Address/properties.mdx

@@ -0,0 +1,22 @@
+---
+showTabs: true
+---
+
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs'
+import { AddressProperties } from '@dnb/eufemia/src/extensions/forms/Field/Address/AddressDocs'
+
+## Properties
+
+### Field-specific properties
+
+<PropertiesTable props={AddressProperties} />
+
+### General properties
+
+<PropertiesTable props={FieldProperties} />
+
+## Translations
+
+<TranslationsTable localeKey={['Address', 'Field']} />