@transferwise/components 46.27.0 → 46.29.0

package/src/main.css

@@ -1857,11 +1857,6 @@ button.np-option {
   transition: opacity 150ms ease-in, height 150ms ease-in 150ms;
   opacity: 0;
 }
-.formatted-value__h3-custom-alignment {
-  margin-bottom: 16px;
-  margin-bottom: var(--size-16);
-  line-height: 24px;
-}
 .emphasis {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
@@ -3028,6 +3023,22 @@ a {
 .np-theme-personal--dark .np-logo-svg path {
   fill: var(--color-white);
 }
+.np-logo-svg--size-sm {
+  display: block;
+}
+@media (min-width: 576px) {
+  .np-logo-svg--size-sm {
+    display: none;
+  }
+}
+.np-logo-svg--size-md {
+  display: none;
+}
+@media (min-width: 576px) {
+  .np-logo-svg--size-md {
+    display: block;
+  }
+}
 .tw-modal--scrollable {
   max-height: 100%;
   /* mobile viewport bug fix */

package/src/main.less

@@ -22,7 +22,6 @@
 @import "./dimmer/Dimmer.less";
 @import "./drawer/Drawer.less";
 @import "./dropFade/DropFade.less";
-@import "./dynamicFieldDefinitionList/FormattedValue/FormattedValue.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";
 @import "./flowNavigation/backButton/BackButton.less";

package/src/moneyInput/MoneyInput.story.tsx

@@ -16,7 +16,7 @@ export default {
 
     return (
       <>
-        <label htmlFor={args.id as string}>Editable money input label</label>
+        <label htmlFor={args.id}>Editable money input label</label>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
@@ -160,13 +160,13 @@ export const SmallInput: Story = {
   render: (args) => {
     return (
       <>
-        <label htmlFor={args.id as string}>Money inputs</label>
+        <label htmlFor={args.id}>Money inputs</label>
         <MoneyInput {...args} {...SingleCurrency.args} />
         <br />
         <MoneyInput {...args} {...MultipleCurrencies.args} />
         <hr />
         <div className="has-error">
-          <label htmlFor={args.id as string}>Error states</label>
+          <label htmlFor={args.id}>Error states</label>
           <MoneyInput {...args} {...SingleCurrency.args} />
           <br />
           <MoneyInput {...args} {...MultipleCurrencies.args} />

package/src/nudge/Nudge.spec.tsx

@@ -51,14 +51,14 @@ describe('Nudge', () => {
     });
 
     it('does NOT render a nudge if localStorage has been set with the id of the nudge', () => {
-      jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValue('["CAKE","TEST"]');
+      jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('["CAKE","TEST"]');
 
       render(<Nudge {...defaultProps} id="TEST" persistDismissal />);
       expect(screen.queryByText('A nudge title')).not.toBeInTheDocument();
     });
 
     it('does NOT render a nudge if localStorage has been set with the id of the nudge AND calls is previously dismissed with TRUE', () => {
-      jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValue('["CAKE","TEST"]');
+      jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('["CAKE","TEST"]');
       const isPreviouslyDismissed = jest.fn();
 
       render(
@@ -75,7 +75,7 @@ describe('Nudge', () => {
     });
 
     it('shows a nudge if localStorage has been set with a different id for a different nudge and calls is previously dismissed with FALSE', () => {
-      jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValue('["BANANA"]');
+      jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('["BANANA"]');
       const isPreviouslyDismissed = jest.fn();
 
       render(
@@ -92,8 +92,8 @@ describe('Nudge', () => {
     });
 
     it('calls local storage with updated dismissed nudges value', () => {
-      jest.spyOn(window.localStorage.__proto__, 'getItem').mockReturnValue('["BANANA"]');
-      const setItem = jest.spyOn(window.localStorage.__proto__, 'setItem');
+      jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('["BANANA"]');
+      const setItem = jest.spyOn(Storage.prototype, 'setItem');
 
       render(<Nudge {...defaultProps} id="TEST" persistDismissal />);
       expect(screen.getByText('A nudge title')).toBeInTheDocument();

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -110,7 +110,8 @@ const PhoneNumberInput = ({
 
   useEffect(() => {
     if (broadcastedValue === null) {
-      return setBroadcastedValue(internalValue);
+      setBroadcastedValue(internalValue);
+      return;
     }
 
     const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;

package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.ts

@@ -1,3 +1,3 @@
-const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
+const DIGITS_MATCH = /^$|^(\+)|(\d+)/g;
 
 export const cleanNumber = (number: string) => number.match(DIGITS_MATCH)?.join('') ?? '';

package/src/popover/Popover.tsx

@@ -38,8 +38,9 @@ function resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {
     case 'bottom-left':
     case 'bottom-right':
       return 'bottom';
+    default:
+      return preferredPlacement;
   }
-  return preferredPlacement;
 }
 
 export default function Popover({

package/src/promoCard/PromoCard.tsx

@@ -298,7 +298,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             ...commonProps,
             'aria-checked':
               type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
-            'aria-describedby': `${componentId}-title` || undefined,
+            'aria-describedby': `${componentId}-title`,
             'aria-disabled': isDisabled,
             'data-value': value ?? undefined,
             role: type === 'checkbox' || type === 'radio' ? type : undefined,

package/src/radioGroup/RadioGroup.spec.js

@@ -34,7 +34,7 @@ const RADIOS = [
 
 describe('RadioGroup', () => {
   it('renders null if no radios are provided', () => {
-    expect(shallow(<RadioGroup radios={[]} {...props} />).toBeNully);
+    expect(shallow(<RadioGroup radios={[]} {...props} />).isEmptyRender()).toBe(true);
   });
 
   it('renders radio options', () => {

package/src/section/Section.story.tsx

@@ -74,7 +74,8 @@ export const WithCards = () => {
 
   const handleOnCardClick = (index: number) => {
     if (expandedCardIndex === index) {
-      return setExpandedCardIndex(null);
+      setExpandedCardIndex(null);
+      return;
     }
     setExpandedCardIndex(index);
   };

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -1,5 +1,7 @@
 import '@testing-library/jest-dom';
-import { render, screen, userEvent } from '../test-utils';
+import React from 'react';
+
+import { render, screen, userEvent, waitFor } from '../test-utils';
 
 import SegmentedControl, { SegmentedControlProps } from './SegmentedControl';
 
@@ -30,7 +32,7 @@ const onChange = jest.fn();
 
 const defaultProps: SegmentedControlProps = {
   name: 'segmentedControl',
-  defaultValue: defaultSegments[0].value,
+  value: defaultSegments[0].value,
   mode: 'input',
   segments: defaultSegments,
   onChange,
@@ -86,6 +88,90 @@ describe('SegmentedControl', () => {
     expect(onChange).toHaveBeenCalledWith('reporting');
   });
 
+  it('does not call onChange on mount', async () => {
+    let onChangeCallCount = 0;
+
+    const ParentComponent = () => {
+      const [_, simulateRerender] = React.useState({});
+
+      // new function is created on every render
+      const onChange = () => {
+        onChangeCallCount += 1;
+        simulateRerender({});
+      };
+
+      return <SegmentedControl {...defaultProps} onChange={onChange} />;
+    };
+
+    render(<ParentComponent />);
+
+    await waitFor(() => {
+      expect(onChangeCallCount).toBe(0);
+    });
+  });
+
+  it('does not repeatedly call the onChange when the provided onChange prop changes on every render of its parent component', async () => {
+    let onChangeCallCount = 0;
+
+    const ParentComponent = () => {
+      const [_, simulateRerender] = React.useState({});
+
+      // a new onChange function is created on every render
+      const onChange = () => {
+        onChangeCallCount += 1;
+        simulateRerender({});
+      };
+
+      return <SegmentedControl {...defaultProps} onChange={onChange} />;
+    };
+
+    const { rerender } = render(<ParentComponent />);
+
+    rerender(<ParentComponent />);
+
+    await waitFor(() => {
+      expect(onChangeCallCount).toBe(0);
+    });
+  });
+
+  it('updates the selected segment when the selectedValue prop changes', () => {
+    const { rerender } = render(<SegmentedControl {...defaultProps} />);
+
+    const payroll = screen.getByRole('radio', { name: 'Payroll' });
+    userEvent.click(payroll);
+
+    expect(onChange).toHaveBeenCalledWith('payroll');
+
+    rerender(<SegmentedControl {...defaultProps} value="reporting" />);
+
+    const reporting = screen.getByRole('radio', { name: 'Reporting' });
+    expect(reporting).toBeChecked();
+  });
+
+  it('updates the options when the segments prop changes', () => {
+    const { rerender } = render(<SegmentedControl {...defaultProps} />);
+
+    const newSegments = [
+      {
+        id: '1',
+        value: 'payroll',
+        label: 'Payroll',
+      },
+      {
+        id: '3',
+        value: 'anotherOne',
+        label: 'Another One',
+      },
+    ];
+
+    rerender(<SegmentedControl {...defaultProps} segments={newSegments} />);
+
+    const anotherOne = screen.getByRole('radio', { name: 'Another One' });
+    userEvent.click(anotherOne);
+
+    expect(onChange).toHaveBeenCalledWith('anotherOne');
+  });
+
   it('throws error if user tries to add too many segments', () => {
     expect(() => {
       renderSegmentedControl({

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,40 +1,78 @@
 import { StoryFn } from '@storybook/react';
 import React from 'react';
 
-import SegmentedControl, { Segments } from './SegmentedControl';
+import Button from '../button';
+
+import SegmentedControl from './SegmentedControl';
 
 export default {
   component: SegmentedControl,
   title: 'Forms/SegmentedControl',
 };
 
-const segments: Segments = [
-  { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
-  { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
-  { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
-];
+const Template: StoryFn = (args) => {
+  const [segments, setSegments] = React.useState([
+    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
+    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
+    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
+  ]);
 
-const segmentsWithControls: Segments = [
-  { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
-  { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
-  { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
-];
+  const [segmentsWithControls, setSegmentsWithControls] = React.useState([
+    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes', controls: 'aControlId' },
+    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake', controls: 'aControlId' },
+    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake', controls: 'aControlId' },
+  ]);
 
-const Template: StoryFn = (args) => {
-  const [selectedValue, setSelectedValue] = React.useState(segments[0].value);
+  const [value, setValue] = React.useState(segments[0].value);
 
+  console.log('render: segments.length', segments.length);
   return (
     <div className="p-a-2">
       <SegmentedControl
         name="aSegmentedControl"
-        defaultValue={selectedValue}
-        onChange={setSelectedValue}
+        value={value}
+        onChange={setValue}
         {...(args.mode === 'view'
           ? { segments: segmentsWithControls, mode: 'view', controls: 'aControlId' }
           : { segments, mode: 'input' })}
       />
       <div className="m-a-2" id="aControlId">
-        <p>Selected value: {selectedValue}</p>
+        <p>Selected value: {value}</p>
+      </div>
+      <div className="m-a-2">
+        <p>
+          Force the <b>selectedValue</b> to be one of the following:
+          <ul>
+            {segments.map((segment) => (
+              <li key={segment.id}>
+                <a
+                  href="/"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setValue(segment.value);
+                  }}
+                >
+                  {segment.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </p>
+      </div>
+      <div className="m-a-2">
+        <Button
+          priority="secondary"
+          type="danger"
+          size="sm"
+          disabled={segments.length < 2}
+          onClick={() => {
+            const index = segments.findIndex((s) => s.value !== value);
+            setSegments((prev) => prev.filter((_, i) => i !== index));
+            setSegmentsWithControls((prev) => prev.filter((_, i) => i !== index));
+          }}
+        >
+          Remove one segment
+        </Button>
       </div>
     </div>
   );

package/src/segmentedControl/SegmentedControl.tsx

@@ -13,7 +13,7 @@ export type Segments = readonly Segment[] | readonly SegmentWithControls[];
 
 type SegmentedControlPropsBase = {
   name: string;
-  defaultValue: string;
+  value: string;
   mode: 'input' | 'view';
   onChange: (value: string) => void;
 };
@@ -33,12 +33,11 @@ export type SegmentedControlProps = SegmentedControlPropsBase &
 
 const SegmentedControl = ({
   name,
-  defaultValue,
+  value,
   mode = 'input',
   segments,
   onChange,
 }: SegmentedControlProps) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
   const [animate, setAnimate] = useState(false);
 
   const segmentsRef = useRef<HTMLDivElement>(null);
@@ -55,9 +54,7 @@ const SegmentedControl = ({
   }));
 
   const updateSegmentPosition = () => {
-    const selectedSegmentRef = segmentsWithRefs.find(
-      (segment) => segment.value === selectedValue,
-    )?.ref;
+    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;
 
     // We grab the active segments style object from the ref
     // and set the css variables to the selected segments width and x position.
@@ -70,6 +67,7 @@ const SegmentedControl = ({
   };
 
   useEffect(() => {
+    setAnimate(true);
     updateSegmentPosition();
 
     const handleWindowSizeChange = () => {
@@ -83,11 +81,7 @@ const SegmentedControl = ({
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentsWithRefs, selectedValue]);
-
-  useEffect(() => {
-    onChange(selectedValue);
-  }, [onChange, selectedValue]);
+  }, [segmentsWithRefs, value]);
 
   return (
     <div
@@ -103,14 +97,18 @@ const SegmentedControl = ({
         })}
         role={mode !== 'input' ? 'tablist' : undefined}
       >
-        {segmentsWithRefs.map((segment) =>
-          mode === 'input' ? (
+        {segmentsWithRefs.map((segment) => {
+          const onSelect = () => {
+            setAnimate(true);
+            onChange(segment.value);
+          };
+          return mode === 'input' ? (
             <label
               ref={segment.ref as React.RefObject<HTMLLabelElement>}
               key={segment.id}
               htmlFor={segment.id}
               className={classNames('segmented-control__segment', {
-                'segmented-control__selected-segment': selectedValue === segment.value,
+                'segmented-control__selected-segment': value === segment.value,
               })}
             >
               <input
@@ -119,19 +117,14 @@ const SegmentedControl = ({
                 id={segment.id}
                 name={name}
                 value={segment.value}
-                checked={selectedValue === segment.value}
-                onChange={() => {
-                  setAnimate(true);
-                  setSelectedValue(segment.value);
-                }}
+                checked={value === segment.value}
+                onChange={onSelect}
               />
               <Body
                 className="segmented-control__text"
                 as="span"
                 type={
-                  selectedValue === segment.value
-                    ? Typography.BODY_DEFAULT_BOLD
-                    : Typography.BODY_DEFAULT
+                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT
                 }
               >
                 {segment.label}
@@ -145,29 +138,24 @@ const SegmentedControl = ({
               role="tab"
               id={segment.id}
               aria-controls={segment.controls}
-              aria-selected={selectedValue === segment.value}
+              aria-selected={value === segment.value}
               className={classNames('segmented-control__segment', 'segmented-control__button', {
-                'segmented-control__selected-segment': selectedValue === segment.value,
+                'segmented-control__selected-segment': value === segment.value,
               })}
-              onClick={() => {
-                setAnimate(true);
-                setSelectedValue(segment.value);
-              }}
+              onClick={onSelect}
             >
               <Body
                 as="span"
                 className="segmented-control__text"
                 type={
-                  selectedValue === segment.value
-                    ? Typography.BODY_DEFAULT_BOLD
-                    : Typography.BODY_DEFAULT
+                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT
                 }
               >
                 {segment.label}
               </Body>
             </button>
-          ),
-        )}
+          );
+        })}
       </div>
     </div>
   );

package/src/select/Select.js

@@ -246,8 +246,8 @@ export default function Select({
   };
 
   function selectKeyboardFocusedOption() {
-    if (keyboardFocusedOptionIndex != null) {
-      selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
+    if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
+      selectOption(selectableOptions[keyboardFocusedOptionIndex]);
     }
   }
 
@@ -511,7 +511,6 @@ export default function Select({
         disabled={disabled}
         aria-controls={listboxId}
         aria-expanded={open}
-        aria-autocomplete="none"
         onClick={handleOnClick}
         {...buttonProps}
       >

package/src/statusIcon/StatusIcon.tsx

@@ -1,27 +1,27 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import classNames from 'classnames';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
 
 export type StatusIconProps = {
-  sentiment: Sentiment;
+  sentiment: `${Sentiment}`;
   size: SizeSmall | SizeMedium | SizeLarge;
 };
 
-const StatusIcon = ({ sentiment = Sentiment.NEUTRAL, size = Size.MEDIUM }: StatusIconProps) => {
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: Check,
-    [Sentiment.NEUTRAL]: Info,
-    [Sentiment.WARNING]: Alert,
-    [Sentiment.NEGATIVE]: Cross,
-    [Sentiment.PENDING]: ClockBorderless,
-    [Sentiment.INFO]: Info,
-    [Sentiment.ERROR]: Cross,
-    [Sentiment.SUCCESS]: Check,
-  };
+const iconTypeMap = {
+  positive: Check,
+  neutral: Info,
+  warning: Alert,
+  negative: Cross,
+  pending: ClockBorderless,
+  info: Info,
+  error: Cross,
+  success: Check,
+} satisfies Record<`${Sentiment}`, React.ElementType>;
 
-  const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
+const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {
   const Icon = iconTypeMap[sentiment];
+  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
 
   return (
     <span

package/src/stepper/deviceDetection.js

@@ -1,6 +1,5 @@
 function supportsTouchEvents() {
   const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
-  // eslint-disable-next-line compat/compat
   const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
   const documentTouchIsDefined =
     typeof window !== 'undefined' &&
@@ -21,7 +20,7 @@ function userAgentSuggestsTouchDevice() {
     'bada',
   ];
   const matchString = sampleTouchDevices.map((device) => `(${device})`).join('|');
-  const regex = new RegExp(matchString, 'ig');
+  const regex = new RegExp(matchString, 'gi');
   return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
 }
 // Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.

package/src/stepper/deviceDetection.spec.js

@@ -2,12 +2,17 @@ import { isTouchDevice } from './deviceDetection';
 
 describe('Device detection', () => {
   function fakeUserAgent(userAgent) {
-    navigator.__defineGetter__('userAgent', () => userAgent);
-    // need to use this instead of defineProperty, as it's blocked from overriding
+    Object.defineProperty(navigator, 'userAgent', {
+      value: userAgent,
+      configurable: true,
+    });
   }
 
   function fakeMaxTouchPoints(maxTouchPoints) {
-    navigator.__defineGetter__('maxTouchPoints', () => maxTouchPoints);
+    Object.defineProperty(navigator, 'maxTouchPoints', {
+      value: maxTouchPoints,
+      configurable: true,
+    });
   }
 
   // We don't test DocumentTouch api as it's basically impossible to test :(

package/src/test-utils/index.js

@@ -13,7 +13,7 @@ import en from '../i18n/en.json';
  */
 function customRender(ui, { locale = DEFAULT_LOCALE, messages = en, ...renderOptions } = {}) {
   // eslint-disable-next-line react/prop-types
-  var Wrapper = ({ children }) => {
+  const Wrapper = ({ children }) => {
     return <Provider i18n={{ locale, messages }}>{children}</Provider>;
   };
   return render(ui, { wrapper: Wrapper, ...renderOptions });

package/src/test-utils/story-config.ts

@@ -30,7 +30,7 @@ interface StoryConfig {
 
 const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {
   if (viewport.styles && typeof viewport.styles === 'object') {
-    return parseInt(viewport.styles.width);
+    return Number.parseInt(viewport.styles.width, 10);
   }
   throw new Error('Unknown viewport styles');
 };

package/src/title/Title.spec.tsx

@@ -34,7 +34,7 @@ describe('Title', () => {
 
   it('handles unsupported typography type', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+    // @ts-expect-error
     render(<Title type={Typography.BODY_LARGE_BOLD}>Test</Title>);
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();

package/src/typeahead/Typeahead.spec.js

@@ -314,7 +314,9 @@ describe('Typeahead', () => {
     let selectedOption;
 
     component.setProps({
-      onChange: (selections) => (selectedOption = selections[0]),
+      onChange: (selections) => {
+        selectedOption = selections[0];
+      },
       options: options,
     });
 
@@ -340,7 +342,7 @@ describe('Typeahead', () => {
     it('renders all options', () => {
       const options = option().map((optNode) => optNode.text());
       expect(options).toHaveLength(props.options.length);
-      expect(options.every((label, i) => label === props.options[i].label));
+      expect(options.every((label, i) => label === props.options[i].label)).toBe(true);
     });
 
     it('does not render new option if showNewEntry is false', () => {