@transferwise/components 46.125.0 → 46.127.1

package/src/sentimentSurface/SentimentSurface.test.story.tsx

@@ -21,7 +21,7 @@ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
 
 export default {
   component: SentimentSurface,
-  title: 'Foundations/SentimentSurface/Tests',
+  title: 'Content/SentimentSurface/Tests',
   tags: ['!autodocs', '!manifest'],
 } satisfies Meta<typeof SentimentSurface>;
 
@@ -124,3 +124,50 @@ export const ButtonsAcrossThemes: Story = {
     </div>
   ),
 };
+
+export const NeutralSentimentOnNeutralBackground: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <SentimentSurface
+        sentiment="neutral"
+        style={{
+          padding: '16px',
+        }}
+      >
+        <Button v2>Primary</Button>
+        <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
+          Secondary
+        </Button>
+        <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
+          Secondary Neutral
+        </Button>
+        <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
+          Tertiary
+        </Button>
+      </SentimentSurface>
+      <SentimentSurface
+        sentiment="neutral"
+        emphasis="elevated"
+        style={{
+          padding: '16px',
+        }}
+      >
+        <Button v2>Primary</Button>
+        <Button v2 priority="secondary" style={{ marginLeft: '8px' }}>
+          Secondary
+        </Button>
+        <Button v2 priority="secondary-neutral" style={{ marginLeft: '8px' }}>
+          Secondary Neutral
+        </Button>
+        <Button v2 priority="tertiary" style={{ marginLeft: '8px' }}>
+          Tertiary
+        </Button>
+      </SentimentSurface>
+    </div>
+  ),
+};

package/src/slidingPanel/SlidingPanel.tsx

@@ -6,8 +6,10 @@ import { Position } from '../common';
 
 export const EXIT_ANIMATION = 350;
 
-export interface SlidingPanelProps
-  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {
+export interface SlidingPanelProps extends Pick<
+  React.ComponentPropsWithRef<'div'>,
+  'ref' | 'className' | 'children'
+> {
   position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;
   open: boolean;
   showSlidingPanelBorder?: boolean;

package/src/ssr.test.tsx

@@ -73,6 +73,7 @@ const excluded = new Set<ExposedLibraryKeysType | string>([
   'getLangFromLocale',
   'getCountryFromLocale',
   'getDirectionFromLocale',
+  'getLocaleCurrencyName',
   'isServerSide',
   'isBrowser',
 
@@ -91,6 +92,7 @@ describe('Server side rendering', () => {
 
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
+    actionPrimary: { label: 'Action', onClick: jest.fn(), href: '#' },
     currencies: [],
     currencySelector: { options: [] },
     steps: [],

package/src/statusIcon/StatusIcon.tsx

@@ -18,6 +18,7 @@ type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 export type StatusIconSentiment = Sentiment | Status.PENDING;
 
 export type StatusIconProps = {
+  id?: string;
   sentiment?: `${StatusIconSentiment}`;
   size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /**
@@ -34,7 +35,12 @@ const mapLegacySize = {
   [String(Size.LARGE)]: 48,
 } satisfies Record<string, CircleProps['size']>;
 
-const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {
+const StatusIcon = ({
+  id,
+  sentiment = 'neutral',
+  size: sizeProp = 40,
+  iconLabel,
+}: StatusIconProps) => {
   const intl = useIntl();
 
   const iconMetaBySentiment: Record<
@@ -100,6 +106,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
       size={isTinyViewport && size < 40 ? 32 : size}
       data-testid="status-icon"
       className={clsx('status-circle', sentiment)}
+      id={id}
     >
       <Icon
         className={clsx('status-icon', iconColor)}

package/src/table/TableCell.tsx

@@ -27,9 +27,7 @@ export interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {
 }
 
 export interface TableCellLeading
-  extends TableCellTypeProp,
-    TableCellTextProps,
-    TableCellStatusProp {
+  extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {
   avatar?: Pick<AvatarViewProps, 'badge' | 'imgSrc' | 'profileName' | 'profileType'> & {
     asset?: AvatarViewProps['children'];
     /** @deprecated Use `"imgSrc" instead. */

package/src/tile/Tile.test.tsx

@@ -17,16 +17,6 @@ describe(Tile, () => {
     jest.clearAllMocks();
   });
 
-  it('matches snapshot when regular size', () => {
-    const { asFragment } = render(<Tile {...defaultProps} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('matches snapshot when small size', () => {
-    const { asFragment } = render(<Tile size={Size.SMALL} {...defaultProps} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('calls onClick when anchor is clicked', () => {
     render(<Tile {...defaultProps} />);
 

package/src/tooltip/Tooltip.test.tsx

@@ -4,16 +4,6 @@ import { userEvent } from '@testing-library/user-event';
 import Tooltip from '.';
 
 describe('Tooltip Component', () => {
-  it('renders an empty list when no items are passed', () => {
-    expect(
-      render(
-        <Tooltip label="Test Tooltip">
-          <span>Hover me</span>
-        </Tooltip>,
-      ).container,
-    ).toMatchSnapshot();
-  });
-
   it('initially is hidden (test with toBeInTheDocument)', () => {
     render(
       <Tooltip label="Test Tooltip">

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -36,20 +36,19 @@ interface WithDisplayFormatState {
   selectionEnd: number;
 }
 
-export interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>
-  extends Pick<
-    TextElementProps,
-    | 'className'
-    | 'disabled'
-    | 'id'
-    | 'maxLength'
-    | 'minLength'
-    | 'name'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'inputMode'
-  > {
+export interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps> extends Pick<
+  TextElementProps,
+  | 'className'
+  | 'disabled'
+  | 'id'
+  | 'maxLength'
+  | 'minLength'
+  | 'name'
+  | 'placeholder'
+  | 'readOnly'
+  | 'required'
+  | 'inputMode'
+> {
   value?: string;
   displayPattern: string;
   /**

package/src/accordion/AccordionItem/__snapshots__/AccordionItem.test.js.snap

@@ -1,124 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`AccordionItem open / close renders an item closed 1`] = `
-<div>
-  <div
-    class="np-accordion-item"
-    id="test-accordion"
-  >
-    <button
-      aria-controls="test-accordion-section"
-      aria-expanded="false"
-      class="np-option decision"
-      id="test-accordion-control"
-    >
-      <div
-        class="media"
-      >
-        <div
-          class="media-body"
-        >
-          <div
-            aria-level="4"
-            class="np-text-body-large-bold text-primary np-option__title"
-            role="heading"
-          >
-            This is title number one
-          </div>
-        </div>
-        <div
-          class="media-right"
-        >
-          <span
-            class="tw-icon tw-icon-chevron-up tw-chevron chevron-color bottom"
-            data-testid="chevron-up-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="none"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                clip-rule="evenodd"
-                d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`AccordionItem open / close renders an item open 1`] = `
-<div>
-  <div
-    class="np-accordion-item np-accordion-item--open"
-    id="test-accordion"
-  >
-    <button
-      aria-controls="test-accordion-section"
-      aria-expanded="true"
-      class="np-option decision"
-      id="test-accordion-control"
-    >
-      <div
-        class="media"
-      >
-        <div
-          class="media-body"
-        >
-          <div
-            aria-level="4"
-            class="np-text-body-large-bold text-primary np-option__title"
-            role="heading"
-          >
-            This is title number one
-          </div>
-        </div>
-        <div
-          class="media-right"
-        >
-          <span
-            class="tw-icon tw-icon-chevron-up tw-chevron chevron-color top"
-            data-testid="chevron-up-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="none"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                clip-rule="evenodd"
-                d="m12 9.414 7.293 7.293 1.414-1.414L12.714 7.3a1.01 1.01 0 0 0-1.428 0l-7.993 7.993 1.414 1.414z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </button>
-    <div
-      aria-labelledby="test-accordion-control"
-      id="test-accordion-section"
-      role="region"
-    >
-      <span
-        class="np-text-body-large np-accordion-item__content d-block"
-      >
-        Lauri Ipsum has been the industry standard dummy text ever since the 1500s.
-      </span>
-    </div>
-  </div>
-</div>
-`;

package/src/accordion/__snapshots__/Accordion.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Accordion defaults renders an empty list when no items are passed 1`] = `<div />`;

package/src/actionButton/__snapshots__/ActionButton.test.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`ActionButton by default renders the button 1`] = `
-<div>
-  <button
-    class="np-action-btn np-text-body-default-bold btn-priority-1"
-    type="button"
-  >
-    Personal profile
-  </button>
-</div>
-`;

package/src/avatarWrapper/__snapshots__/AvatarWrapper.test.tsx.snap

@@ -1,156 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--thumbnail"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <img
-      alt=""
-      src="https://wise.com"
-    />
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--icon"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <span
-      class="tw-icon tw-icon-briefcase "
-      data-testid="briefcase-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M9.01 3A1.01 1.01 0 0 0 8 4.01V7H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3V4.01A1.01 1.01 0 0 0 14.99 3zM14 7V5h-4v2zm-4 2h4v9h-4zM8 9H5v9h3zm8 9V9h3v9z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--icon"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <span
-      class="tw-icon tw-icon-person "
-      data-testid="person-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType with a badge url passed renders the badge 1`] = `
-<div
-  class="tw-badge tw-badge-border-light tw-badge-lg"
->
-  <div
-    class="tw-badge__children"
-  >
-    <div
-      class="tw-avatar tw-avatar--48 tw-avatar--icon"
-    >
-      <div
-        class="tw-avatar__content"
-      >
-        <span
-          class="tw-icon tw-icon-person "
-          data-testid="person-icon"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="none"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div
-    class="tw-badge__content"
-  >
-    <img
-      alt="badge alt text"
-      src="https://badge.com"
-    />
-  </div>
-</div>
-`;
-
-exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
-<div
-  class="tw-avatar tw-avatar--48 tw-avatar--icon"
->
-  <div
-    class="tw-avatar__content"
-  >
-    <span
-      class="tw-icon tw-icon-person "
-      data-testid="person-icon"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        focusable="false"
-        height="24"
-        role="none"
-        viewBox="0 0 24 24"
-        width="24"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M8 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0m7.557 4.832a6 6 0 1 0-7.114 0A8 8 0 0 0 4 20v2h2v-2a6 6 0 0 1 12 0v2h2v-2a8 8 0 0 0-4.443-7.168"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </span>
-  </div>
-</div>
-`;

package/src/checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Checkbox renders the given label 1`] = `
-<div>
-  <div
-    class="np-checkbox checkbox"
-  >
-    <label
-      class="np-checkbox-label"
-    >
-      <span
-        class="np-checkbox-button p-r-2"
-      >
-        <input
-          type="checkbox"
-        />
-        <span
-          class="tw-checkbox-button"
-        >
-          <span
-            class="tw-checkbox-check"
-          />
-          <span
-            class="np-tw-checkbox-indeterminate"
-          />
-        </span>
-      </span>
-      <span
-        class="np-text-body-large np-checkbox__text"
-      >
-        <span>
-          <b>
-            hello
-          </b>
-        </span>
-      </span>
-    </label>
-  </div>
-</div>
-`;

package/src/chevron/__snapshots__/Chevron.test.tsx.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Chevron custom xs icon renders 1`] = `
-<div>
-  <span
-    aria-hidden="true"
-    class="tw-icon tw-icon-chevron tw-chevron chevron-color bottom"
-    role="presentation"
-  >
-    <svg
-      fill="currentColor"
-      focusable="false"
-      height="10"
-      viewBox="0 0 10 10"
-      width="10"
-    >
-      <path
-        d="M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </span>
-</div>
-`;