@transferwise/components 46.97.3 → 46.97.5

package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts

@@ -1,7 +1,8 @@
 /**
  *
  * @param phoneNumber
- * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
+ * @returns True if number that starts with "+" and contains a mix of digits and spaces with a configurable min length that defaults to 4.
  */
-export const isValidPhoneNumber = (phoneNumber: string) =>
-  /^\+[\d-\s]+$/.test(phoneNumber) && (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= 4;
+export const isValidPhoneNumber = (phoneNumber: string, minLength = 4) =>
+  /^\+[\d-\s]+$/.test(phoneNumber) &&
+  (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= minLength;

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveAnchor from '..';
 
-export default {
+const meta: Meta<typeof PrimitiveAnchor> = {
   component: PrimitiveAnchor,
   title: 'Primitives/Anchor',
   args: {
@@ -16,7 +16,8 @@ export default {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PrimitiveAnchor>;
+};
+export default meta;
 
 type Story = StoryObj<typeof PrimitiveAnchor>;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveButton from '..';
 
-export default {
+const meta: Meta<typeof PrimitiveButton> = {
   component: PrimitiveButton,
   title: 'Primitives/Button',
   args: {
@@ -15,7 +15,8 @@ export default {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PrimitiveButton>;
+};
+export default meta;
 
 type Story = StoryObj<typeof PrimitiveButton>;
 

package/src/radioGroup/RadioGroup.story.tsx

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     selectedValue: 'radio-2',
     name: 'radio-group',
@@ -45,7 +45,7 @@ export const WithAvatars = {
   ...Basic,
   args: {
     ...Basic.args,
-    radios: Basic.args.radios.map(
+    radios: Basic?.args?.radios?.map(
       (radio) =>
         ({
           ...radio,

package/src/tabs/Tabs.spec.tsx

@@ -0,0 +1,137 @@
+import { Globals } from '@react-spring/web';
+import { render, screen, userEvent } from '../test-utils';
+import Tabs, { TabsProps } from './Tabs';
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+if (typeof performance === 'undefined') {
+  global.performance = { now: () => Date.now() } as Performance;
+}
+
+const defaultTabsStatus = [false, true, false];
+
+function generateTabs(tabsStatus = defaultTabsStatus) {
+  return tabsStatus.map((disabled, index) => ({
+    disabled,
+    title: `Title ${index}`,
+    content: <p data-testid={`content-${index}`}>Content {index}</p>,
+  }));
+}
+
+beforeAll(() => {
+  Globals.assign({
+    skipAnimation: true,
+  });
+});
+
+describe('Tabs', () => {
+  const initialProps: TabsProps = {
+    animatePanelsOnClick: true,
+    tabs: generateTabs(),
+    changeTabOnSwipe: true,
+    name: 'testName',
+    headerWidth: 'block',
+    selected: 0,
+    transitionSpacing: 'default',
+    onTabSelect: jest.fn(),
+    className: 'custom-class-name',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(async () => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('should render a tablist', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+
+  it('should respect className', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getByRole('tablist').parentNode).toHaveClass(String(initialProps.className));
+  });
+
+  it('should respect `name` prop', () => {
+    render(<Tabs {...initialProps} />);
+    const controlsTarget = screen
+      .getByRole('tab', { selected: true })
+      .getAttribute('aria-controls');
+    expect(screen.getByRole('tabpanel')).toHaveAttribute('id', controlsTarget);
+  });
+
+  describe('transitionSpacing', () => {
+    test.each([
+      ['default', '100%'],
+      ['xs', '8px'],
+      ['sm', '16px'],
+      ['md', '24px'],
+      ['lg', '32px'],
+    ] as const)('should respect `%s`', (input, width) => {
+      render(<Tabs {...initialProps} transitionSpacing={input} />);
+      expect(screen.getByRole('tabpanel').nextSibling).toHaveStyle({ width });
+    });
+  });
+
+  it('should render correct number of tabs', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getAllByRole('tab')).toHaveLength(defaultTabsStatus.length);
+    initialProps.tabs.forEach(({ title }) => {
+      expect(screen.getByText(title)).toBeInTheDocument();
+    });
+  });
+
+  it('should show first tab content by default', () => {
+    render(<Tabs {...initialProps} />);
+    expect(screen.getAllByRole('tabpanel')).toHaveLength(1);
+    expect(screen.getByTestId('content-0')).toBeInTheDocument();
+  });
+
+  describe('tab switch', () => {
+    it('should call onTabSelecton on click', async () => {
+      render(<Tabs {...initialProps} />);
+      const thirdTab = screen.getAllByRole('tab')[2];
+      await user.click(thirdTab);
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should call onTabSelecton when navigating with keyboard', async () => {
+      render(<Tabs {...initialProps} />);
+      await user.keyboard('{Tab}{Tab}{Tab}{Enter}');
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should call onTabSelecton on swipe', async () => {
+      render(<Tabs {...initialProps} />);
+      await user.keyboard('{Tab}{Tab}{Tab}{Enter}');
+
+      // It's called on mount first, that's why the count is at 2
+      expect(initialProps.onTabSelect).toHaveBeenCalledTimes(2);
+      expect(initialProps.onTabSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should highlight selected tab', async () => {
+      const { rerender } = render(<Tabs {...initialProps} />);
+      rerender(<Tabs {...initialProps} selected={2} />);
+
+      expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Title 2');
+    });
+
+    it('should switch content tab', async () => {
+      const { rerender } = render(<Tabs {...initialProps} />);
+      rerender(<Tabs {...initialProps} selected={2} />);
+      expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 2');
+    });
+  });
+});

package/src/tabs/Tabs.story.tsx

@@ -7,6 +7,7 @@ import Tabs from './Tabs';
 export default {
   component: Tabs,
   title: 'Navigation/Tabs',
+  tags: ['autodocs'],
 };
 
 export const Basic = () => {

package/src/tabs/Tabs.tsx

@@ -403,7 +403,6 @@ export default class Tabs extends Component<TabsProps, TabsState> {
 
     if (isSwiping) {
       const nextSelected = this.getTabToSelect(currentSelectedFromProps, start, end);
-
       this.animateLine(
         this.swipedOverHalfOfContainer(difference) ? nextSelected : currentSelectedFromProps,
       );

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.spec.js

@@ -1,17 +1,18 @@
-import { shallow } from 'enzyme';
-
-import { TextArea } from '../inputs/TextArea';
-
+import { render, screen, userEvent } from '../test-utils';
 import TextareaWithDisplayFormat from '.';
 
 describe('TextareaWithDisplayFormat', () => {
   const props = { displayPattern: '**-**', onChange: jest.fn() };
 
   it('should render input with value prop', () => {
-    const view = shallow(<TextareaWithDisplayFormat {...props} />)
-      .find('WithDisplayFormat')
-      .renderProp('render')({ value: 'test' });
+    render(<TextareaWithDisplayFormat {...props} value="test" />);
+    expect(screen.getByRole('textbox')).toHaveValue('te-st');
+  });
 
-    expect(view.find(TextArea).props('value')).toStrictEqual({ value: 'test' });
+  it('should format as you type', async () => {
+    render(<TextareaWithDisplayFormat {...props} />);
+    await userEvent.tab();
+    await userEvent.keyboard('1234');
+    expect(screen.getByRole('textbox')).toHaveValue('12-34');
   });
 });

package/src/typeahead/Typeahead.story.tsx

@@ -22,7 +22,7 @@ const validateOptionAsEmail = (option: TypeaheadOption) => {
   );
 };
 
-export default {
+const meta: Meta<typeof Typeahead> = {
   component: Typeahead,
   title: 'Forms/Typeahead',
   args: {
@@ -54,7 +54,8 @@ export default {
       options: [Size.MEDIUM, Size.LARGE],
     },
   },
-} satisfies Meta<typeof Typeahead>;
+};
+export default meta;
 
 export const Basic: Story = {
   render: function Render(args) {

package/src/upload/Upload.css

@@ -29,3 +29,6 @@
 .upload-error-message .alert {
   min-width: 100px;
 }
+.np-theme-personal .droppable-dropping .droppable-complete-card {
+  display: none;
+}

package/src/upload/Upload.less

@@ -35,4 +35,10 @@
   .alert {
     min-width: 100px;
   }
-}
+}
+
+.np-theme-personal {
+  .droppable-dropping .droppable-complete-card  {
+    display: none;
+  }
+} 

package/src/upload/Upload.story.tsx

@@ -3,6 +3,7 @@ import { fn } from '@storybook/test';
 
 import Upload from '.';
 import { MAX_SIZE_DEFAULT } from './Upload';
+import { Field } from '../field/Field';
 
 const meta = {
   component: Upload,
@@ -21,7 +22,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     maxSize: MAX_SIZE_DEFAULT,
     usAccept: 'image/*',
@@ -37,3 +38,54 @@ export const Basic = {
     onCancel: fn(),
   },
 } satisfies Story;
+
+export const MaxSizes = () => {
+  const bKB = 1024;
+  const bMB = 1024 * bKB;
+
+  const dKB = 1000;
+  const dMB = 1000 * dKB;
+
+  const binarySizes = [
+    10 * bMB,
+    5 * bMB,
+    1 * bMB,
+    500 * bKB,
+    100 * bKB,
+    50 * bKB,
+    10 * bKB,
+    5 * bKB,
+    1 * bKB,
+  ];
+
+  const decimalSizes = [
+    10 * dMB,
+    5 * dMB,
+    1 * dMB,
+    500 * dKB,
+    100 * dKB,
+    50 * dKB,
+    10 * dKB,
+    5 * dKB,
+    1 * dKB,
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <div style={{ flex: 1 }}>
+        {binarySizes.map((maxSize) => (
+          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
+            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
+          </Field>
+        ))}
+      </div>
+      <div style={{ flex: 1 }}>
+        {decimalSizes.map((maxSize) => (
+          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
+            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
+          </Field>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/upload/Upload.tsx

@@ -120,7 +120,7 @@ export class Upload extends Component<UploadProps, UploadState> {
         return (
           csTooLargeMessage ||
           intl.formatMessage(messages.csTooLargeMessage, {
-            maxSize: maxSize / 1000000,
+            maxSize: roundFileSize(maxSize),
           })
         );
       case 415:
@@ -390,7 +390,7 @@ export class Upload extends Component<UploadProps, UploadState> {
             usLabel={usLabel}
             usPlaceholder={
               usPlaceholder ||
-              intl.formatMessage(messages.usPlaceholder, { maxSize: maxSize / 1000000 })
+              intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })
             }
           />
         )}
@@ -422,7 +422,7 @@ export class Upload extends Component<UploadProps, UploadState> {
             usLabel={usLabel}
             usPlaceholder={
               usPlaceholder ||
-              intl.formatMessage(messages.usPlaceholder, { maxSize: maxSize / 1000000 })
+              intl.formatMessage(messages.usPlaceholder, { maxSize: roundFileSize(maxSize) })
             }
             errorMessage={this.getErrorMessage(
               response != null &&
@@ -465,3 +465,15 @@ export class Upload extends Component<UploadProps, UploadState> {
 }
 
 export default injectIntl(Upload);
+
+const roundFileSize = (bytes: number) => {
+  const megabytes = bytes / 1000000;
+  if (megabytes >= 0.1) {
+    const isRound = Math.floor(megabytes) === megabytes;
+    return isRound ? `${megabytes}` : megabytes.toFixed(1);
+  }
+  if (megabytes >= 0.01) {
+    return megabytes.toFixed(2);
+  }
+  return megabytes.toFixed(3);
+};

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx

@@ -76,4 +76,19 @@ describe('uploadImageStep', () => {
     expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();
     expect(screen.getByText(errorMessage)).toBeInTheDocument();
   });
+
+  test('focuses on the upload input when label is clicked', () => {
+    const input = screen.getByLabelText(UPLOADIMAGE_STEP_PROPS.usButtonText);
+    input.focus();
+    expect(input).toHaveFocus();
+  });
+
+  test('triggers file selection on Enter key press', () => {
+    const input = screen.getByLabelText(UPLOADIMAGE_STEP_PROPS.usButtonText);
+    input.focus();
+    const event = new KeyboardEvent('keydown', { key: 'Enter' });
+    input.dispatchEvent(event);
+    expect(input).toHaveFocus();
+    expect(input).toHaveAttribute('type', 'file');
+  });
 });

package/src/upload/steps/uploadImageStep/uploadImageStep.tsx

@@ -28,6 +28,13 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     }
   };
 
+  onKeyDown = (event: React.KeyboardEvent<HTMLLabelElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.uploadInputRef.current?.click();
+    }
+  };
+
   getImage = () => {
     const { usHelpImage, usLabel } = this.props;
     const { errorMessage } = this.props;
@@ -78,6 +85,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
             role="button"
             aria-disabled={usDisabled}
             tabIndex={0}
+            onKeyDown={this.onKeyDown}
           >
             {usButtonText ? (
               <span>{usButtonText}</span>