@transferwise/components 0.0.0-experimental-cc8c25a → 0.0.0-experimental-1597e95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-cc8c25a",
+  "version": "0.0.0-experimental-1597e95",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/avatar/Avatar.story.tsx

@@ -7,6 +7,9 @@ import { storyConfig } from '../test-utils';
 
 import Avatar, { AvatarType } from '.';
 
+/**
+ * @deprecated use **`AvatarView`** components instead
+ */
 export default {
   component: Avatar,
   title: 'Content/Avatar',
@@ -45,7 +48,7 @@ export const Table: Story = storyConfig(
       const backgroundColor = '#d6f5e3';
       const emoji = '✈️';
       const initials = 'GN';
-      const Icon = wiseIcons['Check'];
+      const Icon = wiseIcons.Check;
 
       return (
         <div>

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -4,7 +4,11 @@ import { ProfileType, Sentiment } from '../common';
 
 import AvatarWrapper from './AvatarWrapper';
 
+/**
+ * @deprecated use **`AvatarView`** components instead
+ */
 export default {
+  tags: ['autodocs'],
   component: AvatarWrapper,
   title: 'Content/AvatarWrapper',
 } satisfies Meta<typeof AvatarWrapper>;

package/src/badge/Badge.story.tsx

@@ -5,7 +5,11 @@ import { Size, Theme } from '../common';
 
 import Badge from './Badge';
 
+/**
+ * @deprecated use **`<AvatarView badge={..} />`** components instead
+ */
 export default {
+  tags: ['autodocs'],
   component: Badge,
   title: 'Content/Badge',
   excludeStories: ['ExampleBadgeCss'],

package/src/moneyInput/MoneyInput.spec.tsx

@@ -1,8 +1,9 @@
 import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
 
-import { MoneyInput, CurrencyItem, CurrencyOptionItem } from '..';
+import { MoneyInput, CurrencyItem, CurrencyOptionItem, Field } from '..';
 import { MoneyInputPropsWithInputAttributes } from './MoneyInput';
 import { within } from '@testing-library/react';
+import messages from './MoneyInput.messages';
 
 mockMatchMedia();
 mockResizeObserver();
@@ -96,11 +97,6 @@ describe('Money Input', () => {
     });
   });
 
-  it('renders Select component with generated id when id is not provided', () => {
-    customRender();
-    expect(getTrigger()).toHaveAttribute('id');
-  });
-
   it('shows the currently active currency as active and hides its note', () => {
     customRender({ selectedCurrency: popularCurrencies[0] });
     expect(getTrigger()).toHaveTextContent(popularCurrencies[0].label);
@@ -247,11 +243,6 @@ describe('Money Input', () => {
     expect(initialProps.onAmountChange).toHaveBeenCalledWith(null);
   });
 
-  it('passes the id given to the input element', () => {
-    customRender({ id: 'some-id' });
-    expect(getInput()).toHaveAttribute('id', 'some-id');
-  });
-
   it('renders addon when element is passed through props', () => {
     const addonElement = <span data-testid="test-addon" />;
     customRender({ addon: addonElement });
@@ -377,4 +368,101 @@ describe('Money Input', () => {
     });
     expect(screen.getAllByRole('group')[1]).toHaveClass('selectClassName');
   });
+
+  describe('text input', () => {
+    it.each([
+      ['asd', ''],
+      ['1a2s3d', '123'],
+      ['±!@#$^*_+?><', ''],
+      ['1±!@#$^*,_+?><2', '1,2'],
+      ['12,3', '12,3'],
+      ['12.3', '12.3'],
+    ])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
+      customRender({ amount: null });
+      await userEvent.type(getInput(), testValue);
+      expect(getInput()).toHaveValue(expectedValue);
+    });
+  });
+
+  it('supports custom `aria-labelledby` attribute', () => {
+    render(
+      <>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label id="prioritized-label">Prioritized label</label>
+        <MoneyInput {...initialProps} aria-labelledby="prioritized-label" />
+      </>,
+    );
+
+    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
+  });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Recipient gets">
+        <MoneyInput {...initialProps} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
+  });
+
+  describe('ids', () => {
+    it('renders Select component with generated id when id is not provided', () => {
+      customRender();
+      expect(getTrigger()).toHaveAttribute('id');
+    });
+
+    it('passes the id given to the input element', () => {
+      customRender({ id: 'some-id' });
+      expect(getInput()).toHaveAttribute('id', 'some-id');
+    });
+
+    it('should guarantee id and connect the input with the selected currency via withId HoC', () => {
+      customRender();
+      expect(getInput().getAttribute('id')).toBeTruthy();
+      expect(getInput()).toHaveAttribute('aria-describedby', getTrigger().getAttribute('id'));
+    });
+
+    it('should have unique id for the select filter with predefined id', async () => {
+      const fieldId = 'myFieldId';
+      const searchPlaceholder = 'Type a currency or country';
+      render(
+        <Field label="Multiple currencies" id={fieldId}>
+          <MoneyInput {...initialProps} searchPlaceholder={searchPlaceholder} />
+        </Field>,
+      );
+      await openDropdown();
+      expect(screen.getByLabelText(searchPlaceholder)).toHaveAttribute(
+        'id',
+        `${fieldId}SelectedCurrencySearch`,
+      );
+    });
+
+    it('should have unique id for the select filter without predefined id', async () => {
+      const searchPlaceholder = 'Type a currency or country';
+      render(
+        <Field label="Multiple currencies">
+          <MoneyInput {...initialProps} searchPlaceholder={searchPlaceholder} />
+        </Field>,
+      );
+      await openDropdown();
+      expect(screen.getByLabelText(searchPlaceholder)).toHaveAttribute(
+        'id',
+        expect.stringMatching(/^:.*?:SelectedCurrencySearch$/),
+      );
+    });
+  });
+
+  it('should have AT label for the currency dropdown', () => {
+    customRender();
+    expect(getTrigger()).toHaveAttribute('aria-label', messages.selectCurrencyLabel.defaultMessage);
+  });
+
+  it('should have a listbox label', async () => {
+    customRender();
+    const trigger = getTrigger();
+    await openDropdown();
+    const triggerLabel = trigger.getAttribute('aria-label');
+    expect(triggerLabel).toBeTruthy();
+    expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
+  });
 });

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -1,149 +0,0 @@
-import { Field } from '../field/Field';
-import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
-
-import MoneyInput from './MoneyInput';
-import messages from './MoneyInput.messages';
-
-mockMatchMedia();
-mockResizeObserver();
-
-describe('MoneyInput', () => {
-  const currencies = [
-    {
-      header: 'Popular currencies',
-    },
-    {
-      value: 'EUR',
-      label: 'EUR',
-      note: 'Euro',
-      currency: 'eur',
-      searchable: 'Spain, Germany, France, Austria, Estonia',
-    },
-    {
-      value: 'USD',
-      label: 'USD',
-      note: 'United States dollar',
-      currency: 'usd',
-      searchable: 'Hong Kong, Saudi Arabia',
-    },
-    {
-      value: 'GBP',
-      label: 'GBP',
-      note: 'British pound',
-      currency: 'gbp',
-      searchable: 'England, Scotland, Wales',
-    },
-    {
-      header: 'Some other currencies',
-    },
-    {
-      value: 'CAD',
-      label: 'CAD',
-      note: 'Canadian dollar',
-      currency: 'cad',
-    },
-    {
-      value: 'AUD',
-      label: 'AUD',
-      note: 'Australian dollar',
-      currency: 'aud',
-    },
-  ] as const;
-  const props = {
-    currencies,
-    selectedCurrency: currencies[1],
-    searchPlaceholder: 'Type a currency / country',
-    amount: 1000,
-    onAmountChange: jest.fn(),
-    onCurrencyChange: jest.fn(),
-  };
-  it.each([
-    ['asd', ''],
-    ['1a2s3d', '123'],
-    ['±!@#$^*_+?><', ''],
-    ['1±!@#$^*,_+?><2', '1,2'],
-    ['12,3', '12,3'],
-    ['12.3', '12.3'],
-  ])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
-    render(<MoneyInput {...props} amount={null} />);
-
-    const input = screen.getByRole('textbox');
-    await userEvent.type(input, testValue);
-    expect(input).toHaveValue(expectedValue);
-  });
-
-  it('supports custom `aria-labelledby` attribute', () => {
-    render(
-      <>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label id="prioritized-label">Prioritized label</label>
-        <MoneyInput {...props} aria-labelledby="prioritized-label" />
-      </>,
-    );
-
-    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
-  });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Recipient gets">
-        <MoneyInput {...props} />
-      </Field>,
-    );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
-  });
-
-  describe('ids', () => {
-    it('should guarantee id and connect the input with the selected currency via withId HoC', () => {
-      render(<MoneyInput {...props} />);
-      const input = screen.getByRole('textbox');
-      const button = screen.getByRole('combobox');
-      expect(input.getAttribute('id')).toBeTruthy();
-      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
-    });
-
-    it('should have unique id for the select filter with predefined id', async () => {
-      const fieldId = 'myFieldId';
-      render(
-        <Field label="Multiple currencies" id={fieldId}>
-          <MoneyInput {...props} />
-        </Field>,
-      );
-      await userEvent.click(screen.getByRole('combobox'));
-      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
-        'id',
-        `${fieldId}SelectedCurrencySearch`,
-      );
-    });
-
-    it('should have unique id for the select filter without predefined id', async () => {
-      render(
-        <Field label="Multiple currencies">
-          <MoneyInput {...props} />
-        </Field>,
-      );
-      await userEvent.click(screen.getByRole('combobox'));
-      expect(screen.getByLabelText(props.searchPlaceholder)).toHaveAttribute(
-        'id',
-        expect.stringMatching(/^:.*?:SelectedCurrencySearch$/),
-      );
-    });
-  });
-
-  it('should have AT label for the currency dropdown', () => {
-    render(<MoneyInput {...props} />);
-    expect(screen.getByRole('combobox')).toHaveAttribute(
-      'aria-label',
-      messages.selectCurrencyLabel.defaultMessage,
-    );
-  });
-
-  it('should have a listbox label', async () => {
-    render(<MoneyInput {...props} />);
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-    const triggerLabel = trigger.getAttribute('aria-label');
-    expect(triggerLabel).toBeTruthy();
-    expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
-  });
-});