@transferwise/components 0.0.0-experimental-9d9138b → 0.0.0-experimental-1fc511d

package/src/info/Info.less

@@ -1,35 +1,7 @@
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-
-  button,
-  [data-toggle="popover"]:not(.btn) {
-    .ring-offset-0();
-
-    height: 16px;
-    overflow: hidden;
-    display: inline-block;
-  }
-
-  &__large {
-    height: 24px;
-
-    button,
-    [data-toggle="popover"]:not(.btn) {
-      height: 24px;
-      display: inline-block;
-    }
-  }
-
-  .tw-icon {
-    cursor: pointer;
-    color: var(--color-interactive-primary);
-    display: inline-block;
-  }
 
   [data-toggle="popover"]:not(.btn) {
     // Bootstrap popover has !important dotted border bottom

package/src/info/Info.tsx

@@ -9,6 +9,7 @@ import Popover, { PopoverPreferredPlacement } from '../popover';
 
 import messages from './Info.messages';
 import { InfoPresentation } from './infoPresentations';
+import IconButton, { IconButtonProps } from '../iconButton';
 
 export interface InfoProps {
   'aria-label'?: string;
@@ -53,25 +54,19 @@ const Info = ({
   const [open, setOpen] = useState(false);
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);
   const isModal = presentation === InfoPresentation.MODAL;
-  const isSmall = size === Size.SMALL;
 
-  const buttonProps = {
+  const buttonProps: IconButtonProps = {
     'aria-label': ariaLabel,
-    className: 'btn-unstyled',
-    children: <HelpCircleIcon size={isSmall ? 16 : 24} />,
+    priority: 'minimal',
+    size: 24,
+    children: <HelpCircleIcon />,
   };
 
   return (
-    <span
-      className={clsx(className, 'np-info', {
-        'np-info__small': isSmall,
-        'np-info__large': !isSmall,
-      })}
-    >
+    <span className={clsx(className, 'np-info')}>
       {isModal ? (
         <>
-          <button
-            type="button"
+          <IconButton
             onClick={() => {
               setOpen(!open);
               if (onClick) {
@@ -84,8 +79,7 @@ const Info = ({
         </>
       ) : (
         <Popover content={content} preferredPlacement={preferredPlacement} title={title}>
-          <button
-            type="button"
+          <IconButton
             {...buttonProps}
             onClick={() => {
               if (onClick) {

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.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,10 +1,8 @@
-/* eslint-disable react/jsx-child-element-spacing */
-
 import { action } from '@storybook/addon-actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
-import { Button } from '..';
+import { Button, IconButton } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
@@ -94,14 +92,9 @@ export const Variants = () => {
             title="Account number"
             value="123456789"
             action={
-              <button
-                type="button"
-                aria-label="Copy"
-                style={{ background: 'none', border: 0 }}
-                onClick={() => action('clicked')}
-              >
-                <Documents size="24" />
-              </button>
+              <IconButton size={24} aria-label="Copy" priority="minimal">
+                <Documents />
+              </IconButton>
             }
           />
         </List>

package/src/main.css

@@ -874,10 +874,10 @@
   display: inline-block;
 }
 .wds-Button-icon--md {
-  --Button-iconSize: calc(var(--size-10) + var(--size-8));
+  --Button-iconSize: 18px;
 }
 .wds-Button-icon--sm {
-  --Button-iconSize: var(--size-16);
+  --Button-iconSize: 16px;
 }
 .wds-Button-icon svg {
   width: var(--Button-iconSize);
@@ -2009,11 +2009,6 @@ button.np-option {
 .np-theme-personal .tw-date-lookup-menu td {
   border: none;
 }
-.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current,
-.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
 .np-date-trigger {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2482,30 +2477,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
 }
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-}
-.np-info button,
-.np-info [data-toggle="popover"]:not(.btn) {
-  --ring-outline-offset: 0;
-  height: 16px;
-  overflow: hidden;
-  display: inline-block;
-}
-.np-info__large {
-  height: 24px;
-}
-.np-info__large button,
-.np-info__large [data-toggle="popover"]:not(.btn) {
-  height: 24px;
-  display: inline-block;
-}
-.np-info .tw-icon {
-  cursor: pointer;
-  color: var(--color-interactive-primary);
-  display: inline-block;
 }
 .np-info [data-toggle="popover"]:not(.btn) {
   border-bottom: none !important;
@@ -2626,95 +2598,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
-.item {
-  padding: 16px;
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.item.NonInteractive {
-  cursor: default;
-}
-.item:disabled {
-  opacity: 0.45;
-  mix-blend-mode: luminosity;
-}
-.item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.item:active {
-  background-color: var(--color-background-screen-active);
-}
-.item.active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.item.active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.item.active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.item.inactive {
-  background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.item.inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.item.inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.item.inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.startValue {
-  flex: 1;
-}
-.endValue {
-  flex: 1;
-  text-align: end;
-}
-.endValue.positive {
-  color: var(--color-sentiment-positive) !important;
-}
-.endValue.negative {
-  color: var(--color-sentiment-negative) !important;
-}
-.endValue.positive .item-title {
-  color: var(--color-sentiment-positive) !important;
-}
-.endValue.negative .item-title {
-  color: var(--color-sentiment-negative) !important;
-}
-.endValue.strikethrough {
-  -webkit-text-decoration: line-through;
-  text-decoration: line-through;
-}
-.item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.item-additionalInfo {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.item-action {
-  flex: 0 0 auto;
-}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -38,7 +38,6 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
-@import "./item/Item.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

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,8 +30,8 @@ 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 v2 onClick={() => setOpen(true)}>

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/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -48,7 +48,7 @@ exports[`OverlayHeader renders as expected 1`] = `
               width="24"
             >
               <path
-                d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
               />
             </svg>
           </span>

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,
   },
 };

package/src/promoCard/PromoCardGroup.tsx

@@ -64,7 +64,6 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
   defaultChecked = '',
   id,
   isDisabled = false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = () => {},
   testId,
 }) => {

package/src/provider/theme/ThemeProvider.story.tsx

@@ -12,10 +12,8 @@ type Story = StoryObj<typeof ThemeProvider>;
 
 export const PlatformTheme: Story = {
   render: () => (
-    <>
-      <ThemeProvider theme="platform">
-        <Button>Button</Button>
-      </ThemeProvider>
-    </>
+    <ThemeProvider theme="platform">
+      <Button>Button</Button>
+    </ThemeProvider>
   ),
 };

package/src/select/Select.spec.tsx

@@ -31,7 +31,6 @@ describe('Select', () => {
   beforeEach(() => {
     global.requestAnimationFrame = (callback) => setTimeout(callback, 16);
 
-    // eslint-disable-next-line jest/prefer-spy-on
     Element.prototype.scrollIntoView = mockScrollIntoView;
 
     enableDesktopScreen();

package/src/select/Select.tsx

@@ -448,12 +448,10 @@ export default function Select({
     );
   }
 
-  // eslint-disable-next-line react/prop-types
   function SeparatorOption() {
     return <li className={s('np-separator')} aria-hidden />;
   }
 
-  // eslint-disable-next-line react/prop-types
   function HeaderOption({ children }: { children?: React.ReactNode }) {
     return (
       <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
@@ -500,7 +498,6 @@ export default function Select({
       : createSelectHandlerForOption(selectOption);
 
     return (
-      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
       <li
         ref={isFocusedWithKeyboard ? keyboardFocusedReference : undefined}
         key={index}

package/src/select/option/Option.spec.js

@@ -17,12 +17,12 @@ describe('option', () => {
 
   it('renders the given small note', () => {
     component.setProps({ note: 'whadup' });
-    expect(component.find(Body).last().props().children).toStrictEqual('whadup');
+    expect(component.find(Body).last().props().children).toBe('whadup');
   });
 
   it('renders the given secondary text in a separate line', () => {
     component.setProps({ secondary: 'secondary text' });
-    expect(component.find(Body).last().props().children).toStrictEqual('secondary text');
+    expect(component.find(Body).last().props().children).toBe('secondary text');
   });
 
   it('renders a given icon', () => {

package/src/selectOption/SelectOption.story.tsx

@@ -175,8 +175,8 @@ export const Basic: Story = {
     options: balances,
   },
   render: (args: SelectOptionProps) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selected, setSelected] = useState<SelectOptionValue | undefined>(undefined);
+
     function onChange(value: SelectOptionValue): void {
       setSelected(value);
     }
@@ -194,7 +194,6 @@ export const Basic: Story = {
 
 export const Variants: Story = {
   render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selected, setSelected] = useState<SelectOptionValue<CustomData>>({
       ...paymentMethods[1].options[1],
       content: null,

package/src/table/Table.tsx

@@ -113,7 +113,6 @@ const Table = ({
           'np-table-outer-container--center': !fullWidth,
           'np-table-outer-container--full-width': fullWidth,
         })}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={0}
         data-testid="np-table-outer-container"
       >

package/src/test-utils/jest.setup.ts

@@ -7,7 +7,6 @@ import fetchMock from 'jest-fetch-mock';
 
 global.fetch = fetchMock as unknown as typeof global.fetch;
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
 Enzyme.configure({ adapter: new Adapter() });
 
 global.requestAnimationFrame = (callback: (time: number) => void): number => {

package/src/tooltip/Tooltip.tsx

@@ -98,7 +98,6 @@ const Tooltip = ({
           open ? `np-panel--open np-tooltip--open` : null,
           className,
         )}
-        // eslint-disable-next-line react/forbid-dom-props
         style={{ ...styles.popper }}
         {...attributes.popper}
         aria-hidden={!open}
@@ -111,7 +110,6 @@ const Tooltip = ({
             // @ts-expect-error
             ref={setArrowElement}
             className={clsx('np-panel__arrow')}
-            // eslint-disable-next-line react/forbid-dom-props
             style={styles.arrow}
           />
         </div>