npm - @transferwise/components - Versions diffs - 0.0.0-experimental-29ce40f → 0.0.0-experimental-04e4d95 - Mend

@transferwise/components 0.0.0-experimental-29ce40f → 0.0.0-experimental-04e4d95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/src/link/Link.story.tsx CHANGED Viewed

@@ -29,64 +29,64 @@ export const Basic = () => {
         Links via <code>{'<Link />'}</code> component in all types of body copy
       </Title>
       <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_LARGE} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Title type={Typography.TITLE_SCREEN} className="m-t-3">
         Links via <code>{'<a>'}</code> tag in all types of body copy
       </Title>
       <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_LARGE} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT} className="m-t-3">
-        We’re building the world's{' '}
+        We’re building the world’s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world's most international account
+        . We’re building the world’s most international account
       </Body>
     </>
   );

package/src/loader/Loader.tsx CHANGED Viewed

@@ -54,7 +54,6 @@ const Loader = ({
     }
     return () => {
-      // eslint-disable-next-line fp/no-mutation
       cancelled = true;
       clearTimeout(timeout);

package/src/logo/Logo.js CHANGED Viewed

@@ -42,8 +42,8 @@ const Logo = ({ className, inverse, type }) => {
         type === LogoType.WISE
           ? 'Wise'
           : 'Wise Business' | (type === LogoType.WISE_PLATFORM)
-          ? 'Wise Platform'
-          : 'Wise Business'
+            ? 'Wise Platform'
+            : 'Wise Business'
       }
       role="img"
       className={classNames(className, 'np-logo')}

package/src/main.css CHANGED Viewed

@@ -1857,6 +1857,11 @@ 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);

package/src/main.less CHANGED Viewed

@@ -22,6 +22,7 @@
 @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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -96,7 +96,7 @@ describe('SegmentedControl', () => {
       // new function is created on every render
       const onChange = () => {
-        onChangeCallCount++;
+        onChangeCallCount += 1;
         simulateRerender({});
       };
@@ -118,7 +118,7 @@ describe('SegmentedControl', () => {
       // a new onChange function is created on every render
       const onChange = () => {
-        onChangeCallCount++;
+        onChangeCallCount += 1;
         simulateRerender({});
       };

package/src/select/Select.js CHANGED Viewed

@@ -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/stepper/deviceDetection.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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', () => {

package/src/upload/Upload.spec.js CHANGED Viewed

@@ -8,7 +8,7 @@ import Upload from '.';
 jest.useFakeTimers();
 jest.mock('./utils/postData', () => ({
-  postData: () => new Promise((resolve) => resolve('ServerResponse')),
+  postData: async () => 'ServerResponse',
 }));
 jest.mock('./utils/asyncFileRead');
@@ -88,7 +88,7 @@ describe('Upload', () => {
   let component;
   beforeEach(() => {
     component = shallow(<Upload {...props} />).dive();
-    asyncFileRead.mockImplementation(() => new Promise((resolve) => resolve('a value')));
+    asyncFileRead.mockImplementation(async () => 'a value');
   });
   afterEach(() => {
@@ -183,7 +183,9 @@ describe('Upload', () => {
     });
     it('step ProcessingStep is called with error props', async () => {
-      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
+      asyncFileRead.mockImplementation(async () => {
+        throw 'An error';
+      });
       await component.instance().fileDropped(TEST_FILE);
       jest.advanceTimersByTime(props.animationDelay);
@@ -230,7 +232,9 @@ describe('Upload', () => {
     it('step CompleteStep is called with error props', async () => {
       component = mount(<Upload {...props} />);
       const upload = component.children();
-      asyncFileRead.mockImplementation(() => new Promise((resolve, reject) => reject('An error')));
+      asyncFileRead.mockImplementation(async () => {
+        throw 'An error';
+      });
       await upload.instance().fileDropped(TEST_FILE);
       jest.advanceTimersByTime(props.animationDelay + ANIMATION_DELAY);

package/src/uploadInput/uploadButton/UploadButton.tsx CHANGED Viewed

@@ -225,6 +225,7 @@ const UploadButton = ({
         data-testid={TEST_IDS.uploadInput}
         onChange={filesSelected}
       />
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label
         htmlFor={id}
         className={classNames('btn', 'np-upload-accent', 'np-upload-button', {