Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(PhoneNumber): updates Component-specific props docs #2688

Merged
merged 1 commit into from
Sep 28, 2023
Merged

docs(PhoneNumber): updates Component-specific props docs #2688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions ...ign-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,21 @@ export const LabelAndValue = () => {
)
}

export const WithHelp = () => {
return (
<ComponentBox scope={{ Field }}>
<Field.PhoneNumber
onChange={(value) => 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.',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

}}
/>
</ComponentBox>
)
}

export const Disabled = () => {
return (
<ComponentBox scope={{ Field }}>
Expand Down
4 changes: 4 additions & 0 deletions ...tem-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/demos.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ import * as Examples from './Examples'

<Examples.LabelAndValue />

### With help

<Examples.WithHelp />

### Disabled

<Examples.Disabled />
Expand Down
16 changes: 9 additions & 7 deletions ...ortal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
23 changes: 13 additions & 10 deletions packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, undefined> & {
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<string, undefined> & {
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)
Expand Down Expand Up @@ -46,6 +47,7 @@ function PhoneNumber(props: Props) {
error,
disabled,
width = 'large',
help,
handleFocus,
handleBlur,
handleChange,
Expand Down Expand Up @@ -141,6 +143,7 @@ function PhoneNumber(props: Props) {
error={error}
disabled={disabled}
width="stretch"
help={help}
/>
</Div>
)
Expand Down
Loading