diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode.mdx deleted file mode 100644 index ec8f02ec391..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode.mdx +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: 'CountryCode' -description: '`Field.CountryCode` is a wrapper component for the autocomplete component, with options built in for selecting a country code.' -showTabs: true -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: CountryCode - href: /uilib/extensions/forms/feature-fields/CountryCode/ ---- - -import Info from 'Docs/uilib/extensions/forms/feature-fields/CountryCode/info' -import Demos from 'Docs/uilib/extensions/forms/feature-fields/CountryCode/demos' - - - diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/Examples.tsx deleted file mode 100644 index 1d7a57b598c..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/Examples.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import ComponentBox from '../../../../../../shared/tags/ComponentBox' -import { Field } from '@dnb/eufemia/src/extensions/forms' -import { FormError } from '@dnb/eufemia/src/extensions/forms/types' - -export const Empty = () => { - return ( - - console.log('onFocus', value)} - onBlur={(value) => console.log('onBlur', value)} - onChange={(value) => console.log('onChange', value)} - /> - - ) -} - -export const Placeholder = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - -export const Label = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - -export const OptionSelected = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - -export const LabelAndOptionSelected = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - -export const WithHelp = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - -export const HorizontalLayout = () => { - return ( - - console.log('onChange', value)} - /> - - ) -} - -export const Widths = () => { - return ( - - console.log('onChange', value)} - /> - console.log('onChange', value)} - /> - console.log('onChange', value)} - /> - console.log('onChange', value)} - /> - console.log('onChange', value)} - /> - - ) -} - -export const Disabled = () => { - return ( - - console.log('onChange', value)} - disabled - /> - - ) -} - -export const Error = () => { - return ( - - console.log('onChange', value)} - error={new FormError('This is what is wrong...')} - /> - - ) -} - -export const ValidationRequired = () => { - return ( - - console.log('onChange', value)} - required - validateInitially - validateUnchanged - /> - - ) -} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/demos.mdx deleted file mode 100644 index 96ad328a6c3..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/demos.mdx +++ /dev/null @@ -1,51 +0,0 @@ ---- -showTabs: true ---- - -import * as Examples from './Examples' - -## Demos - -### Empty - - - -### Placeholder - - - -### Label - - - -### Option selected - - - -### Label and option selected - - - -### With help - - - -### Horizontal layout - - - -### Widths - - - -### Disabled - - - -### Error - - - -### Validation - Required - - diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/events.mdx deleted file mode 100644 index 97c86cec0aa..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/events.mdx +++ /dev/null @@ -1,9 +0,0 @@ ---- -showTabs: true ---- - -import DataValueWriteEvents from 'Docs/uilib/extensions/forms/data-value-write-events.mdx' - -## Events - - diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/info.mdx deleted file mode 100644 index 14bdd6b1658..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/info.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -showTabs: true ---- - -## Description - -`Field.CountryCode` is a wrapper component for the autocomplete component, with options built in for selecting a country code. - -```jsx -import { Field } from '@dnb/eufemia/extensions/forms' -render() -``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/properties.mdx deleted file mode 100644 index 890785a00d0..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/CountryCode/properties.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -showTabs: true ---- - -import DataValueReadwriteProperties from '../../data-value-readwrite-properties.mdx' - - - -### Component-specific props - -| Property | Type | Description | -| --------------------------------------- | -------- | ------------------------------------------------------------------------------- | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` | -| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | 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 f23c6289d28..1da36ba7fb9 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 @@ -15,6 +15,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. | `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. | +| `countryCodePlaceholder` | `string` | _(optional)_ Placeholder for the country code field. | | `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. | diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/CountryCode.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/CountryCode.tsx deleted file mode 100644 index 5015ae42e52..00000000000 --- a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/CountryCode.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React, { useContext, useCallback, useMemo } from 'react' -import { Autocomplete, HelpButton } from '../../../../components' -import classnames from 'classnames' -import countries from '../../constants/countries' -import { useDataValue } from '../../hooks' -import { FormError, FieldProps, FieldHelpProps } from '../../types' -import { pickSpacingProps } from '../../../../components/flex/utils' -import SharedContext from '../../../../shared/Context' - -export type Props = FieldHelpProps & - FieldProps & { - width?: false | 'small' | 'medium' | 'large' | 'stretch' - } - -function CountryCode(props: Props) { - const sharedContext = useContext(SharedContext) - const { - className, - layout = 'vertical', - placeholder, - label = sharedContext?.translation.Forms.countryCodeLabel, - value, - emptyValue, - info, - warning, - error, - disabled, - help, - width, - handleFocus, - handleBlur, - handleChange, - } = useDataValue(props) - - const autocompleteData = useMemo( - () => - countries.map((country) => ({ - selectedKey: `+${country.code}`, - selected_value: `${country.iso} (+${country.code})`, - content: `+${country.code} ${country.name}`, - })), - [] - ) - - const forwardHandleChange = useCallback( - ({ data: changedData }: { data: { selectedKey: string } }) => { - if (!changedData || !changedData.selectedKey.trim()) { - handleChange?.(emptyValue) - return - } - - handleChange?.(changedData?.selectedKey) - }, - [emptyValue, handleChange] - ) - - const valueIndex = autocompleteData.findIndex( - (item) => item.selectedKey === value - ) - - return ( - {help.contents} - ) : undefined - } - independent_width - search_numbers - {...pickSpacingProps(props)} - stretch={width === 'stretch'} - /> - ) -} - -CountryCode._supportsSpacingProps = true -export default CountryCode diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/index.ts b/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/index.ts deleted file mode 100644 index 325363cc44e..00000000000 --- a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './CountryCode' -export * from './CountryCode' diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/style/dnb-country-code.scss b/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/style/dnb-country-code.scss deleted file mode 100644 index 30439f6a144..00000000000 --- a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode/style/dnb-country-code.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import '../../style/field-sizes.scss'; - -.dnb-forms-field-country-code { - .dnb-autocomplete__inner { - --autocomplete-width: 9rem; - } - - &--width-small .dnb-autocomplete__inner { - --autocomplete-width: #{var(--forms-field-width--small)}; - } - - &--width-medium .dnb-autocomplete__inner { - --autocomplete-width: #{var(--forms-field-width--medium)}; - } - - &--width-large .dnb-autocomplete__inner { - --autocomplete-width: #{var(--forms-field-width--large)}; - } -} diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx index 0e1e5a599b7..073ebfd4765 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx @@ -1,10 +1,11 @@ -import React, { useContext, useCallback } from 'react' -import { Div } from '../../../../elements' +import React, { useMemo, useContext, useCallback } from 'react' +import { Autocomplete, Flex } from '../../../../components' import { InputMaskedProps } from '../../../../components/InputMasked' import classnames from 'classnames' -import CountryCode from '../CountryCode' +import countries from '../../constants/countries' import StringComponent from '../String' import { useDataValue } from '../../hooks' +import FieldBlock from '../../FieldBlock' import { FieldHelpProps, FieldProps } from '../../types' import { pickSpacingProps } from '../../../../components/flex/utils' import SharedContext from '../../../../shared/Context' @@ -13,6 +14,7 @@ export type Props = FieldHelpProps & FieldProps & { countryCodeFieldClassName?: string numberFieldClassName?: string + countryCodePlaceholder?: string countryCodeLabel?: string numberMask?: InputMaskedProps['mask'] width?: 'large' | 'stretch' @@ -22,8 +24,7 @@ export type Props = FieldHelpProps & function PhoneNumber(props: Props) { const sharedContext = useContext(SharedContext) - const preparedProps: Props = { - ...props, + const defaultProps: Partial = { // Important for the default value to be defined here, and not after the useDataValue call, to avoid the UI jumping // back to +47 once the user empty the field so handleChange send out undefined. value: '+47', @@ -32,11 +33,17 @@ function PhoneNumber(props: Props) { ...props?.errorMessages, }, } + const preparedProps: Props = { + ...defaultProps, + ...props, + } const { className, countryCodeFieldClassName, numberFieldClassName, + layout = 'vertical', + countryCodePlaceholder, placeholder, countryCodeLabel, label = sharedContext?.translation.Forms.phoneNumberLabel, @@ -61,8 +68,20 @@ function PhoneNumber(props: Props) { ? value.match(/^(\+[^ ]+)? ?(.*)$/) : [undefined, '', ''] + const countryCodeData = useMemo( + () => + countries.map((country) => ({ + selectedKey: `+${country.code}`, + selected_value: `${country.iso} (+${country.code})`, + content: `+${country.code} ${country.name}`, + })), + [] + ) + const handleCountryCodeChange = useCallback( - (countryCode: string) => { + ({ data }: { data: { selectedKey: string } }) => { + const countryCode = data?.selectedKey?.trim() ?? emptyValue + if (!countryCode && !phoneNumber) { handleChange?.(emptyValue) onCountryCodeChange?.(emptyValue) @@ -90,63 +109,75 @@ function PhoneNumber(props: Props) { ) return ( -
- + + - -
+ + + ) } diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss index 5b5f407d216..e0539e853c3 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss @@ -1,20 +1,8 @@ @import '../../style/field-sizes.scss'; .dnb-forms-field-phone-number { - display: flex; - flex-flow: row; - column-gap: var(--spacing-small); - - &--width-stretch { - width: 100%; - } - - &--width-large { - width: var(--forms-field-width--large); - } - &__country-code { - flex: 0 9rem; + width: 9rem; .dnb-autocomplete__shell { width: 9rem; diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/index.ts b/packages/dnb-eufemia/src/extensions/forms/Field/index.ts index 967e41b10e7..10007b50102 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/index.ts +++ b/packages/dnb-eufemia/src/extensions/forms/Field/index.ts @@ -14,4 +14,3 @@ export { default as ArraySelection } from './ArraySelection' export { default as Option } from './Option' export { default as SelectCountry } from './SelectCountry' export { default as BankAccountNumber } from './BankAccountNumber' -export { default as CountryCode } from './CountryCode' diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/style/dnb-forms-field.scss b/packages/dnb-eufemia/src/extensions/forms/Field/style/dnb-forms-field.scss index 4f6204d4301..165e9d40a72 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/style/dnb-forms-field.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Field/style/dnb-forms-field.scss @@ -2,4 +2,3 @@ @import '../PostalCodeAndCity/style/dnb-postal-code-and-city.scss'; @import '../Selection/style/dnb-selection.scss'; @import '../ArraySelection/style/dnb-array-selection.scss'; -@import '../CountryCode/style/dnb-country-code.scss';