feat(Forms): expiry field

packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.mdx

@@ -113,6 +113,7 @@ Read more about other addons [on the open-source project](https://github.com/tex
 | `delimiter`      | _(optional)_ character that seperates the input inputs.                                                                                                                                                                                                              |
 | `status`         | _(optional)_ text with a status message. The style defaults to an error message. You can use true to only get the status color, without a message.`.                                                                                                                 |
 | `statusState`    | _(optional)_ defines the state of the status. Currently, there are two statuses [error, info]. Defaults to error.                                                                                                                                                    |
+| `suffix`         | _(optional)_ Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.                                                                                                    |
 
 ### MultiInputMask inputs properties
 

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

@@ -0,0 +1,27 @@
+---
+title: 'Expiry'
+description: '`Field.Expiry` is a wrapper component for the input of strings, with user experience tailored for expiry dates for payment cards.'
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+  - title: Events
+    key: '/events'
+breadcrumb:
+  - text: Forms
+    href: /uilib/extensions/forms/
+  - text: Feature fields
+    href: /uilib/extensions/forms/feature-fields/
+  - text: Expiry
+    href: /uilib/extensions/forms/feature-fields/Expiry/
+---
+
+import Info from 'Docs/uilib/extensions/forms/feature-fields/Expiry/info'
+import Demos from 'Docs/uilib/extensions/forms/feature-fields/Expiry/demos'
+
+<Info />
+<Demos />

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

@@ -0,0 +1,79 @@
+import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import { Field } from '@dnb/eufemia/src/extensions/forms'
+import { FormError } from '@dnb/eufemia/src/extensions/forms/types'
+
+export const Empty = () => {
+  return (
+    <ComponentBox>
+      <Field.Expiry
+        onChange={(expiry) => console.log('onChange', expiry)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const Label = () => {
+  return (
+    <ComponentBox>
+      <Field.Expiry
+        label="Label text"
+        onChange={(expiry) => console.log('onChange', expiry)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const WithHelp = () => {
+  return (
+    <ComponentBox>
+      <Field.Expiry
+        label="Label text"
+        help={{
+          title: 'Help is available',
+          contents:
+            'Kindness and helping others will return to you when you least expect it, and maybe when you need it.',
+        }}
+        onChange={(expiry) => console.log('onChange', expiry)}
+      />
+    </ComponentBox>
+  )
+}
+
+export const Disabled = () => {
+  return (
+    <ComponentBox>
+      <Field.Expiry
+        value="0826"
+        label="Label text"
+        onChange={(expiry) => console.log('onChange', expiry)}
+        disabled
+      />
+    </ComponentBox>
+  )
+}
+
+export const Error = () => {
+  return (
+    <ComponentBox scope={{ FormError }}>
+      <Field.Expiry
+        value="0326"
+        label="Label text"
+        onChange={(expiry) => console.log('onChange', expiry)}
+        error={new FormError('This is what is wrong...')}
+      />
+    </ComponentBox>
+  )
+}
+
+export const ValidationRequired = () => {
+  return (
+    <ComponentBox>
+      <Field.Expiry
+        value="0826"
+        label="Label text"
+        onChange={(expiry) => console.log('onChange', expiry)}
+        required
+      />
+    </ComponentBox>
+  )
+}

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

@@ -0,0 +1,47 @@
+---
+showTabs: true
+---
+
+import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
+import * as Examples from './Examples'
+
+## Demos
+
+The locale is what determines the components `placeholder` format .e.g. `mm/åå` in norwegian, `mm/yy` in english.
+
+<ChangeLocale bottom label="Locale used in the demos:" showUS={true} />
+
+English (US) is not included in Eufemia by default. You can include it like:
+
+```jsx
+import enUS from '@dnb/eufemia/shared/locales/en-US'
+<EufemiaProvider locale={enUS} ...>
+	App
+</EufemiaProvider>
+```
+
+## Demos
+
+### Empty
+
+<Examples.Empty />
+
+### Label
+
+<Examples.Label />
+
+### With help
+
+<Examples.WithHelp />
+
+### Disabled
+
+<Examples.Disabled />
+
+### Error
+
+<Examples.Error />
+
+### Validation - Required
+
+<Examples.ValidationRequired />

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

@@ -0,0 +1,13 @@
+---
+showTabs: true
+---
+
+import DataValueWriteEvents from 'Docs/uilib/extensions/forms/data-value-write-events.mdx'
+
+## Events
+
+| Event      | Description                                                                                                                                                     |
+| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onChange` | _(optional)_ Will be called when the component values changes. Passes a string representing the date, without the delimiter as parameters, E.g. `0826`          |
+| `onFocus`  | _(optional)_ Will be called when the component gets into focus. Like clicking inside a text input or opening a dropdown. Called with active value as argument.  |
+| `onBlur`   | _(optional)_ Will be called when the component stop being in focus. Like when going to next field, or closing a dropdown. Called with active value as argument. |

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

@@ -0,0 +1,12 @@
+---
+showTabs: true
+---
+
+## Description
+
+`Field.Expiry` is a wrapper component for the input of strings, with user experience tailored for expiry dates for payment cards.
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+render(<Field.Expiry />)
+```

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

@@ -0,0 +1,9 @@
+---
+showTabs: true
+---
+
+import DataValueReadwriteProperties from '../../data-value-readwrite-properties.mdx'
+
+## Properties
+
+<DataValueReadwriteProperties type="string" />

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

@@ -8,6 +8,7 @@ import { SpacingProps } from '../space/types'
 import { createSpacingClasses } from '../space/SpacingHelper'
 import { FormStatusState, FormStatusText } from '../FormStatus'
 import { useMultiInputValue } from './hooks/useMultiInputValues'
+import { makeUniqueId } from '../../shared/component-helper'
 
 export type MultiInputMaskInput<T extends string> = {
   /**
@@ -66,6 +67,10 @@ export type MultiInputMaskProps<T extends string> = {
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   statusState?: FormStatusState
+  /**
+   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.
+   */
+  suffix?: React.ReactNode
 } & Omit<
   React.HTMLProps<HTMLInputElement>,
   'onChange' | 'ref' | 'value' | 'label'
@@ -83,6 +88,7 @@ function MultiInputMask<T extends string>({
   statusState,
   values: defaultValues,
   className,
+  suffix,
   ...props
 }: MultiInputMaskProps<T>) {
   const [values, onChange] = useMultiInputValue({
@@ -131,6 +137,7 @@ function MultiInputMask<T extends string>({
         disabled={disabled}
         status={status}
         status_state={statusState}
+        suffix={suffix}
         input_element={inputs.map((input, index) => (
           <Fragment key={input.id}>
             <MultiInputMaskInput
@@ -184,11 +191,11 @@ function MultiInputMask<T extends string>({
     // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handeled or not
     return inputs.reduce(
       (keys, { id, mask }) => {
-        keys[`${id}__input`] = mask
+        keys[id] = mask
 
         return keys
       },
-      {} as Record<`${T}__input`, RegExp[]>
+      {} as Record<T, RegExp[]>
     )
   }
 
@@ -232,10 +239,13 @@ function MultiInputMaskInput<T extends string>({
   onKeyDown,
   onChange,
 }: MultiInputMaskInputProps<T>) {
+  const markupId = `${id}-${makeUniqueId()}`
+
   return (
     <>
       <TextMask
-        id={`${id}__input`}
+        id={`${markupId}__input`}
+        data-mask-id={id}
         className={classnames(
           'dnb-input__input',
           'dnb-multi-input-mask__input',
@@ -249,7 +259,7 @@ function MultiInputMaskInput<T extends string>({
         guide={true}
         showMask={true}
         keepCharPositions={false} // so we can overwrite next value, if it already exists
-        aria-labelledby={`${id}__label`}
+        aria-labelledby={`${markupId}__label`}
         ref={inputRef}
         onKeyDown={onKeyDown}
         onFocus={onFocus}
@@ -260,7 +270,11 @@ function MultiInputMaskInput<T extends string>({
           )
         }}
       />
-      <label id={`${id}__label`} htmlFor={`${id}__input`} hidden>
+      <label
+        id={`${markupId}__label`}
+        htmlFor={`${markupId}__input`}
+        hidden
+      >
         {label}
       </label>
       {delimiter && (

packages/dnb-eufemia/src/components/input-masked/TextMask.d.ts

@@ -11,7 +11,7 @@ export type TextMaskInputElement =
   | React.ReactNode
   | ((...args: any[]) => any);
 export type TextMaskValue = string | number;
-export interface TextMaskProps extends React.HTMLProps<HTMLElement> {
+export interface TextMaskProps extends React.HTMLProps<HTMLInputElement> {
   mask: TextMaskMask;
   inputRef?: React.MutableRefObject<HTMLInputElement>;
   inputElement?: TextMaskInputElement;

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

@@ -115,13 +115,13 @@ describe('MultiInputMask', () => {
       document.querySelectorAll('.dnb-multi-input-mask__input')
     ) as HTMLInputElement[]
 
-    expect(first.id).toBe('day__input')
+    expect(first.id).toMatch(new RegExp(/^day-id-\w+__input/))
     expect(first.tagName).toBe('INPUT')
 
-    expect(second.id).toBe('month__input')
+    expect(second.id).toMatch(new RegExp(/^month-id-\w+__input/))
     expect(second.tagName).toBe('INPUT')
 
-    expect(third.id).toBe('year__input')
+    expect(third.id).toMatch(new RegExp(/^year-id-\w+__input/))
     expect(third.tagName).toBe('INPUT')
   })
 
@@ -133,15 +133,15 @@ describe('MultiInputMask', () => {
     ) as HTMLInputElement[]
 
     expect(first.nextElementSibling).toHaveTextContent('the day')
-    expect(first.labels[0].id).toBe('day__label')
+    expect(first.labels[0].id).toMatch(new RegExp(/^day-id-\w+__label/))
     expect(first.nextElementSibling.tagName).toBe('LABEL')
 
     expect(second.nextElementSibling).toHaveTextContent('the month')
-    expect(second.labels[0].id).toBe('month__label')
+    expect(second.labels[0].id).toMatch(new RegExp(/^month-id-\w+__label/))
     expect(second.nextElementSibling.tagName).toBe('LABEL')
 
     expect(third.nextElementSibling).toHaveTextContent('the year')
-    expect(third.labels[0].id).toBe('year__label')
+    expect(third.labels[0].id).toMatch(new RegExp(/^year-id-\w+__label/))
     expect(third.nextElementSibling.tagName).toBe('LABEL')
   })
 

packages/dnb-eufemia/src/components/input-masked/hooks/useHandleCursorPosition.ts

@@ -75,7 +75,7 @@ function getKeysToHandle({ keysToHandle, input }: GetKeysToHandleParams) {
     return keysToHandle
   }
 
-  const masks = keysToHandle[input.id]
+  const masks = keysToHandle[input.dataset.maskId]
 
   const selection =
     input.selectionStart === input.selectionEnd