uikit-react-public 0.48.0 → 0.49.0

package/lib/components/DisplayField/DisplayField.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, memo, OutputHTMLAttributes, use } from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+import { FieldContext } from '../Field';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+
+export const NAME = 'ucl-uikit-display-field';
+
+export interface DisplayFieldBaseProps extends Omit<
+  OutputHTMLAttributes<HTMLOutputElement>,
+  'children' | 'value'
+> {
+  value: string | number;
+  testId?: string;
+}
+
+export type DisplayFieldProps = DisplayFieldBaseProps & MarginProps;
+
+export type Ref = HTMLOutputElement;
+
+const DisplayField = forwardRef<Ref, DisplayFieldProps>(
+  ({ value, testId = NAME, className, ...props }, ref) => {
+    const [theme] = useTheme();
+    const { id: contextId } = use(FieldContext);
+    const id = props.id ?? contextId;
+    const { md } = theme.typography.body;
+
+    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}%;
+      overflow-wrap: anywhere;
+    `;
+
+    const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+    return (
+      <output
+        {...props}
+        ref={ref}
+        id={id}
+        className={style}
+        data-testid={testId}
+      >
+        {value}
+      </output>
+    );
+  }
+);
+
+export default memo(DisplayField);

package/lib/components/DisplayField/Documentation.mdx

@@ -0,0 +1,35 @@
+import * as DisplayFieldStories from './DisplayField.stories';
+import {
+  Meta,
+  Title,
+  Subtitle,
+  Canvas,
+  Source,
+  ArgTypes,
+} from '@storybook/addon-docs/blocks';
+
+<Meta of={DisplayFieldStories} />
+<Title />
+<Subtitle>A read-only field for displaying a single value</Subtitle>
+
+`DisplayField` renders a semantic HTML `<output>` element. Use it with `Label`
+to display a record in the same field structure used by editable forms.
+
+<Source
+  code={`<Field>
+  <Label>Account name</Label>
+  <DisplayField value='Personal savings' />
+</Field>`}
+/>
+
+## Props
+
+- `value`: **string | number** - The value to display.
+- All standard HTML `<output>` props are supported.
+
+<ArgTypes />
+
+## Examples
+
+<Canvas of={DisplayFieldStories.Text} />
+<Canvas of={DisplayFieldStories.Number} />

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

@@ -0,0 +1,61 @@
+import { createRef } from 'react';
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import DisplayField from '../DisplayField';
+import Field from '../../Field';
+import Label from '../../Label';
+
+const renderDisplayField = (props: React.ComponentProps<typeof DisplayField>) =>
+  render(
+    <ThemeContextProvider>
+      <DisplayField {...props} />
+    </ThemeContextProvider>
+  );
+
+describe('DisplayField', () => {
+  test('displays a text value', () => {
+    renderDisplayField({ value: 'Personal savings' });
+
+    expect(screen.getByTestId('ucl-uikit-display-field')).toHaveTextContent(
+      'Personal savings'
+    );
+  });
+
+  test('displays a numeric value', () => {
+    renderDisplayField({ value: 12345678 });
+
+    expect(screen.getByTestId('ucl-uikit-display-field')).toHaveTextContent(
+      '12345678'
+    );
+  });
+
+  test('shares the Field id with its Label', () => {
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Label>Account name</Label>
+          <DisplayField value='Personal savings' />
+        </Field>
+      </ThemeContextProvider>
+    );
+
+    const label = screen.getByText('Account name');
+    const output = screen.getByTestId('ucl-uikit-display-field');
+    expect(label).toHaveAttribute('for', output.id);
+  });
+
+  test('forwards its ref to the output', () => {
+    const ref = createRef<HTMLOutputElement>();
+    render(
+      <ThemeContextProvider>
+        <DisplayField
+          ref={ref}
+          value='Personal savings'
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(ref.current).toBe(screen.getByTestId('ucl-uikit-display-field'));
+  });
+});

package/lib/components/DisplayField/index.ts

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

package/lib/components/common/formatConfidentialValue.ts

@@ -0,0 +1,36 @@
+export type MaskFormat = string | ((value: string) => string);
+
+const applyMaskTemplate = (value: string, template: string) => {
+  const valueCharacters = Array.from(value);
+  let valueIndex = 0;
+  let maskedValue = '';
+
+  for (const templateCharacter of Array.from(template)) {
+    if (valueIndex >= valueCharacters.length) break;
+
+    if (templateCharacter === '1') {
+      maskedValue += valueCharacters[valueIndex];
+      valueIndex += 1;
+    } else if (templateCharacter === '*') {
+      maskedValue += '*';
+      valueIndex += 1;
+    } else {
+      maskedValue += templateCharacter;
+    }
+  }
+
+  return (
+    maskedValue + '*'.repeat(Math.max(0, valueCharacters.length - valueIndex))
+  );
+};
+
+const formatConfidentialValue = (value: string, maskFormat: MaskFormat) => {
+  const maskedValue =
+    typeof maskFormat === 'function'
+      ? maskFormat(value)
+      : applyMaskTemplate(value, maskFormat);
+
+  return maskedValue.split('*').join('•');
+};
+
+export default formatConfidentialValue;

package/lib/components/index.ts

@@ -7,6 +7,12 @@ export type { InputProps } from './Input';
 export { default as ConfidentialInput } from './ConfidentialInput';
 export type { ConfidentialInputProps } from './ConfidentialInput';
 
+export { default as DisplayField } from './DisplayField';
+export type { DisplayFieldProps } from './DisplayField';
+
+export { default as ConfidentialDisplayField } from './ConfidentialDisplayField';
+export type { ConfidentialDisplayFieldProps } from './ConfidentialDisplayField';
+
 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.48.0",
+  "version": "0.49.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",