Skip to content

Commit 545d3d9

Browse files
authored
feat(PostalCodeAndCity): add size property (#4597)
1 parent 499fbef commit 545d3d9

File tree

3 files changed

+39
-1
lines changed

3 files changed

+39
-1
lines changed

packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export type Props = Pick<
3333
*/
3434
countryCode?: Path | string
3535
help?: HelpProps
36-
}
36+
} & Pick<StringFieldProps, 'size'>
3737

3838
function PostalCodeAndCity(props: Props) {
3939
const translations = useTranslation()
@@ -46,6 +46,7 @@ function PostalCodeAndCity(props: Props) {
4646
width = 'large',
4747
country,
4848
countryCode = defaultCountry,
49+
size,
4950
...fieldBlockProps
5051
} = props
5152

@@ -119,6 +120,7 @@ function PostalCodeAndCity(props: Props) {
119120
>
120121
<StringField
121122
{...postalCode}
123+
size={size}
122124
className={classnames(
123125
'dnb-forms-field-postal-code-and-city__postal-code',
124126
postalCodeClassName
@@ -149,6 +151,7 @@ function PostalCodeAndCity(props: Props) {
149151
<StringField
150152
help={help}
151153
{...city}
154+
size={size}
152155
className={classnames(
153156
'dnb-forms-field-postal-code-and-city__city',
154157
cityClassName
@@ -169,6 +172,7 @@ function PostalCodeAndCity(props: Props) {
169172
pattern={cityPattern}
170173
trim
171174
width={cityWidth ?? 'stretch'}
175+
inputClassName="dnb-forms-field-postal-code-and-city__city-input"
172176
autoComplete="address-level2"
173177
/>
174178
</CompositionField>

packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { PropertiesTableProps } from '../../../../shared/types'
22
import { FieldProperties } from '../FieldDocs'
3+
import { stringProperties } from '../String/StringDocs'
34

45
export const PostalCodeAndCityProperties: PropertiesTableProps = {
56
countryCode: {
@@ -22,4 +23,5 @@ export const PostalCodeAndCityProperties: PropertiesTableProps = {
2223
status: 'required',
2324
},
2425
help: FieldProperties.help,
26+
size: stringProperties.size,
2527
}

packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/PostalCodeAndCity.test.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,38 @@ describe('Field.PostalCodeAndCity', () => {
2828
expect(postalCodeInput).toHaveValue('1234')
2929
})
3030

31+
it('should support size', () => {
32+
render(<Field.PostalCodeAndCity size="large" />)
33+
34+
const fieldPostalCodeElement: HTMLInputElement =
35+
document.querySelector(
36+
'.dnb-forms-field-postal-code-and-city__postal-code'
37+
)
38+
expect(fieldPostalCodeElement.classList).toContain(
39+
'dnb-forms-field-block--label-height-large'
40+
)
41+
42+
const fieldPostalCodeInputElement: HTMLInputElement =
43+
document.querySelector(
44+
'.dnb-forms-field-postal-code-and-city__postal-code-input'
45+
)
46+
expect(fieldPostalCodeInputElement.classList).toContain(
47+
'dnb-input--large'
48+
)
49+
50+
const fieldCityElement: HTMLInputElement = document.querySelector(
51+
'.dnb-forms-field-postal-code-and-city__city'
52+
)
53+
expect(fieldCityElement.classList).toContain(
54+
'dnb-forms-field-block--label-height-large'
55+
)
56+
57+
const fieldCityInputElement: HTMLInputElement = document.querySelector(
58+
'.dnb-forms-field-postal-code-and-city__city-input'
59+
)
60+
expect(fieldCityInputElement.classList).toContain('dnb-input--large')
61+
})
62+
3163
it('postalCode should have numeric "inputmode"', () => {
3264
render(<Field.PostalCodeAndCity />)
3365

0 commit comments

Comments
 (0)