diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx index 0cc9f66f2ac..e8d664d1539 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx @@ -54,6 +54,21 @@ export const LabelAndValue = () => { ) } +export const WithHelp = () => { + return ( + + console.log('onChange', value)} + help={{ + title: 'Help is available', + contents: + 'Helping others, encouraging others, are often acts of being kind that have more meaning that you may realize.', + }} + /> + + ) +} + export const Disabled = () => { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx index 02c709df956..63d00cefcc1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx @@ -22,6 +22,10 @@ import * as Examples from './Examples' +### With help + + + ### Disabled diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx index e4b0caed344..19d5f418980 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx @@ -10,10 +10,12 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| ------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- | -| `countryCodeFieldClassName` | `string` | _(optional)_ Class name for the country code component. | -| `numberFieldClassName` | `string` | _(optional)_ Class name for the number component. | -| `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | -| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | +| Property | Type | Description | +| ------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | +| `countryCodeFieldClassName` | `string` | _(optional)_ Class name for the country code component. | +| `numberFieldClassName` | `string` | _(optional)_ Class name for the number component. | +| `countryCodeLabel` | `string` | _(optional)_ Label to show above / before the country code field | +| `numberMask` | Various | _(optional)_ See property `mask` of the [InputMasked](/uilib/components/input-masked/properties) component. | +| `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. | +| [Space](/uilib/components/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx index 76fe7bb505c..1b724d560db 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx @@ -5,18 +5,19 @@ import classnames from 'classnames' import CountryCode from './CountryCode' import StringComponent from './String' import { useDataValue } from '../hooks' -import { FieldProps, pickSpacingProps } from '../types' +import { FieldHelpProps, FieldProps, pickSpacingProps } from '../types' import SharedContext from '../../../shared/Context' -export type Props = FieldProps & { - countryCodeFieldClassName?: string - numberFieldClassName?: string - countryCodeLabel?: string - numberMask?: InputMaskedProps['mask'] - width?: 'large' | 'stretch' - onCountryCodeChange?: (value: string | undefined) => void - onNumberChange?: (value: string | undefined) => void -} +export type Props = FieldHelpProps & + FieldProps & { + countryCodeFieldClassName?: string + numberFieldClassName?: string + countryCodeLabel?: string + numberMask?: InputMaskedProps['mask'] + width?: 'large' | 'stretch' + onCountryCodeChange?: (value: string | undefined) => void + onNumberChange?: (value: string | undefined) => void + } function PhoneNumber(props: Props) { const sharedContext = useContext(SharedContext) @@ -46,6 +47,7 @@ function PhoneNumber(props: Props) { error, disabled, width = 'large', + help, handleFocus, handleBlur, handleChange, @@ -141,6 +143,7 @@ function PhoneNumber(props: Props) { error={error} disabled={disabled} width="stretch" + help={help} /> )