@transferwise/components 46.71.3 → 46.71.5

package/src/statusIcon/StatusIcon.tsx

@@ -1,7 +1,9 @@
 import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';
 import { clsx } from 'clsx';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';
+import Circle, { CircleProps } from '../common/circle';
+import { useMedia } from '../common/hooks/useMedia';
 
 export type StatusIconProps = {
   sentiment: `${Sentiment}`;
@@ -19,17 +21,26 @@ const iconTypeMap = {
   success: Check,
 } satisfies Record<`${Sentiment}`, React.ElementType>;
 
-const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {
+const mapLegacySize = {
+  [String(Size.SMALL)]: 16,
+  [String(Size.MEDIUM)]: 40,
+  [String(Size.LARGE)]: 48,
+} satisfies Record<string, CircleProps['size']>;
+
+const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
-
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
   return (
-    <span
+    <Circle
+      as="span"
+      size={size}
       data-testid="status-icon"
-      className={clsx('status-circle', `status-circle-${size}`, sentiment)}
+      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}
     >
       <Icon className={clsx('status-icon', iconColor)} />
-    </span>
+    </Circle>
   );
 };
 

package/src/summary/Summary.spec.tsx

@@ -1,8 +1,10 @@
 import { Status } from '../common';
-import { render, fireEvent, screen } from '../test-utils';
+import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 
 import Summary from './Summary';
 
+mockMatchMedia();
+
 describe('Summary', () => {
   describe('action', () => {
     const onClickStub = jest.fn();

package/src/typeahead/Typeahead.spec.js

@@ -1,5 +1,6 @@
 import { mount } from 'enzyme';
 import doTimes from 'lodash.times';
+import { mockMatchMedia } from '../test-utils';
 
 import { InlineAlert } from '..';
 import { Sentiment } from '../common';
@@ -7,6 +8,8 @@ import { fakeEvent, fakeKeyDownEventForKey } from '../common/fakeEvents';
 
 import Typeahead from './Typeahead';
 
+mockMatchMedia();
+
 const defaultLocale = 'en-GB';
 jest.mock('react-intl', () => {
   const mockedIntl = {

package/src/upload/Upload.spec.js

@@ -1,5 +1,6 @@
 import { shallow, mount } from 'enzyme';
 import { act } from 'react';
+import { mockMatchMedia } from '../test-utils';
 
 import { ANIMATION_DURATION_IN_MS } from '../processIndicator';
 
@@ -7,6 +8,8 @@ import { CompleteStep, UploadImageStep, ProcessingStep } from './steps';
 
 import Upload from '.';
 
+mockMatchMedia();
+
 jest.mock('./utils/postData', () => ({
   postData: async () => 'ServerResponse',
 }));