uikit-react-public 0.47.2 → 0.48.1

package/lib/components/ConfidentialInput/__tests__/ConfidentialInput.test.tsx

@@ -0,0 +1,339 @@
+import { createRef } from 'react';
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import ConfidentialInput from '../ConfidentialInput';
+import Field from '../../Field';
+import Icon from '../../Icon';
+
+const renderInput = (props: React.ComponentProps<typeof ConfidentialInput>) =>
+  render(
+    <ThemeContextProvider>
+      <ConfidentialInput {...props} />
+    </ThemeContextProvider>
+  );
+
+describe('ConfidentialInput', () => {
+  test('applies a string mask without changing the input value', () => {
+    renderInput({
+      maskFormat: '1111****',
+      value: '12345678',
+      onChange: () => {},
+    });
+
+    expect(screen.getByTestId('ucl-uikit-confidential-input')).toHaveValue(
+      '12345678'
+    );
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('1234••••');
+  });
+
+  test('supports separators and masks characters beyond the template', () => {
+    renderInput({
+      maskFormat: '**-**-11',
+      value: '1234729',
+      onChange: () => {},
+    });
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72•');
+  });
+
+  test('applies a function mask', () => {
+    renderInput({
+      maskFormat: (value) => `**** ending in ${value.slice(-2)}`,
+      value: '12345678',
+      onChange: () => {},
+    });
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('•••• ending in 78');
+  });
+
+  test('does not add a visibility control by default', () => {
+    renderInput({
+      maskFormat: '****',
+      defaultValue: '1234',
+    });
+
+    expect(
+      screen.queryByRole('button', { name: 'Show confidential value' })
+    ).not.toBeInTheDocument();
+  });
+
+  test('toggles between the masked and shown value', async () => {
+    const user = userEvent.setup();
+    renderInput({
+      maskFormat: '****1111',
+      defaultValue: '12345678',
+      showable: true,
+    });
+
+    const input = screen.getByTestId(
+      'ucl-uikit-confidential-input'
+    ) as HTMLInputElement;
+    const showButton = screen.getByRole('button', {
+      name: 'Show confidential value',
+    });
+
+    expect(input).toHaveAttribute('type', 'password');
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-show-icon')
+    ).toBeInTheDocument();
+
+    await user.click(showButton);
+
+    expect(input).toHaveAttribute('type', 'text');
+    expect(
+      screen.queryByTestId('ucl-uikit-confidential-input-mask')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Hide confidential value' })
+    ).toHaveAttribute('aria-pressed', 'true');
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-hide-icon')
+    ).toBeInTheDocument();
+  });
+
+  test('updates an uncontrolled value and reports the original value', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderInput({
+      maskFormat: '****',
+      onChange,
+    });
+
+    const input = screen.getByTestId('ucl-uikit-confidential-input');
+    await user.type(input, '1234');
+
+    expect(input).toHaveValue('1234');
+    expect(input).toHaveAttribute('type', 'text');
+    expect(
+      screen.queryByTestId('ucl-uikit-confidential-input-mask')
+    ).not.toBeInTheDocument();
+
+    await user.tab();
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••••');
+    expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({}));
+    expect(onChange.mock.lastCall?.[0].target.value).toBe('1234');
+  });
+
+  test('submits the original value', () => {
+    render(
+      <ThemeContextProvider>
+        <form data-testid='form'>
+          <ConfidentialInput
+            name='accountNumber'
+            maskFormat='****1111'
+            defaultValue='12345678'
+          />
+        </form>
+      </ThemeContextProvider>
+    );
+
+    const form = screen.getByTestId('form') as HTMLFormElement;
+    expect(new FormData(form).get('accountNumber')).toBe('12345678');
+  });
+
+  test('resynchronises the mask after a native form reset', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <form data-testid='form'>
+          <ConfidentialInput
+            maskFormat={(value) => value}
+            defaultValue='1234'
+          />
+        </form>
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByTestId('ucl-uikit-confidential-input');
+    const form = screen.getByTestId('form') as HTMLFormElement;
+
+    await user.clear(input);
+    await user.type(input, '9876');
+
+    await user.tab();
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('9876');
+
+    form.reset();
+
+    await waitFor(() => {
+      expect(input).toHaveValue('1234');
+      expect(
+        screen.getByTestId('ucl-uikit-confidential-input-mask')
+      ).toHaveTextContent('1234');
+    });
+  });
+
+  test('shows the raw value while editing a non-showable value', async () => {
+    const user = userEvent.setup();
+    renderInput({
+      maskFormat: '**-**-11',
+      defaultValue: '123472',
+    });
+
+    const input = screen.getByTestId(
+      'ucl-uikit-confidential-input'
+    ) as HTMLInputElement;
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+
+    await user.click(input);
+
+    expect(input).toHaveAttribute('type', 'text');
+    expect(input).toHaveValue('123472');
+    expect(
+      screen.queryByTestId('ucl-uikit-confidential-input-mask')
+    ).not.toBeInTheDocument();
+
+    await user.tab();
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+  });
+
+  test('uses native password masking when visibleWhenFocused is false', async () => {
+    const user = userEvent.setup();
+    renderInput({
+      maskFormat: '**-**-11',
+      defaultValue: '123472',
+      visibleWhenFocused: false,
+    });
+
+    const input = screen.getByTestId(
+      'ucl-uikit-confidential-input'
+    ) as HTMLInputElement;
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+
+    await user.click(input);
+
+    expect(input).toHaveAttribute('type', 'password');
+    expect(
+      screen.queryByTestId('ucl-uikit-confidential-input-mask')
+    ).not.toBeInTheDocument();
+    input.setSelectionRange(4, 4);
+    expect(input.selectionStart).toBe(4);
+
+    await user.tab();
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+  });
+
+  test('shows the raw value while editing a showable value', async () => {
+    const user = userEvent.setup();
+    renderInput({
+      maskFormat: '**-**-11',
+      defaultValue: '123472',
+      showable: true,
+    });
+
+    const input = screen.getByTestId(
+      'ucl-uikit-confidential-input'
+    ) as HTMLInputElement;
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+
+    await user.click(input);
+
+    expect(input).toHaveAttribute('type', 'text');
+    expect(
+      screen.queryByTestId('ucl-uikit-confidential-input-mask')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Show confidential value' })
+    ).toHaveAttribute('aria-pressed', 'false');
+    input.setSelectionRange(4, 4);
+    expect(input.selectionStart).toBe(4);
+
+    await user.tab();
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+  });
+
+  test('supports a right icon alongside the visibility control', () => {
+    renderInput({
+      maskFormat: '****',
+      defaultValue: '1234',
+      showable: true,
+      icon: <Icon.Search testId='right-icon' />,
+      iconPosition: 'right',
+    });
+
+    expect(screen.getByTestId('right-icon').parentElement).toHaveStyle({
+      right: '48px',
+    });
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-visibility-toggle')
+        .parentElement
+    ).toHaveStyle({ right: '16px' });
+  });
+
+  test('disables the visibility control with the input', () => {
+    renderInput({
+      maskFormat: '****',
+      defaultValue: '1234',
+      showable: true,
+      disabled: true,
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Show confidential value' })
+    ).toBeDisabled();
+  });
+
+  test('inherits its disabled state from Field', () => {
+    render(
+      <ThemeContextProvider>
+        <Field disabled>
+          <ConfidentialInput
+            maskFormat='****'
+            defaultValue='1234'
+            showable
+          />
+        </Field>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('ucl-uikit-confidential-input')).toBeDisabled();
+    expect(
+      screen.getByRole('button', { name: 'Show confidential value' })
+    ).toBeDisabled();
+  });
+
+  test('forwards its ref to the input', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <ThemeContextProvider>
+        <ConfidentialInput
+          ref={ref}
+          maskFormat='****'
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(ref.current).toBe(
+      screen.getByTestId('ucl-uikit-confidential-input')
+    );
+  });
+});

package/lib/components/ConfidentialInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ConfidentialInput';
+export type { ConfidentialInputProps } from './ConfidentialInput';

package/lib/components/Input/Input.tsx

@@ -88,13 +88,24 @@ const Input = forwardRef<Ref, InputProps>(
       padding-right: ${theme.padding.p48};
     `;
 
+    const padRightForTwoControlsStyle = css`
+      padding-right: ${theme.padding.p80};
+    `;
+
+    const hasRightIconAndButton = Boolean(
+      icon && iconPosition === 'right' && iconButton
+    );
+
     const inputStyle = cx(
       INPUT_NAME,
       inputBaseStyle,
       !disabled && activeAndFocusStyle,
       disabled && disabledStyle,
       icon && iconPosition === 'left' && padLeftStyle,
-      ((icon && iconPosition === 'right') || iconButton) && padRightStyle,
+      ((icon && iconPosition === 'right') || iconButton) &&
+        !hasRightIconAndButton &&
+        padRightStyle,
+      hasRightIconAndButton && padRightForTwoControlsStyle,
       inputClassName
     );
 
@@ -126,10 +137,15 @@ const Input = forwardRef<Ref, InputProps>(
       right: ${theme.padding.p16};
     `;
 
+    const rightIconWithButtonPositionStyle = css`
+      right: ${theme.padding.p48};
+    `;
+
     const iconWrapperStyle = cx(
       iconWrapperBaseStyle,
       iconPosition === 'left' && leftPositionStyle,
-      iconPosition === 'right' && rightPositionStyle
+      iconPosition === 'right' &&
+        (iconButton ? rightIconWithButtonPositionStyle : rightPositionStyle)
     );
 
     const iconButtonStyle = cx(iconWrapperBaseStyle, rightPositionStyle);

package/lib/components/Input/__tests__/Input.test.tsx

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Input from '../Input';
 import { ThemeContextProvider } from '../../../theme/useTheme';
+import Icon from '../../Icon';
+import IconButton from '../../IconButton';
 
 describe('Input', () => {
   // Snapshot tests
@@ -105,4 +107,36 @@ describe('Input', () => {
     const input = screen.getByRole('textbox') as HTMLInputElement;
     expect(input.id).toBe('custom-id');
   });
+
+  test('positions a right icon before an icon button', () => {
+    render(
+      <ThemeContextProvider>
+        <Input
+          icon={
+            <Icon.Search
+              testId='right-icon'
+              aria-hidden='true'
+            />
+          }
+          iconPosition='right'
+          iconButton={
+            <IconButton
+              testId='icon-button'
+              aria-label='Search'
+            >
+              <Icon.Search />
+            </IconButton>
+          }
+        />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByTestId('ucl-uikit-input');
+    const iconWrapper = screen.getByTestId('right-icon').parentElement;
+    const buttonWrapper = screen.getByTestId('icon-button').parentElement;
+
+    expect(input).toHaveStyle({ paddingRight: '80px' });
+    expect(iconWrapper).toHaveStyle({ right: '48px' });
+    expect(buttonWrapper).toHaveStyle({ right: '16px' });
+  });
 });

package/lib/components/index.ts

@@ -4,6 +4,9 @@ export type { IconProps } from './Icon';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';
 
+export { default as ConfidentialInput } from './ConfidentialInput';
+export type { ConfidentialInputProps } from './ConfidentialInput';
+
 export { default as Link } from './Link';
 export type { LinkProps } from './Link';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.47.2",
+  "version": "0.48.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",