@transferwise/components 46.141.0 → 46.143.0

package/src/inputs/TextArea.story.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Field } from '../field/Field';
+import { Sentiment } from '../common';
+import { TextArea } from './TextArea';
+
+/**
+ * TextArea must be the only input with `maxLength` inside a given Field.
+ * The character counter uses shared context — multiple TextAreas with maxLength
+ * in the same Field will race to set the counter state.
+ */
+const meta: Meta<typeof TextArea> = {
+  title: 'Forms/TextArea',
+  component: TextArea,
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+    maxLength: {
+      control: 'number',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    rows: {
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+/** Explore all props via the controls panel. */
+export const Playground: Story = {
+  args: {
+    value: '',
+    maxLength: 200,
+    placeholder: 'Type something...',
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value ?? '');
+    useEffect(() => setValue(args.value ?? ''), [args.value]);
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea {...args} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};
+
+export const Basic: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Field label="Message" required={false}>
+  <TextArea
+    maxLength={200}
+    value={value}
+    onChange={({ target }) => setValue(target.value)}
+  />
+</Field>`,
+      },
+    },
+  },
+};
+
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field
+        label="Message"
+        required={false}
+        sentiment={Sentiment.NEGATIVE}
+        message="You have exceeded the character limit"
+      >
+        <TextArea maxLength={200} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};

package/src/inputs/TextArea.test.story.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { userEvent, within } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Field } from '../field/Field';
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Forms/TextArea/Tests',
+  component: TextArea,
+  tags: ['!autodocs', '!manifest'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const AsciiCharacters: Story = {
+  name: 'counter at limit with ASCII input',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole('textbox'), '0123456789');
+  },
+};
+
+export const EmojiCharacters: Story = {
+  name: 'counter with emoji input',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕🐱💕');
+  },
+};
+
+export const EmojiAtLimit: Story = {
+  name: 'truncates emoji paste exceeding limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕🐱💕🐱💕🐱💕🐱💕🐱💕🐱💕');
+  },
+};
+
+export const CJKCharacters: Story = {
+  name: 'truncates CJK paste exceeding limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('吉𣘺吉𣘺吉𣘺吉𣘺吉𣘺吉𣘺');
+  },
+};
+
+export const InitialValueExceedsLimit: Story = {
+  name: 'initial value exceeding maxLength is preserved',
+  render: () => {
+    const [value, setValue] = useState('Hello World!');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+};
+
+export const EmojiTypingBlocked: Story = {
+  name: 'blocks emoji paste when already at limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('🐱💕');
+    await userEvent.paste('🎉🎉🎉');
+  },
+};
+
+export const CJKTypingBlocked: Story = {
+  name: 'blocks CJK paste when already at limit',
+  render: () => {
+    const [value, setValue] = useState('');
+
+    return (
+      <Field label="Message" required={false}>
+        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textarea = canvas.getByRole('textbox');
+    await userEvent.click(textarea);
+    await userEvent.paste('吉𣘺');
+    await userEvent.paste('吉𣘺吉𣘺吉𣘺');
+  },
+};

package/src/inputs/TextArea.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
 import { inputClassNameBase } from './_common';
-import { useInputAttributes } from './contexts';
+import { useTextareaCharacterCount, useInputAttributes } from './contexts';
 
 export interface TextAreaProps extends Merge<
   React.ComponentPropsWithRef<'textarea'>,
@@ -13,15 +13,20 @@ export interface TextAreaProps extends Merge<
 > {}
 
 export const TextArea = forwardRef(function TextArea(
-  { className, ...restProps }: TextAreaProps,
+  { className, maxLength, ...restProps }: TextAreaProps,
   reference: React.ForwardedRef<HTMLTextAreaElement | null>,
 ) {
   const inputAttributes = useInputAttributes();
+  const value = restProps.value ?? restProps.defaultValue ?? '';
+  const currentLength = typeof value === 'string' ? value.length : String(value).length;
+
+  useTextareaCharacterCount(currentLength, maxLength);
 
   return (
     <textarea
       ref={reference}
       className={clsx(className, inputClassNameBase(), 'np-text-area')}
+      maxLength={maxLength}
       {...inputAttributes}
       {...restProps}
     />

package/src/inputs/contexts.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 
 type FieldLabelContextType = {
   id?: string;
@@ -36,6 +36,23 @@ export function useFieldLabelRef() {
   return useContext(FieldLabelContext)?.ref;
 }
 
+export type TextareaCharacterCountState = { current: number; max: number } | null;
+
+const TextareaCharacterCountContext = createContext<
+  ((state: TextareaCharacterCountState) => void) | undefined
+>(undefined);
+export const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
+
+export function useTextareaCharacterCount(current: number, max: number | undefined) {
+  const setCharacterCount = useContext(TextareaCharacterCountContext);
+  useEffect(() => {
+    if (setCharacterCount && max != null) {
+      setCharacterCount({ current, max });
+      return () => setCharacterCount(null);
+    }
+  }, [setCharacterCount, current, max]);
+}
+
 export interface WithInputAttributesProps {
   inputAttributes: ReturnType<typeof useInputAttributes>;
 }

package/src/logo/Logo.tsx

@@ -92,7 +92,7 @@ const logoAssets: Record<LogoAssetName, () => JSX.Element> = {
 
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
- * and the full wordmark on ≥576px (small breakpoint and above).
+ * and the full wordmark on ≥600px (small breakpoint and above).
  *
  * @see {@link https://wise.design/foundations/logo Design Spec}
  */