@transferwise/components 45.17.1 → 45.19.0

package/src/inputs/_BottomSheet.tsx

@@ -12,6 +12,7 @@ import classNames from 'classnames';
 import { useState } from 'react';
 
 import { CloseButton } from '../common/closeButton';
+import FocusBoundary from '../common/focusBoundary/FocusBoundary';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
 import { Size } from '../common/propsValues/size';
 
@@ -84,47 +85,56 @@ export function BottomSheet({
               <div className="np-bottom-sheet-v2-backdrop" />
             </Transition.Child>
 
-            <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
-              <div className="np-bottom-sheet-v2">
-                <Transition.Child
-                  className="np-bottom-sheet-v2-content"
-                  enter="np-bottom-sheet-v2-content--enter"
-                  enterFrom="np-bottom-sheet-v2-content--enter-from"
-                  leave="np-bottom-sheet-v2-content--leave"
-                  leaveTo="np-bottom-sheet-v2-content--leave-to"
-                >
-                  <div
-                    key={floatingKey} // Force inner state invalidation on open
-                    ref={refs.setFloating}
-                    className="np-bottom-sheet-v2-content-inner-container"
-                    {...getFloatingProps()}
+            <FocusBoundary>
+              <FloatingFocusManager
+                context={context}
+                initialFocus={initialFocusRef}
+                guards={false}
+                modal={false}
+              >
+                <div className="np-bottom-sheet-v2">
+                  <Transition.Child
+                    className="np-bottom-sheet-v2-content"
+                    enter="np-bottom-sheet-v2-content--enter"
+                    enterFrom="np-bottom-sheet-v2-content--enter-from"
+                    leave="np-bottom-sheet-v2-content--leave"
+                    leaveTo="np-bottom-sheet-v2-content--leave-to"
                   >
-                    <div className="np-bottom-sheet-v2-header">
-                      <CloseButton
-                        size={Size.SMALL}
-                        onClick={() => {
-                          onClose?.();
-                        }}
-                      />
-                    </div>
                     <div
-                      className={classNames(
-                        'np-bottom-sheet-v2-content-inner',
-                        title && 'np-bottom-sheet-v2-content-inner--has-title',
-                        {
-                          'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
-                        },
-                      )}
+                      key={floatingKey} // Force inner state invalidation on open
+                      ref={refs.setFloating}
+                      className="np-bottom-sheet-v2-content-inner-container"
+                      {...getFloatingProps()}
                     >
-                      {title ? (
-                        <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
-                      ) : null}
-                      <div className="np-bottom-sheet-v2-body np-text-body-default">{children}</div>
+                      <div className="np-bottom-sheet-v2-header">
+                        <CloseButton
+                          size={Size.SMALL}
+                          onClick={() => {
+                            onClose?.();
+                          }}
+                        />
+                      </div>
+                      <div
+                        className={classNames(
+                          'np-bottom-sheet-v2-content-inner',
+                          title && 'np-bottom-sheet-v2-content-inner--has-title',
+                          {
+                            'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
+                          },
+                        )}
+                      >
+                        {title ? (
+                          <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
+                        ) : null}
+                        <div className="np-bottom-sheet-v2-body np-text-body-default">
+                          {children}
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </Transition.Child>
-              </div>
-            </FloatingFocusManager>
+                  </Transition.Child>
+                </div>
+              </FloatingFocusManager>
+            </FocusBoundary>
           </Transition>
         </ThemeProvider>
       </FloatingPortal>

package/src/inputs/_Popover.less

@@ -3,7 +3,7 @@
   display: flex;
   max-height: var(--max-height);
   width: var(--width);
-  min-width: min-content;
+  min-width: 20rem;
   flex-direction: column;
   border-radius: var(--radius-small);
   background-color: var(--color-background-elevated);

package/src/inputs/_Popover.tsx

@@ -17,6 +17,7 @@ import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { useState } from 'react';
 
+import FocusBoundary from '../common/focusBoundary/FocusBoundary';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
 
 export interface PopoverProps {
@@ -88,36 +89,38 @@ export function Popover({
 
       <FloatingPortal>
         <ThemeProvider theme={theme} screenMode={screenMode} isNotRootProvider>
-          <FloatingFocusManager context={context}>
-            <Transition
-              show={open}
-              leave="transition-opacity"
-              leaveTo="opacity-0"
-              beforeEnter={() => {
-                setFloatingKey((prev) => prev + 1);
-              }}
-            >
-              <div
-                key={floatingKey} // Force inner state invalidation on open
-                ref={refs.setFloating}
-                className="np-popover-v2-container"
-                // eslint-disable-next-line react/forbid-dom-props
-                style={floatingStyles}
-                {...getFloatingProps()}
-              >
+          <Transition
+            show={open}
+            leave="transition-opacity"
+            leaveTo="opacity-0"
+            beforeEnter={() => {
+              setFloatingKey((prev) => prev + 1);
+            }}
+          >
+            <FocusBoundary>
+              <FloatingFocusManager context={context} guards={false} modal={false}>
                 <div
-                  className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                    'np-popover-v2--padding-md': padding === 'md',
-                  })}
+                  key={floatingKey} // Force inner state invalidation on open
+                  ref={refs.setFloating}
+                  className="np-popover-v2-container"
+                  // eslint-disable-next-line react/forbid-dom-props
+                  style={floatingStyles}
+                  {...getFloatingProps()}
                 >
-                  {title ? (
-                    <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
-                  ) : null}
-                  <div className="np-popover-v2-content np-text-body-default">{children}</div>
+                  <div
+                    className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                      'np-popover-v2--padding-md': padding === 'md',
+                    })}
+                  >
+                    {title ? (
+                      <h2 className="np-popover-v2-title np-text-title-body">{title}</h2>
+                    ) : null}
+                    <div className="np-popover-v2-content np-text-body-default">{children}</div>
+                  </div>
                 </div>
-              </div>
-            </Transition>
-          </FloatingFocusManager>
+              </FloatingFocusManager>
+            </FocusBoundary>
+          </Transition>
         </ThemeProvider>
       </FloatingPortal>
     </>

package/src/inputs/_common.less

@@ -1,3 +1,5 @@
+@import (reference) '../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less';
+
 .np-form-control {
   --ring-width: 1px;
   --ring-color: var(--color-interactive-secondary);
@@ -33,6 +35,7 @@
   }
 
   &--size-auto {
+    .np-text-body-large;
     padding-top: var(--size-12);
     padding-bottom: var(--size-12);
   }
@@ -46,14 +49,17 @@
   }
 
   &--size-sm {
+    .np-text-body-default;
     height: var(--size-32) !important;
   }
 
   &--size-md {
+    .np-text-body-large;
     height: var(--size-48) !important;
   }
 
   &--size-lg {
+    .np-text-title-subsection;
     height: var(--size-72) !important;
   }
 }

package/src/inputs/_common.ts

@@ -11,10 +11,10 @@ export function formControlClassNameBase({ size = 'auto' }: FormControlPropsBase
     'form-control', // TODO: Deprecate
     'np-form-control',
     {
-      'np-form-control--size-auto np-text-body-large': size === 'auto',
-      'np-form-control--size-sm np-text-body-default': size === 'sm',
-      'np-form-control--size-md np-text-body-large': size === 'md',
-      'np-form-control--size-lg np-text-title-subsection': size === 'lg',
+      'np-form-control--size-auto': size === 'auto',
+      'np-form-control--size-sm': size === 'sm',
+      'np-form-control--size-md': size === 'md',
+      'np-form-control--size-lg': size === 'lg',
     },
   );
 }

package/src/instructionsList/InstructionList.story.tsx

@@ -0,0 +1,39 @@
+import Link from '../link';
+
+import InstructionsList from './InstructionsList';
+
+export default {
+  component: InstructionsList,
+  title: 'Typography/InstructionsList',
+};
+
+export const Basic = () => {
+  return (
+    <>
+      <InstructionsList
+        dos={[
+          'Do an initial money transfer',
+          'Invite at least 3 friends',
+          <span key="12">
+            Paying extra{' '}
+            <Link href="" type="link-large">
+              hidden fees
+            </Link>{' '}
+            for transfers
+          </span>,
+        ]}
+        donts={['Paying extra hidden fees for transfers', 'Use bad exchange rate']}
+      />
+      <InstructionsList
+        dos={[
+          { content: 'Multiple currencies', 'aria-label': 'Supports multiple currencies' },
+          { content: 'Existing recipients', 'aria-label': 'Supports existing recipients' },
+        ]}
+        donts={[
+          { content: 'Create recipients', 'aria-label': "Doesn't support creating recipients" },
+          { content: 'Edit recipients', 'aria-label': "Doesn't support editing recipients" },
+        ]}
+      />
+    </>
+  );
+};

package/src/instructionsList/InstructionsList.css

@@ -1 +1 @@
-.tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:16px;margin-right:var(--padding-small)}.np-theme-personal .tw-instructions .instruction .do,.np-theme-personal .tw-instructions .instruction .dont{margin-right:8px;margin-right:var(--padding-x-small)}.tw-instructions .instruction .do{color:#008026;color:var(--color-content-positive)}.np-theme-personal .tw-instructions .instruction .do{color:var(--color-sentiment-positive)}.tw-instructions .instruction .dont{color:#cf2929;color:var(--color-content-negative)}.np-theme-personal .tw-instructions .instruction .dont{color:var(--color-sentiment-negative)}
+.tw-instructions{display:flex;flex-direction:column}.tw-instructions .instruction{display:flex;margin-top:8px;margin-top:var(--padding-x-small)}.tw-instructions .instruction .do,.tw-instructions .instruction .dont{flex-shrink:0;margin-bottom:0;margin-right:8px;margin-right:var(--padding-x-small)}.tw-instructions .instruction .do{color:var(--color-sentiment-positive)}.tw-instructions .instruction .dont{color:var(--color-sentiment-negative)}

package/src/instructionsList/InstructionsList.less

@@ -9,28 +9,16 @@
     .do,
     .dont {
       flex-shrink: 0;
-      margin-right: var(--padding-small);
+      margin-right: var(--padding-x-small);
       margin-bottom: 0;
-
-      .np-theme-personal & {
-        margin-right: var(--padding-x-small);
-      }
     }
 
     .do {
-      color: var(--color-content-positive);
-
-      .np-theme-personal & {
-        color: var(--color-sentiment-positive);
-      }
+      color: var(--color-sentiment-positive);
     }
 
     .dont {
-      color: var(--color-content-negative);
-
-      .np-theme-personal & {
-        color: var(--color-sentiment-negative);
-      }
+      color: var(--color-sentiment-negative);
     }
   }
 }

package/src/instructionsList/InstructionsList.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '../test-utils';
+
+import InstructionsList from '.';
+
+describe('InstructionsList', () => {
+  it('should render dos list only', () => {
+    const dos = ['Test this component', 'With multiple dos'];
+    render(<InstructionsList dos={dos} />);
+
+    expect(screen.getByText(dos[0])).toBeInTheDocument();
+    expect(screen.getByText(dos[1])).toBeInTheDocument();
+  });
+
+  it('should render donts list only', () => {
+    const donts = ['Card validation', 'ID verification'];
+
+    render(<InstructionsList donts={donts} />);
+    expect(screen.getByText(donts[0])).toBeInTheDocument();
+    expect(screen.getByText(donts[1])).toBeInTheDocument();
+  });
+
+  it('should render do/dont lists with description for icons', () => {
+    const dos = [{ content: 'Card validation', 'aria-label': 'Provides card validation' }];
+    const donts = [{ content: 'ID verification', 'aria-label': 'No ID verification' }];
+
+    const { container } = render(<InstructionsList dos={dos} donts={donts} />);
+    expect(screen.getByText(dos[0].content)).toBeInTheDocument();
+    expect(screen.getByText(donts[0].content)).toBeInTheDocument();
+
+    const instructions = container.querySelectorAll('.instruction');
+    expect(instructions).toHaveLength(2);
+    expect(instructions[0]).toHaveAttribute('aria-label', dos[0]['aria-label']);
+    expect(instructions[1]).toHaveAttribute('aria-label', donts[0]['aria-label']);
+  });
+});

package/src/instructionsList/InstructionsList.tsx

@@ -1,46 +1,61 @@
-import { CrossCircle, CrossCircleFill, CheckCircle, CheckCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
-import { ReactNode } from 'react';
+import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
+import { ReactNode, isValidElement } from 'react';
 
 import Body from '../body/Body';
-import { CommonProps } from '../common';
-import { Typography } from '../common/propsValues/typography';
+import { Typography, CommonProps } from '../common';
 
-type Props = CommonProps & {
-  dos?: ReactNode[];
-  donts?: ReactNode[];
+type InstructionNode = {
+  content: ReactNode;
+  ['aria-label']: string;
 };
 
-const InstructionsList = (props: Props) => {
-  const { isModern } = useTheme();
-  const { dos, donts } = props;
-  const DontIcon = isModern ? CrossCircleFill : CrossCircle;
-  const DoIcon = isModern ? CheckCircleFill : CheckCircle;
+type Props = CommonProps &
+  (
+    | {
+        dos?: ReactNode[];
+        donts?: ReactNode[];
+      }
+    | {
+        dos?: InstructionNode[];
+        donts?: InstructionNode[];
+      }
+  );
 
+const InstructionsList = ({ dos, donts }: Props) => {
   return (
     <div className="tw-instructions">
       {dos &&
         dos.map((doThis, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <div key={index} className="instruction">
-            <DoIcon size={24} className="do" />
-            <Body className="text-primary" type={Typography.BODY_LARGE}>
-              {doThis}
-            </Body>
-          </div>
+          <Instruction key={index} item={doThis} type="do" />
         ))}
       {donts &&
         donts.map((dont, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <div key={index} className="instruction">
-            <DontIcon size={24} className="dont" />
-            <Body className="text-primary" type={Typography.BODY_LARGE}>
-              {dont}
-            </Body>
-          </div>
+          <Instruction key={index} item={dont} type="dont" />
         ))}
     </div>
   );
 };
 
+function Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {
+  const isInstructionNode =
+    typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
+  return (
+    <div
+      className="instruction"
+      aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}
+    >
+      {type === 'do' ? (
+        <DoIcon size={24} className={type} />
+      ) : (
+        <DontIcon size={24} className={type} />
+      )}
+      <Body className="text-primary" type={Typography.BODY_LARGE}>
+        {isInstructionNode ? item.content : item}
+      </Body>
+    </div>
+  );
+}
+
 export default InstructionsList;