uikit-react-public 0.49.0 → 0.49.1

package/lib/components/ConfidentialDisplayField/ConfidentialDisplayField.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
   tags: ['autodocs'],
   args: {
     value: '12345678',
-    maskFormat: '******11',
+    maskFormat: '******##',
   },
 } satisfies Meta<typeof ConfidentialDisplayField>;
 
@@ -29,7 +29,8 @@ export const Showable: Story = {
 export const WithSeparators: Story = {
   args: {
     value: '123472',
-    maskFormat: '**-**-11',
+    maskFormat: '****##',
+    format: '##-##-##',
     showable: true,
   },
 };

package/lib/components/ConfidentialDisplayField/ConfidentialDisplayField.tsx

@@ -22,6 +22,7 @@ const ConfidentialDisplayField = forwardRef<Ref, ConfidentialDisplayFieldProps>(
   (
     {
       value,
+      numeric,
       maskFormat,
       showable = false,
       testId = NAME,
@@ -67,6 +68,7 @@ const ConfidentialDisplayField = forwardRef<Ref, ConfidentialDisplayFieldProps>(
           {...props}
           ref={ref}
           value={displayedValue}
+          numeric={numeric ?? typeof value === 'number'}
           testId={testId}
           noMargins
         />

package/lib/components/ConfidentialDisplayField/Documentation.mdx

@@ -13,13 +13,14 @@ import {
 <Subtitle>A DisplayField that masks confidential values</Subtitle>
 
 `ConfidentialDisplayField` extends `DisplayField` with the same simple mask
-format used by `ConfidentialInput`. `1` reveals a value character, `*` masks it
+format used by `ConfidentialInput`. `#` reveals a value character, `*` masks it
 with a `•`, and other characters are displayed as separators.
 
 <Source
   code={`<ConfidentialDisplayField
-  value='12345678'
-  maskFormat='******11'
+  value='123472'
+  maskFormat='****##'
+  format='##-##-##'
   showable
 />`}
 />
@@ -31,6 +32,8 @@ with a `•`, and other characters are displayed as separators.
   or formatter.
 - `showable`: **boolean** - Adds a button that toggles the original value.
   Defaults to `false`.
+- `format`: **string | (value: string) => string** - Formats both the masked
+  and visible values using the `DisplayField` format syntax.
 - All `DisplayField` props are supported.
 
 <ArgTypes />

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

@@ -18,7 +18,7 @@ describe('ConfidentialDisplayField', () => {
   test('applies a string mask', () => {
     renderDisplayField({
       value: '12345678',
-      maskFormat: '******11',
+      maskFormat: '******##',
     });
 
     expect(
@@ -40,7 +40,7 @@ describe('ConfidentialDisplayField', () => {
   test('does not add a visibility control by default', () => {
     renderDisplayField({
       value: '12345678',
-      maskFormat: '******11',
+      maskFormat: '******##',
     });
 
     expect(
@@ -52,7 +52,7 @@ describe('ConfidentialDisplayField', () => {
     const user = userEvent.setup();
     renderDisplayField({
       value: '12345678',
-      maskFormat: '******11',
+      maskFormat: '******##',
       showable: true,
     });
 
@@ -72,6 +72,25 @@ describe('ConfidentialDisplayField', () => {
     expect(output).toHaveTextContent('••••••78');
   });
 
+  test('formats both masked and visible values', async () => {
+    const user = userEvent.setup();
+    renderDisplayField({
+      value: '123472',
+      maskFormat: '****##',
+      format: '##-##-##',
+      showable: true,
+    });
+
+    const output = screen.getByTestId('ucl-uikit-confidential-display-field');
+    expect(output).toHaveTextContent('••-••-72');
+
+    await user.click(
+      screen.getByRole('button', { name: 'Show confidential value' })
+    );
+
+    expect(output).toHaveTextContent('12-34-72');
+  });
+
   test('forwards its ref to the output', () => {
     const ref = createRef<HTMLOutputElement>();
     render(
@@ -79,7 +98,7 @@ describe('ConfidentialDisplayField', () => {
         <ConfidentialDisplayField
           ref={ref}
           value='12345678'
-          maskFormat='******11'
+          maskFormat='******##'
         />
       </ThemeContextProvider>
     );
@@ -95,7 +114,7 @@ describe('ConfidentialDisplayField', () => {
       <ThemeContextProvider>
         <ConfidentialDisplayField
           value='12345678'
-          maskFormat='******11'
+          maskFormat='******##'
           showable
         />
       </ThemeContextProvider>
@@ -112,7 +131,7 @@ describe('ConfidentialDisplayField', () => {
       <ThemeContextProvider>
         <ConfidentialDisplayField
           value='12345678'
-          maskFormat='******11'
+          maskFormat='******##'
           showable={false}
         />
       </ThemeContextProvider>

package/lib/components/ConfidentialInput/ConfidentialInput.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   args: {
     'aria-label': 'Account number',
     defaultValue: '12345678',
-    maskFormat: '****1111',
+    maskFormat: '****####',
   },
 } satisfies Meta<typeof ConfidentialInput>;
 
@@ -31,7 +31,7 @@ export const WithSeparators: Story = {
   args: {
     'aria-label': 'Sort code',
     defaultValue: '123472',
-    maskFormat: '**-**-11',
+    maskFormat: '**-**-##',
     showable: true,
   },
 };

package/lib/components/ConfidentialInput/ConfidentialInput.tsx

@@ -19,6 +19,7 @@ import marginsStyle from '../common/marginsStyle';
 import formatConfidentialValue, {
   MaskFormat,
 } from '../common/formatConfidentialValue';
+import formatDisplayValue from '../common/formatDisplayValue';
 
 export const NAME = 'ucl-uikit-confidential-input';
 
@@ -46,6 +47,7 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
       maskFormat,
       showable = false,
       visibleWhenFocused = true,
+      format,
       value,
       defaultValue,
       disabled,
@@ -125,8 +127,14 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
       stringValue,
       maskFormat
     );
-    const configuredMaskIsVisible =
-      !valueIsPersistentlyShown && !isFocused && stringValue.length > 0;
+    const configuredValueIsVisible =
+      !isFocused &&
+      stringValue.length > 0 &&
+      (!valueIsPersistentlyShown || Boolean(format));
+    const configuredValue = formatDisplayValue(
+      valueIsPersistentlyShown ? stringValue : displayedMaskedValue,
+      format
+    );
 
     const wrapperStyle = cx(
       NAME,
@@ -232,7 +240,7 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
           iconPosition={iconPosition}
           iconButton={visibilityButton}
           inputClassName={cx(
-            configuredMaskIsVisible && hiddenInputStyle,
+            configuredValueIsVisible && hiddenInputStyle,
             inputClassName
           )}
           testId={testId}
@@ -241,13 +249,13 @@ const ConfidentialInput = forwardRef<Ref, ConfidentialInputProps>(
           onFocus={handleFocus}
           onBlur={handleBlur}
         />
-        {configuredMaskIsVisible && (
+        {configuredValueIsVisible && (
           <span
             className={maskStyle}
             data-testid={`${testId}-mask`}
             aria-hidden='true'
           >
-            {displayedMaskedValue}
+            {configuredValue}
           </span>
         )}
       </span>

package/lib/components/ConfidentialInput/Documentation.mdx

@@ -19,7 +19,7 @@ change events, and form submission while displaying a masked value.
 
 ## Usage
 
-The string mask is a simple template. `1` reveals the corresponding value
+The string mask is a simple template. `#` reveals the corresponding value
 character, `*` masks it with a `•`, and all other characters are displayed as
 separators. Asterisks returned by a formatter function are also displayed as
 bullets. Focusing the input temporarily reveals the original value for editing,
@@ -32,7 +32,7 @@ value. The configured mask returns on blur.
 <Source
   code={`<ConfidentialInput
   defaultValue='12345678'
-  maskFormat='****1111'
+  maskFormat='****####'
   showable
   aria-label='Account number'
 />`}
@@ -58,6 +58,8 @@ A function can be supplied when the template syntax is not sufficient:
 - `visibleWhenFocused`: **boolean** - Reveals the original value while focused.
   When `false`, the native password mask is shown while editing. Defaults to
   `true`.
+- `format`: **string | (value: string) => string** - Formats both the masked
+  and visible values while blurred using the `Input` format syntax.
 - All `Input` props except `type` and `iconButton` are supported.
 
 <ArgTypes />

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

@@ -17,7 +17,7 @@ const renderInput = (props: React.ComponentProps<typeof ConfidentialInput>) =>
 describe('ConfidentialInput', () => {
   test('applies a string mask without changing the input value', () => {
     renderInput({
-      maskFormat: '1111****',
+      maskFormat: '####****',
       value: '12345678',
       onChange: () => {},
     });
@@ -32,7 +32,7 @@ describe('ConfidentialInput', () => {
 
   test('supports separators and masks characters beyond the template', () => {
     renderInput({
-      maskFormat: '**-**-11',
+      maskFormat: '**-**-##',
       value: '1234729',
       onChange: () => {},
     });
@@ -68,7 +68,7 @@ describe('ConfidentialInput', () => {
   test('toggles between the masked and shown value', async () => {
     const user = userEvent.setup();
     renderInput({
-      maskFormat: '****1111',
+      maskFormat: '****####',
       defaultValue: '12345678',
       showable: true,
     });
@@ -131,7 +131,7 @@ describe('ConfidentialInput', () => {
         <form data-testid='form'>
           <ConfidentialInput
             name='accountNumber'
-            maskFormat='****1111'
+            maskFormat='****####'
             defaultValue='12345678'
           />
         </form>
@@ -180,7 +180,7 @@ describe('ConfidentialInput', () => {
   test('shows the raw value while editing a non-showable value', async () => {
     const user = userEvent.setup();
     renderInput({
-      maskFormat: '**-**-11',
+      maskFormat: '**-**-##',
       defaultValue: '123472',
     });
 
@@ -209,7 +209,7 @@ describe('ConfidentialInput', () => {
   test('uses native password masking when visibleWhenFocused is false', async () => {
     const user = userEvent.setup();
     renderInput({
-      maskFormat: '**-**-11',
+      maskFormat: '**-**-##',
       defaultValue: '123472',
       visibleWhenFocused: false,
     });
@@ -240,7 +240,7 @@ describe('ConfidentialInput', () => {
   test('shows the raw value while editing a showable value', async () => {
     const user = userEvent.setup();
     renderInput({
-      maskFormat: '**-**-11',
+      maskFormat: '**-**-##',
       defaultValue: '123472',
       showable: true,
     });
@@ -289,6 +289,32 @@ describe('ConfidentialInput', () => {
     ).toHaveStyle({ right: '16px' });
   });
 
+  test('formats both masked and visible values while blurred', async () => {
+    const user = userEvent.setup();
+    renderInput({
+      value: '123472',
+      maskFormat: '****##',
+      format: '##-##-##',
+      showable: true,
+      onChange: () => {},
+    });
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('••-••-72');
+
+    await user.click(
+      screen.getByRole('button', { name: 'Show confidential value' })
+    );
+
+    expect(
+      screen.getByTestId('ucl-uikit-confidential-input-mask')
+    ).toHaveTextContent('12-34-72');
+    expect(screen.getByTestId('ucl-uikit-confidential-input')).toHaveValue(
+      '123472'
+    );
+  });
+
   test('disables the visibility control with the input', () => {
     renderInput({
       maskFormat: '****',

package/lib/components/DisplayField/DisplayField.stories.tsx

@@ -24,3 +24,25 @@ export const Number: Story = {
     value: 12345678,
   },
 };
+
+export const NumericString: Story = {
+  args: {
+    value: '00123456',
+    numeric: true,
+  },
+};
+
+export const StringFormat: Story = {
+  args: {
+    value: '112233',
+    numeric: true,
+    format: '##-##-##',
+  },
+};
+
+export const FunctionFormat: Story = {
+  args: {
+    value: 1234.5,
+    format: (value) => `£${value}`,
+  },
+};

package/lib/components/DisplayField/DisplayField.tsx

@@ -3,6 +3,9 @@ import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import { FieldContext } from '../Field';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import formatDisplayValue, {
+  DisplayValueFormat,
+} from '../common/formatDisplayValue';
 
 export const NAME = 'ucl-uikit-display-field';
 
@@ -11,6 +14,8 @@ export interface DisplayFieldBaseProps extends Omit<
   'children' | 'value'
 > {
   value: string | number;
+  numeric?: boolean;
+  format?: DisplayValueFormat;
   testId?: string;
 }
 
@@ -19,21 +24,28 @@ export type DisplayFieldProps = DisplayFieldBaseProps & MarginProps;
 export type Ref = HTMLOutputElement;
 
 const DisplayField = forwardRef<Ref, DisplayFieldProps>(
-  ({ value, testId = NAME, className, ...props }, ref) => {
+  (
+    { value, numeric = false, format, testId = NAME, className, ...props },
+    ref
+  ) => {
     const [theme] = useTheme();
     const { id: contextId } = use(FieldContext);
     const id = props.id ?? contextId;
-    const { md } = theme.typography.body;
+    const useNumericTypography = typeof value === 'number' || numeric;
+    const typography = useNumericTypography
+      ? theme.typography.body.mdNumeric
+      : theme.typography.body.md;
+    const displayedValue = formatDisplayValue(String(value), format);
 
     const baseStyle = css`
       display: block;
       min-height: 24px;
       color: ${theme.colour.text.default};
-      font-family: ${md.fontFamily};
-      font-feature-settings: ${md.fontSettings};
-      font-size: ${md.fontSize}px;
-      font-weight: ${md.fontWeight};
-      line-height: ${md.lineHeight}%;
+      font-family: ${typography.fontFamily};
+      font-feature-settings: ${typography.fontSettings};
+      font-size: ${typography.fontSize}px;
+      font-weight: ${typography.fontWeight};
+      line-height: ${typography.lineHeight}%;
       overflow-wrap: anywhere;
     `;
 
@@ -47,7 +59,7 @@ const DisplayField = forwardRef<Ref, DisplayFieldProps>(
         className={style}
         data-testid={testId}
       >
-        {value}
+        {displayedValue}
       </output>
     );
   }

package/lib/components/DisplayField/Documentation.mdx

@@ -25,6 +25,12 @@ to display a record in the same field structure used by editable forms.
 ## Props
 
 - `value`: **string | number** - The value to display.
+- `numeric`: **boolean** - Applies numeric typography to string values. Number
+  values use numeric typography automatically. Defaults to `false`.
+- `format`: **string | (value: string) => string** - Formats the displayed
+  value. In a string template, each `#` consumes one value character and other
+  characters are displayed literally. For example, `##-##-##` formats `112233`
+  as `11-22-33`.
 - All standard HTML `<output>` props are supported.
 
 <ArgTypes />
@@ -33,3 +39,6 @@ to display a record in the same field structure used by editable forms.
 
 <Canvas of={DisplayFieldStories.Text} />
 <Canvas of={DisplayFieldStories.Number} />
+<Canvas of={DisplayFieldStories.NumericString} />
+<Canvas of={DisplayFieldStories.StringFormat} />
+<Canvas of={DisplayFieldStories.FunctionFormat} />

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

@@ -25,8 +25,43 @@ describe('DisplayField', () => {
   test('displays a numeric value', () => {
     renderDisplayField({ value: 12345678 });
 
+    const output = screen.getByTestId('ucl-uikit-display-field');
+    expect(output).toHaveTextContent('12345678');
+    expect(getComputedStyle(output).fontFamily).toContain('DM Mono');
+  });
+
+  test('uses numeric typography for a string when numeric is true', () => {
+    renderDisplayField({ value: '00123456', numeric: true });
+
+    expect(
+      getComputedStyle(screen.getByTestId('ucl-uikit-display-field')).fontFamily
+    ).toContain('DM Mono');
+  });
+
+  test('formats a value with a string template', () => {
+    renderDisplayField({ value: '112233', format: '##-##-##' });
+
+    expect(screen.getByTestId('ucl-uikit-display-field')).toHaveTextContent(
+      '11-22-33'
+    );
+  });
+
+  test('appends value characters beyond a string template', () => {
+    renderDisplayField({ value: '11223344', format: '##-##-##' });
+
+    expect(screen.getByTestId('ucl-uikit-display-field')).toHaveTextContent(
+      '11-22-3344'
+    );
+  });
+
+  test('formats a value with a function', () => {
+    renderDisplayField({
+      value: 1234.5,
+      format: (value) => `£${value}`,
+    });
+
     expect(screen.getByTestId('ucl-uikit-display-field')).toHaveTextContent(
-      '12345678'
+      '£1234.5'
     );
   });
 

package/lib/components/Input/Documentation.mdx

@@ -17,6 +17,7 @@ export const usage = {
   rightIcon: `<Input icon={<Icon.Settings />} iconPosition='right' type='password' />`,
   password: `<Input type='password' />`,
   email: `<Input type='email' icon={<Icon.Facebook />} iconPosition='left' />`,
+  formatted: `<Input defaultValue='112233' format='##-##-##' />`,
 };
 
 <Meta of={InputStories} />
@@ -47,6 +48,10 @@ Use the Input component wherever standard inputs are required with optional enha
 - `type`: **string** – Input type (e.g. `text`, `password`, `email`, etc.)
 - `disabled`: **boolean** – Disables the input field
 - `placeholder`: **string** – Placeholder text
+- `format`: **string | (value: string) => string** – Formats the displayed
+  value while the input is blurred. `#` consumes one raw value character;
+  other template characters are displayed literally. The raw value is shown
+  while focused and remains unchanged for events and form submission.
 - All standard HTML `<input>` props are supported
 
 # Variants
@@ -92,3 +97,9 @@ Use the Input component wherever standard inputs are required with optional enha
   sourceState='shown'
   source={{ code: usage.email }}
 />
+
+<Canvas
+  of={InputStories.Formatted}
+  sourceState='shown'
+  source={{ code: usage.formatted }}
+/>

package/lib/components/Input/Input.stories.tsx

@@ -58,3 +58,10 @@ export const Email: Story = {
     iconPosition: 'left',
   },
 };
+
+export const Formatted: Story = {
+  args: {
+    defaultValue: '112233',
+    format: '##-##-##',
+  },
+};