@transferwise/components 0.0.0-experimental-033dd15 → 0.0.0-experimental-64ea603

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/listItem/ListItem.tests.story.tsx

@@ -0,0 +1,52 @@
+import { FastFlag } from '@transferwise/icons';
+import Button from '../button';
+import AvatarView from '../avatarView';
+import ListItem, { List, type ListItemProps } from '.';
+
+export default {
+  component: ListItem,
+  title: 'Other/ListItem/tests',
+};
+
+export const LongText = () => {
+  const sharedProps: Partial<ListItemProps> = {
+    media: <AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />,
+    action: (
+      <Button v2 size="sm" onClick={() => {}}>
+        Action
+      </Button>
+    ),
+  };
+
+  return (
+    <div style={{ width: '35rem' }}>
+      <List>
+        <ListItem
+          {...sharedProps}
+          title="Default behaviour"
+          value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
+        />
+
+        <ListItem
+          {...sharedProps}
+          title="Wrapping the long word with a 'span.text-word-break'"
+          value={
+            <>
+              {'This is a test of a a very long word dontbreakme dontbreakme dontbreakme '}
+              <span className="text-word-break">
+                breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
+              </span>
+              {' word.'}
+            </>
+          }
+        />
+
+        <ListItem
+          {...sharedProps}
+          title="Using '&amp;shy;' HTML entitty"
+          value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
+        />
+      </List>
+    </div>
+  );
+};

package/src/listItem/ListItem.tsx

@@ -39,7 +39,7 @@ const ListItem: FC<ListItemProps> = ({
           {title}
         </Body>
         {value && (
-          <Body type="body-large" className="text-primary m-b-0">
+          <Body type="body-large" className="text-primary text-overflow-wrap m-b-0">
             {value}
           </Body>
         )}

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);
@@ -1782,7 +1782,7 @@ button.np-option {
   max-width: fit-content;
 }
 @media (max-width: 480px) {
-  .np-theme-personal .np-option-additional-content {
+  .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
     margin-left: 16px;
     margin-left: var(--size-16);
   }
@@ -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;
@@ -2286,6 +2281,30 @@ button.np-option {
     padding: var(--size-24);
   }
 }
+.wds-Divider {
+  --Divider-border-width: 4px;
+  --Divider-border-color: var(--color-border-neutral);
+  --Divider-border-style: solid;
+  --Divider-dash-length: 4px;
+  --Divider-dash-spacing: 4px;
+  border-top: 4px solid rgba(0,0,0,0.10196);
+  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  height: 4px;
+  height: var(--Divider-border-width);
+  width: 100%;
+}
+.wds-Divider--content {
+  border-top: none;
+  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
+  height: var(--Divider-border-width);
+}
+.wds-Divider--content,
+.wds-Divider--subsection {
+  --Divider-border-width: 1px;
+}
 .np-dropfade,
 .np-dropfade-enter {
   opacity: 0;
@@ -2443,30 +2462,47 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   fill: var(--color-interactive-primary);
 }
 .np-header {
-  display: flex;
-  justify-content: space-between;
   align-items: flex-end;
-  max-width: 100%;
-  padding: 8px 0;
-  padding: var(--size-8) 0;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
   -moz-column-gap: 24px;
        column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
+  max-width: 100%;
+  padding: 8px 0;
+  padding: var(--size-8) 0;
+  position: relative;
+  width: 100%;
+}
+.np-header--section {
+  align-items: center;
+  border-bottom: none;
+}
+.np-header--section .np-header__button,
+.np-header--section .np-header__link {
+  margin-block-end: 0;
+  position: relative;
 }
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+.np-header__link,
 .np-header__button {
-  margin-inline: calc(16px * -1);
-  margin-inline: calc(var(--size-16) * -1);
-  margin-bottom: calc(4px * -1);
-  margin-bottom: calc(var(--size-4) * -1);
+  position: absolute;
+  right: 0;
+}
+.np-header__link {
+  bottom: 7px;
+}
+.np-header__button {
+  margin-inline: calc(17px * -1);
+  margin-bottom: calc(6px * -1);
 }
 .tw-image {
   max-width: none;
@@ -2482,30 +2518,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,66 +2639,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
-.np-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.np-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-value {
-  flex: 0 0 auto;
-}
-.np-item-control {
-  flex: 0 0 auto;
-}
-.np-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-item-spotlight-active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-item-spotlight-active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-spotlight-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)) {
-.np-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.np-item-spotlight-inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.np-item-spotlight-inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -30,6 +30,7 @@
 @import "./definitionList/DefinitionList.less";
 @import "./dimmer/Dimmer.less";
 @import "./drawer/Drawer.less";
+@import "./divider/Divider.less";
 @import "./dropFade/DropFade.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";
@@ -38,7 +39,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.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Person as ProfileIcon } from '@transferwise/icons';
+
+import Option, { Props as OptionProps } from './Option';
+
+describe('Option', () => {
+  const defaultProps: OptionProps<string> = {
+    testId: 'test-option',
+    label: 'Option Label',
+    value: 'option-value',
+  };
+
+  const renderOption = (props: Partial<OptionProps<string>> = {}) => {
+    return render(<Option {...defaultProps} {...props} />);
+  };
+
+  it('should render the Option component', () => {
+    renderOption();
+    expect(screen.getByText('Option Label')).toBeInTheDocument();
+  });
+
+  it('should render the given note', () => {
+    renderOption({ note: 'Note Text' });
+    expect(screen.getByText('Note Text')).toBeInTheDocument();
+  });
+
+  it('should render the given secondary text', () => {
+    renderOption({ secondary: 'Secondary Text' });
+    expect(screen.getByText('Secondary Text')).toBeInTheDocument();
+  });
+
+  it('should render the given icon', () => {
+    renderOption({ icon: <ProfileIcon /> });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('should render the given currency flag for a given currency', () => {
+    renderOption({ currency: 'USD' });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('img')).toBeInTheDocument();
+  });
+
+  it('should override the currency flag with the given icon', () => {
+    renderOption({ currency: 'USD', icon: <ProfileIcon /> });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('svg')).toBeInTheDocument();
+    expect(optionElement.querySelectorAll('svg')).toHaveLength(1);
+  });
+});