Feature/ag 13856 pin input

packages/overdrive/lib/components/PinInput/PinInput.css.ts

@@ -0,0 +1,10 @@
+import { styleVariants } from '@vanilla-extract/css';
+
+export const inputDigit = styleVariants({
+	small: {
+		width: '24px',
+	},
+	medium: {
+		width: '40px',
+	},
+});

packages/overdrive/lib/components/PinInput/PinInput.spec.jsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { PinInput } from './PinInput';
+
+describe('<PinInput />', () => {
+	it('should not throw', () =>
+		expect(() => render(<PinInput />)).not.toThrow());
+
+	it('should match snapshot', () => {
+		expect(
+			render(
+				<PinInput
+					size="medium"
+					value='6'
+					digits={6}
+				/>,
+			).container.firstChild,
+		).toMatchSnapshot();
+
+		expect(render(<PinInput />).container.firstChild).toMatchSnapshot();
+	});
+});

packages/overdrive/lib/components/PinInput/PinInput.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { FunctionComponent, useRef } from 'react';
+import { Box } from '../Box';
+import { Inline } from '../Inline';
+import { TextInput } from '../TextInput';
+
+import * as styles from './PinInput.css';
+import { Tokens } from '../../themes/tokens';
+
+export enum EPinInputSize {
+	Small = 'small',
+	Medium = 'medium',
+}
+
+export interface Props {
+	className?: string; // TODO: Remove this in the future
+	digits: number;
+	size?: EPinInputSize;
+	value?: string;
+}
+
+const labelSizeMap: Map<EPinInputSize, keyof Tokens['typography']['size']> =
+	new Map([
+		[EPinInputSize.Small, '3'],
+		[EPinInputSize.Medium, '4'],
+	]);
+
+export const PinInput: FunctionComponent<Props> = ({
+		className = '',
+		digits,
+		value = digits,
+		size = EPinInputSize.Medium,
+	}) => {
+		const handleOnPaste = (event) => {
+			const stringPasted = event.clipboardData.getData('Text');
+			//const stringPastedLength = event.clipboardData.getData('Text').length;
+
+			[...stringPasted].forEach((digit, index) => {
+				document.querySelector(`#input-pin-${index}`).value = digit;
+				const nextfield = document.querySelector(`#input-pin-${index + 1}`);
+				if (nextfield !== null) {
+					nextfield.focus();
+				}
+				 event.preventDefault();
+			})
+		};
+
+		return (
+			<Box className={className}>
+				<Inline space={labelSizeMap.get(size)} alignY="center">
+					{Array.from({ length: digits })
+						.fill(0)
+						.map((_, index) => (
+							<input id={`input-pin-${index}`} key={index} onPaste={handleOnPaste} className={styles.inputDigit[size]} maxLength={3} name="digit" placeholder='' />
+							// <TextInput key={index} onPaste={handleOnPaste} className={styles.inputDigit[size]} size={size} maxLength={1}  name="digit" placeholder='' />
+						))}
+				</Inline>
+			</Box>
+		);
+};
+
+export default PinInput;