feat(Expiry): add size property (#4604)

Author: langz

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry/properties.mdx

@@ -5,9 +5,14 @@ showTabs: true
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs'
+import { ExpiryProperties } from '@dnb/eufemia/src/extensions/forms/Field/Expiry/ExpiryDocs'
 
 ## Properties
 
+### Field-specific properties
+
+<PropertiesTable props={ExpiryProperties} />
+
 ### General properties
 
 <PropertiesTable props={FieldProperties} />

packages/dnb-eufemia/src/components/input-masked/MultiInputMask.tsx

@@ -1,5 +1,6 @@
 import React, { MutableRefObject, useRef } from 'react'
 import Input from '../Input'
+import type { InputProps } from '../Input'
 import TextMask from './TextMask'
 import useHandleCursorPosition from './hooks/useHandleCursorPosition'
 import classnames from 'classnames'
@@ -92,8 +93,10 @@ export type MultiInputMaskProps<T extends string> = {
   | 'value'
   | 'label'
   | 'placeholder'
+  | 'size'
 > &
-  SpacingProps
+  SpacingProps &
+  Pick<InputProps, 'size'>
 
 function MultiInputMask<T extends string>({
   id,

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

@@ -5,14 +5,22 @@ import { useFieldProps } from '../../hooks'
 import classnames from 'classnames'
 import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'
 import { MultiInputMask } from '../../../../components/input-masked'
-import type { MultiInputMaskValue } from '../../../../components/input-masked'
+import type {
+  MultiInputMaskProps,
+  MultiInputMaskValue,
+} from '../../../../components/input-masked'
 import { useTranslation as useSharedTranslation } from '../../../../shared'
 import useTranslation from '../../hooks/useTranslation'
 import { FormError } from '../../utils'
 
 type ExpiryValue = MultiInputMaskValue<'month' | 'year'>
 
-export type ExpiryProps = FieldProps<string, undefined | ''>
+export type ExpiryProps = FieldProps<string, undefined | ''> & {
+  /**
+   * The size of the component.
+   */
+  size?: MultiInputMaskProps<'month' | 'year'>['size']
+}
 
 function Expiry(props: ExpiryProps) {
   const {
@@ -119,6 +127,7 @@ function Expiry(props: ExpiryProps) {
     info,
     warning,
     disabled,
+    size,
     value = '',
     htmlAttributes,
     handleFocus,
@@ -163,6 +172,7 @@ function Expiry(props: ExpiryProps) {
         status={status}
         statusState={disabled ? 'disabled' : undefined}
         disabled={disabled}
+        size={size}
         onChange={handleChange}
         onBlur={handleBlur}
         onFocus={handleFocus}

packages/dnb-eufemia/src/extensions/forms/Field/Expiry/ExpiryDocs.tsx

@@ -0,0 +1,6 @@
+import { PropertiesTableProps } from '../../../../shared/types'
+import { inputProperties } from '../../../../components/input/InputDocs'
+
+export const ExpiryProperties: PropertiesTableProps = {
+  size: inputProperties.size,
+}

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

@@ -22,6 +22,21 @@ describe('Field.Expiry', () => {
     })
   })
 
+  it('should support size', () => {
+    render(<Field.Expiry value="0835" size="large" />)
+
+    const fieldBlockElement: HTMLInputElement = document.querySelector(
+      '.dnb-forms-field-block'
+    )
+    expect(fieldBlockElement.classList).toContain(
+      'dnb-forms-field-block--label-height-large'
+    )
+
+    const inputElement: HTMLInputElement =
+      document.querySelector('.dnb-input')
+    expect(inputElement.classList).toContain('dnb-input--large')
+  })
+
   it('should set value as a string', () => {
     render(<Field.Expiry value="0835" />)