feat(SelectCountry): add size property (#4595)

Author: langz

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

@@ -17,6 +17,7 @@ import FieldBlock, {
   FieldBlockWidth,
 } from '../../FieldBlock'
 import useTranslation from '../../hooks/useTranslation'
+import { AutocompleteAllProps } from '../../../../components/autocomplete/Autocomplete'
 
 export type CountryFilterSet =
   | 'Scandinavia'
@@ -50,6 +51,11 @@ export type Props = FieldPropsWithExtraValue<
    * The width of the component.
    */
   width?: FieldBlockWidth
+
+  /**
+   * The size of the component.
+   */
+  size?: AutocompleteAllProps['size']
 }
 
 function SelectCountry(props: Props) {
@@ -112,6 +118,7 @@ function SelectCountry(props: Props) {
     countries: ccFilter = 'Prioritized',
     hasError,
     disabled,
+    size,
     value,
     width,
     htmlAttributes,
@@ -244,6 +251,7 @@ function SelectCountry(props: Props) {
         data={dataRef.current}
         value={typeof value === 'string' ? value : null}
         disabled={disabled}
+        size={size}
         on_show={fillData}
         on_focus={onFocusHandler}
         on_blur={handleBlur}

packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountryDocs.ts

@@ -1,5 +1,6 @@
 import { PropertiesTableProps } from '../../../../shared/types'
 import { getFieldEventsWithTypes } from '../FieldDocs'
+import { autocompleteProperties } from '../../../../components/autocomplete/AutocompleteDocs'
 
 export const SelectCountryProperties: PropertiesTableProps = {
   countries: {
@@ -12,6 +13,7 @@ export const SelectCountryProperties: PropertiesTableProps = {
     type: 'function',
     status: 'optional',
   },
+  size: autocompleteProperties.size,
 }
 
 export const SelectCountryGeneralEvents = getFieldEventsWithTypes(

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

@@ -15,6 +15,24 @@ describe('Field.SelectCountry', () => {
     expect(document.querySelector('input')).toBeInTheDocument()
   })
 
+  it('should support size', () => {
+    render(<Field.SelectCountry size="large" />)
+
+    const autocompleteElement: HTMLInputElement = document.querySelector(
+      '.dnb-autocomplete'
+    )
+    expect(autocompleteElement.classList).toContain(
+      'dnb-autocomplete--large'
+    )
+
+    const selectCountryElement: HTMLInputElement = document.querySelector(
+      '.dnb-forms-field-select-country'
+    )
+    expect(selectCountryElement.classList).toContain(
+      'dnb-forms-field-block--label-height-large'
+    )
+  })
+
   it('should return correct value onChange event', () => {
     const onChange = jest.fn()
     const onBlur = jest.fn()