@transferwise/components 46.115.0 → 46.116.0

package/src/statusIcon/StatusIcon.css

@@ -1,38 +1,6 @@
-.status-circle .light {
-  color: var(--color-contrast-overlay);
+.wds-sentiment-surface.status-circle {
+  background-color: var(--color-sentiment-interactive-primary);
 }
-.np-theme-personal--bright-green .status-circle .light {
-  color: var(--color-white);
-}
-.status-circle .dark {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.status-circle.warning,
-.status-circle.pending {
-  background-color: var(--color-sentiment-warning);
-}
-.np-theme-personal .status-circle.warning .status-icon,
-.np-theme-personal .status-circle.pending .status-icon {
-  color: var(--color-dark);
-}
-.status-circle.negative,
-.status-circle.error {
-  background-color: var(--color-sentiment-negative);
-}
-.status-circle.negative .status-icon,
-.status-circle.error .status-icon {
-  color: var(--color-sentiment-negative-secondary);
-}
-.status-circle.neutral {
-  background-color: #5d7079;
-  background-color: var(--color-content-secondary);
-}
-.status-circle.positive,
-.status-circle.success {
-  background-color: var(--color-sentiment-positive);
-}
-.status-circle.positive .status-icon,
-.status-circle.success .status-icon {
-  color: var(--color-sentiment-positive-secondary);
+.wds-sentiment-surface.status-circle .status-icon {
+  color: var(--color-sentiment-interactive-control);
 }

package/src/statusIcon/StatusIcon.less

@@ -1,44 +1,6 @@
-.status-circle {
-  .light {
-    color: var(--color-contrast-overlay);
-
-    .np-theme-personal--bright-green & {
-      color: var(--color-white);
-    }
-  }
-
-  .dark {
-    color: var(--color-content-primary);
-  }
-
-  &.warning,
-  &.pending {
-    background-color: var(--color-sentiment-warning);
-
-    .status-icon {
-      .np-theme-personal & {
-        color: var(--color-dark);
-      }
-    }
-  }
-}
-
-.status-circle.negative,
-.status-circle.error {
-  background-color: var(--color-sentiment-negative);
-  .status-icon {
-    color: var(--color-sentiment-negative-secondary);
-  }
-}
-
-.status-circle.neutral {
-  background-color: var(--color-content-secondary);
-}
-
-.status-circle.positive,
-.status-circle.success {
-  background-color: var(--color-sentiment-positive);
+.wds-sentiment-surface.status-circle {
+  background-color: var(--color-sentiment-interactive-primary);
   .status-icon {
-    color: var(--color-sentiment-positive-secondary);
+    color: var(--color-sentiment-interactive-control);
   }
 }

package/src/statusIcon/StatusIcon.tsx

@@ -1,7 +1,9 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
+import { PropsWithChildren } from 'react';
 
+import SentimentSurface from '../sentimentSurface';
 import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
@@ -81,9 +83,20 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (
+    <SentimentSurface
+      as="span"
+      // @ts-expect-error sentiment and SentimentSurface types mismatch
+      sentiment={
+        sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment
+      }
+      {...props}
+    />
+  );
   return (
     <Circle
-      as="span"
+      as={SentimentSurfaceSetting}
       size={isTinyViewport && size < 40 ? 32 : size}
       data-testid="status-icon"
       className={clsx('status-circle', sentiment)}

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

@@ -5,11 +5,6 @@ import fetchMock from 'jest-fetch-mock';
 
 global.fetch = fetchMock as unknown as typeof global.fetch;
 
-global.requestAnimationFrame = (callback: (time: number) => void): number => {
-  callback(performance.now());
-  return 0;
-};
-
 Object.defineProperty(global, 'TextEncoder', {
   value: util.TextEncoder,
 });

package/src/test-utils/window-mock.ts

@@ -1,6 +1,7 @@
 import {
   mockMatchMedia as baseMockMatchMedia,
   mockResizeObserver as baseMockResizeObserver,
+  mockRequestAnimationFrame as baseMockRequestAnimationFrame,
 } from '../mocks';
 
 export function mockMatchMedia() {
@@ -12,3 +13,7 @@ export function mockResizeObserver() {
   // https://github.com/jsdom/jsdom/issues/3368
   baseMockResizeObserver(jest);
 }
+
+export function mockRequestAnimationFrame() {
+  baseMockRequestAnimationFrame();
+}