@transferwise/components 46.93.1 → 46.93.2

package/src/alert/Alert.story.tsx

@@ -213,7 +213,7 @@ export const DynamicRender: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsOneActive(true)}>
+        <Button v2 onClick={() => setIsOneActive(true)}>
           Trigger Alert
         </Button>
 
@@ -248,7 +248,7 @@ function Render(args) {
 
   return (
     <>
-      <Button htmlType="button" onClick={() => setIsOneActive(true)}>
+      <Button v2 onClick={() => setIsOneActive(true)}>
         Trigger Alert
       </Button>
 
@@ -325,7 +325,7 @@ export const MultipleDynamicAlerts: Story = {
         </Button>
 
         {alerts.map((props) => (
-          <Alert {...props} key={props.title} className="m-t-3" />
+          <Alert key={props.title} {...props} className="m-t-3" />
         ))}
       </>
     );
@@ -352,8 +352,8 @@ function Render() {
 
       {alerts.map(props => (
         <Alert 
-          {...props} 
           key={props.title} 
+          {...props} 
           className="m-t-3" 
         />
       ))}

package/src/alert/Alert.tests.story.tsx

@@ -37,7 +37,7 @@ export const SimpleTrigger: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsActive(true)}>
+        <Button v2 onClick={() => setIsActive(true)}>
           Trigger Alert
         </Button>
 
@@ -119,12 +119,12 @@ export const MultipleDynamicAlerts: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setAlerts(getAlerts())}>
+        <Button v2 onClick={() => setAlerts(getAlerts())}>
           Generate dynamic alerts
         </Button>
 
         {alerts.map((props) => (
-          <Alert {...props} key={props.title} className="m-t-3" />
+          <Alert key={props.title} {...props} className="m-t-3" />
         ))}
       </>
     );

package/src/button/LegacyButton.tsx

@@ -133,10 +133,8 @@ const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
         disabled,
       },
       // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       typeClassMap[newType],
       // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       priorityClassMap[newPriority],
       className,
     );

package/src/carousel/Carousel.spec.tsx

@@ -47,9 +47,7 @@ describe('Carousel', () => {
   const scrollBy = jest.fn();
 
   beforeEach(() => {
-    // eslint-disable-next-line functional/immutable-data
     window.HTMLElement.prototype.scrollIntoView = focusSpy;
-    // eslint-disable-next-line functional/immutable-data
     window.HTMLElement.prototype.scrollBy = scrollBy;
   });
 
@@ -198,13 +196,11 @@ describe('Carousel', () => {
 });
 
 const mockPositions = (scrollWidth: number, offsetWidth: number) => {
-  // eslint-disable-next-line functional/immutable-data
   Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
     configurable: true,
     value: scrollWidth,
   });
 
-  // eslint-disable-next-line functional/immutable-data
   Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
     configurable: true,
     value: offsetWidth,

package/src/carousel/Carousel.tsx

@@ -228,7 +228,6 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
                 className={clsx('carousel__card-content', {
                   [card.className ?? '']: !!card.className,
                 })}
-                // eslint-disable-next-line react/forbid-dom-props
                 style={card.styles}
               >
                 {card.content}

package/src/checkbox/Checkbox.tsx

@@ -44,7 +44,6 @@ export default function Checkbox({
   const innerDisabled = disabled || readOnly;
   return (
     <div id={id} className={classList}>
-      {/* eslint-disable-next-line jsx-a11y/label-has-for */}
       <label className={clsx({ disabled })}>
         <CheckboxButton
           className="p-r-2"

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -23,7 +23,6 @@ export const Basic: Story = {
     'aria-label': 'Toggle email updates',
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [checked, setChecked] = useState(true);
 
     return <CheckboxButton {...args} checked={checked} onChange={() => setChecked(!checked)} />;
@@ -36,7 +35,6 @@ export const Indeterminate: Story = {
     indeterminate: true,
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [indeterminate, setIndeterminate] = useState(true);
 
     return (

package/src/checkboxButton/CheckboxButton.tsx

@@ -19,7 +19,7 @@ const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(functio
 
   useEffect(() => {
     if (internalRef.current) {
-      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      // eslint-disable-next-line functional/immutable-data
       internalRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate, reference]);

package/src/checkboxOption/CheckboxOption.tsx

@@ -2,8 +2,7 @@ import { forwardRef } from 'react';
 
 import CheckboxButton from '../checkboxButton';
 import Option from '../common/Option';
-import { ReferenceType } from '../common/Option/Option';
-import { BaseOptionProps } from '../common/Option/Option';
+import { ReferenceType, BaseOptionProps } from '../common/Option/Option';
 
 export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
   /**

package/src/common/bottomSheet/BottomSheet.spec.tsx

@@ -2,7 +2,6 @@ import { render, mockMatchMedia } from '../../test-utils';
 
 import BottomSheet from './BottomSheet';
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 mockMatchMedia();
 
 describe('BottomSheet', () => {

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -19,8 +19,8 @@ export default {
     open: true,
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [open, setOpen] = useState(args.open);
+
     return (
       <div style={{ height: '2000px' }}>
         <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>

package/src/common/bottomSheet/BottomSheet.tsx

@@ -201,7 +201,6 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
         position={Position.BOTTOM}
         className={clsx('np-bottom-sheet', props.className)}
       >
-        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
           aria-labelledby={props['aria-labelledby'] || undefined}

package/src/common/dateUtils/isDateValid/isDateValid.ts

@@ -1,11 +1,13 @@
 export const isDateValid = (date: Date | string | null) => {
   if (date === null) {
     return false;
-  } else if (date instanceof Date) {
+  }
+
+  if (date instanceof Date) {
     return validDateObject(date);
-  } else {
-    return validDateString(date);
   }
+
+  return validDateString(date);
 };
 
 export const validDateString = (dateString: string) => validDateObject(new Date(dateString));

package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js

@@ -65,7 +65,6 @@ describe('useHasIntersected', () => {
       });
 
       it('calls observer', () => {
-        // eslint-disable-next-line jest/prefer-spy-on
         window.IntersectionObserver = jest.fn(() => ({
           observe,
           unobserve,
@@ -107,7 +106,6 @@ describe('useHasIntersected', () => {
   });
 
   const setupIntersectionObserver = (isIntersecting) => {
-    // eslint-disable-next-line jest/prefer-spy-on
     window.IntersectionObserver = jest.fn((callback) => {
       callback([{ isIntersecting }], { unobserve });
       return {

package/src/common/panel/Panel.tsx

@@ -119,26 +119,15 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
         {...rest}
         ref={setPopperElement}
         role="dialog"
-        // eslint-disable-next-line react/forbid-dom-props
         style={{ ...styles.popper }}
         {...attributes.popper}
         className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}
       >
-        <div
-          ref={reference}
-          /* eslint-disable-next-line react/forbid-dom-props */
-          style={contentStyle}
-          className={clsx('np-panel__content')}
-        >
+        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>
           {children}
           {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
           {arrow && (
-            <div
-              ref={setArrowElement}
-              className={clsx('np-panel__arrow')}
-              // eslint-disable-next-line react/forbid-dom-props
-              style={styles.arrow}
-            />
+            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />
           )}
         </div>
       </div>

package/src/dimmer/Dimmer.spec.tsx

@@ -33,7 +33,9 @@ describe('Dimmer', () => {
     it('does not call onClose if the dimmer content is clicked', async () => {
       render(
         <Dimmer {...props}>
-          <Button onClick={() => {}}>McClicky</Button>
+          <Button v2 onClick={() => {}}>
+            McClicky
+          </Button>
         </Dimmer>,
       );
       await userEvent.click(screen.getByRole('button'));

package/src/dimmer/Dimmer.story.tsx

@@ -18,12 +18,13 @@ type Story = StoryObj<typeof Dimmer>;
 
 export const Basic: Story = {
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [open, setOpen] = useState(false);
 
     return (
       <>
-        <Button onClick={() => setOpen((isOpen) => !isOpen)}>Toggle dimmer</Button>
+        <Button v2 onClick={() => setOpen((isOpen) => !isOpen)}>
+          Toggle dimmer
+        </Button>
         <Dimmer
           {...args}
           open={open}

package/src/dimmer/dimmerManager/DimmerManager.ts

@@ -5,7 +5,7 @@ export default class DimmerManager {
   /**
    * Dimmer refs
    */
-  private dimmers: Element[];
+  private readonly dimmers: Element[];
 
   constructor() {
     this.dimmers = [];

package/src/display/Display.story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/accessible-emoji */
-
 import { Typography } from '../common';
 import Money from '../money/Money';
 import Title from '../title/Title';

package/src/drawer/Drawer.story.tsx

@@ -18,7 +18,7 @@ export const Basic = () => {
 
   return (
     <>
-      <Button disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
+      <Button v2 disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
         Open drawer
       </Button>
       <Drawer
@@ -27,10 +27,10 @@ export const Basic = () => {
         headerTitle="This is the title of the drawer"
         footerContent={
           <>
-            <Button block onClick={() => {}}>
+            <Button v2 block onClick={() => {}}>
               Action 1
             </Button>
-            <Button block priority={Priority.SECONDARY} onClick={() => {}}>
+            <Button v2 block priority={Priority.SECONDARY} onClick={() => {}}>
               Action 2
             </Button>
           </>
@@ -50,7 +50,9 @@ export const Basic = () => {
         <Section className="m-t-2">
           <Input />
           <p className="m-t-3">Cat ipsum dolor sit amet, purr when being pet.</p>
-          <Button onClick={() => setOpenModal(true)}>Open Modal</Button>
+          <Button v2 onClick={() => setOpenModal(true)}>
+            Open Modal
+          </Button>
           <Modal
             body={
               <p className="m-t-4">

package/src/dropFade/DropFade.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/forbid-dom-props */
 import { action } from '@storybook/addon-actions';
 import { useState } from 'react';
 
@@ -35,7 +34,7 @@ export const Basic = () => {
           }}
         />
       </DropFade>
-      <Button className="m-t-3" block onClick={() => setOpen(true)}>
+      <Button v2 className="m-t-3" block onClick={() => setOpen(true)}>
         Some other content
       </Button>
     </div>

package/src/dropFade/DropFade.tsx

@@ -26,7 +26,6 @@ const DropFade = ({ children, show }: { children: ReactElement; show: boolean })
         setHeight(0);
       }}
     >
-      {/* eslint-disable-next-line react/forbid-dom-props */}
       <div ref={reference} style={{ height }} className="np-dropfade">
         {clonedChild}
       </div>

package/src/emphasis/EmphasisHtmlTransformer.spec.tsx

@@ -7,7 +7,7 @@ describe('creates safe, enphasised html', () => {
       emphasisHtmlTransformer.transform(
         '<script>something malicious</script><p>some text & more text</p>',
       ),
-    ).toStrictEqual(
+    ).toBe(
       '&lt;script&gt;something malicious&lt;/script&gt;&lt;p&gt;some text &amp; more text&lt;/p&gt;',
     );
   });
@@ -18,7 +18,7 @@ describe('creates safe, enphasised html', () => {
       emphasisHtmlTransformer.transform(
         '<script>something malicious</script><positive>hello</positive><negative>world</negative><positive>!</positive>',
       ),
-    ).toStrictEqual(
+    ).toBe(
       '&lt;script&gt;something malicious&lt;/script&gt;<em class="emphasis emphasis--positive">hello</em><em class="emphasis emphasis--negative">world</em><em class="emphasis emphasis--positive">!</em>',
     );
   });
@@ -26,11 +26,11 @@ describe('creates safe, enphasised html', () => {
   describe('supports new line characters', () => {
     it('supports slash n in the string', () => {
       const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform('hello\\nworld')).toStrictEqual('hello<br />world');
+      expect(emphasisHtmlTransformer.transform('hello\\nworld')).toBe('hello<br />world');
     });
     it('supports new line characters', () => {
       const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform('hello\nworld')).toStrictEqual('hello<br />world');
+      expect(emphasisHtmlTransformer.transform('hello\nworld')).toBe('hello<br />world');
     });
   });
 });

package/src/emphasis/EmphasisHtmlTransformer.ts

@@ -13,9 +13,9 @@ type Tags = {
 };
 
 class EmphasisHtmlTransformer {
-  tags: Array<Tags>;
+  tags: Tags[];
 
-  constructor(whitelistedTags?: Array<string>) {
+  constructor(whitelistedTags?: string[]) {
     this.tags = (whitelistedTags || []).map((tag) => {
       return {
         transformed: {

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -235,7 +235,12 @@ export const SendFlow = () => {
 
       <Sticky>
         <div className="d-flex justify-content-center align-items-center p-a-3">
-          <Button disabled={activeStep === 3} block onClick={() => setActiveStep(activeStep + 1)}>
+          <Button
+            v2
+            disabled={activeStep === 3}
+            block
+            onClick={() => setActiveStep(activeStep + 1)}
+          >
             Continue
           </Button>
         </div>

package/src/inputs/Input.tsx

@@ -31,7 +31,6 @@ export const Input = forwardRef(function Input(
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',
       })}
-      // eslint-disable-next-line react/forbid-dom-props
       style={inputPaddings}
       {...inputAttributes}
       {...restProps}

package/src/inputs/SelectInput.story.tsx

@@ -464,7 +464,9 @@ export const WithinDrawer: Story<Currency> = {
       const [open, setOpen] = useState(context.viewMode === 'story');
       return (
         <>
-          <Button onClick={() => setOpen(true)}>Open drawer</Button>
+          <Button v2 onClick={() => setOpen(true)}>
+            Open drawer
+          </Button>
           <Drawer
             open={open}
             headerTitle="This is the title of the drawer"
@@ -485,7 +487,9 @@ export const WithinModal: Story<Currency> = {
       const [open, setOpen] = useState(context.viewMode === 'story');
       return (
         <>
-          <Button onClick={() => setOpen(true)}>Open modal</Button>
+          <Button v2 onClick={() => setOpen(true)}>
+            Open modal
+          </Button>
           <Modal open={open} body={<Story />} onClose={() => setOpen(false)} />
         </>
       );

package/src/inputs/SelectInput.tsx

@@ -629,13 +629,7 @@ function SelectInputOptions<T = string>({
   const getItemNode = (index: number) => {
     const item = filteredItems[index];
     return (
-      <SelectInputItemView
-        // eslint-disable-next-line react/no-array-index-key
-        key={index}
-        item={item}
-        renderValue={renderValue}
-        needle={needle}
-      />
+      <SelectInputItemView key={index} item={item} renderValue={renderValue} needle={needle} />
     );
   };
 

package/src/inputs/_ButtonInput.tsx

@@ -19,7 +19,6 @@ export const ButtonInput = forwardRef(function ButtonInput(
       ref={ref}
       type="button"
       className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
-      // eslint-disable-next-line react/forbid-dom-props
       style={{ ...inputPaddings, ...style }}
       {...restProps}
     />

package/src/inputs/_Popover.tsx

@@ -113,7 +113,6 @@ export function Popover({
                     'np-popover-v2-container--size-md': size === 'md',
                     'np-popover-v2-container--size-lg': size === 'lg',
                   })}
-                  // eslint-disable-next-line react/forbid-dom-props
                   style={floatingStyles}
                   {...getFloatingProps()}
                 >

package/src/link/Link.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-child-element-spacing */
 import Body from '../body/Body';
 import { Typography } from '../common';
 import Title from '../title/Title';

package/src/listItem/ListItem.story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-child-element-spacing */
-
 import { action } from '@storybook/addon-actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';

package/src/markdown/Markdown.spec.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-key */
 import { MarkdownNodeType } from '../common';
 import { render, screen } from '../test-utils';
 

package/src/modal/Modal.story.tsx

@@ -30,11 +30,13 @@ export interface StoryContentProps {
 }
 
 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>
+      <Button v2 onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         {...args}
         body={
@@ -62,7 +64,11 @@ export const Basic: Story = {
     title: 'Title',
     body: lorem10,
     scroll: Scroll.VIEWPORT,
-    footer: <Button block>Action</Button>,
+    footer: (
+      <Button v2 block>
+        Action
+      </Button>
+    ),
   },
   render: (args) => <StoryContent args={args} />,
 };
@@ -103,7 +109,11 @@ export const WithThemeProviderInContent: Story = {
     title: lorem10,
     body: lorem100,
     scroll: Scroll.VIEWPORT,
-    footer: <Button block>Action</Button>,
+    footer: (
+      <Button v2 block>
+        Action
+      </Button>
+    ),
   },
   render: (args, { globals: { screenMode } }) => (
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

package/src/moneyInput/currencyFormatting.ts

@@ -67,12 +67,12 @@ export function parseAmount(number: string, currency: string, locale = DEFAULT_L
   const precision = getCurrencyDecimals(currency);
   const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
   const decimalSeparator = getDecimalSeparator(validLocale);
-  const numberWithStandardDecimalSeparator = (number ? `${number}` : '')
+  const numberWithStandardDecimalSeparator = (number || '')
     .replace(new RegExp(`\\${groupSeparator}`, 'g'), '')
     .replace(new RegExp(`\\${decimalSeparator}`, 'g'), '.')
     .replace(/[^0-9.]/g, '');
-  const parsedAmount = parseFloat(
-    parseFloat(numberWithStandardDecimalSeparator).toFixed(precision),
+  const parsedAmount = Number.parseFloat(
+    Number.parseFloat(numberWithStandardDecimalSeparator).toFixed(precision),
   );
   return Math.abs(parsedAmount);
 }

package/src/nudge/Nudge.tsx

@@ -22,7 +22,6 @@ const getLocalStorage = (): string[] => {
         return storage.map((item) => String(item));
       }
     }
-    // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
   } catch (error) {}
 
   return [];
@@ -101,7 +100,6 @@ const Nudge = ({
     if (persistDismissal && id) {
       try {
         localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
-        // eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
       } catch (error) {}
 
       setIsDismissed(true);

package/src/popover/Popover.story.tsx

@@ -31,7 +31,11 @@ export default {
     preferredPlacement: Position.BOTTOM,
     title: 'Guaranteed rate',
     content: <Content />,
-    children: <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>,
+    children: (
+      <Button v2 onClick={action(`I'm also triggered`)}>
+        Click here to Open Popover!
+      </Button>
+    ),
   },
   argTypes: {
     preferredPlacement: {
@@ -61,6 +65,10 @@ export const WithoutVisibleTitle: Story = {
     title: undefined,
     'aria-label': 'Guaranteed rate',
     content: <Content />,
-    children: <Button onClick={action(`I'm also triggered`)}>Click here to Open Popover!</Button>,
+    children: (
+      <Button v2 onClick={action(`I'm also triggered`)}>
+        Click here to Open Popover!
+      </Button>
+    ),
   },
 } satisfies Meta<typeof Popover>;

package/src/promoCard/PromoCardContext.tsx

@@ -33,7 +33,6 @@ interface PromoCardContextType {
 const defaultPromoCardContext: PromoCardContextType = {
   state: '',
   isDisabled: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange: () => {},
 };
 

package/src/promoCard/PromoCardGroup.story.tsx

@@ -51,32 +51,20 @@ type Story = StoryObj<typeof PromoCardGroup>;
 
 export const Default: Story = {
   args: {
-    children: (
-      <>
-        <PromoCards />
-      </>
-    ),
+    children: <PromoCards />,
   },
 };
 
 export const DefaultChecked: Story = {
   args: {
-    children: (
-      <>
-        <PromoCards />
-      </>
-    ),
+    children: <PromoCards />,
     defaultChecked: 'standard',
   },
 };
 
 export const Disabled: Story = {
   args: {
-    children: (
-      <>
-        <PromoCards />
-      </>
-    ),
+    children: <PromoCards />,
     isDisabled: true,
   },
 };