Skip to content

Commit cb0505e

Browse files
authored
feat(Expiry): add size property (#4604)
1 parent 12d319d commit cb0505e

File tree

5 files changed

+42
-3
lines changed

5 files changed

+42
-3
lines changed

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

+5
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,14 @@ showTabs: true
55
import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
66
import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
77
import { FieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs'
8+
import { ExpiryProperties } from '@dnb/eufemia/src/extensions/forms/Field/Expiry/ExpiryDocs'
89

910
## Properties
1011

12+
### Field-specific properties
13+
14+
<PropertiesTable props={ExpiryProperties} />
15+
1116
### General properties
1217

1318
<PropertiesTable props={FieldProperties} />

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { MutableRefObject, useRef } from 'react'
22
import Input from '../Input'
3+
import type { InputProps } from '../Input'
34
import TextMask from './TextMask'
45
import useHandleCursorPosition from './hooks/useHandleCursorPosition'
56
import classnames from 'classnames'
@@ -92,8 +93,10 @@ export type MultiInputMaskProps<T extends string> = {
9293
| 'value'
9394
| 'label'
9495
| 'placeholder'
96+
| 'size'
9597
> &
96-
SpacingProps
98+
SpacingProps &
99+
Pick<InputProps, 'size'>
97100

98101
function MultiInputMask<T extends string>({
99102
id,

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

+12-2
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,22 @@ import { useFieldProps } from '../../hooks'
55
import classnames from 'classnames'
66
import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'
77
import { MultiInputMask } from '../../../../components/input-masked'
8-
import type { MultiInputMaskValue } from '../../../../components/input-masked'
8+
import type {
9+
MultiInputMaskProps,
10+
MultiInputMaskValue,
11+
} from '../../../../components/input-masked'
912
import { useTranslation as useSharedTranslation } from '../../../../shared'
1013
import useTranslation from '../../hooks/useTranslation'
1114
import { FormError } from '../../utils'
1215

1316
type ExpiryValue = MultiInputMaskValue<'month' | 'year'>
1417

15-
export type ExpiryProps = FieldProps<string, undefined | ''>
18+
export type ExpiryProps = FieldProps<string, undefined | ''> & {
19+
/**
20+
* The size of the component.
21+
*/
22+
size?: MultiInputMaskProps<'month' | 'year'>['size']
23+
}
1624

1725
function Expiry(props: ExpiryProps) {
1826
const {
@@ -119,6 +127,7 @@ function Expiry(props: ExpiryProps) {
119127
info,
120128
warning,
121129
disabled,
130+
size,
122131
value = '',
123132
htmlAttributes,
124133
handleFocus,
@@ -163,6 +172,7 @@ function Expiry(props: ExpiryProps) {
163172
status={status}
164173
statusState={disabled ? 'disabled' : undefined}
165174
disabled={disabled}
175+
size={size}
166176
onChange={handleChange}
167177
onBlur={handleBlur}
168178
onFocus={handleFocus}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { PropertiesTableProps } from '../../../../shared/types'
2+
import { inputProperties } from '../../../../components/input/InputDocs'
3+
4+
export const ExpiryProperties: PropertiesTableProps = {
5+
size: inputProperties.size,
6+
}

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

+15
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,21 @@ describe('Field.Expiry', () => {
2222
})
2323
})
2424

25+
it('should support size', () => {
26+
render(<Field.Expiry value="0835" size="large" />)
27+
28+
const fieldBlockElement: HTMLInputElement = document.querySelector(
29+
'.dnb-forms-field-block'
30+
)
31+
expect(fieldBlockElement.classList).toContain(
32+
'dnb-forms-field-block--label-height-large'
33+
)
34+
35+
const inputElement: HTMLInputElement =
36+
document.querySelector('.dnb-input')
37+
expect(inputElement.classList).toContain('dnb-input--large')
38+
})
39+
2540
it('should set value as a string', () => {
2641
render(<Field.Expiry value="0835" />)
2742

0 commit comments

Comments
 (0)