@transferwise/components 46.10.0 → 46.11.0

package/src/modal/Modal.story.tsx

@@ -1,10 +1,11 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+import { ScreenMode, ThemeProvider } from '@wise/components-theming';
 import { useState } from 'react';
 
-import { Button, Modal } from '..';
-import { Scroll } from '../common';
-import { lorem10, lorem1000, storyConfig } from '../test-utils';
+import { Button, Modal, ModalProps } from '..';
+import { CommonProps, Scroll } from '../common';
+import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';
 
 export default {
   component: Modal,
@@ -23,6 +24,39 @@ export default {
 
 type Story = StoryObj<typeof Modal>;
 
+export interface StoryContentProps {
+  args: CommonProps & ModalProps;
+  screenMode?: ScreenMode;
+}
+
+const StoryContent = ({ args, screenMode }: StoryContentProps) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [open, setOpen] = useState(args.open);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <Modal
+        {...args}
+        body={
+          !screenMode ? (
+            args.body
+          ) : (
+            <ThemeProvider theme="personal" screenMode={screenMode}>
+              {lorem100}
+            </ThemeProvider>
+          )
+        }
+        open={open}
+        disableDimmerClickToClose={args.disableDimmerClickToClose}
+        onClose={() => {
+          setOpen(false);
+          action('Modal closed')();
+        }}
+      />
+    </>
+  );
+};
+
 export const Basic: Story = {
   args: {
     title: 'Title',
@@ -30,24 +64,7 @@ export const Basic: Story = {
     scroll: Scroll.VIEWPORT,
     footer: <Button block>Action</Button>,
   },
-  render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [open, setOpen] = useState(args.open);
-    return (
-      <>
-        <Button onClick={() => setOpen(true)}>Open Modal</Button>
-        <Modal
-          {...args}
-          open={open}
-          disableDimmerClickToClose={args.disableDimmerClickToClose}
-          onClose={() => {
-            setOpen(false);
-            action('Modal closed')();
-          }}
-        />
-      </>
-    );
-  },
+  render: (args) => <StoryContent args={args} />,
 };
 
 export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
@@ -80,3 +97,20 @@ export const WithoutTitle: Story = {
 };
 
 export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });
+
+export const WithThemeProviderInContent: Story = {
+  args: {
+    title: lorem10,
+    body: lorem100,
+    scroll: Scroll.VIEWPORT,
+    footer: <Button block>Action</Button>,
+  },
+  render: (args, { globals: { screenMode } }) => (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    <StoryContent args={args} screenMode={screenMode} />
+  ),
+};
+
+export const WithThemeProviderInContentMobile: Story = storyConfig(WithThemeProviderInContent, {
+  variants: ['mobile'],
+});

package/src/phoneNumberInput/PhoneNumberInput.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  selectInputPlaceholder: {
+    id: 'neptune.PhoneNumberInput.SelectInput.placeholder',
+    defaultMessage: 'Select an option...',
+  },
+});

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -5,7 +5,12 @@ import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 import PhoneNumberInput from '.';
 
-jest.mock('react-intl');
+const locale = 'en-GB';
+const formatMessage = (message) => message.defaultMessage;
+jest.mock('react-intl', () => ({
+  ...jest.requireActual('react-intl'),
+  useIntl: jest.fn(() => ({ locale, formatMessage })),
+}));
 
 mockMatchMedia();
 mockResizeObserver();
@@ -22,7 +27,7 @@ describe('Given a telephone number component', () => {
   const NUMBER_SELECTOR = 'input[name="phoneNumber"]';
 
   beforeEach(() => {
-    useIntl.mockReturnValue({ locale: 'en-GB' });
+    useIntl.mockReturnValue({ locale, formatMessage });
   });
 
   afterEach(() => {
@@ -210,7 +215,7 @@ describe('Given a telephone number component', () => {
 
   describe('when supplied with a placeholder', () => {
     beforeEach(() => {
-      useIntl.mockReturnValue({ locale: 'es-ES' });
+      useIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
       component = shallow(
         <PhoneNumberInput {...props} initialValue="+12345678" placeholder="placeholder" />,
       );
@@ -224,7 +229,7 @@ describe('Given a telephone number component', () => {
 
   describe('when supplied with a search placeholder', () => {
     beforeEach(() => {
-      useIntl.mockReturnValue({ locale: 'es-ES' });
+      useIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
       component = shallow(
         <PhoneNumberInput
           {...props}
@@ -243,7 +248,7 @@ describe('Given a telephone number component', () => {
   describe('when supplied with a locale', () => {
     describe('and a value', () => {
       beforeEach(() => {
-        useIntl.mockReturnValue({ locale: 'es-ES' });
+        useIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
         component = shallow(<PhoneNumberInput {...props} initialValue="+12345678" />);
         select = component.find(PREFIX_SELECT_SELECTOR);
         input = component.find(NUMBER_SELECTOR);
@@ -257,7 +262,7 @@ describe('Given a telephone number component', () => {
     describe('and no value', () => {
       describe('and no country code', () => {
         beforeEach(() => {
-          useIntl.mockReturnValue({ locale: 'es' });
+          useIntl.mockReturnValue({ locale: 'es', formatMessage });
           component = shallow(<PhoneNumberInput {...props} />);
           select = component.find(PREFIX_SELECT_SELECTOR);
           input = component.find(NUMBER_SELECTOR);
@@ -270,7 +275,7 @@ describe('Given a telephone number component', () => {
 
       describe('and country code', () => {
         beforeEach(() => {
-          useIntl.mockReturnValue({ locale: 'es-ES' });
+          useIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
           component = shallow(<PhoneNumberInput {...props} countryCode="US" />);
           select = component.find(PREFIX_SELECT_SELECTOR);
           input = component.find(NUMBER_SELECTOR);

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 
+import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
 import {
   explodeNumberModel,
@@ -54,7 +55,7 @@ const PhoneNumberInput = ({
   selectProps = defaultSelectProps,
   disabledCountries = defaultDisabledCountries,
 }: PhoneNumberInputProps) => {
-  const { locale } = useIntl();
+  const { locale, formatMessage } = useIntl();
 
   const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
     const cleanValue = initialValue ? cleanNumber(initialValue) : null;
@@ -132,7 +133,7 @@ const PhoneNumberInput = ({
     <div className="tw-telephone">
       <div className="tw-telephone__country-select">
         <SelectInput
-          placeholder="Select an option…"
+          placeholder={formatMessage(messages.selectInputPlaceholder)}
           items={[...countriesByPrefix].map(([prefix, countries]) => ({
             type: 'option',
             value: prefix,

package/src/snackbar/Snackbar.spec.js

@@ -45,10 +45,6 @@ describe('Snackbar', () => {
     mount(<SnackbarAppendingToBody {...props} />);
 
     expect(createPortal).toHaveBeenCalledTimes(1);
-    /** Using toBeCalledWith was not matching properly */
-    const [comp, body] = ReactDOM.createPortal.mock.calls[0];
-    expect(comp).toMatchObject(snackbar());
-    expect(body).toMatchObject(document.body);
     jest.clearAllMocks();
   });
 

package/src/test-utils/window-mock.ts

@@ -1,30 +1,14 @@
+import {
+  mockMatchMedia as baseMockMatchMedia,
+  mockResizeObserver as baseMockResizeObserver,
+} from '../mocks';
+
 export function mockMatchMedia() {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation((query: string) => {
-      const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
-      const minWidth = matches != null ? Number(matches[1]) : undefined;
-      return {
-        matches: minWidth != null ? window.innerWidth >= minWidth : false,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(), // deprecated
-        removeListener: jest.fn(), // deprecated
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn(),
-      };
-    }),
-  });
+  baseMockMatchMedia(jest);
 }
 
 export function mockResizeObserver() {
   // mock ResizeObserver because it's not implemented in jsdoc lib
   // https://github.com/jsdom/jsdom/issues/3368
-  // eslint-disable-next-line compat/compat
-  window.ResizeObserver = class ResizeObserver {
-    observe = jest.fn();
-    unobserve = jest.fn();
-    disconnect = jest.fn();
-  };
+  baseMockResizeObserver(jest);
 }

package/src/withNextPortal/withNextPortal.spec.js

@@ -14,12 +14,8 @@ describe('withNextPortal', () => {
     ReactDOM.createPortal.mockImplementation(() => null);
     const props = {};
     const Component = withNextPortal(AnyComponent);
-    const expected = mount(<AnyComponent {...props} />);
     mount(<Component {...props} />);
     expect(ReactDOM.createPortal).toHaveBeenCalledTimes(1);
-    const [comp, body] = ReactDOM.createPortal.mock.calls[0];
-    expect(comp).toMatchObject(expected);
-    expect(body).toMatchObject(document.body);
   });
 
   const AnyComponent = () => <div>Test div</div>;