feat(PostalCodeAndCity): add size property (#4597)

Author: langz

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

@@ -33,7 +33,7 @@ export type Props = Pick<
      */
     countryCode?: Path | string
     help?: HelpProps
-  }
+  } & Pick<StringFieldProps, 'size'>
 
 function PostalCodeAndCity(props: Props) {
   const translations = useTranslation()
@@ -46,6 +46,7 @@ function PostalCodeAndCity(props: Props) {
     width = 'large',
     country,
     countryCode = defaultCountry,
+    size,
     ...fieldBlockProps
   } = props
 
@@ -119,6 +120,7 @@ function PostalCodeAndCity(props: Props) {
     >
       <StringField
         {...postalCode}
+        size={size}
         className={classnames(
           'dnb-forms-field-postal-code-and-city__postal-code',
           postalCodeClassName
@@ -149,6 +151,7 @@ function PostalCodeAndCity(props: Props) {
       <StringField
         help={help}
         {...city}
+        size={size}
         className={classnames(
           'dnb-forms-field-postal-code-and-city__city',
           cityClassName
@@ -169,6 +172,7 @@ function PostalCodeAndCity(props: Props) {
         pattern={cityPattern}
         trim
         width={cityWidth ?? 'stretch'}
+        inputClassName="dnb-forms-field-postal-code-and-city__city-input"
         autoComplete="address-level2"
       />
     </CompositionField>

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

@@ -1,5 +1,6 @@
 import { PropertiesTableProps } from '../../../../shared/types'
 import { FieldProperties } from '../FieldDocs'
+import { stringProperties } from '../String/StringDocs'
 
 export const PostalCodeAndCityProperties: PropertiesTableProps = {
   countryCode: {
@@ -22,4 +23,5 @@ export const PostalCodeAndCityProperties: PropertiesTableProps = {
     status: 'required',
   },
   help: FieldProperties.help,
+  size: stringProperties.size,
 }

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

@@ -28,6 +28,38 @@ describe('Field.PostalCodeAndCity', () => {
     expect(postalCodeInput).toHaveValue('1234')
   })
 
+  it('should support size', () => {
+    render(<Field.PostalCodeAndCity size="large" />)
+
+    const fieldPostalCodeElement: HTMLInputElement =
+      document.querySelector(
+        '.dnb-forms-field-postal-code-and-city__postal-code'
+      )
+    expect(fieldPostalCodeElement.classList).toContain(
+      'dnb-forms-field-block--label-height-large'
+    )
+
+    const fieldPostalCodeInputElement: HTMLInputElement =
+      document.querySelector(
+        '.dnb-forms-field-postal-code-and-city__postal-code-input'
+      )
+    expect(fieldPostalCodeInputElement.classList).toContain(
+      'dnb-input--large'
+    )
+
+    const fieldCityElement: HTMLInputElement = document.querySelector(
+      '.dnb-forms-field-postal-code-and-city__city'
+    )
+    expect(fieldCityElement.classList).toContain(
+      'dnb-forms-field-block--label-height-large'
+    )
+
+    const fieldCityInputElement: HTMLInputElement = document.querySelector(
+      '.dnb-forms-field-postal-code-and-city__city-input'
+    )
+    expect(fieldCityInputElement.classList).toContain('dnb-input--large')
+  })
+
   it('postalCode should have numeric "inputmode"', () => {
     render(<Field.PostalCodeAndCity />)