@transferwise/components 0.0.0-experimental-033dd15 → 0.0.0-experimental-a41b256

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,36 @@ 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;
+  width: 100%;
+}
+.np-header--section {
+  align-items: center;
+  border-bottom: none;
+}
+.np-header--section .np-header__button {
+  margin-block-end: 0;
 }
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
 .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);
+  margin-inline: calc(17px * -1);
+  margin-bottom: calc(6px * -1);
 }
 .tw-image {
   max-width: none;
@@ -2482,30 +2507,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 +2628,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);
+  });
+});

package/src/select/option/Option.tsx

@@ -16,6 +16,7 @@ export type Props<T> = {
   /** @deprecated */
   classNames?: Record<string, string>;
   selected?: boolean;
+  testId?: string;
 };
 
 function Option<T>({
@@ -25,6 +26,7 @@ function Option<T>({
   secondary = '',
   icon,
   selected = false,
+  testId,
 }: Props<T>) {
   const iconElement = icon
     ? cloneElement(icon as ReactElement<IdIconProps>, {
@@ -49,7 +51,7 @@ function Option<T>({
   );
 
   return iconElement ? (
-    <div className="d-flex np-option-content">
+    <div className="d-flex np-option-content" data-testid={testId}>
       <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>
         {iconElement}
       </div>

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/summary/Summary.tests.story.tsx

@@ -0,0 +1,55 @@
+import { Home as HomeIcon } from '@transferwise/icons';
+import { Status } from '../common';
+import Summary, { type SummaryProps } from '.';
+
+export default {
+  component: Summary,
+  title: 'Content/Summary/tests',
+};
+
+export const LongText = () => {
+  const sharedProps: Partial<SummaryProps> = {
+    action: {
+      text: 'Change address',
+      href: '#change-address',
+      'aria-label': ' Click here to change address',
+    },
+    as: 'li',
+    icon: <HomeIcon size={24} />,
+    status: Status.NOT_DONE,
+    info: {
+      title: 'Title',
+    },
+  };
+  return (
+    <ul style={{ width: '34rem' }}>
+      <Summary
+        title="Default behaviour"
+        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
+        {...sharedProps}
+      />
+
+      <Summary
+        title="Wrapping the long word with a 'span.text-word-break'"
+        description={
+          <>
+            {
+              'This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme '
+            }
+            <span className="text-word-break">
+              breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
+            </span>
+            {' word.'}
+          </>
+        }
+        {...sharedProps}
+      />
+
+      <Summary
+        title="Using '&amp;shy;' HTML entitty"
+        description="This is a test of a a very long word dontbreakme dontbreakme 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."
+        {...sharedProps}
+      />
+    </ul>
+  );
+};

package/src/summary/Summary.tsx

@@ -142,7 +142,7 @@ const Summary = ({
             role="heading"
             aria-level={6}
             type={Typography.BODY_LARGE_BOLD}
-            className="text-primary m-b-1"
+            className="text-primary text-overflow-wrap m-b-1"
           >
             {title}
           </Body>
@@ -163,7 +163,7 @@ const Summary = ({
           <Body
             as="span"
             type={Typography.BODY_DEFAULT}
-            className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
+            className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
           >
             {description}
           </Body>

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/title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
+import { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -25,15 +25,29 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     type?: TitleTypes;
   };
 
-function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
-  const mapping = titleTypeMapping[type];
-  const isTypeSupported = mapping !== undefined;
-  if (isTypeSupported) {
-    const HeaderTag = as ?? mapping;
-    return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
-  }
-  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
-  return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
-}
+const Title = forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(
+  ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
+    const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
+    const isTypeSupported = mapping !== undefined;
+    if (isTypeSupported) {
+      const HeaderTag = as ?? mapping;
+      return (
+        <HeaderTag
+          ref={ref as React.Ref<any>}
+          {...props}
+          className={clsx(`np-text-${type}`, className)}
+        />
+      );
+    }
+    const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+    return (
+      <HeaderTag
+        ref={ref as React.Ref<any>}
+        {...props}
+        className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
+      />
+    );
+  },
+);
 
 export default Title;

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>