Commit cb0505e 1 parent 12d319d commit cb0505e Copy full SHA for cb0505e
File tree 5 files changed +42
-3
lines changed
dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Expiry
extensions/forms/Field/Expiry
5 files changed +42
-3
lines changed Original file line number Diff line number Diff line change @@ -5,9 +5,14 @@ showTabs: true
5
5
import TranslationsTable from ' dnb-design-system-portal/src/shared/parts/TranslationsTable'
6
6
import PropertiesTable from ' dnb-design-system-portal/src/shared/parts/PropertiesTable'
7
7
import { FieldProperties } from ' @dnb/eufemia/src/extensions/forms/Field/FieldDocs'
8
+ import { ExpiryProperties } from ' @dnb/eufemia/src/extensions/forms/Field/Expiry/ExpiryDocs'
8
9
9
10
## Properties
10
11
12
+ ### Field-specific properties
13
+
14
+ <PropertiesTable props = { ExpiryProperties } />
15
+
11
16
### General properties
12
17
13
18
<PropertiesTable props = { FieldProperties } />
Original file line number Diff line number Diff line change 1
1
import React , { MutableRefObject , useRef } from 'react'
2
2
import Input from '../Input'
3
+ import type { InputProps } from '../Input'
3
4
import TextMask from './TextMask'
4
5
import useHandleCursorPosition from './hooks/useHandleCursorPosition'
5
6
import classnames from 'classnames'
@@ -92,8 +93,10 @@ export type MultiInputMaskProps<T extends string> = {
92
93
| 'value'
93
94
| 'label'
94
95
| 'placeholder'
96
+ | 'size'
95
97
> &
96
- SpacingProps
98
+ SpacingProps &
99
+ Pick < InputProps , 'size' >
97
100
98
101
function MultiInputMask < T extends string > ( {
99
102
id,
Original file line number Diff line number Diff line change @@ -5,14 +5,22 @@ import { useFieldProps } from '../../hooks'
5
5
import classnames from 'classnames'
6
6
import FieldBlock , { Props as FieldBlockProps } from '../../FieldBlock'
7
7
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'
9
12
import { useTranslation as useSharedTranslation } from '../../../../shared'
10
13
import useTranslation from '../../hooks/useTranslation'
11
14
import { FormError } from '../../utils'
12
15
13
16
type ExpiryValue = MultiInputMaskValue < 'month' | 'year' >
14
17
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
+ }
16
24
17
25
function Expiry ( props : ExpiryProps ) {
18
26
const {
@@ -119,6 +127,7 @@ function Expiry(props: ExpiryProps) {
119
127
info,
120
128
warning,
121
129
disabled,
130
+ size,
122
131
value = '' ,
123
132
htmlAttributes,
124
133
handleFocus,
@@ -163,6 +172,7 @@ function Expiry(props: ExpiryProps) {
163
172
status = { status }
164
173
statusState = { disabled ? 'disabled' : undefined }
165
174
disabled = { disabled }
175
+ size = { size }
166
176
onChange = { handleChange }
167
177
onBlur = { handleBlur }
168
178
onFocus = { handleFocus }
Original file line number Diff line number Diff line change
1
+ import { PropertiesTableProps } from '../../../../shared/types'
2
+ import { inputProperties } from '../../../../components/input/InputDocs'
3
+
4
+ export const ExpiryProperties : PropertiesTableProps = {
5
+ size : inputProperties . size ,
6
+ }
Original file line number Diff line number Diff line change @@ -22,6 +22,21 @@ describe('Field.Expiry', () => {
22
22
} )
23
23
} )
24
24
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
+
25
40
it ( 'should set value as a string' , ( ) => {
26
41
render ( < Field . Expiry value = "0835" /> )
27
42
You can’t perform that action at this time.
0 commit comments